Sommaire

BONJOUR
Musique "Invention BWV784" J.S. BACH 1685-1750

Tutoriel et Help

- HTML 4 & 5 -


Reference CSS eng

Documents Web et couleurs

Les couleurs sont généralement appliquées au texte, à l'arrière-plan, aux tableaux ou aux couches des documents Web. Il est possible de produire divers effets visuels en combinant les couleurs.

Représentation des couleurs et code RGB

Les document HTML utilisent le code RGB, qui permet de définir différentes couleurs à partir des trois couleurs de base - Rouge (Red), Vert (Green) et Bleu (Blue). Le code RGB est composé de six chiffres hexadécimaux (de 0 à F). Par exemple, dans cette notation, Rouge vaut FF0000, Vert vaut 00FF00 et Bleu vaut 0000FF. En cas de besoin, référez-vous au Tableau des couleurs Web standards, présenté ci-dessous.

Tableau RGB

Voici un tableau des couleurs Web standards.

000000 R - 000 G - 000 B - 000 | 333333 R - 051 G - 051 B - 051 | 666666 R - 102 G - 102 B - 102 | 999999 R - 153 G - 153 B - 153 | CCCCCC R - 204 G - 204 B - 204 | FFFFFF R - 255 G - 255 B - 255
000033 R - 000 G - 000 B - 051 | 333300 R - 051 G - 051 B - 000 | 666600 R - 102 G - 102 B - 000 | 999900 R - 153 G - 153 B - 000 | CCCC00 R - 204 G - 204 B - 000 | FFFF00 R - 255 G - 255 B - 000
000066 R - 000 G - 000 B - 102 | 333366 R - 051 G - 051 B - 102 | 666633 R - 102 G - 102 B - 051 | 999933 R - 153 G - 153 B - 051 | CCCC33 R - 204 G - 204 B - 051 | FFFF33 R - 255 G - 255 B - 051
000099 R - 000 G - 000 B - 153 | 333399 R - 051 G - 051 B - 153 | 666699 R - 102 G - 102 B - 153 | 999966 R - 153 G - 153 B - 102 | CCCC66 R - 204 G - 204 B - 102 | FFFF66 R - 255 G - 255 B - 102
0000CC R - 000 G - 000 B - 204 | 3333CC R - 051 G - 051 B - 204 | 6666CC R - 102 G - 102 B - 204 | 9999CC R - 153 G - 153 B - 204 | CCCC99 R - 204 G - 204 B - 153 | FFFF99 R - 255 G - 255 B - 153
0000FF R - 000 G - 000 B - 255 | 3333FF R - 051 G - 051 B - 255 | 6666FF R - 102 G - 102 B - 255 | 9999FF R - 153 G - 153 B - 255 | CCCCFF R - 204 G - 204 B - 255 | FFFFCC R - 255 G - 255 B - 204
003300 R - 000 G - 051 B - 000 | 336633 R - 051 G - 102 B - 051 | 669966 R - 102 G - 153 B - 102 | 99CC99 R - 153 G - 204 B - 153 | CCFFCC R - 204 G - 255 B - 204 | FF00FF R - 255 G - 000 B - 255
006600 R - 000 G - 102 B - 000 | 339933 R - 051 G - 153 B - 051 | 66CC66 R - 102 G - 204 B - 102 | 99FF99 R - 153 G - 255 B - 153 | CC00CC R - 204 G - 000 B - 204 | FF33FF R - 255 G - 051 B - 255
009900 R - 000 G - 153 B - 000 | 33CC33 R - 051 G - 204 B - 051 | 66FF66 R - 102 G - 255 B - 102 | 990099 R - 153 G - 000 B - 153 | CC33CC R - 204 G - 051 B - 204 | FF66FF R - 255 G - 102 B - 255
00CC00 R - 000 G - 204 B - 000 | 33FF33 R - 051 G - 255 B - 051 | 660066 R - 102 G - 000 B - 102 | 993399 R - 153 G - 051 B - 153 | CC66CC R - 204 G - 102 B - 204 | FF99FF R - 255 G - 153 B - 255
00FF00 R - 000 G - 255 B - 000 | 330033 R - 051 G - 000 B - 051 | 663366 R - 102 G - 051 B - 102 | 996699 R - 153 G - 102 B - 153 | CC99CC R - 204 G - 153 B - 204 | FFCCFF R - 255 G - 204 B - 255
00FF33 R - 000 G - 255 B - 051 | 330066 R - 051 G - 000 B - 102 | 663399 R - 102 G - 051 B - 153 | 9966CC R - 153 G - 102 B - 204 | CC99FF R - 204 G - 153 B - 255 | FFCC00 R - 255 G - 204 B - 000
00FF66 R - 000 G - 255 B - 102 | 330099 R - 051 G - 000 B - 153 | 6633CC R - 102 G - 051 B - 204 | 9966FF R - 153 G - 102 B - 255 | CC9900 R - 204 G - 153 B - 000 | FFCC33 R - 255 G - 204 B - 051
00FF99 R - 000 G - 255 B - 153 | 3300CC R - 051 G - 000 B - 204 | 6633FF R - 102 G - 051 B - 255 | 996600 R - 153 G - 102 B - 000 | CC9933 R - 204 G - 153 B - 051 | FFCC66 R - 255 G - 204 B - 102
00FFCC R - 000 G - 255 B - 204 | 3300FF R - 051 G - 000 B - 255 | 663300 R - 102 G - 051 B - 000 | 996633 R - 153 G - 102 B - 051 | CC9966 R - 204 G - 153 B - 102 | FFCC99 R - 255 G - 204 B - 153
00FFFF R - 000 G - 255 B - 255 | 330000 R - 051 G - 000 B - 000 | 663333 R - 102 G - 051 B - 051 | 996666 R - 153 G - 102 B - 102 | CC9999 R - 204 G - 153 B - 153 | FFCCCC R - 255 G - 204 B - 204
00CCCC R - 000 G - 204 B - 204 | 33FFFF R - 051 G - 255 B - 255 | 660000 R - 102 G - 000 B - 000 | 993333 R - 153 G - 051 B - 051 | CC6666 R - 204 G - 102 B - 102 | FF9999 R - 255 G - 153 B - 153
009999 R - 000 G - 153 B - 153 | 33CCCC R - 051 G - 204 B - 204 | 66FFFF R - 102 G - 255 B - 255 | 990000 R - 153 G - 000 B - 000 | CC3333 R - 204 G - 051 B - 051 | FF6666 R - 255 G - 102 B - 102
006666 R - 000 G - 102 B - 102 | 339999 R - 051 G - 153 B - 153 | 66CCCC R - 102 G - 204 B - 204 | 99FFFF R - 153 G - 255 B - 255 | CC0000 R - 204 G - 000 B - 000 | FF3333 R - 255 G - 051 B - 051
003333 R - 000 G - 051 B - 051 | 336666 R - 051 G - 102 B - 102 | 669999 R - 102 G - 153 B - 153 | 99CCCC R - 153 G - 204 B - 204 | CCFFFF R - 204 G - 255 B - 255 | FF0000 R - 255 G - 000 B - 000
003366 R - 000 G - 051 B - 102 | 336699 R - 051 G - 102 B - 153 | 6699CC R - 102 G - 153 B - 204 | 99CCFF R - 153 G - 204 B - 255 | CCFF00 R - 204 G - 255 B - 000 | FF0033 R - 255 G - 000 B - 051
003399 R - 000 G - 051 B - 153 | 3366CC R - 051 G - 102 B - 204 | 6699FF R - 102 G - 153 B - 255 | 99CC00 R - 153 G - 204 B - 000 | CCFF33 R - 204 G - 255 B - 051 | FF0066 R - 255 G - 000 B - 102
0033CC R - 000 G - 051 B - 204 | 3366FF R - 051 G - 102 B - 255 | 669900 R - 102 G - 153 B - 000 | 99CC33 R - 153 G - 204 B - 051 | CCFF66 R - 204 G - 255 B - 102 | FF0099 R - 255 G - 000 B - 153
0033FF R - 000 G - 051 B - 255 | 336600 R - 051 G - 102 B - 255 | 669933 R - 102 G - 153 B - 051 | 99CC66 R - 153 G - 204 B - 102 | CCFF99 R - 204 G - 255 B - 153 | FF00CC R - 255 G - 000 B - 204
0066FF R - 000 G - 102 B - 255 | 339900 R - 051 G - 153 B - 000 | 66CC33 R - 102 G - 204 B - 051 | 99FF66 R - 153 G - 255 B - 102 | CC0099 R - 204 G - 000 B - 153 | FF33CC R - 255 G - 051 B - 204
0099FF R - 000 G - 153 B - 255 | 33CC00 R - 051 G - 204 B - 000 | 66FF33 R - 102 G - 255 B - 051 | 990066 R - 153 G - 000 B - 102 | CC3399 R - 204 G - 051 B - 153 | FF66CC R - 255 G - 102 B - 204
00CCFF R - 000 G - 204 B - 255 | 33FF00 R - 051 G - 255 B - 000 | 660033 R - 102 G - 000 B - 051 | 993366 R - 153 G - 051 B - 102 | CC6699 R - 204 G - 102 B - 153 | FF99CC R - 255 G - 153 B - 204
00CC33 R - 000 G - 204 B - 051 | 33FF66 R - 051 G - 255 B - 102 | 660099 R - 102 G - 000 B - 153 | 9933CC R - 153 G - 051 B - 204 | CC66FF R - 204 G - 102 B - 255 | FF9900 R - 255 G - 153 B - 000
00CC66 R - 000 G - 204 B - 102 | 33FF99 R - 051 G - 255 B - 153 | 6600CC R - 102 G - 000 B - 204 | 9933FF R - 153 G - 051 B - 255 | CC6600 R - 204 G - 102 B - 000 | FF9933 R - 255 G - 153 B - 051
00CC99 R - 255 G - 204 B - 153 | 33FFCC R - 051 G - 255 B - 204 | 6600FF R - 102 G - 000 B - 255 | 993300 R - 153 G - 051 B - 000 | CC6633 R - 204 G - 102 B - 051 | FF9966 R - 255 G - 153 B - 102
009933 R - 000 G - 153 B - 051 | 33CC66 R - 051 G - 204 B - 102 | 66FF99 R - 102 G - 255 B - 153 | 9900CC R - 153 G - 000 B - 204 | CC33FF R - 204 G - 051 B - 255 | FF6600 R - 255 G - 102 B - 000
006633 R - 000 G - 102 B - 051 | 339966 R - 051 G - 153 B - 102 | 66CC99 R - 102 G - 204 B - 153 | 99FFCC R - 153 G - 255 B - 204 | CC00FF R - 204 G - 000 B - 255 | FF3300 R - 255 G - 051 B - 000
009966 R - 000 G - 153 B - 102 | 33CC99 R - 051 G - 204 B - 153 | 66FFCC R - 102 G - 255 B - 204 | 9900FF R - 153 G - 000 B - 255 | CC3300 R - 204 G - 051 B - 000 | FF6633 R - 255 G - 102 B - 051
0099CC R - 000 G - 153 B - 204 | 33CCFF R - 051 G - 204 B - 255 | 66FF00 R - 102 G - 255 B - 000 | 990033 R - 153 G - 000 B - 051 | CC3366 R - 204 G - 051 B - 102 | FF6699 R - 255 G - 102 B - 153
0066CC R - 000 G - 102 B - 204 | 3399FF R - 051 G - 153 B - 255 | 66CC00 R - 102 G - 204 B - 000 | 99FF33 R - 153 G - 255 B - 051 | CC0066 R - 204 G - 000 B - 102 | FF3399 R - 255 G - 051 B - 153
006699 R - 000 G - 102 B - 153 | 3399CC R - 051 G - 153 B - 204 | 66CCFF R - 102 G - 204 B - 255 | 99FF00 R - 153 G - 255 B - 000 | CC0033 R - 204 G - 000 B - 051 | FF3366 R - 255 G - 051 B - 102


Color Table

Colors can be specified in HTML pages in two ways—by using a color name, or by using numbers to denote a red-green-blue (RGB) color value. An RGB color value consists of three two-digit hexadecimal numbers specifying the intensity of the corresponding color.

For example, the color value #FF0000 is rendered red because the red number is set to its highest value, FF (or 255 in decimal form).

Note While these color names might not be recognized by other browsers, the RGB color values should display accurately across browsers. When specifying color values for Web pages targeted to work across different browsers, use the RGB color values.

The following table lists the colors supported as of Microsoft® Internet Explorer 4.0.

aliceblue (#F0F8FF) | antiquewhite (#FAEBD7) | aqua (#00FFFF) | aquamarine (#7FFFD4)
azure (#F0FFFF) | beige (#F5F5DC) | bisque (#FFE4C4) | black (#000000)
blanchedalmond (#FFEBCD) | blue (#0000FF) | blueviolet (#8A2BE2) | brown (#A52A2A)
burlywood (#DEB887) | cadetblue (#5F9EA0) | chartreuse (#7FFF00) | chocolate (#D2691E)
coral (#FF7F50) | cornflower (#6495ED) | cornsilk (#FFF8DC) | crimson (#DC143C)
cyan (#00FFFF) | darkblue (#00008B) | darkcyan (#008B8B) | darkgoldenrod (#B8860B)
darkgray (#A9A9A9) | darkgreen (#006400) | darkkhaki (#BDB76B) | darkmagenta (#8B008B)
darkolivegreen (#556B2F) | darkorange (#FF8C00) | darkorchid (#9932CC) | darkred (#8B0000)
darksalmon (#E9967A) | darkseagreen (#8FBC8B) | darkslateblue (#483D8B) | darkslategray (#2F4F4F)
darkturquoise (#00CED1) | darkviolet (#9400D3) | deeppink (#FF1493) | deepskyblue (#00BFFF)
dimgray (#696969) | dodgerblue (#1E90FF) | firebrick (#B22222) | floralwhite (#FFFAF0)
forestgreen (#228B22) | fuchsia (#FF00FF) | gainsboro (#DCDCDC) | ghostwhite (#F8F8FF)
gold (#FFD700) | goldenrod (#DAA520) | gray (#808080) | green (#008000)
greenyellow (#ADFF2F) | honeydew (#F0FFF0) | hotpink (#FF69B4) | indianred (#CD5C5C)
indigo (#4B0082) | ivory (#FFFFF0) | khaki (#F0E68C) | lavender (#E6E6FA)
lavenderblush (#FFF0F5) | lawngreen (#7CFC00) | lemonchiffon (#FFFACD) | lightblue (#ADD8E6)
lightcoral (#F08080) | lightcyan (#E0FFFF) | lightgoldenrodyellow (#FAFAD2) | lightgreen (#90EE90)
lightgray (#D3D3D3) | lightpink (#FFB6C1) | lightsalmon (#FFA07A) | lightseagreen (#20B2AA)
lightskyblue (#87CEFA) | lightslategray (#778899) | lightsteelblue (#B0C4DE) | lightyellow (#FFFFE0)
lime (#00FF00) | limegreen (#32CD32) | linen (#FAF0E6) | magenta (#FF00FF)
maroon (#800000) | mediumaquamarine (#66CDAA) | mediumblue (#0000CD) | mediumorchid (#BA55D3)
mediumpurple (#9370DB) | mediumseagreen (#3CB371) | mediumslateblue (#7B68EE) | mediumspringgreen (#00FA9A)
mediumturquoise (#48D1CC) | mediumvioletred (#C71585) | midnightblue (#191970) | mintcream (#F5FFFA)
mistyrose (#FFE4E1) | moccasin (#FFE4B5) | navajowhite (#FFDEAD) | navy (#000080)
oldlace (#FDF5E6) | olive (#808000) | olivedrab (#6B8E23) | orange (#FFA500)
orangered (#FF4500) | orchid (#DA70D6) | palegoldenrod (#EEE8AA) | palegreen (#98FB98)
paleturquoise (#AFEEEE) | palevioletred (#DB7093) | papayawhip (#FFEFD5) | peachpuff (#FFDAB9)
peru (#CD853F) | pink (#FFC0CB) | plum (#DDA0DD) | powderblue (#B0E0E6)
purple (#800080) | red (#FF0000) | rosybrown (#BC8F8F) | royalblue (#4169E1)
saddlebrown (#8B4513) | salmon (#FA8072) | sandybrown (#F4A460) | seagreen (#2E8B57)
seashell (#FFF5EE) | sienna (#A0522D) | silver (#C0C0C0) | skyblue (#87CEEB)
slateblue (#6A5ACD) | slategray (#708090) | snow (#FFFAFA) | springgreen (#00FF7F)
steelblue (#4682B4) | tan (#D2B48C) | teal (#008080) | thistle (#D8BFD8)
tomato (#FF6347) | turquoise (#40E0D0) | violet (#EE82EE) | wheat (#F5DEB3)
white (#FFFFFF) | whitesmoke (#F5F5F5) | yellow (#FFFF00) | yellowgreen (#9ACD32)

User-Defined System Colors

Microsoft® Windows® maintains a set of system colors for painting various parts of the display. In addition to the colors defined in the color table, as of Internet Explorer 4.0 these system colors may also be specified as color values in Web pages.

Users can set system colors for future Windows sessions using the Windows Control Panel. The following table illustrates the correspondence of these color names with the colors defined in the Control Panel.

Note The colors that do not correspond to any Control Panel colors can only be set programmatically using Windows APIs and cannot be defined by the user.

activeborder | activecaption | appworkspace | background
buttonface | buttonhighlight | buttonshadow | buttontext
captiontext | graytext | highlight | highlighttext
inactiveborder | inactivecaption | inactivecaptiontext | infobackground
infotext | menu | menutext | scrollbar
threeddarkshadow | threedface | threedhighlight | threedlightshadow
threedshadow | window | windowframe | windowtext

© 1999 microsoft corporation. all rights reserved. terms of use .


Une palette simplifiee pour HTML

Codes Couleurs HTML Vu dans ... http://www.netalya.com/fr/palette.asp

000000 | 202020 | 404040 | 606060 | 808080 | a0a0a0 | c0c0c0 | e0e0e0 | ffffff
000000 | 000020 | 000040 | 000060 | 000080 | 0000a0 | 0000c0 | 0000e0 | 0000ff
002000 | 002020 | 002040 | 002060 | 002080 | 0020a0 | 0020c0 | 0020e0 | 0020ff
004000 | 004020 | 004040 | 004060 | 004080 | 0040a0 | 0040c0 | 0040e0 | 0040ff
006000 | 006020 | 006040 | 006060 | 006080 | 0060a0 | 0060c0 | 0060e0 | 0060ff
008000 | 008020 | 008040 | 008060 | 008080 | 0080a0 | 0080c0 | 0080e0 | 0080ff
00a000 | 00a020 | 00a040 | 00a060 | 00a080 | 00a0a0 | 00a0c0 | 00a0e0 | 00a0ff
00e000 | 00e020 | 00e040 | 00e060 | 00e080 | 00e0a0 | 00e0c0 | 00e0e0 | 00e0ff
00ff00 | 00ff20 | 00ff40 | 00ff60 | 00ff80 | 00ffa0 | 00ffc0 | 00ffe0 | 00ffff
200000 | 200020 | 200040 | 200060 | 200080 | 2000a0 | 2000c0 | 2000e0 | 2000ff
202000 | 202020 | 202040 | 202060 | 202080 | 2020a0 | 2020c0 | 2020e0 | 2020ff
204000 | 204020 | 204040 | 204060 | 204080 | 2040a0 | 2040c0 | 2040e0 | 2040ff
206000 | 206020 | 206040 | 206060 | 206080 | 2060a0 | 2060c0 | 2060e0 | 2060ff
208000 | 208020 | 208040 | 208060 | 208080 | 2080a0 | 2080c0 | 2080e0 | 2080ff
20a000 | 20a020 | 20a040 | 20a060 | 20a080 | 20a0a0 | 20a0c0 | 20a0e0 | 20a0ff
20e000 | 20e020 | 20e040 | 20e060 | 20e080 | 20e0a0 | 20e0c0 | 20e0e0 | 20e0ff
20ff00 | 20ff20 | 20ff40 | 20ff60 | 20ff80 | 20ffa0 | 20ffc0 | 20ffe0 | 20ffff
400000 | 400020 | 400040 | 400060 | 400080 | 4000a0 | 4000c0 | 4000e0 | 4000ff
402000 | 402020 | 402040 | 402060 | 402080 | 4020a0 | 4020c0 | 4020e0 | 4020ff
404000 | 404020 | 404040 | 404060 | 404080 | 4040a0 | 4040c0 | 4040e0 | 4040ff
406000 | 406020 | 406040 | 406060 | 406080 | 4060a0 | 4060c0 | 4060e0 | 4060ff
408000 | 408020 | 408040 | 408060 | 408080 | 4080a0 | 4080c0 | 4080e0 | 4080ff
40a000 | 40a020 | 40a040 | 40a060 | 40a080 | 40a0a0 | 40a0c0 | 40a0e0 | 40a0ff
40e000 | 40e020 | 40e040 | 40e060 | 40e080 | 40e0a0 | 40e0c0 | 40e0e0 | 40e0ff
40ff00 | 40ff20 | 40ff40 | 40ff60 | 40ff80 | 40ffa0 | 40ffc0 | 40ffe0 | 40ffff
600000 | 600020 | 600040 | 600060 | 600080 | 6000a0 | 6000c0 | 6000e0 | 6000ff
602000 | 602020 | 602040 | 602060 | 602080 | 6020a0 | 6020c0 | 6020e0 | 6020ff
604000 | 604020 | 604040 | 604060 | 604080 | 6040a0 | 6040c0 | 6040e0 | 6040ff
606000 | 606020 | 606040 | 606060 | 606080 | 6060a0 | 6060c0 | 6060e0 | 6060ff
608000 | 608020 | 608040 | 608060 | 608080 | 6080a0 | 6080c0 | 6080e0 | 6080ff
60a000 | 60a020 | 60a040 | 60a060 | 60a080 | 60a0a0 | 60a0c0 | 60a0e0 | 60a0ff
60e000 | 60e020 | 60e040 | 60e060 | 60e080 | 60e0a0 | 60e0c0 | 60e0e0 | 60e0ff
60ff00 | 60ff20 | 60ff40 | 60ff60 | 60ff80 | 60ffa0 | 60ffc0 | 60ffe0 | 60ffff
800000 | 800020 | 800040 | 800060 | 800080 | 8000a0 | 8000c0 | 8000e0 | 8000ff
802000 | 802020 | 802040 | 802060 | 802080 | 8020a0 | 8020c0 | 8020e0 | 8020ff
804000 | 804020 | 804040 | 804060 | 804080 | 8040a0 | 8040c0 | 8040e0 | 8040ff
806000 | 806020 | 806040 | 806060 | 806080 | 8060a0 | 8060c0 | 8060e0 | 8060ff
808000 | 808020 | 808040 | 808060 | 808080 | 8080a0 | 8080c0 | 8080e0 | 8080ff
80a000 | 80a020 | 80a040 | 80a060 | 80a080 | 80a0a0 | 80a0c0 | 80a0e0 | 80a0ff
80e000 | 80e020 | 80e040 | 80e060 | 80e080 | 80e0a0 | 80e0c0 | 80e0e0 | 80e0ff
80ff00 | 80ff20 | 80ff40 | 80ff60 | 80ff80 | 80ffa0 | 80ffc0 | 80ffe0 | 80ffff
a00000 | a00020 | a00040 | a00060 | a00080 | a000a0 | a000c0 | a000e0 | a000ff
a02000 | a02020 | a02040 | a02060 | a02080 | a020a0 | a020c0 | a020e0 | a020ff
a04000 | a04020 | a04040 | a04060 | a04080 | a040a0 | a040c0 | a040e0 | a040ff
a06000 | a06020 | a06040 | a06060 | a06080 | a060a0 | a060c0 | a060e0 | a060ff
a08000 | a08020 | a08040 | a08060 | a08080 | a080a0 | a080c0 | a080e0 | a080ff
a0a000 | a0a020 | a0a040 | a0a060 | a0a080 | a0a0a0 | a0a0c0 | a0a0e0 | a0a0ff
a0e000 | a0e020 | a0e040 | a0e060 | a0e080 | a0e0a0 | a0e0c0 | a0e0e0 | a0e0ff
a0ff00 | a0ff20 | a0ff40 | a0ff60 | a0ff80 | a0ffa0 | a0ffc0 | a0ffe0 | a0ffff
c00000 | c00020 | c00040 | c00060 | c00080 | c000a0 | c000c0 | c000e0 | c000ff
c02000 | c02020 | c02040 | c02060 | c02080 | c020a0 | c020c0 | c020e0 | c020ff
c04000 | c04020 | c04040 | c04060 | c04080 | c040a0 | c040c0 | c040e0 | c040ff
c06000 | c06020 | c06040 | c06060 | c06080 | c060a0 | c060c0 | c060e0 | c060ff
c08000 | c08020 | c08040 | c08060 | c08080 | c080a0 | c080c0 | c080e0 | c080ff
c0a000 | c0a020 | c0a040 | c0a060 | c0a080 | c0a0a0 | c0a0c0 | c0a0e0 | c0a0ff
c0e000 | c0e020 | c0e040 | c0e060 | c0e080 | c0e0a0 | c0e0c0 | c0e0e0 | c0e0ff
c0ff00 | c0ff20 | c0ff40 | c0ff60 | c0ff80 | c0ffa0 | c0ffc0 | c0ffe0 | c0ffff
e00000 | e00020 | e00040 | e00060 | e00080 | e000a0 | e000c0 | e000e0 | e000ff
e02000 | e02020 | e02040 | e02060 | e02080 | e020a0 | e020c0 | e020e0 | e020ff
e04000 | e04020 | e04040 | e04060 | e04080 | e040a0 | e040c0 | e040e0 | e040ff
e06000 | e06020 | e06040 | e06060 | e06080 | e060a0 | e060c0 | e060e0 | e060ff
e08000 | e08020 | e08040 | e08060 | e08080 | e080a0 | e080c0 | e080e0 | e080ff
e0a000 | e0a020 | e0a040 | e0a060 | e0a080 | e0a0a0 | e0a0c0 | e0a0e0 | e0a0ff
e0e000 | e0e020 | e0e040 | e0e060 | e0e080 | e0e0a0 | e0e0c0 | e0e0e0 | e0e0ff
e0ff00 | e0ff20 | e0ff40 | e0ff60 | e0ff80 | e0ffa0 | e0ffc0 | e0ffe0 | e0ffff
ff0000 | ff0020 | ff0040 | ff0060 | ff0080 | ff00a0 | ff00c0 | ff00e0 | ff00ff
ff2000 | ff2020 | ff2040 | ff2060 | ff2080 | ff20a0 | ff20c0 | ff20e0 | ff20ff
ff4000 | ff4020 | ff4040 | ff4060 | ff4080 | ff40a0 | ff40c0 | ff40e0 | ff40ff
ff6000 | ff6020 | ff6040 | ff6060 | ff6080 | ff60a0 | ff60c0 | ff60e0 | ff60ff
ff8000 | ff8020 | ff8040 | ff8060 | ff8080 | ff80a0 | ff80c0 | ff80e0 | ff80ff
ffa000 | ffa020 | ffa040 | ffa060 | ffa080 | ffa0a0 | ffa0c0 | ffa0e0 | ffa0ff
ffe000 | ffe020 | ffe040 | ffe060 | ffe080 | ffe0a0 | ffe0c0 | ffe0e0 | ffe0ff
ffff00 | ffff20 | ffff40 | ffff60 | ffff80 | ffffa0 | ffffc0 | ffffe0 | ffffff


Character Entity Reference

Character Entity References

The entire ISO-8859-1 character set (commonly called Latin-1) is supported by HTML. This covers characters commonly occuring in many European languages other than English. However, differences in the characters supported by localised keyboards mostly don't allow for such special characters to be directly typed into a HTML document. This is why HTML supports two mechanisms for the insertion of these special characters. The entire characters set may be included in a HTML document, by referencing them with their number in the ISO-8859-1 character set, with certain commonly used characters being supported by a more memorable entity name. I.e. :

&#211; and &Oacute;

both reference the same character - Ó - but generally the &Oacute; would be easier to remember.

The table below lists all of the ISO-8859-1 character set, together with their numeric entity reference and where supported, the named entity reference.

Number | Name | Description | Appearance
&#00;-&#08; | - | Unused | -
&#09; | - | Horizontal Tab | space
&#10; | - | Line feed | space
&#11;-&#31; | - | Unused | -
&#32; | - | Space | space
&#33; | - | Exclamation mark | !
&#34; | &quot; | Quotation mark | "
&#35; | - | Number sign | #
&#36; | - | Dollar sign | $
&#37; | - | Percent sign | %
&#38; | &amp; | Ampersand | &
&#39; | - | Apostrophe | '
&#40; | - | Left parenthesis | (
&#41; | - | Right parenthesis | )
&#42; | - | Asterisk | *
&#43; | - | Plus sign | +
&#44; | - | Comma | ,
&#45; | - | Hyphen | -
&#46; | - | Period (full stop) | .
&#47; | - | Solidus (slash) | /
&#48;-&#57; | - | Digits (0-9) | 0 - 9
&#58; | - | Colon | :
&#59; | - | Semi-colon | ;
&#60; | &lt; | Less than | <
&#61; | - | Equals sign | =
&#62; | &gt; | Greater than | >
&#63; | - | Question mark | ?
&#64; | - | Commercial at | @
&#65;-&#90; | - | Upper case A-Z | A - Z
&#91; | - | Left square bracket | [
&#92; | - | Reverse solidus (backslash) | \
&#93; | - | Right square bracket | ]
&#94; | - | Caret | ^
&#95; | - | Horizontal bar | _
&#96; | - | Acute accent | `
&#97;-&#122; | - | Lower case a-z | a - z
&#123; | - | Left curly brace | {
&#124; | - | Vertical bar | |
&#125; | - | Right curly brace | }
&#126; | - | Tilde | ~
&#127;-&#159; | - | Unused | -
&#160; | &nbsp; | Non-breaking space |
&#161; | &iexcl; | Inverted exclamation | ¡
&#162; | &cent; | Cent sign | ¢
&#163; | &pound; | Pound sterling sign | £
&#164; | &curren; | General currency sign | ¤
&#165; | &yen; | Yen sign | ¥
&#166; | &brvbar; | Broken vertical bar | ¦
&#167; | &sect; | Section sign | §
&#168; | &uml; | Umlaut (dierisis) | ¨
&#169; | &copy; | Copyright | ©
&#170; | &ordf; | Feminine ordinal | ª
&#171; | &laquo; | Left angle quote, guillemot left | «
&#172; | &not; | Not sign | ¬
&#173; | &shy; | Soft hyphen |
&#174; | &reg; | Registered trademark | ®
&#175; | &macr; | Macron accent | ¯
&#176; | &deg; | Degree sign | °
&#177; | &plusmn; | Plus or minus | ±
&#178; | &sup2; | Superscript two | ²
&#179; | &sup3; | Superscript three | ³
&#180; | &acute; | Acute accent | ´
&#181; | &micro; | Micro sign | µ
&#182; | &para; | Paragraph sign | ¶
&#183; | &middot; | Middle dot | ·
&#184; | &cedil; | Cedilla | ¸
&#185; | &sup1; | Superscript one | ¹
&#186; | &ordm; | Masculine ordinal | º
&#187; | &raquo; | Right angle quote, guillemot right | »
&#188; | &frac14; | Fraction (one quarter) | ¼
&#189; | &frac12; | Fraction (one half) | ½
&#190; | &frac34; | Fraction (three quarters) | ¾
&#191; | &iquest; | Inverted question mark | ¿
&#192; | &Agrave; | Capital A, grave accent | À
&#193; | &Aacute; | Capital A, acute accent | Á
&#194; | &Acirc; | Capital A, circumflex accent | Â
&#195; | &Atilde; | Capital A, tilde | Ã
&#196; | &Auml; | Capital A, umlaut (dierisis) | Ä
&#197; | &Aring; | Capital A, ring | Å
&#198; | &AElig; | Capital AE dipthong (ligature) | Æ
&#199; | &Ccedil; | Capital C, cedilla | Ç
&#200; | &Egrave; | Capital E, grave accent | È
&#201; | &Eacute; | Capita E, acute accent | É
&#202; | &Eirc; | Capital E, circumflex accent | Ê
&#203; | &Euml; | Capital E, umlaut (dierisis) | Ë
&#204; | &Igrave; | Capital I, grave accent | Ì
&#205; | &Iacute; | Capital I, acute accent | Í
&#206; | &Icirc; | Capital I, circumflex accent | Î
&#207; | &Iuml; | Capital I, umlaut (dierisis) | Ï
&#208; | &ETH; | Capital Eth, Icelandic | Ð
&#209; | &Ntilde; | Capital N, tilde | Ñ
&#210; | &Ograve; | Capital O, grave accent | Ò
&#211; | &Oacute | Capital O, acute accent | Ó
&#212; | &Ocirc; | Capital O, circumflex accent | Ô
&#213; | &Otilde; | Capital O, tilde | Õ
&#214; | &Ouml; | Capital O, umlaut (dierisis) | Ö
&#215; | &times; | Multiply sign | ×
&#216; | &Oslash; | Capital O, slash | Ø
&#217; | &Ugrave | Capital U, grave accent | Ù
&#218; | &Uacute; | Capital U, acute accent | Ú
&#219; | &Ucirc; | Capital U, circumflex accent | Û
&#220; | &Uuml; | Capital U, umlaut (dierisis) | Ü
&#221; | &Yacute; | Capital Y, acute accent | Ý
&#222; | &THORN; | Capital Thorn, Icelandic | Þ
&#223; | &szlig; | Small sharp s, German (sz ligature) | ß
&#224; | &agrave; | Small a, grave accent | à
&#225; | &aacute; | Small a, acute accent | á
&#226; | &acirc; | Small a, circumflex accent | â
&#227; | &atilde; | Small a, tilde | ã
&#228; | &auml | Small a, umlaut (dierisis) | ä
&#229; | &aring; | Small a, ring | å
&#230; | &aelig; | Small ae dipthong (ligature) | æ
&#231; | &ccedil; | Small c, cedilla | ç
&#232; | &egrave; | Small e, grave accent | è
&#233; | &eacute; | Small e, acute accent | é
&#234; | &ecirc; | Small e, circumflex accent | ê
&#235; | &euml; | Small e, umlaut (dierisis) | ë
&#236; | &igrave; | Small i, grave accent | ì
&#237; | &iacute; | Small i, acute accent | í
&#238; | &icirc; | Small i, circumflex accent | î
&#239; | &iuml; | Small i, umlaut (dierisis) | ï
&#240; | &eth; | Small eth, Icelandic | ð
&#241; | &ntilde; | Small n, tilde | ñ
&#242; | &ograve; | Small o, grave accent | ò
&#243; | &oacute; | Small o, acute accent | ó
&#244; | &ocirc; | Small o, circumflex accent | ô
&#245; | &otilde; | Small o, tilde | õ
&#246; | &ouml; | Small o, umlaut (dierisis) | ö
&#247; | &divide; | Division sign | ÷
&#248; | &oslash; | Small o, slash | ø
&#249; | &ugrave; | Small u, grave accent | ù
&#250; | &uacute; | Small u, acute accent | ú
&#251; | &ucirc; | Small u, circumflex accent | û
&#252; | &uuml; | Small u, umlaut (dierisis) | ü
&#253; | &yacute; | Small y, acute accent | ý
&#254; | &thorn; | Small thorn, Icelandic | þ
&#255; | &yuml; | Small y, umlaut (dierisis) | ÿ
&#338; | &OElig; | Latin Capital OE (ligature) | Œ
&#339; | &oelig; | Latin Small OE (ligature) | œ
&#352; | &Scaron; | Capital S with caron | Š
&#353; | &scaron; | Small s with caron | š
&#376; | &Yuml; | Capital Y with dierisis | Ÿ
&#710; | &circ; | Circumflex accent | ˆ
&#732; | &tilde; | Small tilde | ˜
&#8211; | &ndash; | En dash | –
&#8212; | &mdash; | Em dash | —
&#8216; | &lsquo; | Left single quotation mark | ‘
&#8217; | &rsquo; | Right single quotation mark | ’
&#8218; | &sbquo; | Single low-9 quotation mark | ‚
&#8220; | &ldquo; | Left double quotation mark | “
&#8221; | &rdquo; | Right double quotation mark | ”
&#8222; | &bdquo; | Double low-9 quotation mark | „
&#8224; | &dagger; | Dagger | †
&#8225; | &Dagger; | Double Dagger | ‡
&#8240; | &permil; | Per mille (thousand) sign | ‰
&#8249; | &lsaquo; | Single left-pointing angle quotation mark | ‹
&#8250; | &rsaquo; | Single right-pointing angle quotation mark | ›
&#8364; | &euro; | Euro sign* | €


Character Entity Reference

Character Entity Symbols

The following character references are largely unsupported at the time of writing, but are included in the HTML 4.0 specification. As both Netscape and Microsoft have pledged to support the full HTML 4.0 standard, their support can be expected.

Number | Name | Description | Appearance
&#402; | &fnof; | florin (latin small f with hook) | ƒ
&#913; | &Alpha; | Greek capital Alpha | Α
&#914; | &Beta; | Greek capital Beta | Β
&#915; | &Gamma; | Greek capital Gamma | Γ
&#916; | &Delta; | Greek capital Delta | Δ
&#917; | &Epsilon; | Greek capital Epsilon | Ε
&#918; | &Zeta; | Greek capital Zeta | Ζ
&#919; | &Eta; | Greek capital Eta | Η
&#920; | &Theta; | Greek capital Theta | Θ
&#921; | &Iota; | Greek capital Iota | Ι
&#922; | &Kappa; | Greek capital Kappa | Κ
&#923; | &Lambda; | Greek capital Lambda | Λ
&#924; | &Mu; | Greek capital Mu | Μ
&#925; | &Nu; | Greek capital Nu | Ν
&#926; | &Xi; | Greek capital Xi | Ξ
&#927; | &Omicron; | Greek capital Omicron | Ο
&#928; | &Pi; | Greek capital Pi | Π
&#929; | &Rho; | Greek capital Rho | Ρ
&#931; | &Sigma; | Greek capital Sigma | Σ
&#932; | &Tau; | Greek capital Tau | Τ
&#933; | &Upsilon; | Greek capital Upsilon | Υ
&#934; | &Phi; | Greek capital Phi | Φ
&#935; | &Chi; | Greek capital Chi | Χ
&#936; | &Psi; | Greek capital Psi | Ψ
&#937; | &Omega; | Greek capital Omega | Ω
&#945; | &Alpha; | Greek small Alpha | α
&#946; | &Beta; | Greek small Beta | β
&#947; | &Gamma; | Greek small Gamma | γ
&#948; | &Delta; | Greek small Delta | δ
&#949; | &Epsilon; | Greek small Epsilon | ε
&#950; | &Zeta; | Greek small Zeta | ζ
&#951; | &Eta; | Greek small Eta | η
&#952; | &Theta; | Greek small Theta | θ
&#953; | &Iota; | Greek small Iota | ι
&#954; | &Kappa; | Greek small Kappa | κ
&#955; | &Lambda; | Greek small Lambda | λ
&#956; | &Mu; | Greek small Mu | μ
&#957; | &Nu; | Greek small Nu | ν
&#958; | &Xi; | Greek small Xi | ξ
&#959; | &Omicron; | Greek small Omicron | ο
&#960; | &Pi; | Greek small Pi | π
&#961; | &Rho; | Greek small Rho | ρ
&#962; | &Sigma; | Greek small final Sigma | ς
&#963; | &Sigma; | Greek small Sigma | σ
&#964; | &Tau; | Greek small Tau | τ
&#965; | &Upsilon; | Greek small Upsilon | υ
&#966; | &Phi; | Greek small Phi | φ
&#967; | &Chi; | Greek small Chi | χ
&#968; | &Psi; | Greek small Psi | ψ
&#969; | &Omega; | Greek small Omega | ω
&#977; | &thetasym; | Greek theta symbol | ϑ
&#978; | &upsih; | Greek Upsilon with hook | ϒ
&#982; | &piv; | Greek Pi symbol | ϖ
&#8194; | &ensp; | En space |
&#8195; | &emsp; | Em space |
&#8201; | &thinsp; | Thin space |
&#8204; | &zwnj; | Zero width non-joiner | ‌
&#8205; | &zwj; | Zero width joiner | ‍
&#8206; | &lrm; | Left-to-right mark | ‎
&#8207; | &rlm; | Right-to-left mark | ‏
&#8226; | &bull; | Small black circle | •
&#8230; | &hellip; | Horizontal Ellipsis | …
&#8242; | &prime; | Prime = minutes = feet | ′
&#8254; | &oline; | Overline = Spacing overscore | ‾
&#8260; | &frasl; | Fraction Slash | ⁄
&#8472; | &weierp; | Script capital P = Weierstrass p | ℘
&#8465; | &image; | Blackletter capital I (imaginary part) | ℑ
&#8476; | &real; | Blackletter capital R (real part) | ℜ
&#8482; | &trade; | Trademark symbol | ™
&#8501; | &alefsym; | Alef symbol = first transfinite | ℵ
&#8592; | &larr; | Leftwards arrow | ←
&#8593; | &uarr; | Upwards arrow | ↑
&#8594; | &rarr; | Rightwards arrow | →
&#8595; | &darr; | Downwards arrow | ↓
&#8596; | &harr; | Left Right arrow | ↔
&#8629; | &crarr; | Donwards arrow with corner leftwards | ↵
&#8656; | &lArr; | Leftwards double arrow | ⇐
&#8657; | &uArr; | Upwards double arrow | ⇑
&#8658; | &rArr; | Rightwards double arrow | ⇒
&#8659; | &dArr; | Downwards double arrow | ⇓
&#8660; | &hArr; | Left Right double arrow | ⇔
&#8704; | &forall; | For All | ∀
&#8706; | &part; | Partial Differential | ∂
&#8707; | &exist; | There exists | ∃
&#8709; | &empty; | Empty Set | ∅
&#8711; | &nabla; | Nabla = Backward difference | ∇
&#8712; | &isn; | Element Of... | ∈
&#8713; | &notin; | Not an elementof | ∉
&#8715; | &ni; | Contains as member | ∋
&#8719; | &prod; | n-ary product = product sign | ∏
&#8721; | &sum; | n-ary summation | ∑
&#8722; | &minus; | Minus sign | −
&#8730; | &radic; | Square root = radical sign | √
&#8733; | &prop; | Proportional to | ∝
&#8734; | &infin; | Infinity symbol | ∞
&#8736; | &ang; | Angle | ∠
&#8743; | &and; | Logical and = wedge | ∧
&#8744; | &or; | Logical or = vee | ∨
&#8745; | &cap; | Intersection | ∩
&#8746; | &cup; | Union = cup | ∪
&#8747; | &int; | Integral | ∫
&#8756; | &there4; | Therefore | ∴
&#8764; | &sim; | Tilde operator | ∼
&#8773; | &cong; | Approximately equal to | ≅
&#8776; | &asymp; | Almost equal to = Asymptotic | ≈
&#8800; | &ne; | Not equal to | ≠
&#8801; | &equiv; | Identical to | ≡
&#8804; | &le; | Less than or euqal to | ≤
&#8805; | &ge; | Greater than or equal to | ≥
&#8834; | &sub; | Subset of | ⊂
&#8835; | &sup; | Superset of | ⊃
&#8836; | &nsub; | Not a subset of | ⊄
&#8838; | &sube; | Subset of or equal to | ⊆
&#8839; | &supe; | Superset of or equal to | ⊇
&#8853; | &oplus; | Circle plus | ⊕
&#8855; | &otimes; | Circled times | ⊗
&#8869; | &perp; | Othogonal = Perpendicular to | ⊥
&#8901; | &sdot; | Dot operator | ⋅
&#8968; | &lceil; | Left ceiling | ⌈
&#8969; | &rceil; | Right ceiling | ⌉
&#8970; | &lfloor; | Left floor | ⌊
&#8971; | &rfloor; | Right floor | ⌋
&#9001; | &lang; | Left pointing angle bracket | 〈
&#9002; | &rang; | Right pointing angle bracket | 〉
&#9674; | &loz; | Lozenge | ◊
&#9824; | &spades; | Black Spade suit | ♠
&#9827; | &clubs; | Black Clubs suit | ♣
&#9829; | &hearts; | Black Hearts suit | ♥
&#9830; | &diams; | Black Diamonds suit | ♦

© 1995-1998, Stephen Le Hunte


HTML 4.0 Special Entities

Special Entities

The following table gives the character entity reference, decimal character reference, and hexadecimal character reference for markup-significant and internationalization characters, as well as the rendering of each in your browser. Glyphs of the characters are available at the Unicode Consortium.

With the exception of HTML 2.0's &quot;, &amp;, &lt;, and &gt;, browser support for these entities is generally quite poor, but recent browsers support some of the character entity references and decimal character references.

Note that hexadecimal character references will cause errors with current validators since these references are defined in a recent revision to the SGML standard that is not yet supported by validators.

Character | Entity | Decimal | Hex | Rendering in Your Browser
 |  |  |  | Entity | Decimal | Hex
quotation mark = APL quote | &quot; | &#34; | &#x22; | " | " | "
ampersand | &amp; | &#38; | &#x26; | & | & | &
less-than sign | &lt; | &#60; | &#x3C; | < | < | <
greater-than sign | &gt; | &#62; | &#x3E; | > | > | >
Latin capital ligature OE | &OElig; | &#338; | &#x152; | Œ | Œ | Œ
Latin small ligature oe | &oelig; | &#339; | &#x153; | œ | œ | œ
Latin capital letter S with caron | &Scaron; | &#352; | &#x160; | Š | Š | Š
Latin small letter s with caron | &scaron; | &#353; | &#x161; | š | š | š
Latin capital letter Y with diaeresis | &Yuml; | &#376; | &#x178; | Ÿ | Ÿ | Ÿ
modifier letter circumflex accent | &circ; | &#710; | &#x2C6; | ˆ | ˆ | ˆ
small tilde | &tilde; | &#732; | &#x2DC; | ˜ | ˜ | ˜
en space | &ensp; | &#8194; | &#x2002; |  |  |
em space | &emsp; | &#8195; | &#x2003; |  |  |
thin space | &thinsp; | &#8201; | &#x2009; |  |  |
zero width non-joiner | &zwnj; | &#8204; | &#x200C; | ‌ | ‌ | ‌
zero width joiner | &zwj; | &#8205; | &#x200D; | ‍ | ‍ | ‍
left-to-right mark | &lrm; | &#8206; | &#x200E; | ‎ | ‎ | ‎
right-to-left mark | &rlm; | &#8207; | &#x200F; | ‏ | ‏ | ‏
en dash | &ndash; | &#8211; | &#x2013; | – | – | –
em dash | &mdash; | &#8212; | &#x2014; | — | — | —
left single quotation mark | &lsquo; | &#8216; | &#x2018; | ‘ | ‘ | ‘
right single quotation mark | &rsquo; | &#8217; | &#x2019; | ’ | ’ | ’
single low-9 quotation mark | &sbquo; | &#8218; | &#x201A; | ‚ | ‚ | ‚
left double quotation mark | &ldquo; | &#8220; | &#x201C; | “ | “ | “
right double quotation mark | &rdquo; | &#8221; | &#x201D; | ” | ” | ”
double low-9 quotation mark | &bdquo; | &#8222; | &#x201E; | „ | „ | „
dagger | &dagger; | &#8224; | &#x2020; | † | † | †
double dagger | &Dagger; | &#8225; | &#x2021; | ‡ | ‡ | ‡
per mille sign | &permil; | &#8240; | &#x2030; | ‰ | ‰ | ‰
single left-pointing angle quotation mark | &lsaquo; | &#8249; | &#x2039; | ‹ | ‹ | ‹
single right-pointing angle quotation mark | &rsaquo; | &#8250; | &#x203A; | › | › | ›
euro sign | &euro; | &#8364; | &#x20AC; | € | € | €

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


HTML 4.0 Entities for Symbols and Greek Letters

Entities for Symbols and Greek Letters

The following table gives the character entity reference, decimal character reference, and hexadecimal character reference for symbols and Greek letters, as well as the rendering of each in your browser. Glyphs of the characters are available at the Unicode Consortium.

Browser support for these entities is generally quite poor, but recent browsers support some of the character entity references and decimal character references.

Note that hexadecimal character references will cause errors with current validators since these references are defined in a recent revision to the SGML standard that is not yet supported by validators.

Character | Entity | Decimal | Hex | Rendering in Your Browser
 |  |  |  | Entity | Decimal | Hex
Latin small f with hook = function = florin | &fnof; | &#402; | &#x192; | ƒ | ƒ | ƒ
Greek capital letter alpha | &Alpha; | &#913; | &#x391; | Α | Α | Α
Greek capital letter beta | &Beta; | &#914; | &#x392; | Β | Β | Β
Greek capital letter gamma | &Gamma; | &#915; | &#x393; | Γ | Γ | Γ
Greek capital letter delta | &Delta; | &#916; | &#x394; | Δ | Δ | Δ
Greek capital letter epsilon | &Epsilon; | &#917; | &#x395; | Ε | Ε | Ε
Greek capital letter zeta | &Zeta; | &#918; | &#x396; | Ζ | Ζ | Ζ
Greek capital letter eta | &Eta; | &#919; | &#x397; | Η | Η | Η
Greek capital letter theta | &Theta; | &#920; | &#x398; | Θ | Θ | Θ
Greek capital letter iota | &Iota; | &#921; | &#x399; | Ι | Ι | Ι
Greek capital letter kappa | &Kappa; | &#922; | &#x39A; | Κ | Κ | Κ
Greek capital letter lambda | &Lambda; | &#923; | &#x39B; | Λ | Λ | Λ
Greek capital letter mu | &Mu; | &#924; | &#x39C; | Μ | Μ | Μ
Greek capital letter nu | &Nu; | &#925; | &#x39D; | Ν | Ν | Ν
Greek capital letter xi | &Xi; | &#926; | &#x39E; | Ξ | Ξ | Ξ
Greek capital letter omicron | &Omicron; | &#927; | &#x39F; | Ο | Ο | Ο
Greek capital letter pi | &Pi; | &#928; | &#x3A0; | Π | Π | Π
Greek capital letter rho | &Rho; | &#929; | &#x3A1; | Ρ | Ρ | Ρ
Greek capital letter sigma | &Sigma; | &#931; | &#x3A3; | Σ | Σ | Σ
Greek capital letter tau | &Tau; | &#932; | &#x3A4; | Τ | Τ | Τ
Greek capital letter upsilon | &Upsilon; | &#933; | &#x3A5; | Υ | Υ | Υ
Greek capital letter phi | &Phi; | &#934; | &#x3A6; | Φ | Φ | Φ
Greek capital letter chi | &Chi; | &#935; | &#x3A7; | Χ | Χ | Χ
Greek capital letter psi | &Psi; | &#936; | &#x3A8; | Ψ | Ψ | Ψ
Greek capital letter omega | &Omega; | &#937; | &#x3A9; | Ω | Ω | Ω
Greek small letter alpha | &alpha; | &#945; | &#x3B1; | α | α | α
Greek small letter beta | &beta; | &#946; | &#x3B2; | β | β | β
Greek small letter gamma | &gamma; | &#947; | &#x3B3; | γ | γ | γ
Greek small letter delta | &delta; | &#948; | &#x3B4; | δ | δ | δ
Greek small letter epsilon | &epsilon; | &#949; | &#x3B5; | ε | ε | ε
Greek small letter zeta | &zeta; | &#950; | &#x3B6; | ζ | ζ | ζ
Greek small letter eta | &eta; | &#951; | &#x3B7; | η | η | η
Greek small letter theta | &theta; | &#952; | &#x3B8; | θ | θ | θ
Greek small letter iota | &iota; | &#953; | &#x3B9; | ι | ι | ι
Greek small letter kappa | &kappa; | &#954; | &#x3BA; | κ | κ | κ
Greek small letter lambda | &lambda; | &#955; | &#x3BB; | λ | λ | λ
Greek small letter mu | &mu; | &#956; | &#x3BC; | μ | μ | μ
Greek small letter nu | &nu; | &#957; | &#x3BD; | ν | ν | ν
Greek small letter xi | &xi; | &#958; | &#x3BE; | ξ | ξ | ξ
Greek small letter omicron | &omicron; | &#959; | &#x3BF; | ο | ο | ο
Greek small letter pi | &pi; | &#960; | &#x3C0; | π | π | π
Greek small letter rho | &rho; | &#961; | &#x3C1; | ρ | ρ | ρ
Greek small letter final sigma | &sigmaf; | &#962; | &#x3C2; | ς | ς | ς
Greek small letter sigma | &sigma; | &#963; | &#x3C3; | σ | σ | σ
Greek small letter tau | &tau; | &#964; | &#x3C4; | τ | τ | τ
Greek small letter upsilon | &upsilon; | &#965; | &#x3C5; | υ | υ | υ
Greek small letter phi | &phi; | &#966; | &#x3C6; | φ | φ | φ
Greek small letter chi | &chi; | &#967; | &#x3C7; | χ | χ | χ
Greek small letter psi | &psi; | &#968; | &#x3C8; | ψ | ψ | ψ
Greek small letter omega | &omega; | &#969; | &#x3C9; | ω | ω | ω
Greek small letter theta symbol | &thetasym; | &#977; | &#x3D1; | ϑ | ϑ | ϑ
Greek upsilon with hook symbol | &upsih; | &#978; | &#x3D2; | ϒ | ϒ | ϒ
Greek pi symbol | &piv; | &#982; | &#x3D6; | ϖ | ϖ | ϖ
bullet = black small circle | &bull; | &#8226; | &#x2022; | • | • | •
horizontal ellipsis = three dot leader | &hellip; | &#8230; | &#x2026; | … | … | …
prime = minutes = feet | &prime; | &#8242; | &#x2032; | ′ | ′ | ′
double prime = seconds = inches | &Prime; | &#8243; | &#x2033; | ″ | ″ | ″
overline = spacing overscore | &oline; | &#8254; | &#x203E; | ‾ | ‾ | ‾
fraction slash | &frasl; | &#8260; | &#x2044; | ⁄ | ⁄ | ⁄
script capital P = power set = Weierstrass p | &weierp; | &#8472; | &#x2118; | ℘ | ℘ | ℘
blackletter capital I = imaginary part | &image; | &#8465; | &#x2111; | ℑ | ℑ | ℑ
blackletter capital R = real part symbol | &real; | &#8476; | &#x211C; | ℜ | ℜ | ℜ
trade mark sign | &trade; | &#8482; | &#x2122; | ™ | ™ | ™
alef symbol = first transfinite cardinal | &alefsym; | &#8501; | &#x2135; | ℵ | ℵ | ℵ
leftwards arrow | &larr; | &#8592; | &#x2190; | ← | ← | ←
upwards arrow | &uarr; | &#8593; | &#x2191; | ↑ | ↑ | ↑
rightwards arrow | &rarr; | &#8594; | &#x2192; | → | → | →
downwards arrow | &darr; | &#8595; | &#x2193; | ↓ | ↓ | ↓
left right arrow | &harr; | &#8596; | &#x2194; | ↔ | ↔ | ↔
downwards arrow with corner leftwards = carriage return | &crarr; | &#8629; | &#x21B5; | ↵ | ↵ | ↵
leftwards double arrow | &lArr; | &#8656; | &#x21D0; | ⇐ | ⇐ | ⇐
upwards double arrow | &uArr; | &#8657; | &#x21D1; | ⇑ | ⇑ | ⇑
rightwards double arrow | &rArr; | &#8658; | &#x21D2; | ⇒ | ⇒ | ⇒
downwards double arrow | &dArr; | &#8659; | &#x21D3; | ⇓ | ⇓ | ⇓
left right double arrow | &hArr; | &#8660; | &#x21D4; | ⇔ | ⇔ | ⇔
for all | &forall; | &#8704; | &#x2200; | ∀ | ∀ | ∀
partial differential | &part; | &#8706; | &#x2202; | ∂ | ∂ | ∂
there exists | &exist; | &#8707; | &#x2203; | ∃ | ∃ | ∃
empty set = null set = diameter | &empty; | &#8709; | &#x2205; | ∅ | ∅ | ∅
nabla = backward difference | &nabla; | &#8711; | &#x2207; | ∇ | ∇ | ∇
element of | &isin; | &#8712; | &#x2208; | ∈ | ∈ | ∈
not an element of | &notin; | &#8713; | &#x2209; | ∉ | ∉ | ∉
contains as member | &ni; | &#8715; | &#x220B; | ∋ | ∋ | ∋
n-ary product = product sign | &prod; | &#8719; | &#x220F; | ∏ | ∏ | ∏
n-ary sumation | &sum; | &#8721; | &#x2211; | ∑ | ∑ | ∑
minus sign | &minus; | &#8722; | &#x2212; | − | − | −
asterisk operator | &lowast; | &#8727; | &#x2217; | ∗ | ∗ | ∗
square root = radical sign | &radic; | &#8730; | &#x221A; | √ | √ | √
proportional to | &prop; | &#8733; | &#x221D; | ∝ | ∝ | ∝
infinity | &infin; | &#8734; | &#x221E; | ∞ | ∞ | ∞
angle | &ang; | &#8736; | &#x2220; | ∠ | ∠ | ∠
logical and = wedge | &and; | &#8743; | &#x2227; | ∧ | ∧ | ∧
logical or = vee | &or; | &#8744; | &#x2228; | ∨ | ∨ | ∨
intersection = cap | &cap; | &#8745; | &#x2229; | ∩ | ∩ | ∩
union = cup | &cup; | &#8746; | &#x222A; | ∪ | ∪ | ∪
integral | &int; | &#8747; | &#x222B; | ∫ | ∫ | ∫
therefore | &there4; | &#8756; | &#x2234; | ∴ | ∴ | ∴
tilde operator = varies with = similar to | &sim; | &#8764; | &#x223C; | ∼ | ∼ | ∼
approximately equal to | &cong; | &#8773; | &#x2245; | ≅ | ≅ | ≅
almost equal to = asymptotic to | &asymp; | &#8776; | &#x2248; | ≈ | ≈ | ≈
not equal to | &ne; | &#8800; | &#x2260; | ≠ | ≠ | ≠
identical to | &equiv; | &#8801; | &#x2261; | ≡ | ≡ | ≡
less-than or equal to | &le; | &#8804; | &#x2264; | ≤ | ≤ | ≤
greater-than or equal to | &ge; | &#8805; | &#x2265; | ≥ | ≥ | ≥
subset of | &sub; | &#8834; | &#x2282; | ⊂ | ⊂ | ⊂
superset of | &sup; | &#8835; | &#x2283; | ⊃ | ⊃ | ⊃
not a subset of | &nsub; | &#8836; | &#x2284; | ⊄ | ⊄ | ⊄
subset of or equal to | &sube; | &#8838; | &#x2286; | ⊆ | ⊆ | ⊆
superset of or equal to | &supe; | &#8839; | &#x2287; | ⊇ | ⊇ | ⊇
circled plus = direct sum | &oplus; | &#8853; | &#x2295; | ⊕ | ⊕ | ⊕
circled times = vector product | &otimes; | &#8855; | &#x2297; | ⊗ | ⊗ | ⊗
up tack = orthogonal to = perpendicular | &perp; | &#8869; | &#x22A5; | ⊥ | ⊥ | ⊥
dot operator | &sdot; | &#8901; | &#x22C5; | ⋅ | ⋅ | ⋅
left ceiling = APL upstile | &lceil; | &#8968; | &#x2308; | ⌈ | ⌈ | ⌈
right ceiling | &rceil; | &#8969; | &#x2309; | ⌉ | ⌉ | ⌉
left floor = APL downstile | &lfloor; | &#8970; | &#x230A; | ⌊ | ⌊ | ⌊
right floor | &rfloor; | &#8971; | &#x230B; | ⌋ | ⌋ | ⌋
left-pointing angle bracket = bra | &lang; | &#9001; | &#x2329; | ⟨ | 〈 | 〈
right-pointing angle bracket = ket | &rang; | &#9002; | &#x232A; | ⟩ | 〉 | 〉
lozenge | &loz; | &#9674; | &#x25CA; | ◊ | ◊ | ◊
black spade suit | &spades; | &#9824; | &#x2660; | ♠ | ♠ | ♠
black club suit = shamrock | &clubs; | &#9827; | &#x2663; | ♣ | ♣ | ♣
black heart suit = valentine | &hearts; | &#9829; | &#x2665; | ♥ | ♥ | ♥
black diamond suit | &diams; | &#9830; | &#x2666; | ♦ | ♦ | ♦

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


Pompage.net - CSS : on reprend tout à zéro ! (10ème épisode)

Vu dans ... http://www.pompage.net/traduction/cssdezero-10

Doctypes et validation

Nous voilà arrivés à la dixième leçon de « On reprend tout à zéro », et il faut que je vous avoue quelque chose. Tout ce que je vous ai montré jusqu'ici, le balisage, les pages d'exemples, eh bien tout ceci est faux ! Bon, en fait, ça va sans doute fonctionner correctement (sauf si vous utilisez un navigateur trop ancien), mais si vous testez vos pages avec un vérificateur de syntaxe, ou bien si vous les soumettez à un quelconque programme de validation, elles ne passeront pas l'épreuve.

Vous vous demandez peut-être ce qu'est un programme de validation.

Vous connaissez sûrement les correcteurs d'orthographe. Votre programme de traitement de texte en contient vraisemblablement un. Ils servent à comparer les mots que vous avez tapés avec ceux de leur dictionnaire intégré, et vous avertissent s'ils ne trouvent pas de concordance. Peut-être le mot n'est-il pas dans le dictionnaire, mais peut-être aussi ne l'avez-vous pas tapé correctement. Dans les traitements de texte les plus élaborés, votre texte peut également subir une vérification grammaticale, et si vous tapez une phrase qui ne contient pas de verbe ou qui contient trop d'occurences du mot « et », ils vous harcèleront sans arrêt.

Pour qu'un correcteur d'orthographe ou de grammaire puisse faire son travail, il doit savoir quelle langue vous utilisez. Un correcteur d'anglais britannique est déjà différent d'un correcteur d'anglais américain, alors que dire de ceux qui utilisent une toute autre langue que l'anglais ?

De même qu'on corrige son anglais, son français, ou toute autre langue, on peut (et on doit !) corriger également son HTML et son CSS. Si votre anglais contient une erreur, les gens penseront qu'il s'agit d'une coquille, mais comprendront ce que vous voulez dire, il n'y aura pas grand-mal. En revanche, une petite erreur en HTML ou en CSS, c'est une toute autre histoire. Quelque chose d'aussi insignifiant en apparence qu'une virgule ou un guillemet mal placés peut faire toute la différence entre une page qui fonctionne ou non : tout dépend du type d'erreur et du navigateur qui essaie de comprendre ce qui se passe. Il est très recommandé de « vérifier l'orthographe » de votre HTML comme de votre CSS avec un « correcteur de syntaxe » ou un « validateur ».

L'un des grands avantages dont vous bénéficiez si vous utilisez un éditeur HTML de bonne qualité, c'est qu'il contient un correcteur de syntaxe intégré. Vous ne trouverez pas cela avec de simples éditeurs de texte polyvalents. Si vous avez un éditeur HTML comme HomeSite ou BBEdit, ou bien un éditeur WYSIWYG tel que Dreamweaver ou GoLive, vous pourrez vérifier votre balisage et si possible trouver des suggestions pour en corriger les erreurs. Si vous ne possédez pas de tels programmes, vous pouvez utiliser les validateurs en ligne offerts par le W3C : ... http://validator.w3.org/ ... le validateur HTML et ... http://jigsaw.w3.org/css-validator/ ... le validateur CSS du W3C, où vous pouvez tout simplement envoyer vos fichiers et recevoir un rapport immédiat indiquant la liste exhaustive de vos erreurs, sauf si vous n'en avez commis aucune !

Bien entendu, le programme de correction doit d'abord savoir quel « langue » vous utilisez pour votre balisage : il y a différentes « gammes » de HTML. Jusqu'ici, tous les exemples que j'ai montrés sont écrits en HTML 4.01 : il s'agit de la version actuelle, et c'est la plus répandue. Mais il y a différentes versions de HTML 4.01 : « Strict », « Transitional » et « FrameSet ».

Le Strict est constitué d'un ensemble de règles qui définissent très strictement ce que l'on peut faire ou ne pas faire en HTML.

Le Transitional est un peu plus compréhensif, et vous permet d'utiliser un HTML un peu plus ancien ainsi que quelques particularités propres à certains navigateurs.

Le Frame Set n'est plus beaucoup utilisé de nos jours. Nous n'avons d'ailleurs pas évoqué les « frames » (cadres) dans cette série de cours, dans la mesure où ils sont largement passé de mode depuis l'arrivée des CSS.

La plupart des gens se contentent très bien du « Transitional » parce qu'il leur laisse un peu de souplesse, mais il y en a d'autres qui aiment que tout soit bien net et règlementaire et qui préfèrent utiliser le « Strict ».

Pour que le navigateur sache quel langage vous utilisez pour votre balisage, et dans quelle version, placez une déclaration de Doctype tout en haut de la page, au-dessus de la première balise <html>. En voici un exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Je ne vais pas analyser tout de suite tout ce que cela signifie ; contentez-vous de savoir qu'avec ce charabia au sommet de votre page, le vérificateur de syntaxe ou le validateur sera capable de faire correctement son travail. Il sait désormais quels sont les standards que vous voulez appliquer à votre page, et va pouvoir la juger en fonction de ceux-ci.

Dès lors que j'ai placé un Doctype, je peux passer mes pages au vérificateur de syntaxe de mon éditeur HTML et m'assurer qu'elles sont impeccables. Maintenant qu'on a réglé ce petit détail annexe, revenons au style de notre page !


Accueil

Accueil CHM

Normal, dit comme ça,
vous ne risquez pas de comprendre.


Hypertext Markup Language — Wikipédia

Hypertext Markup Language

HTML (Hypertext Markup Language)
Extension | .html, .htm
Développé par | World Wide Web Consortium & WHATWG
Type de format | Langage de balisage
Extension du | SGML
Origine de | XHTML
Standard(s) | ISO/IEC 15445 W3C HTML 4.01 W3C HTML5 (projet)
Spécification | Format ouvert

L’Hypertext Markup Language, généralement abrégé HTML, est le format de données conçu pour représenter les pages web. C’est un langage de balisage permettant d’écrire de l’hypertexte, d’où son nom. HTML permet également de structurer sémantiquement et de mettre en forme le contenu des pages, d’inclure des ressources multimédias dont des images, des formulaires de saisie, et des programmes informatiques. Il permet de créer des documents interopérables avec des équipements très variés de manière conforme aux exigences de l’accessibilité du web. Il est souvent utilisé conjointement avec des langages de programmation (JavaScript) et des formats de présentation (feuilles de style en cascade). HTML est initialement dérivé du Standard Generalized Markup Language (SGML).

Sommaire

  • 1 Dénomination
  • 2 Évolution du langage
    • 2.1 1989-1992 : Origine
    • 2.2 1993 : Apports de NCSA Mosaic
    • 2.3 1994 : Apports de Netscape Navigator
    • 2.4 1995-1996 : HTML 2.0
    • 2.5 1997 : HTML 3.2. et 4.0
    • 2.6 2000-2006 : XHTML
    • 2.7 2007 à nos jours : HTML5 et abandon du XHTML 2
    • 2.8 L'avenir du HTML : sans numéro de version ?
  • 3 Description de HTML
    • 3.1 Syntaxe de HTML
    • 3.2 Structure des documents HTML
    • 3.3 Éléments de HTML
    • 3.4 Attributs de HTML
    • 3.5 Jeu de caractères
  • 4 Interopérabilité de HTML
  • 5 Notes et références
  • 6 Voir aussi
    • 6.1 Articles connexes
    • 6.2 Liens externes

Dénomination

L’anglais Hypertext Markup Language se traduit littéralement en langage de balisage d’hypertexte[1]. On utilise généralement l’abréviation HTML, parfois même en répétant le mot « langage » comme dans « langage HTML ». Hypertext est parfois écrit HyperText pour marquer le T de l’abréviation HTML.

Le public non averti parle parfois de HTM au lieu de HTML, HTM étant l’extension de nom de fichier tronquée à trois lettres, une limitation qu’on trouve sur d’anciens systèmes d’exploitation de Microsoft.

Évolution du langage

Durant la première moitié des années 1990, avant l’apparition des technologies web comme JavaScript, les feuilles de style en cascade et le Document Object Model, l’évolution de HTML a dicté l’évolution du World Wide Web. Depuis 1997 et HTML 4, l’évolution de HTML a fortement ralenti ; 10 ans plus tard, HTML 4 reste utilisé dans les pages web. En 2008, la spécification du HTML 5 est à l’étude[2].

1989-1992 : Origine

HTML est une des trois inventions à la base du World Wide Web, avec le Hypertext Transfer Protocol (HTTP) et les adresses web. HTML a été inventé pour permettre d'écrire des documents hypertextuels liant les différentes ressources d’Internet avec des hyperliens. Aujourd’hui, ces documents sont appelés « page web ». En août 1991, lorsque Tim Berners-Lee annonce publiquement le web sur Usenet, il ne cite que le langage SGML, mais donne l’URL d’un document de suffixe .html. Dans son livre Weaving the web[3], Tim Berners-Lee décrit la décision de baser HTML sur SGML comme étant aussi « diplomatique » que technique : techniquement, il trouvait SGML trop complexe, mais il voulait attirer la communauté hypertexte qui considérait que SGML était le langage le plus prometteur pour standardiser le format des documents hypertexte. En outre, SGML était déjà utilisé par son employeur, l’Organisation européenne pour la recherche nucléaire (CERN). Les premiers éléments du langage HTML comprennent le titre du document, les hyperliens, la structuration du texte en titres, sous-titres, listes ou texte brut, et un mécanisme rudimentaire de recherche par index. La description de HTML est alors assez informelle et principalement définie par le support des divers navigateurs web contemporains. Dan Connolly a aidé à faire de HTML une véritable application de SGML[4].

1993 : Apports de NCSA Mosaic

L’état de HTML correspond alors à ce que l’on pourrait appeler HTML 1.0. Il n’existe cependant aucune spécification portant ce nom, notamment parce que le langage était alors en pleine évolution. Un effort de normalisation était cependant en cours[5]. À partir de fin 1993, le terme HTML+ est utilisé pour désigner la version future de HTML[6]. Malgré l’effort de normalisation ainsi initié, et jusqu’à la fin des années 1990, HTML est principalement défini par les implémentations des navigateurs. Avec le navigateur NCSA Mosaic, HTML connaît deux inventions majeures. D’abord l’invention de l’élément IMG permet d’intégrer des images (dans un premier temps, uniquement aux formats GIF et XBM) aux pages web (Mosaic 0.10). Ensuite l’invention des formulaires (Mosaic 2.0pre5) rend le web interactif en permettant aux visiteurs de saisir des données dans les pages et de les envoyer au serveur web. Cette invention permet notamment de passer des commandes, donc d’utiliser le web pour faire du commerce électronique.

1994 : Apports de Netscape Navigator

Avec l’apparition de Netscape Navigator 0.9 le 13 octobre 1994, le support de nombreux éléments de présentation est ajouté : attributs de texte, clignotement, centrage, etc. Le développement de HTML prend alors deux voies divergentes. D’une part, les développeurs de navigateurs s’attachent à maximiser l’impact visuel des pages web en réponse aux demandes des utilisateurs[7]. D’autre part, les concepteurs du web proposent d’étendre les capacités de description sémantique (logos, notes de bas de page, etc.) et les domaines d’applications (formules mathématiques, tables) de HTML. En ceci, ils suivent les principes de SGML consistant à laisser la présentation à un langage de style. En l’occurrence, les feuilles de style en cascade (CSS) sont prévues pour HTML. Seul le support des tables est rapidement intégré aux navigateurs, notamment parce qu’il permet une très nette amélioration de la présentation. Outre la multiplication des éléments de présentation, les logiciels d’alors produisant et consommant du HTML conçoivent souvent les documents comme une suite de commandes de formatage plutôt que comme un marquage représentant la structure en arbre aujourd’hui appelée Document Object Model (DOM). Le manque de structure du HTML alors mis en œuvre est parfois dénoncé comme étant de la « soupe de balises », en anglais : tag soup.

1995-1996 : HTML 2.0

En mars 1995, le World Wide Web Consortium (W3C) nouvellement fondé propose le résultat de ses recherches sur HTML+ : le brouillon HTML 3.0. Il comprend notamment le support des tables, des figures et des expressions mathématiques. Ce brouillon expire le 28 septembre 1995 sans donner de suites directes. Fin 1995, le RFC 1866 décrivant HTML 2.0 est finalisé. Le principal éditeur est Dan Connolly. Ce document décrit HTML tel qu’il existait avant juin 1994, donc sans les nombreuses additions de Netscape Navigator.

1997 : HTML 3.2. et 4.0

Le 14 janvier 1997, le W3C publie la spécification HTML 3.2. Elle décrit la pratique courante observée début 1996 [8], donc avec une partie des additions de Netscape Navigator et d’Internet Explorer. Ses plus importantes nouveautés sont la standardisation des tables et de nombreux éléments de présentation. HTML 3.2 précède de peu HTML 4.0 et contient des éléments en prévision du support des styles et des scripts. Le 18 décembre 1997, le W3C publie la spécification HTML 4.0 qui standardise de nombreuses extensions supportant les styles et les scripts, les cadres (frames) et les objets (inclusion généralisée de contenu). HTML 4.0 apporte également différentes améliorations pour l’accessibilité des contenus[9] dont principalement la possibilité d’une séparation plus explicite entre structure et présentation du document, ou le support d’informations supplémentaires sur certains contenus complexes tels que les formulaires, les tableaux ou les sigles. HTML 4.0 introduit trois variantes du format, destinées à favoriser l’évolution vers un balisage plus signifiant, tout en tenant compte des limites temporaires des outils de production :

  • la variante stricte (strict) exclut des éléments et attributs dits « de présentation », destinés à être remplacés par les styles CSS, ainsi que les éléments applet et frame qui sont remplacés par l’élément object réputé plus apte à l’interopérabilité et à l’accessibilité.
  • la variante transitoire (transitional) étend la variante stricte en reprenant les éléments et attributs dépréciés de HTML 3.2, dont les éléments de présentation sont couramment utilisés par les éditeurs HTML de l’époque.
  • la variante frameset normalise la technique des jeux de cadres composant une ressource unique à partir de plusieurs pages web assemblées par le navigateur.

Ces variantes perdurent par la suite sans modifications notables en HTML 4.01 et dans le format de transition XHTML 1.0 issu de HTML. La dernière spécification de HTML est la 4.01 datant du 24 décembre 1999. Elle n’apporte que des corrections mineures à la version 4.0.

2000-2006 : XHTML

Article détaillé : XHTML.

Le développement de HTML en tant qu’application du Standard Generalized Markup Language (SGML) est officiellement abandonné au profit de XHTML, application de Extensible Markup Language (XML). Cependant, en 2004, des fabricants de navigateurs web [10] créent le web Hypertext Application Technology Working Group (WHATWG) dans le but, notamment, de relancer le développement du format HTML et de répondre aux nouveaux besoins sur une base technologique jugée plus aisément implémentable que celle du XHTML 2.0 en cours de conception. Ceci s’inscrit dans le contexte d’une contestation plus générale du mode de fonctionnement du W3C, réputé trop fermé par une partie des développeurs et designers web[11].

2007 à nos jours : HTML5 et abandon du XHTML 2[

En mars 2007, tirant la conséquence des réticences d’une partie de l’industrie et des concepteurs de contenus web face à XHTML 2.0[12], le W3C relance le développement de HTML et crée un nouveau groupe de travail encadré par Chris Wilson (Microsoft) et initialement Dan Connolly (W3C), maintenant Michael Smith (W3C). Il s’agit notamment[13] :

  • de faire évoluer HTML pour décrire la sémantique des documents mais aussi les applications en ligne ;
  • de parvenir à un langage extensible via XML tout en maintenant une version non XML compatible avec les analyseurs syntaxiques (parsers) HTML des navigateurs actuels ;
  • et d’enrichir les interfaces utilisateurs avec des contrôles spécifiques : barres de progrès, menus, champs associés à des types de données spécifiques.

Les travaux du WHATWG ont été formellement adoptés en mai 2007 comme point de départ d’une nouvelle spécification HTML5[14]. Ce document[15] a été publié sous forme de Working Draft le 22 janvier 2008. Parmi les principes de conception évoqués par le groupe de travail figurent en particulier[16] :

  • la compatibilité des futures implémentations HTML avec le contenu web existant, et la possibilité pour d’anciens agents utilisateurs d’exploiter les futurs contenus HTML 5 ;
  • une approche pragmatique, préférant les évolutions aux modifications radicales, et adoptant les technologies ou pratiques déjà largement partagées par les auteurs de contenus actuels ;
  • la priorité donnée, en cas de conflit d’intérêt, aux besoins des utilisateurs sur ceux des auteurs, et par suite, à ceux des auteurs sur les contraintes d’implémentation par les navigateurs ;
  • le compromis entre la richesse sémantique du langage et l’utilité pratique des solutions disponibles pour remplir l’objectif majeur d’indépendance envers le média de restitution.

Une Accessibility Task Force est créée par le W3C en novembre 2009 afin de résoudre les problèmes de compatibilité du nouveau format avec les normes d'accessibilité [17], liés notamment à l'implémentation d'ARIA, aux alternatives textuelles et aux nouveaux éléments canvas et video[18].

Le développement de XHTML 2.0 est initialement poursuivi en parallèle, en réponse aux besoins d’autres secteurs du web, tels que les périphériques mobiles, les applications d’entreprise et les applications serveurs[19]. Puis, en juillet 2009, le W3C décide la non-reconduction du XHTML 2 Working Group à la fin 2009[20].

Avec l'abandon du XHTML 2, la version XHTML 1.1 reste donc la version normalisée. Le HTML5 sera compatible avec le XHTML et le XML, et autorisera donc des documents XHTML5[21]. Cependant, il est probable que le W3C s'oriente vers un abandon pur et simple du XHTML 1.1, car l'implantation du XML dans le HTML5 rend inutile la définition de document de type XHTML y.y (où y.y sont les numéros de version)[21].

Article détaillé : HTML5.

L'avenir du HTML : sans numéro de version ?

En janvier 2011, des divergences de points de vues entre Ian Hickson (ingénieur chez Google), qui écrit la spécification HTML5, et les membres du groupe de travail du W3C conduisent le WHATWG à créer HTML Living Standard (littéralement : standard vivant du HTML), une spécification de HTML prévue pour être en constante évolution, afin de coller avec les développements rapides de nouvelles fonctionnalités par les développeurs de navigateurs[22] (par opposition à des versions numérotées, donc 'fixes').

Le HTML Living Standard a pour but d'inclure le HTML5, et de le développer en permanence[23]. En particulier, dans la version du 22 août 2012, le document de référence[23] explique que le HTML5 du W3C, publié le 22 juin 2012, est basé sur une version du HTML Living Standard, mais que le HTML Living Standard ne s'arrête PAS à cette version, et continue à évoluer. Il développe en particulier les différences entre la version W3C (le HTML5) et la version HTML Living Standard (par exemple, les nouveaux bugs ne sont pas pris en compte dans le HTML5, des différences syntaxiques sont répertoriées, et de nouvelles balises créées par le HTML Living Standard ne sont pas incluses dans le HTML5).

Description de HTML

HTML est un Langage de description de format de document qui se présente sous la forme d’un langage de balisage dont la syntaxe vient du Standard Generalized Markup Language (SGML).

Syntaxe de HTML

Jusqu’à sa version 4.01 comprise, HTML est formellement décrit comme une application du Standard Generalized Markup Language (SGML). Cependant, les spécifications successives admettent, par différents biais, que les agents utilisateurs ne sont pas, en pratique, des analyseurs SGML conformes[24]. Les navigateurs Web n’ont jamais été capables de déchiffrer l’ensemble des variations de syntaxe permises par SGML[25] ; en revanche ils sont généralement capables de rattraper automatiquement de nombreuses erreurs de syntaxe, suivant la première partie de la « loi de Postel » : « Soyez libéral dans ce que vous acceptez, et conservateur dans ce que vous envoyez » (RFC 791). De fait, les développeurs de pages Web et de navigateurs Web ont toujours pris beaucoup de liberté avec les règles syntaxiques de SGML. Enfin, la Document Type Definition (DTD) de HTML, soit la description technique formelle de HTML, n’a été écrite par Dan Connolly que quelques années après l’introduction de HTML[4].

Malgré les libertés prises avec la norme, la terminologie propre à SGML est utilisée : document, élément, attribut, valeur, balise, entité, validité, application, etc. Grâce à la DTD, il est possible de vérifier automatiquement la validité d’un document HTML à l’aide d’un parseur SGML[26].

À l’origine, HTML a été conçu pour baliser (ou marquer) simplement le texte, notamment pour y ajouter des hyperliens. On utilisait un minimum de balises, comme dans le document HTML suivant :

<TITLE>Exemple de HTML</TITLE>
Ceci est une phrase avec un <A HREF=cible.html>hyperlien</A>.
<P>
Ceci est un paragraphe o&ugrave; il n’y a pas d’hyperlien.

Cet exemple contient du texte, cinq balises et une référence d’entité :

  • <TITLE> est la balise ouvrante de l’élément TITLE.
  • </TITLE> est la balise fermante de l’élément TITLE.
  • Exemple de HTML est le contenu de l’élément TITLE.
  • <A HREF=cible.html> est la balise ouvrante de l’élément A, avec :
  • HREF=cible.html, l’attribut HREF dont la valeur est cible.html.
  • <P> est la balise ouvrante de l’élément P. Toutefois, elle est utilisée ici comme s’il s’agissait d’un séparateur de paragraphe, et c’est même ainsi qu’elle est souvent présentée dans les plus anciennes documentations de HTML. Il s’agit de la balise ouvrante du paragraphe dont le contenu est Ceci est un paragraphe o&ugrave; il n’y a pas d’hyperlien. La balise fermante de l’élément P, qui est optionnelle, est ici omise. L’élément P est implicitement terminé lorsqu’un nouveau paragraphe commence ou que l’élément parent est fermé (cas présent).
  • &ugrave; est une référence d’entité représentant le caractère « ù ».
  • Les balises peuvent être indifféremment écrites en minuscules ou majuscules. L’usage des minuscules devient plus courant car XHTML les impose.

Un document HTML valide est un document qui respecte la syntaxe SGML, n’utilise que des éléments et attributs standardisés, et respecte l’imbrication des éléments décrite par le standard. Il ne manque qu’une déclaration de type de document à l’exemple précédent pour qu’il soit un document HTML 2.0 valide[27].

Un document valide n’est cependant pas suffisant pour être conforme à la spécification HTML visée. En effet, outre l’exigence de validité, un document conforme est soumis à d’autres contraintes qui ne sont pas exprimées par la définition de type de document (DTD), mais qui le sont par la spécification elle-même. C’est notamment le cas du type de contenu de certains attributs, comme celui de l’attribut datetime : pour être conforme à HTML4.01, celui-ci doit être lui-même conforme à un sous-ensemble de la norme ISO 8601[28]. Un parseur strictement SGML tel que le validateur HTML du W3C ne peut donc déterminer la conformité d’un document HTML.

Structure des documents HTML

Dans les premières années, les documents HTML étaient souvent considérés comme des structures plates, et les balises comme des commandes de style[29]. Ainsi la balise <p> était considérée comme un saut de ligne, et la balise </p> était ignorée. Ou encore lorsque JavaScript 1.0 est apparu, il ne donnait accès qu’aux liens et formulaires du document à travers les tables document.forms et document.links.

Avec l’introduction des Cascading Style Sheets et du Document Object Model, il a fallu considérer que les documents HTML ont une véritable structure en arbre, avec un élément racine contenant tous les autres éléments[30]. Les balises ouvrantes et fermantes de ces éléments restent d’ailleurs optionnelles. Cependant, aujourd’hui, on a tendance à baliser chaque élément[31] et à indiquer la DTD. Chaque élément fait partie du contenu d’exactement un autre élément ; cet « arbre du document » est notamment utilisé par la structure de formatage qui en est dérivée pour l’application des feuilles de style en cascade où chaque élément peut avoir un fond, un bord et une marge propres.

Structure d’un document HTML
Source HTML Modèle du document
<!DOCTYPE html>
<html>
 <head>
  <title>
   Exemple de HTML
  </title>
 </head>
 <body>
  Ceci est une phrase avec un <a href="cible.html">hyperlien</a>.
  <p>
   Ceci est un paragraphe où il n’y a pas d’hyperlien.
  </p>
 </body>
</html>

html

head

title

texte

body

texte

a

texte

texte

p

texte

Éléments de HTML

Article détaillé : Élément HTML.

La version 4 de HTML décrit 91 éléments. En suivant la spécification de HTML 4, les fonctionnalités implémentées par HTML peuvent être réparties ainsi :

Structure générale d’un document HTML[32]
Au plus haut niveau, un document HTML est séparé entre un en-tête et un corps. L’en-tête contient les informations sur le document, notamment son titre et éventuellement des métadonnées. Le corps contient ce qui est affiché.
Informations sur la langue[33]
Il est possible d’indiquer la langue de n’importe quelle partie du document et de gérer le mélange de texte s’écrivant de gauche à droite avec du texte de droite à gauche.
Marquage sémantique[34]
HTML permet de différencier des contenus spécifiques tels que les citations d’œuvres externes, les extraits de code informatique, les passages en emphase et les abréviations. Certains de ces éléments, conçus initialement pour permettre le support de documentations techniques, sont très rarement employés (différenciation entre les éléments de variable et d’exemple de valeur dans un code informatique, par exemple, ou encore instance d’un terme défini dans le contexte).
Listes[35]
HTML différencie des listes non ordonnées et des listes ordonnées, selon que l’ordre formel du contenu dans le code est en soi ou non une information. Des listes de définition existent également, mais sans que leur champ d’application ne soit exactement déterminé.
Tables[36]
Cette fonctionnalité a été développée pour permettre la présentation de données tabulaires mais a été immédiatement exploitée pour ses puissantes capacités de mise en page.
Hyperliens [37]
La fonctionnalité première de HTML.
Inclusion d’images, d’applets et d’objets divers[38]
À l’origine HTML permettait seulement de donner des hyperliens sur les médias externes. L’invention d’éléments spécialisés pour le multimédia a permis l’inclusion automatique d’image, de musique, de vidéo, etc. dans les pages web.
Éléments de regroupement[39]
Ne conférant pas de signification au contenu qu’ils balisent, ces éléments génériques permettent d’appliquer des styles de présentation, de réaliser des traitements via des scripts ou tout autre opération nécessitant d’isoler une partie du contenu.
Style de la présentation[40]
Chaque élément, voire tout le document, peut se voir appliquer des styles. Les styles sont définis dans le document ou proviennent de feuilles de style en cascade (CSS) externes.
Marquage de présentation du texte[41]
Développé avant la généralisation de CSS pour fournir rapidement des fonctionnalités aux graphistes. D’usage désormais officiellement déconseillé pour la plus grande partie.
Cadres[42]
Aussi connu sous le nom de frames, une fonctionnalité souvent décriée qui permet d’afficher plusieurs documents HTML dans une même fenêtre.
Formulaire pour l’insertion interactive de données[43]
Les éléments de formulaire permettent aux visiteurs d'entrer du texte et des fichiers dans les pages Web.
Scripts[44]
Permet d’associer des morceaux de programmes aux actions des utilisateurs sur le document. Les langages utilisés sont généralement JavaScript et VBScript.

Attributs de HTML

Les attributs permettent de préciser les propriétés des éléments HTML. Il y a 188 attributs dans la version 4 de HTML[45].

Certains attributs s’appliquent à presque tous les éléments :

  • les attributs génériques id (identificateur unique) et class (identificateur répétable)[46] destinés à permettre l’application de traitements externes, tels que l’application de styles de présentation ou de manipulation de l’arbre du document via un langage de script. Il s’y ajoute l’attribut style[47] permettant de définir le style de présentation de l’élément (généralement en CSS), et l’attribut title[48] apportant une information complémentaire de nature le plus souvent libre (L’exception majeure est l’utilisation du title pour déterminer le style permanent et les éventuels styles alternatifs appliqués à un document via des éléments link).
  • les attributs d’internationalisation dir et lang[33] spécifiant la direction d’écriture et la langue du contenu ;
  • les gestionnaires d’évènements onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup[49], qui capturent les évènements générés dans l’élément pour appeler un script.

D’autres attributs sont propres à un élément unique, ou des éléments similaires. Par exemple :

  • les éléments qui permettent d’inclure dans le document des ressources graphiques sont dotés d’attributs de hauteur et de largeur, afin que le navigateur puisse anticiper la taille de la ressource à afficher avant que celle-ci n’ait été téléchargée : img, object, iframe.
  • des éléments spécifiques sont dotés d’un attribut assumant une fonction unique, tel que l’élément label des étiquettes des contrôles de formulaire et son attribut for désignant le contrôle concerné : c’est, en HTML, et avec les attributs usemap et ismap des images, l’une des très rares associations explicites et formalisées entre des éléments, indépendamment de leur ordre linéaire dans le code source.

La plupart des attributs sont facultatifs. Quelques éléments ont cependant des attributs obligatoires :

  • de par leur nature : l’élément img est obligatoirement doté d’un attribut src spécifiant l’URI de la ressource graphique qu’il représente. Il en est de même de tous les éléments dits « vides » et « remplacés »[50] qui, au prix d’une entorse aux règles SGML, n’ont pas de contenu propre. C’est également le cas d’éléments non vides pour des raisons fonctionnelles, comme l’élément form dont l’attribut action indique la cible serveur qui traitera les données après soumission ;
  • pour des raisons liées à l’accessibilité du contenu : les images sont ainsi dotées d’un attribut obligatoire alt permettant d’indiquer un contenu textuel brut destiné à remplacer la ressource graphique dans les contextes de consultation où elle ne peut pas être restituée ou perçue.

Le type de contenu des attributs HTML échappe pour partie au champ d’application de cette norme, et sa validation relève de normes tierces telles que les URI, les types de contenu ou les codes de langages.

Certains attributs sont enfin de type booléen. Ce sont les seuls attributs dont la syntaxe peut être validement implicite en HTML : l’attribut selected d’un contrôle de formulaire peut ainsi être raccourci sous la forme selected remplaçant la forme complète selected="selected". Cette forme particulière est un des points différenciant HTML de la syntaxe des documents « bien formés » au sens XML.

Jeu de caractères

Article détaillé : Unicode et HTML.

Les pages Web peuvent être rédigées dans toutes sortes de langues et de très nombreux caractères peuvent être utilisés, ce qui requiert soit un jeu de caractères par type d’écriture, soit un jeu de caractères universel. Lors de l’apparition de HTML, le jeu de caractères universel Unicode n’était pas encore inventé, et de nombreux jeux de caractères se côtoyaient, notamment ISO-8859-1 pour l’alphabet latin et ouest-européen, Shift-JIS pour le japonais, KOI8-R pour le cyrillique. Aujourd’hui, le codage UTF-8 de Unicode se répand.

Le protocole de communication HTTP transmet le nom du jeu de caractères. L’en-tête HTML peut comporter le rappel de ce jeu de caractères, qui devrait être identique, sauf erreur de réglage. Enfin, suite à un mauvais réglage, le jeu de caractères réellement utilisé peut encore différer du jeu annoncé. Ces mauvais réglages causent généralement des erreurs d’affichage du texte, notamment pour les caractères non compris dans la norme ASCII.

Interopérabilité de HTML

Tel qu’il a été formalisé par le W3C, le HTML ne sert pas à décrire le rendu final des pages web. En particulier, contrairement à la publication assistée par ordinateur, HTML n’est pas conçu pour spécifier l’apparence visuelle exacte des documents. HTML est plutôt conçu pour donner du sens aux différentes parties du texte : titre, liste, passage important, citation, etc. Le langage HTML a été développé avec l’intuition que les appareils de toutes sortes devaient pouvoir utiliser les informations sur le web : les ordinateurs personnels avec des écrans de résolution et de profondeur de couleurs variables, les téléphones portables, les appareils de synthèse et de reconnaissance de la parole, les ordinateurs avec une bande passante faible comme élevée, et ainsi de suite. HTML est conçu pour optimiser l’interopérabilité des documents.

Comme HTML ne s’attache pas au rendu final du document, un même document HTML peut être consulté à l’aide de matériels et logiciels très divers. Au niveau matériel, un document peut notamment être affiché sur un moniteur d’ordinateur en mode graphique ou un terminal informatique en mode texte, il peut être imprimé, ou il peut être prononcé par synthèse vocale. Au niveau logiciel, HTML ne fait pas non plus de supposition quant au navigateur web utilisé pour consulter le document.

Un haut degré d’interopérabilité permet de baisser les coûts des fournisseurs de contenus car une seule version de chaque document sert des besoins très variés. Pour l’utilisateur du web, l’interopérabilité permet l’existence de nombreux navigateurs concurrents, tous capables de consulter l’ensemble du web.

Chaque version HTML a essayé de refléter le plus grand consensus entre les acteurs de l’industrie, de sorte que les investissements consentis par les fournisseurs de contenus ne soient pas gaspillés et que leurs documents ne deviennent en peu de temps illisibles. La séparation du fond et de la forme n’a pas toujours été respectée au cours du développement du langage, comme en témoigne par exemple le balisage de style de texte, qui permet d’indiquer notamment la police de caractères souhaitée pour l’affichage, sa taille, ou sa couleur.

Le langage Wiki interagit avec le HTML en utilisant des raccourcis pour certains balisages.

Notes et références

  1. ↑ (fr) ISO/IEC 15445:2000, Langage de balisage d’hypertexte [archive] (norme ISO)
  2. ↑ Le W3C publie le premier document de travail sur HTML 5, futur du contenu Web - La communauté Web établit le prochain standard HTML au sein du forum W3C public [archive], communiqué du W3C daté du 22 janvier 2008
  3. ↑ (en) Tim Berners-Lee, Mark Fischetti, Weaving the web: the past, present and future of the World Wide Web by its inventor, Londres, Texere, 2000, p. 45-46, (ISBN 978-1-58799-018-2)
  4. ↑ a et b (en) James Gillies, Robert Cailliau, How the web was born: the story of the World Wide Web, Oxford, Oxford University Press, 2000, p. 212-213, (ISBN 978-0-19-286207-5)
  5. ↑ (en) Hypertext Markup Language (HTML) [archive], Internet Draft, juin 1993
  6. ↑ (en) HTML 4.01 Specification - 2.2.1 A brief history of HTML [archive] - (fr) 2.2.1 Une brève histoire de HTML [archive]
  7. ↑ Marc Andreessen, créateur de Netscape Navigator, déclarait dès 1993 sur la liste de discussion www-talk : « Je pense que s’occuper du SGML en général est une complète perte de temps, et que nous en serions aujourd’hui beaucoup plus loin si nous n’étions pas encombrés avec cet héritage SGML que nous continuons à porter. 99,99 % des gens avec qui je parle veulent mettre en ligne des documents riches, veulent contrôler leur apparence, et se contre-fichent totalement du balisage sémantique ou des différences entre la structure et le rendu d’un document. » (en) HTML Spec [archive], daté du 16 juin 1993
  8. ↑ (en) HTML 3.2 Reference Specification, chap. Abstract [archive]
  9. ↑ La W3C a lancé en 1997 les premiers travaux de son (en) Initiative pour l’Accessibilité du web [archive] (WAI), qui entame alors l’élaboration de ce qui allait devenir les premières (en) Directives pour l’Accessibilité des Contenus web [archive] (WCAG), essentiellement consacrées à l’accessibilité des documents HTML
  10. ↑ L’initiative vient d’Opera et de Mozilla, rejoints par la suite par Apple, (en) http://www.w3.org/2004/04/webapps-cdf-ws/papers/opera.html [archive]
  11. ↑ (en) Jeffrey Zeldman, An angry fix [archive]
  12. ↑ Tim Berners Lee écrivait dès octobre 2006 : « la tentative de faire passer tout le monde à XML et aux contraintes syntaxiques que cela impose (guillemets autour des valeurs d’attributs, slashes dans les balises simples et espaces de noms), à intégrer d’un seul coup, n’a pas fonctionné … Il faut créer un groupe de travail HTML entièrement nouveau qui, contrairement au précédent, sera destiné à apporter des améliorations incrémentales à HTML, ainsi qu’à XHTML », (en) http://dig.csail.mit.edu/breadcrumbs/node/166 [archive]
  13. ↑ Charte du groupe de travail HTML W3C, (en) http://www.w3.org/2007/03/HTML-WG-charter#deliverables [archive]
  14. ↑ (en)Results of Questionnaire Shall we Adopt HTML5 as our specification text for review? [archive]
  15. ↑ (en) HTML 5 – A vocabulary and associated APIs for HTML and XHTML – W3C Working Draft 22 January 2008, http://www.w3.org/TR/html5/ [archive]
  16. ↑ (en) HTML Design Principles [archive]
  17. ↑ (en) HTML Accessibility Task Force Work Statement, W3C [archive], HTML Accessibility Task Force Wiki, W3C [archive]
  18. ↑ (en) Why is HTML5 Accessibility important? Because this child may never know HTML 4 [archive], Steve Faulkner, juin 2009
  19. ↑ « Le XHTML a été appliqué sur d’autres marchés, dont les périphériques mobiles, les applications d’entreprise, les applications serveurs, ainsi que dans un nombre croissant d’applications web telles que les blogiciels. Par exemple, le Groupe de travail des Meilleures Pratiques du web Mobile a inclus le standard XHTML Basic comme pierre angulaire des Meilleures Pratiques du web Mobile car les logiciels s’exécutant avec peu de mémoire peuvent le prendre en charge. … Avec la mise en place du Groupe de travail XHTML 2, le W3C continuera son travail technique sur le langage et prendra parallèlement en compte la revalorisation de la technologie afin d’expliquer clairement son indépendance et sa valeur sur le marché … », (en) Communiqué du W3C, 7 mars 2007 [archive].
  20. ↑ (en) Communiqué du W3C, 2 juillet 2009 [archive]
  21. ↑ a et b http://www.w3.org/2009/06/xhtml-faq.html [archive]
  22. ↑ http://www.clubic.com/internet/actualite-392508-html-standard-evolution-versions-specifique.html [archive]
  23. ↑ a et b http://www.whatwg.org/specs/web-apps/current-work/multipage/introduction.html#is-this-html5 [archive]?
  24. ↑ (en) Henri Sivonen, An HTML5 Conformance Checker [archive], Master’s Thesis, Helsinki, 2007
  25. ↑ Comme la forme courte <em/emphase/> au lieu de <em>emphase</em>
  26. ↑ Comme valideur HTML, on peut notamment citer le (en) Markup Validation Service [archive] du W3C.
  27. ↑ [1] [archive]
  28. ↑ (en) Marking document changes: The INS and DEL elements, HTML 4.01 Specification, W3C [archive]
  29. ↑ Tim Berners-Lee considérait les balises de titre, et même de liste, comme des balises de style. Voir notamment la présentation Les standards HTML et CSS des origines à mercredi dernier [archive] de Daniel Glazman.
  30. ↑ Des navigateurs comme Netscape Navigator 4 ont eu du mal à faire cette transition ; ainsi un style appliqué à l’élément p donnait des résultats dépendants de la présence de la balise optionnelle de fermeture </p>.
  31. ↑ Pour simplifier SGML, le standard XML (sur lequel est basé XHTML) n’autorise pas les balises optionnelles.
  32. ↑ (en) HTML 4.01 Specification - 7 The global structure of an HTML document [archive] - (fr) 7 La structure globale du document HTML [archive]
  33. ↑ a et b (en) HTML 4.01 Specification - 8 Language information and text direction [archive] - (fr) 8 Les indications de langue et la direction du texte [archive]
  34. ↑ (en) HTML 4.01 Specification - 9 Text [archive] - (fr) 9 Le texte [archive]
  35. ↑ (en) HTML 4.01 Specification - 10 Lists [archive] - (fr) 10 Les listes [archive]
  36. ↑ (en) HTML 4.01 Specification - 11 Tables [archive] (fr) 11 Les tables [archive]
  37. ↑ (en) HTML 4.01 Specification - 12 Links [archive] - (fr) 12 Les liens [archive]
  38. ↑ (en) HTML 4.01 Specification - 13 Objects, Images, and Applets [archive] - (fr) 13 Les objets, les images et les applets [archive]
  39. ↑ (en) HTML 4.01 Specification - 7.5.4 Grouping elements: the DIV and SPAN elements [archive] - (fr) 7.5.4 Le regroupement des éléments : les éléments DIV et SPAN [archive]
  40. ↑ (en) HTML 4.01 Specification - 14 Style Sheets [archive] - (fr) 14 Les feuilles de style [archive]
  41. ↑ (en) HTML 4.01 Specification - 15 Alignment, font styles, and horizontal rules [archive] - (fr) 15 L’alignement, les styles de police et les règles horizontales [archive]
  42. ↑ (en) HTML 4.01 Specification - 16 Frames [archive] - (fr) 16 Les cadres [archive]
  43. ↑ (en) HTML 4.01 Specification - 17 Forms [archive] - (fr) 17 Les formulaires [archive]
  44. ↑ (en) HTML 4.01 Specification - 18 Scripts [archive] - (fr) 18 Les scripts [archive]
  45. ↑ (en) HTML 4.01 Specification - Index of Attributes [archive] - (fr) Index des attributs [archive]
  46. ↑ (en) HTML 4.01 Specification - 7.5.2 Element identifiers: the id and class attributes [archive] - (fr) 7.5.2 Les identifiants des éléments : les attributs id et class [archive]
  47. ↑ (en) HTML 4.01 Specification - 14.2.2 Inline style information [archive] - (fr) 14.2.2 Les informations de style en-ligne [archive]
  48. ↑ (en) HTML 4.01 Specification - 7.4.3 The title attribute [archive] - (fr) 7.4.3 L’attribut title [archive]
  49. ↑ (en) HTML 4.01 Specification - 18.2.3 Intrinsic events [archive] - (fr) 18.2.3 Les événements intrinsèques [archive]
  50. ↑ au sens de CSS 2.1 qui explicite la notion d’« élément remplacé » restée implicite en HTML. Voir (en) http://www.w3.org/TR/CSS21/conform.html#replaced-element [archive]

Voir aussi

Sur les autres projets Wikimedia :

  • HTML, sur Wikimedia Commons
  • HTML, sur le Wiktionnaire
  • Hypertext Markup Language, sur Wikiversity
  • Le langage HTML, sur Wikibooks

Articles connexes

  • World Wide Web
  • World Wide Web Consortium (W3C)
  • Identificateur de fragment
  • XHTML
  • HTML5
  • SGML
  • SELFHTML une documentation en ligne de la syntaxe HTML

Liens externes

  • Catégorie HTML de l’annuaire dmoz
  • (en) The W3c Markup Validation Service

Documents officiels :

  • (en) RFC 1866, Hypertext Markup Language - 2.0, novembre 1995
  • (en) HTML 3.2 Reference Specification, recommandation du W3C, 14 janvier 1997
  • (en) HTML 4.0 Specification, recommandation du W3C, 18 décembre 1997
  • (en) HTML 4.01 Specification, dernière recommandation HTML 4 du W3C, 24 décembre 1999
  • (en) HTML 5 A vocabulary and associated APIs for HTML and XHTML, actuel brouillon de travail du W3C sur HTML5, 25 août 2009
  • (en) HTML 5 differences from HTML 4, brouillon de travail du W3C sur les différences entre HTML4 et HTML5, 25 août 2009
  • (en) HTML Living Standard specifications, la documentation du HTML Living Standard, successeur du HTML5, qui n'a plus de version numéroté.
  • (fr) La spécification HTML 4.01, traduction non normative

*Ce document provient de « http://fr.wikipedia.org/w/index.php?title=Hypertext_Markup_Language&oldid=105430742 ».


Unicode — Wikipédia

Unicode

Un article de Wikipédia, l'encyclopédie libre.

Logo Unicode.

Unicode est un standard informatique qui permet des échanges de textes dans différentes langues, à un niveau mondial. Il est développé par le Consortium Unicode, qui vise à permettre le codage de texte écrit en donnant à tout caractère de n’importe quel système d'écriture un nom et un identifiant numérique, et ce de manière unifiée, quelle que soit la plate-forme informatique ou le logiciel.
Ce standard est lié à la norme ISO 10646. La dernière version, Unicode 7.0, est publiée depuis le 16 juin 2014[1].

Les normes sont plutôt payantes, et peu diffusées, alors que les standards sont plus facilement diffusés.
En particulier, le standard Unicode est généralement mieux connu que la norme ISO-10646 qui en est un sur-ensemble [2].

Totalement compatible avec le jeu universel de caractères (JUC) de l'ISO/CEI 10646, le standard Unicode l'étend en lui ajoutant un modèle complet de représentation et de traitement de textes, en conférant à chaque caractère un jeu de propriétés normalisées ou informatives, en décrivant avec précision les relations sémantiques qui peuvent exister entre plusieurs caractères successifs d’un texte, et en normalisant des algorithmes de traitement qui préservent au maximum la sémantique des textes transformés, tout en étendant l’interopérabilité de la représentation de ces textes sur des systèmes hétérogènes.

Le standard Unicode est constitué d'un répertoire de plus de 109 000 caractères couvrant 93 écritures, d'un ensemble de tableaux de codes pour référence visuelle, d'une méthode de codage et de plusieurs codages de caractères standard, d'une énumération des propriétés de caractère (lettres majuscules, minuscules, symboles, ponctuation, etc.) d'un ensemble de fichiers de référence des données informatiques, et d'un certain nombre d'éléments liés, tels que des règles de normalisation, de décomposition, de tri, de rendu et d'ordre d'affichage bidirectionnel (pour l'affichage correct de texte contenant à la fois des caractères d'écritures droite à gauche, comme l'arabe et l'hébreu, et de gauche à droite).

En pratique, Unicode reprend intégralement la norme ISO/CEI 10646, puisque cette dernière ne normalise que les caractères individuels en leur assignant un nom et un numéro normatif (appelé point de code) et une description informative très limitée, mais aucun traitement ni aucune spécification ou recommandation pour leur emploi dans l’écriture de langues réelles, ce que seul le standard Unicode définit précisément. L'ISO/CEI 10646 fait normativement référence à certaines parties du standard Unicode (notamment l'algorithme bidirectionnel et les propriétés des caractères (en)) ; Unicode est également une norme de facto pour le traitement du texte et sert de base à de nombreuses autres normes.

Unicode, dont la première publication remonte à 1991, a été développée dans le but de remplacer l’utilisation de pages de code nationales.

Ces pages de code présentaient en effet quelques problèmes. Par exemple lorsqu’était prévu un caractère « signe monétaire », le même texte autorisant aux États-Unis une dépense en dollars pouvait une fois transmis par courrier électronique au Royaume-Uni autoriser la même dépense en livres sterling, sans que quoi que ce soit ait été modifié au texte.

Dans la pratique, tous les systèmes d’écriture ne sont pas encore présents, car un travail de recherche documentaire auprès de spécialistes peut encore s’avérer nécessaire pour des caractères rares ou des systèmes d'écriture peu connus (parce que disparus, par exemple).

Cependant, les écritures les plus utilisées dans le monde sont représentées, ainsi que des règles sur la sémantique des caractères, leurs compositions et la manière de combiner ces différents systèmes. — Par exemple, comment insérer un système d’écriture de droite à gauche dans un système d’écriture de gauche à droite (Texte bi-directionnel).

Standardisation

Interopérabilité

Sous sa forme UTF-8, l'Unicode offre une certaine interopérabilité avec le code ASCII.

Conformité

La standard Unicode définit des exigences permettant d'évaluer la conformité de l'implémentation d'un process (ou d'un logiciel) à Unicode [3]. Ces exigences concernent notamment (dans la version 4.0) :

  • le traitement de Points de Code non assignés
  • l'interprétation des séquences de caractères équivalentes
  • ce qu'est une modification d'interprétation du texte
  • le codage des caractères
  • l'affichage du texte bidirectionnel
  • la normalisation
  • les algorithmes
  • la casse

Ces exigences permettent le support d'un sous-ensemble d'Unicode.

Alors que l'ISO/CEI 10646 définit le même jeu de caractères qu'Unicode, la différence entre ISO/CEI 10646 et Unicode tient essentiellement dans le surplus d'exigence de conformité fourni par Unicode.

Limitations

Bien qu'Unicode soit aujourd'hui le standard de référence pour le codage informatique des caractères, et même s'il a considérablement permis de réduire les problèmes d'interopérabilité, tous les textes unicode ne sont pas codés de la même manière, certains utilisant la convention NFC, d'autres la convention NFD, même si le standard n'interdit pas de mélanger les deux. Il en va de même des logiciels.

Unicode répond à ces limitations en apportant la notion d'équivalence canonique.

Normes et versions

Le travail sur Unicode est parallèle et synchronisé avec celui sur la norme ISO/CEI 10646 dont les buts sont les mêmes. L’ISO/CEI 10646, une norme internationale publiée en français et en anglais, ne précise cependant ni les règles de composition de caractères, ni les propriétés sémantiques des caractères.

Unicode aborde cependant la problématique de la casse, du classement alphabétique, et de la combinaison d’accents et de caractères. Depuis la version 1.1 d’Unicode et dans toutes les versions suivantes, les caractères ont les mêmes identifiants que ceux de la norme ISO/CEI 10646 : les répertoires sont maintenus parallèlement, à l’identique lors de leur normalisation définitive, les deux normes étant mises à jour presque simultanément. Les deux normes Unicode (depuis la version 1.1) et ISO/CEI 10646 assurent une compatibilité ascendante totale : tout texte conforme à une version antérieure doit rester conforme dans les versions ultérieures.

Ainsi les caractères de la version 3.0 d’Unicode sont ceux de la norme ISO/CEI 10646:2000. La version 3.2 d’Unicode classait 95 221 caractères, symboles et directives.

La version 4.1 d’Unicode, mise à jour en novembre 2005, contient :

  • 137 468 caractères à usage privé (assignés dans toutes les versions d’Unicode et suffisants pour tous les usages) ;
  • plus de 97 755 lettres ou syllabes, chiffres ou nombres, symboles divers, signes diacritiques et signes de ponctuation, avec parmi eux :
    • plus de 70 207 caractères idéographiques, et
      • parmi eux, 11 172 syllabes hangûles précomposées ; ainsi que
  • 8 258 positions de codes réservées de façon permanente, interdites pour le codage de texte (assignées dans toutes les versions d’Unicode) ; et
  • plusieurs centaines de caractères de contrôle ou modificateurs spéciaux ;

soit un total de près de 245 000 positions de codes assignées dans un espace pouvant contenir 1 114 112 codes différents.

Quelques problèmes semblent cependant exister, pour le codage des caractères chinois, à cause de l’unification des jeux idéographiques utilisés dans différentes langues, avec une calligraphie légèrement différente et parfois signifiante, mais ils sont en cours de résolution par Unicode qui a défini des sélecteurs de variantes et ouvert un registre de séquences normalisées qui les utilise.

La version 5.0 a été publiée en juillet 2006, la version 5.1 a été publiée en mars 2008, la version 5.2 en octobre 2009, la version 6.0 en février 2011 et la version 6.1 le 31 janvier 2012.

Les couches d’Unicode

Unicode est défini suivant un modèle en couches (Note technique Unicode #17[4]). Les autres normes ne faisaient typiquement pas de distinction entre le jeu de caractères et la représentation physique. Les couches sont ici présentées en partant de la plus haute (la plus éloignée de la machine).

Répertoire des caractères abstraits (Abstract Character Repertoire)

La couche la plus élevée est la définition du jeu de caractères. Par exemple, Latin-1 a un jeu de 256 caractères et Unicode normalise actuellement près de 110 000 caractères. En outre, Unicode leur donne des noms. Dresser la liste des caractères et leur donner des noms est donc la première couche d’Unicode.

Par exemple, le caractère Ç est nommé "Lettre majuscule latine c cédille".

Cette définition est totalement identique à celle de l’ISO/CEI 10646, qui approuve toute extension du répertoire. Unicode ne reprend dans le texte de sa norme que les noms normatifs en anglais, mais la norme ISO/CEI 10646 est publiée en deux langues également normatives. Ainsi les noms en anglais et en français sont tous deux normalisés.

Dans les faits, toute extension du répertoire se fait aujourd’hui conjointement entre le Groupe de travail responsable de l'ISO/CEI 10646 (JTC1/SC2/WG2, dont les membres votants sont uniquement des autorités de normalisation nationales des pays participants, ou leur représentant officiel), et le Comité technique Unicode UTC (dont les membres votants peuvent être n’importe quelle organisation privée ou d’intérêt public, ou même un gouvernement, qui a adhéré et paye une redevance annuelle leur permettant de participer à ces décisions).

Jeu de caractères codés (Coded Character Set)

Ici, on ajoute à la table précédente un index numérique associé à chaque caractère. Notons bien qu’il ne s’agit pas d’une représentation en mémoire, juste d’un nombre entier, appelé point de code. L'espace de codage de ces nombres est divisé en 17 zones de 65 536 points de codes. Ces zones sont appelées plans.

Le point de code est noté U+xxxx où xxxx est en hexadécimal, et comporte 4 à 6 chiffres :

  • 4 chiffres pour le premier plan, appelé plan multilingue de base (donc entre U+0000 et U+FFFF);
  • 5 chiffres pour les 15 plans suivants (entre U+10000 et U+FFFFF);
  • 6 chiffres pour le dernier plan (entre U+100000 et U+10FFFF).

Ainsi, le caractère nommé "Lettre majuscule latine c cédille" a un index de U+00C7. Il appartient au premier plan.

En principe toutes les positions de code entre U+0000 et U+10FFFF sont disponibles, mais certains intervalles sont perpétuellement réservés à des usages particuliers, notamment une zone d'indirection exclue pour permettre le codage UTF-16 (cf. infra), les zones à usage privé et quelques régions (par exemple U+FFFE ou U+FFFF) contenant des non-caractères dont l'usage est interdit dans un échange de données conforme. Les autres positions de code sont soit déjà assignées à des caractères, soit réservées pour normalisation future.

Zone à usage privé : Unicode a assigné de nombreuses positions de code à des caractères valides mais dont la sémantique est inconnue car d’usage privé (par exemple les deux derniers plans entre U+F0000 et U+10FFFF sont entièrement dédiés à cet usage, hormis les deux points de code à la fin de chaque plan qui sont des non-caractères interdits dans un texte conforme).

Là encore, la normalisation du codage, c’est-à-dire l’assignation des positions de codes aux caractères du répertoire commun est une décision conjointe partagée entre les normes Unicode et ISO/CEI 10646. Tous les caractères du répertoire disposent d’un point de code unique (même si pour certaines langues ou pour Unicode certains caractères sont considérés comme équivalents).

On peut noter que si le répertoire des caractères est extensible, il est limité par la borne supérieure de l'espace de codage : U+10FFFF. Une grande majorité des points de code possibles n’est pas assignée à un caractère particulier, mais peut le devenir à tout moment.

Aussi ces positions de code encore libres ne sont pas considérés comme invalides mais représentent bien des caractères abstraits (non encore spécifiés, et temporairement réservés). Ces caractères abstraits (de même que les caractères à usage privé) complètent le jeu de caractères codés du répertoire normalisé pour former un jeu unique dit « jeu de caractères codés universel » (Universal Coded Character Set, souvent abrégé en UCS) qui contient tous les jeux de caractères codés des répertoires de chacune des versions passées, présentes et futures de l’ISO/CEI 10646 et d’Unicode (depuis la version 1.1 uniquement).

Formalisme de codage des caractères (Character Encoding Form)

Cette fois, nous arrivons à une représentation physique (en mémoire, sur disque, etc.) : cette couche spécifie quelle unité de codage (code units), ou codet, vont représenter un caractère ou plus exactement un point de code : octet, seizet (mot de 16 bits) ou trente-deuzet (mot de 32 bits).

Il peut exister (et il existe) plusieurs de ces formalismes. Un formalisme particulier doit préciser la taille de l'unité de codage et indiquer de quelle façon le nombre entier représentant un point de code est représenté en une suite d'unités de codage − et inversement, c'est-à-dire comment retrouver le point de code étant donnée une suite d'unités de codage.

Mécanisme de sérialisation des caractères (Character Encoding Scheme)

Cette couche s'occupe de sérialiser les suites d'unités de codage définies par la couche précédente en suites d'octets. C'est ici que se choisit l'ordre des octets entre les ordres gros-boutien (octet le plus significatif d'abord) et petit-boutien (octet le moins significatif d'abord).

C'est également à cette étape qu'il est possible d'ajouter un indicateur d'ordre des octets (ou BOM, pour byte order mark), qui permet d'indiquer en début de fichier ou de flot de données s'il est en gros-boutien ou en petit-boutien. Dans le monde Internet, on l'utilise rarement, en préférant un marquage explicite (« charset=UTF-16BE » en MIME, par exemple, pour indiquer un flot de données gros-boutien, où BE signifie Big Endian).

Surcodage de transfert (Transfer Encoding Syntax)

Ici, interviennent optionnellement les mécanismes de compression ou de chiffrement.

Il peut aussi y avoir un surcodage comme pour le LDAP qui spécifie que les chaînes Unicode doivent être codées en UTF-8 et surcodées en Base64.

La limite de l’octet

Contrairement aux normes précédentes, Unicode sépare la définition du jeu de caractères (la liste des caractères, leur nom et leur index, le point de code) de celle du codage. Ainsi, on ne peut donc pas parler de la taille d’un caractère Unicode, car elle dépend du codage choisi.

Là où l’ASCII utilisait jadis 7 bits et ISO 8859-1 8 bits (comme la plupart des pages de codes nationales), Unicode, qui rassemble les caractères de chaque page de code, avait besoin d’utiliser plus que les 8 bits d’un octet. La limite fut dans un premier temps fixée à 16 bits pour les premières versions d’Unicode, et à 32 bits pour les premières versions de la norme ISO/CEI 10646.

La limite actuelle est désormais placée entre 20 et 21 bits par point de code assigné aux caractères normalisés dans les deux normes, désormais mutuellement compatibles :

  • Le groupe de travail international de l’ISO normalise l’assignation des points de code aux caractères, leur nom officiel et réserve les blocs de points de code utilisés par chaque écriture ou groupe d’écritures. Il documente aussi une représentation graphique possible (indicative) pour chaque caractère (cette représentation graphique étant si possible non ambiguë grâce au placement des caractères normalisés dans les blocs de code appropriés pour un nombre limité d’écritures).
  • Le groupe de travail du Consortium Unicode normalise plus précisément (dans la norme Unicode) leur sémantique pour les traitements automatisés grâce aux tables de propriétés des caractères, et la mise au point d’algorithmes standards utilisant ces propriétés.
  • Les deux organismes de normalisation collaborent pour synchroniser en permanence leur répertoire normalisé dans des versions officielles référencées mutuellement, et travaillent ensemble pour les amendements (les versions ne devenant officielles qu’une fois que les deux organismes ont chacun approuvé et complètement défini les additions de nouveaux caractères).
  • En pratique, pour la plupart des développeurs d’applications, la norme ISO/CEI 10646 apparaît comme un sous-ensemble de la norme Unicode plus complète, mais elle dispose des mêmes points de code pour exactement le même jeu de caractères que ceux de la norme Unicode (c’est pourquoi la norme Unicode est plus connue car plus appropriée pour les traitements informatisés, mais aussi la norme Unicode est plus accessible car consultable gratuitement sur Internet).

UTF, Universal Transformation Format

Unicode et ISO/CEI 10646 acceptent plusieurs formes de transformation universelle pour représenter un point de code valide. Citons :

  • UTF-8 ;
  • UTF-16 ;
  • UTF-32.

Le nombre après UTF représente le nombre minimal de bits des codets avec lesquels un point de code valide est représenté.

Ces transformations ont été initialement créées pour la représentation interne et les schémas de codage des points de code de la norme ISO/CEI 10646, qui au départ pouvait définir des points de code sur 31 bits. Depuis, la norme ISO/CEI 10646 a été amendée, afin que les trois formes soient totalement compatibles entre elles et permettent de coder tous les points de code (car UTF-16 ne permet de représenter que les points de code des 17 premiers plans).

Unicode a normalisé également de façon très stricte ces trois formes de transformation de tous les points de code valides (U+0000 à U+D7FF et U+E000 à U+10FFFF) et uniquement eux, que ce soit pour représenter du texte sous forme de suites de points de code, ou des points de code assignés aux caractères valides, ou réservés, ou assignés à des non-caractères. Les points de code assignés aux demi-zones (U+D800 à U+DFFF), utilisés uniquement en UTF-16, sont invalides isolément puisqu’il servent à la représentation, par un couple de 2 codets de 16 bits, des points de code des 16 plans supplémentaires.

UTF-8

Article détaillé : UTF-8.

L’UTF-8, spécifié dans le RFC 3629, est le plus commun pour les applications Unix et Internet. Son codage de taille variable lui permet d’être en moyenne moins coûteux en occupation mémoire (pour les langues à alphabet latin). Mais cela ralentit nettement les opérations où interviennent des extractions de sous-chaînes, car il faut compter les caractères depuis le début de la chaîne pour savoir où se trouve le premier caractère à extraire.

L’UTF-8 assure aussi, et c’est son principal avantage, une compatibilité avec les manipulations simples de chaînes en ASCII dans les langages de programmation. Ainsi, les programmes écrits en C peuvent souvent fonctionner sans modification.

Initialement, l’UTF-8 pouvait coder n’importe quel point de code entre U+0000 et U+7FFFFFFF (donc jusqu’à 31 bits). Cet usage est obsolète et la norme ISO/CEI 10646 a été amendée pour ne plus supporter que les points de code valides des 17 premiers plans, sauf ceux de la demi-zone correspondant aux codets utilisés en UTF-16 pour la représentation sur deux codets des points de code des 16 plans supplémentaires. Aussi les séquences les plus longues en UTF-8 nécessitent au maximum 4 octets, au lieu de 6 précédemment. De plus, UTF-8 a été amendé d’abord par Unicode puis par l’ISO/CEI10646 pour ne plus accepter que la représentation la plus courte de chaque point de code (unicité du codage).

Son avantage sur l’UTF-16 (et l'UTF-32) est que les différences d'ordonnancement des octets composant un mot (endianness) ne posent pas de problème dans un réseau de systèmes hétérogènes ; ainsi, cette transformation est utilisée aujourd'hui par la plupart des protocoles d’échange normalisés.

D’autre part, l’UTF-8 est totalement compatible pour la transmission de textes par des protocoles basés sur le jeu de caractères ASCII, ou peut être rendu compatible (au prix d’une transformation sur plusieurs octets des caractères non-ASCII) avec les protocoles d’échange supportant les jeux de caractères codés sur 8 bits (qu’ils soient basés sur ISO-8859 ou de nombreux autres jeux de caractères codés sur 8 bits définis par des normes nationales ou des systèmes propriétaires particuliers).

Son principal défaut est le codage de longueur très variable (1 octet pour les points de code assignés aux caractères ASCII/ISO646, 2 à 4 octets pour les autres points de code), même si l'auto-synchronisation propre à l'encodage UTF-8 permet de déterminer le début d'une séquence à partir d’une position aléatoire (en effectuant au plus 3 lectures supplémentaires des codets qui précèdent). Cependant, cet encodage n'est pas conçu pour faciliter le traitement des chaînes de caractères : on lui préfère alors souvent l’UTF-16, parfois l’UTF-32 (gourmand en mémoire).

Dérivés

  • Certains programmes (par exemple, la base de données Oracle) représentant en interne leurs données Unicode au format UTF-16 ont (ou ont connu) un défaut de conversion vers UTF-8 : un caractère compris entre U+10000 et U+10FFFF, stocké sur deux mots de 16 bits, se retrouve converti en UTF-8 comme étant une suite de deux caractères Unicode. Cela a amené la création « accidentelle » du CESU-8 et a pour avantage de faciliter l'usage d'Unicode sur des plates-formes 16 bits.
  • Le caractère Unicode nul U+0000 est codé en UTF-8 sous forme d’un unique octet nul 0x00. Selon le standard Unicode, ce caractère n'a aucune signification particulière[5] ; toutefois (pour des raisons conceptuelles historiques), les bibliothèques de traitement de chaînes du langage C considèrent ce caractère de contrôle comme une fin de chaîne, ce qui complique l'implémentation de certains cas d'application[réf. nécessaire]. Sous la plate-forme Java, la version « (en) Modified UTF-8 » est née en reprenant l'avantage de la portabilité « 16 bits » du CESU-8 et en y ajoutant la possibilité d'encoder U+0000 sous la séquence 0xC0 0x80 (normalement interdite en UTF-8[6]) : en échangeant de la sorte avec les bibliothèques C natives de la plateforme supportée, la plate-forme peut gérer facilement tous les textes Unicode valides ainsi que les fichiers de classes compilées (format alternatif portable, indépendant de l'endianness et de la taille des mots).

UTF-16

Article détaillé : UTF-16.

L’UTF-16 est un bon compromis lorsque la place mémoire n’est pas trop restreinte, car la grande majorité des caractères Unicode assignés pour les écritures des langues modernes (dont les caractères les plus fréquemment utilisés) le sont dans le plan multilingue de base et peuvent donc être représentés sur 16 bits. La version française de l’ISO/CEI 10646 nomme ces mots de 16 bits des "seizets", mais la version internationale les décrit cependant bien comme de classiques mots de 16 bits composés de deux octets, et soumis aux règles usuelles de boutisme.

Codage UTF-16
hi \ lo | DC00 | DC01 | … | DFFF
D800 | 10000 | 10001 | … | 103FF
D801 | 10400 | 10401 | … | 107FF
⋮ | ⋮ | ⋮ | ⋱ | ⋮
DBFF | 10FC00 | 10FC01 | … | 10FFFF

Les points de code des 16 plans supplémentaires nécessitent une transformation sur deux mots de 16 bits:

  • on soustrait 0x10000 au point de code, ce qui laisse un nombre de 20 bits dans l'étendue 0..0xFFFFF
  • les 10 bits de poids fort (un nombre entre 0 et 0x3FF) sont additionnés à 0xD800, et donnent la première unité de code dans la demi-zone haute (0xD800..0xDBFF)
  • les 10 bits de poids faible (un nombre entre 0 et 0x3FF) sont additionnés à 0xDC00, et donnent la seconde unité de code dans la demi-zone basse (0xDC00..0xDFFF)

Comme la plupart des caractères couramment usités résident dans le plan de base, l'encodage des plans supplémentaires est souvent peu testé dans les logiciels, conduisant à des bugs ou des problèmes de sécurité même dans des logiciels largement diffusés[7]. Certains cadres légaux, tels le GB 18030, peuvent demander le support des plans supplémentaires, ceux-ci contenant notamment des caractères présents dans les noms propres.

Il est possible de déterminer le début de la séquence de codage à partir d’un point quelconque d’un texte représenté en UTF-16 en effectuant au maximum une lecture supplémentaire, uniquement si ce codet est dans la demi-zone basse. Cette forme est plus économique et plus facile à traiter rapidement que l’UTF-8 pour la représentation de textes contenant peu de caractères ASCII (U+0000 à U+007F).

Toutefois, cette transformation possède deux schémas de codage incompatibles qui dépendent de l’ordonnancement des octets dans la représentation d’entiers sur 16 bits. Pour résoudre cette ambiguïté et permettre la transmission entre systèmes hétérogènes, il est nécessaire d’adjoindre une information indiquant le schéma de codage utilisé (UTF-16BE ou UTF-16LE), ou bien de préfixer le texte codé avec la représentation du point de code valide U+FEFF (assigné au caractère « espace insécable de largeur nulle », un caractère aujourd’hui réservé à ce seul usage en tant que marqueur d’ordonnancement des octets), puisque le point de code “renversé” U+FFFE valide est un non-caractère, interdit dans les textes conformes à Unicode et ISO/CEI10646.

L’autre défaut d’UTF-16 est qu’un texte transformé avec lui et transmis avec l’un ou l’autre des deux schémas de codage contient un grand nombre d’octets nuls ou ayant une valeur en conflit avec les valeurs d’octets réservées par certains protocoles d’échange.

C’est notamment le codage qu’utilise la plate-forme Java en interne, ainsi que Windows pour ses APIs compatibles Unicode (avec le type "WCHAR").

UTF-32

Article détaillé : UTF-32.

L’UTF-32 est utilisé lorsque la place mémoire n’est pas un problème et que l’on a besoin d’avoir accès à des caractères de manière directe et sans changement de taille (hiéroglyphes).

L’avantage de cette transformation normalisée est que tous les codets ont la même taille. Il n’est donc pas nécessaire de lire des codets supplémentaires pour déterminer le début de la représentation d’un point de code.

Toutefois, ce format est particulièrement peu économique (y compris en mémoire) puisqu’il « gaspille » inutilement au moins un octet (toujours nul) par caractère — à l’exception des caractères du plan supplémentaire à usage privé B. La taille en mémoire d’un texte joue négativement sur les performances puisque cela nécessite plus de lectures et écritures sur disque en cas de saturation de la mémoire vive, et que cela diminue aussi les performances du cache mémoire des processeurs.

Pour les textes écrits dans les langues modernes actuelles (hormis certains caractères rares du plan idéographique supplémentaire), et n’utilisant donc que les points de code du plan multilingue de base, cette transformation double la quantité mémoire nécessaire par rapport à l’UTF-16.

Comme l’UTF-16, l’UTF-32 possède plusieurs schémas de codage dépendant de l’ordonnancement des octets composant un entier de plus de 8 bits (deux schémas de codage de l’UTF-32 sont normalisés, UTF-32BE et UTF-32LE). Il est donc aussi nécessaire de préciser ce schéma de codage, ou de le déterminer en préfixant le texte par la représentation en UTF-32 du point de code U+FEFF. Comme l’UTF-16, la présence d’octets nuls dans les schémas de codage normalisés de l’UTF-32 le rend incompatible avec de nombreux protocoles d’échange entre systèmes hétérogènes.

Aussi ce format n’est utilisé le plus souvent que très localement pour certains traitements en tant que forme intermédiaire plus facile à manipuler, et on lui préfère souvent la transformation UTF-16 souvent plus performante pour traiter et stocker des quantités importantes de textes, la conversion entre les deux étant très simple à réaliser, et très peu coûteuse en termes de complexité de traitement.

En fait, de très nombreuses bibliothèques de traitement de textes sont écrites uniquement avec l’UTF-16 et sont plus performantes qu’en UTF-32, même lorsque les textes contiennent des caractères des plans supplémentaires (car ce cas de figure reste rare dans la très grande majorité des cas).

On notera toutefois que la transformation en UTF-32 utilise des codets sur 32 bits, dont de très nombreuses valeurs peuvent ne représenter aucun point de code valide (valeurs hors des deux intervalles représentant les points de code valides U+0000 à U+D7FF et U+E000 à U+10FFFF), donc aucun caractère valide ou réservé (toute information qui y serait contenue ne peut donc pas être du texte au sens d’Unicode). La transmission de textes utilisant ces valeurs invalides de codets dans un des schémas de codage normalisés de l’UTF-32 est interdite pour tout système conforme à Unicode (il faut utiliser plutôt les points de code à usage privé), puisqu’il sera impossible de les représenter dans une autre transformation UTF avec lesquelles les trois UTF normalisées sont bijectivement compatibles.

Norme chinoise GB 18030

Il s’agit d’une transformation de l’Unicode qui n’est pas définie par le Consortium Unicode, mais par l’administration de normalisation en Chine, où son support est obligatoire dans les applications. Historiquement c’était un jeu de caractères codé, qui a été étendu pour supporter l’intégralité du répertoire UCS par une transformation algorithmique complétant une large table de correspondance d’un code à l’autre.

Les polices de caractères Unicode

Affirmer qu’Unicode code des caractères revient à affirmer qu’il attribue un numéro à des symboles abstraits, selon un principe de codage logique. Unicode ne code en revanche pas les représentations graphiques des caractères, les glyphes. Il n’y a donc pas une bijection entre la représentation du caractère et son numéro, puisque toutes les variantes graphiques de style sont unifiées.

De plus, contrairement à une police ASCII ou latin-1 classique, la sélection d’un glyphe par un code n’est pas unique et est souvent contextuelle, et peut aussi afficher le même glyphe pour des codes différents. Ainsi, le caractère français « é » peut-il être décrit de deux manières : soit en utilisant directement le numéro correspondant au « é », soit en faisant suivre le numéro du « e » par celui de l’accent aigu sans chasse. Quelle que soit l’option choisie, le même glyphe sera affiché. On dira du premier caractère qu’il est précomposé, du second que c’est une composition (deux caractères forment un seul glyphe composé des deux). Ceci est autorisé et même hautement recommandé car les différentes formes de codage sont classées par Unicode comme « canoniquement équivalentes », ce qui signifie que deux formes de codage équivalentes devraient être traitées de façon identique.

De nombreux caractères composites sont dans ce cas et peuvent être codés de ces deux manières (ou plus, certains caractères composés pouvant être décomposés de plusieurs façons, notamment quand ils comportent plusieurs signes diacritiques). Le plus souvent, le caractère précomposé est préférable pour le codage du texte, si celui-ci existe (c’est le cas pour le grec polytonique, par exemple, lequel, codé en décomposition, peut ne pas être satisfaisant graphiquement : selon les polices de caractères, les différents constituants du glyphe étant parfois mal disposés et peu lisibles). Toutefois, tous les caractères composites ne disposent pas d’un point de code unique pour leur forme précomposée.

De même, certains systèmes d’écriture, comme la devânagarî ou les caractères arabes, nécessitent un traitement complexe des ligatures : les graphèmes changent en effet de forme en fonction de leur position et/ou par rapport à leurs voisines (voir Variante contextuelle et Lettre conjointe). La sélection du glyphe correct à utiliser nécessite un traitement permettant de déterminer la forme contextuelle à sélectionner dans la police, alors même que toutes les formes contextuelles sont codées de façon identique en Unicode.

Pour ces raisons, la police Unicode doit être utilisée très prudemment. Avoir une police qui représente un certain nombre ou toutes les représentations graphiques que l’on peut obtenir avec Unicode n’est pas suffisant, il faut en plus que le système d’affichage possède les mécanismes de représentation idoines (le moteur de rendu) capable de gérer les ligatures, variantes contextuelles et formes conjointes de certaines écritures. Au contraire, une police qui ne représente que certains caractères mais qui sait comment les afficher mérite mieux le terme de « police Unicode ». Enfin, il existe des contraintes techniques dans les formats de polices de caractère, qui les empêche de supporter la totalité du répertoire et, en pratique, il est en 2009 impossible de trouver une police de caractères unique supportant tout le répertoire.

Une police de caractères Unicode est donc seulement une police permettant d’afficher directement un texte codé selon toutes les formes autorisées par Unicode, et permettant de supporter un sous-ensemble cohérent adapté à une ou plusieurs langues pour supporter une ou plusieurs écritures. Aucune police de caractère Unicode ne peut « fonctionner » seule, et le support complet de l’écriture nécessite un support de celles-ci dans un moteur de rendu, capable de détecter les formes de codage équivalentes, rechercher les formes contextuelles dans le texte et sélectionner les différents glyphes d’une police codée avec Unicode, en s’aidant au besoin de tables de correspondances incluses dans la police elle-même.

Détails techniques

Bibliothèques logicielles

La bibliothèque logicielle multi plate-forme ICU permet de manipuler des données unicodées. Un support d’Unicode spécifique à certaines plates-formes (non compatible quant au code-source) est également fourni par les systèmes modernes (Java, MFC, GNU/Linux).

Les types à utiliser pour stocker des variables Unicode, sont les suivants :

Types compatibles avec Unicode dans les langages de programmation
Langage de programmation | Type pour un seul caractère | Type pour tout texte
C | char[4][a] ou wchar_t[2][b] | char[] ou wchar_t[]
C++ | char[4][a] ou wchar_t[2][a] | char[] ou wchar_t[] ou std::string ou std::wstring
Java | char[2] ou int[c] | char[] ou String
Bibliothèque ICU (pour C/C++ ou Java) | UChar | UChar[] ou String, UnicodeString
JavaScript ou ECMAScript | char[d] | string
C# ou J# | Char | string
Delphi | char[4][a] ou widechar[2] | string[a] ou widestring
Python |  | unicode

Notes

  1. ↑ a, b, c, d et e En UTF-8
  2. ↑ On notera toutefois que le type wchar_t du langage C ne permet pas toujours de coder tous les caractères Unicode, car la norme de ce langage ne prévoit pas de nombre minimum suffisante pour ce type standard. Cependant de nombreux compilateurs du langage définissent wchar_t sur 32 bits (voire 64 bits sur les environnements manipulant les entiers standards sur 64 bits), ce qui suffit pour stocker n’importe quel point de code Unicode normalisé. Mais d’autres compilateurs représentent wchar_t sur 16 bits (notamment sous Windows en environnement 16 ou 32 bits), voire sur 8 bits seulement (notamment dans les environnements embarqués ne disposant pas d’un système d’exploitation d’usage général) car wchar_t peut utiliser la même représentation que le type char qui compte un minimum de 8 bits.
  3. ↑ De manière similaire au C et au C++, le langage Java dispose de type unitaire permettant de coder 16 bits, mais ne permettant pas de coder un seul point de code d’une valeur quelconque (le type natif char est un entier positif sur 16 bits seulement). Pour manipuler les caractères normalisés hors du premier plan, il faut utiliser une paire de codets, chacun contenant une valeur égale aux deux codets définis par la forme UTF-16. Aussi les types d’objets String ou char[2] sont les plus appropriés pour représenter un caractère Unicode. Depuis Java 1.4.1, la bibliothèque standard fournit un support complet d’Unicode grâce au type natif int (qui est un entier défini sur 32 bits) et aux méthodes statiques de la classe standard Character (cependant un objet instancié de ce type Character ne permet pas, tout comme le type natif char, de stocker n’importe quel point de code).
  4. ↑ JavaScript comporte diverses implémentations non normalisées dont certaines plus anciennes ne supportent pas plus de 16 bits par caractère, et parfois seulement 8 bits. Toutefois la norme ECMAScript de ce langage définit une classe utilitaire Character sur 32 bits (en fait basée sur la classe Number) devant supporter tous les points de code des 17 plans normalisés, tandis que les chaines de caractères utilise des caractères codés obligatoirement sur 16 bits (mais sans restriction renforçant l’appariement des unités de code UTF-16, les chaînes ECMAScript de type String n’étant pas restreintes au seul codage UTF-16 mais étant des vecteurs de constantes entières codées sur 16 bits sans restriction, afin d’assurer l’interopérabilité avec Java et d’autres langages qui eux non plus ne renforcent pas les restrictions de conformité UTF-16 dans leurs types natifs de données). Ces deux langages ne supportent pas de typage explicite des variables, le type étant défini dynamiquement par les valeurs qu’on leur assigne (aussi, plusieurs représentations internes sont possibles, leurs différences étant normalement transparentes pour le programmeur).

Unicode souffre toutefois encore d’un faible support des expressions rationnelles par certains logiciels, même si des bibliothèques comme ICU et Java peuvent les supporter. Un tel support n’a pas encore été standardisé pour ECMAScript et n’est fourni qu’avec l’aide de bibliothèques créées avec le langage ou des interfaces d’interopérabilité avec d’autres systèmes (notamment avec CORBA, COM) ou langages (notamment C++ et Java).

Partitionnement

Le partitionnement à jour peut être trouvé sur le site officiel d’Unicode. Cependant, vu le rôle important d’Unicode, (ISO 10646) on décrira ici les principaux blocs de caractères. Les noms français sont les noms officiels de l’ISO/CEI 10646, la norme internationale bilingue qui reprend les mêmes caractères qu’Unicode. Ils sont aussi officiels que les noms anglais.

L'ancienne norme Unicode 1.0 est obsolète et incompatible avec la norme ISO 10646 et la norme Unicode 1.1 et toutes ses versions ultérieures ; la principale incompatibilité est celle des blocs de caractères Hangul utilisés pour l’écriture de la langue coréenne qui ont changé de position et dont les anciens points de code ont depuis été assignés à d’autres blocs. La table ci-dessous est compatible avec ISO 10646 (toutes versions) et Unicode 1.1 (ou ultérieur).

Note : La casse des noms de bloc n’est pas normative. « Latin de base » est donc équivalent à « LATIN DE BASE ».

Plan multilingue de base (PMB, 0000 à FFFF)

Points de code |  | Nom officiel du bloc | Commentaires
Début | Fin
0000 | 007F | Latin de base | voir norme ISO 646, code ASCII
0080 | 009F | Non utilisé | voir plage non utilisée norme ISO 8859 et ISO 8859-1
00A0 | 00FF | Supplément Latin-1 | voir norme ISO 8859, code ISO 8859-1
0100 | 017F | Latin étendu A |
0180 | 024F | Latin étendu B |
0250 | 02AF | Alphabet phonétique international (API) | Alphabet phonétique international
02B0 | 02FF | Lettres modificatives avec chasse |
0300 | 036F | Diacritiques | voir Diacritique
0370 | 03FF | Grec et copte |
0400 | 04FF | Cyrillique | voir Alphabet cyrillique
0500 | 052F | Supplément cyrillique | voir Alphabet cyrillique
0530 | 058F | Arménien | voir langue Arménien
0590 | 05FF | Hébreu | voir Alphabet hébreu
0600 | 06FF | Arabe | voir alphabet arabe
0700 | 074F | Syriaque | voir langue Syriaque
0780 | 07BF | Thâna |
0900 | 097F | Dévanâgarî |
0980 | 09FF | Bengali | voir langue indienne Bengalî
0A00 | 0A7F | Gourmoukhî |
0A80 | 0AFF | Goudjerate |
0B00 | 0B7F | Oriya | voir langue indienne Oriya
0B80 | 0BFF | Tamoul | voir langue indienne Tamoul
0C00 | 0C7F | Télougou | voir langue indienne Télougou
0C80 | 0CFF | Kannara | voir langue indienne Kannara
0D00 | 0D7F | Malayalam | voir langue indienne Malayalam
0D80 | 0DFF | Singhalais | voir langue indo-européenne Cingalais
0E00 | 0E7F | Thai | voir langue asiatique Thaï
0E80 | 0EFF | Lao | voir langue asiatique Lao
0F00 | 0FFF | Tibétain | voir langue asiatique Tibétain
1000 | 109F | Birman | voir langue asiatique Birman
10A0 | 10FF | Géorgien | voir langue Géorgien
1100 | 11FF | Jamos hangûl |
1200 | 137F | Éthiopien | voir Alphabet éthiopien
13A0 | 13FF | Chérokî |
1400 | 167F | Syllabaires autochtones canadiens unifiés |
1680 | 169F | Ogam | voir Écriture oghamique
16A0 | 16FF | Runes | voir Alphabet runique
1700 | 171F | Tagalog | ou tagal, voir langue Tagalog
1720 | 173F | Hanounóo |
1740 | 175F | Bouhide |
1760 | 177F | Tagbanoua |
1780 | 17FF | Khmer | voir langue Khmer
1800 | 18AF | Mongol | voir langue mongol (Монгол хэл, mongγol kele)
1900 | 194F | Limbou |
1950 | 197F | Taï-le |
19E0 | 19FF | Symboles khmers | voir langue Khmer
1D00 | 1D7F | Supplément phonétique |
1E00 | 1EFF | Latin étendu additionnel |
1F00 | 1FFF | Grec étendu |
2000 | 206F | Ponctuation générale | voir aussi ponctuation
2070 | 209F | Exposants et indices |
20A0 | 20CF | Symboles monétaires |
20D0 | 20FF | Signes combinatoires pour symboles |
2100 | 214F | Symboles de type lettre |
2150 | 218F | Formes numérales |
2190 | 21FF | Flèches |
2200 | 22FF | Opérateurs mathématiques | voir Opérateurs mathématiques
2300 | 23FF | Signes techniques divers | 2336 à 237A = symboles APL
2400 | 243F | Pictogrammes de commande |
2440 | 245F | Reconnaissance optique de caractères | voir Reconnaissance optique de caractères
2460 | 24FF | Alphanumériques cerclés |
2500 | 257F | Filets |
2580 | 259F | Pavés |
25A0 | 25FF | Formes géométriques |
2600 | 26FF | Symboles divers |
2700 | 27BF | Casseau |
27C0 | 27EF | Divers symboles mathématiques - A |
27F0 | 27FF | Supplément A de flèches |
2800 | 28FF | Combinaisons Braille | voir Braille
2900 | 297F | Supplément B de flèches |
2980 | 29FF | Divers symboles mathématiques-B |
2A00 | 2AFF | Opérateurs mathématiques supplémentaires |
2B00 | 2BFF | Divers symboles et flèches |
2D30 | 2D6F | Alphabet Tifinagh et néo-Tifinagh | voir Alphabet berbère et Tifinagh (langue berbère)
2E80 | 2EFF | Formes supplémentaires des clés CJC | voir Chinois, japonais et coréen (CJC)
2F00 | 2FDF | Clés chinoises (K'ang-hsi ou Kangxi) | voir Dictionnaire de caractères de Kangxi
2FF0 | 2FFF | Description idéophonographique |
3000 | 303F | Symboles et ponctuation CJC | voir ponctuation et Chinois, japonais et coréen (CJC)
3040 | 309F | Hiragana | voir Hiragana (langue japonaise)
30A0 | 30FF | Katakana | voir Katakana (langue japonaise)
3100 | 312F | Bopomofo | voir Bopomofo (notation taïwanaise et chinoise)
3130 | 318F | Jamos de compatibilité hangûls |
3190 | 319F | Kanboun |
31A0 | 31BF | Bopomofo étendu | voir Bopomofo (notation taïwanaise et chinoise)
31F0 | 31FF | Extension phonétique katakana | voir Katakana (langue japonaise)
3200 | 32FF | Lettres et mois CJC cerclés | voir Chinois, japonais et coréen (CJC)
3300 | 33FF | Compatibilité CJC | voir Chinois, japonais et coréen (CJC) (unités de mesure)
3400 | 4DB5 | Supplément A aux idéophonogrammes unifiés CJC | voir Chinois, japonais et coréen (CJC)
4DC0 | 4DFF | Hexagrammes du Classique des mutations ou Yi Jing | voir Yi Jing, Hexagramme
4E00 | 9FA5 | Idéophonogrammes unifiés CJC | voir Chinois, japonais et coréen (CJC)
A000 | A48F | Syllabaire yi des Monts frais |
A490 | A4CF | Clés yi |
AC00 | D7A3 | Hangûl |
D800 | DB7F | Demi-zone haute | points de code invalides isolément D800 à D83F : codets hauts utilisés en UTF-16 pour les points de code du plan multilingue complémentaire D840 à D87F : codets hauts utilisés en UTF-16 pour les points de code du plan idéographique complémentaire D880 à DB3F : codets hauts utilisés en UTF-16 pour les points de code des plans complémentaires réservés D840 à D87F : codets hauts utilisés en UTF-16 pour les points de code du plan complémentaire réservé
☒DB80 | DBFF | Partie à usage privé de la demi-zone haute | points de code invalides isolément DB80 à DBBF : codets hauts utilisés en UTF-16 pour les points de code de la zone supplémentaire A à usage privé DBC0 à DBFF : codets hauts utilisés en UTF-16 pour les points de code de la zone supplémentaire B à usage privé
DC00 | DFFF | Demi-zone basse | points de code invalides isolément DC80 à DFFD : codets bas utilisés en UTF-16 pour des points de code assignés aux caractères valides ou réservés des plans complémentaires (assignés, réservés ou à usage privé) DFFE à DFFF : codets bas pouvant être utilisés en UTF-16 pour la représentation de points de code assignés aux non-caractères en fin de chaque plan, lorsque le codet haut est le dernier assigné dans la demi-zone haute pour chaque plan complémentaire (assigné, réservé ou à usage privé)
☒E000 | F8FF | Zone à usage privé |
F900 | FAFF | Idéogrammes de compatibilité CJC | voir Chinois, japonais et coréen (CJC)
FB00 | FB4F | Formes de présentation alphabétiques |
FB50 | FDFF | Formes A de présentation arabes | voir alphabet arabe
FDD0 | FDEF |  | non-caractères
FE00 | FE0F | Sélecteurs de variante |
FE20 | FE2F | Demi-signes combinatoires |
FE30 | FE4F | Formes de compatibilité CJC | voir Chinois, japonais et coréen (CJC)
FE50 | FE6F | Petites variantes de forme |
FE70 | FEFF | Formes B de présentation arabes |
FF00 | FFEF | Formes de demi et pleine chasse |
FFF0 | FFFD | Caractères spéciaux |
FFFE | FFFF |  | non-caractères

Plan multilingue complémentaire (PMC, 10000 à 1FFFF)

Points de code |  | Nom officiel du bloc | Commentaires
Début | Fin
10000 | 1007F | Syllabaire linéaire B ou syllabaire mycénien |
10080 | 100FF | Idéogrammes du linéaire B |
10100 | 1013F | Nombres égéens |
10300 | 1032F | Alphabet italique |
10330 | 1034F | Gotique | voir langue Gotique
10380 | 1039F | Ougaritique | voir langue Ougaritique
10400 | 1044F | Déséret |
10450 | 1047F | Shavien |
10480 | 104AF | Osmanya |
10800 | 1083F | Syllabaire chypriote |
1D000 | 1D0FF | Symboles musicaux byzantins |
1D100 | 1D1FF | Symboles musicaux occidentaux |
1D300 | 1D35F | Symboles du Classique du mystère suprême |
1D400 | 1D7FF | Symboles mathématiques alphanumériques |
1FFFE | 1FFFF |  | non-caractères

Plan idéographique complémentaire (PIC, 20000 à 2FFFF)

Points de code |  | Nom officiel du bloc | Commentaires
Début | Fin
20000 | 2A6D6 | Supplément B aux idéogrammes unifiés CJC |
2F800 | 2FA1F | Supplément aux idéogrammes de compatibilité CJC |
2FFFE | 2FFFF |  | non-caractères

Plans complémentaires réservés (30000 à DFFFF)

Points de code |  | Nom officiel du bloc | Commentaires
Début | Fin
3FFFE | 3FFFF |  | non-caractères
4FFFE | 4FFFF |  | non-caractères
5FFFE | 5FFFF |  | non-caractères
6FFFE | 6FFFF |  | non-caractères
7FFFE | 7FFFF |  | non-caractères
8FFFE | 8FFFF |  | non-caractères
9FFFE | 9FFFF |  | non-caractères
AFFFE | AFFFF |  | non-caractères
BFFFE | BFFFF |  | non-caractères
CFFFE | CFFFF |  | non-caractères
DFFFE | DFFFF |  | non-caractères

Plan complémentaire spécialisé (PCS, E0000 à EFFFF)

Points de code |  | Nom officiel du bloc | Commentaires
Début | Fin
E0000 | E007F | Étiquettes |
E0100 | E01EF | Supplément de sélecteurs de variante |
EFFFE | EFFFF |  | non-caractères

Plans complémentaires à usage privé (F0000 à 10FFFF)

Points de code |  | Nom officiel du bloc | Commentaires
Début | Fin
☒F0000 | FFFFD | Zone supplémentaire A à usage privé |
FFFFE | FFFFF |  | non-caractères
☒100000 | 10FFFD | Zone supplémentaire B à usage privé |
10FFFE | 10FFFF |  | non-caractères

Les zones à usage privé indiquées par le symbole ☒ ne contiennent pas les mêmes œils d’une police à l’autre et doivent donc être évités pour le codage de textes destinés aux échanges entre systèmes hétérogènes. Toutefois ces points de codes à usage privé sont valides et peuvent être utilisés dans tout traitement automatisé conforme aux normes Unicode et ISO 10646, y compris entre systèmes différents s’il existe un accord mutuel privé concernant leur usage.

En l’absence d’accord entre les deux parties, des systèmes utilisant ces caractères peuvent rejeter les textes les contenant, car les traitements qu’ils leur font subir pourraient ne pas fonctionner correctement ou causer des problèmes de sécurité; les autres systèmes qui n’attribuent aucune fonction spéciale à ces caractères doivent en revanche les accepter comme valides et les conserver comme partie intégrante des textes, comme s’il s’agissait de symboles graphiques, même s’ils ne savent pas les afficher correctement.

Les non-caractères listés sont des points de code valides, mais ils ne sont pas (et ne seront jamais) assignés à des caractères normalisés. Leur usage dans le codage de textes transmis entre systèmes (même si identiques) est interdit, car il est impossible de les rendre compatibles avec les formes de transformation universelles normalisées (dont UTF-8, UTF-16, UTF-32) les schémas de codage correspondants, et les autres codages normalisés compatibles avec Unicode et ISO 10646 (BOCU-1, SCSU, différentes versions de la norme chinoise GB 18030, etc.). Toutefois certains systèmes les génèrent et les utilisent localement, mais pour un traitement strictement interne destiné à faciliter l’implémentation des algorithmes de traitement de textes utilisant les autres caractères normalisés.

Parmi ces derniers non-caractères figurent les points de code valides mais réservés aux demi-zones (privées ou non). Ces points de code ne peuvent pas être utilisés individuellement pour coder un caractère. Ils servent uniquement pour la forme de transformation universelle UTF-16 (et les schémas de codage correspondants) pour représenter sur deux codets (à 16 bits chacun) des points de code valides dans un des 16 plans complémentaires (certaines combinaisons de codets correspondent à des caractères valides de ces plans, standards ou privés, d’autres combinaisons peuvent ne représenter aucun caractère valide car elles correspondraient à des non-caractères de ces plans complémentaires, et sont donc interdites dans les textes conformes à la norme).

Les autres zones libres (non assignées à un bloc nommé normalisé, ou les points de code laissés libres et réservés dans les blocs nommés existants) sont réservés pour un usage ultérieur dans des versions futures d’Unicode et ISO 10646, mais sont valides. Tout système traitant des textes contenant ces points de code réservés doivent les accepter sans les filtrer. Unicode définit des propriétés par défaut pour les hypothétiques caractères correspondants, afin de préserver la compatibilité des systèmes (conformes à la norme Unicode) avec les futurs textes conformes qui les contiendraient. Aucune application conforme ne doit leur assigner un caractère ou une sémantique spéciale (les zones privées sont destinées à cet usage).

Notes et références

  1. ↑ « Announcing The Unicode Standard, Version 7.0 », The Unicode Blog, 16 juin 2014
  2. ↑ jacques andré, « Caractères, codage et normalisation – de Chappe à Unicode »,, vol. vol. 6 no 3-4, hermes lavoisier,‎ 2002 (ISBN 2-7462-0594-7, lire en ligne), p. 13-49.
  3. ↑ http://unicode.org/reports/tr33/
  4. ↑ Unicode Technical Report #17: Unicode Character Encoding Model
  5. ↑ (en) The Unicode Standard, Version 5.0, Chapter 16 : Special Areas and Format Characters, p354
  6. ↑ Les séquences UTF-8 doivent être les plus courtes possibles. Cette restriction doit être vérifiée pour éviter certaines failles de sécurité, du type "/../" – se reporter aux détails dans la section « Inconvénients » de l'article UTF-8.
  7. ↑ « Code in Apache Xalan 2.7.0 which can fail on surrogate pairs », Apache Foundation

Voir aussi

Sur les autres projets Wikimedia :

· unicode, sur le Wiktionnaire

· Unicode, sur Wikibooks

Liens externes

Références normatives

  • (en) Page d’accueil du Consortium Unicode.
    • (en) The Unicode Standard — lien permanent vers la dernière version publiée de la norme Unicode.
    • (en) UAX #41: Common References for UAXs — liste officielle des références utilisées dans la norme Unicode.
    • (en) Unicode Technical Reports — annexes normalisées, normes techniques et rapport techniques (dont certains pour d'anciennes versions d'Unicode).
    • (fr) Tables de caractères Unicode annotées avec les équivalences — collection de documents PDF.
    • (en) UTS #10 : Unicode Collation Algorithm (UCA) — algorithme d’ordonnancement normalisé Unicode (pour le tri, la reconnaissance ou la recherche de texte).
  • (en) RFC 3629 : UTF-8, a transformation format of ISO 10646 — standard (novembre 2003) ; remplace RFC 2279 (obsolète).

Références informatives

  • (fr) Traduction française officielle des normes ISO/CEI 10646 et Unicode.
  • (fr) Unicode 5.0 en pratique, par Patrick Andries, paru chez Dunod (avril 2008) — ouvrage de référence.
  • (en) RFC 1641 : Using Unicode with MIME — expérimental (juillet 1994)
  • (en) RFC 2152 : UTF-7, A Mail-Safe Transformation Format of Unicode — expérimental (mai 1997) ; remplace RFC 1642 (obsolète)
  • (en) RFC 2482 : Language Tagging in Unicode Plain Text — informatif (janvier 1999)
  • (en) RFC 3718 : A Summary of Unicode Consortium Procedures, Policies, Stability, and Public Access — informatif (février 2004)
  • (en) RFC 5891 : Internationalized Domain Names in Applications (IDNA): Protocol — standard proposé ; remplace RFC 3490 et RFC 3491 (obsolètes), met à jour RFC 3492 Punycode
  • (en) Unicode — The Movie Tous les 109.242 charactères de Unicode 6.0 dans un seul film

Tables et données

  • (en) The Gallery of Unicode Fonts : inventaire de 1 239 fontes (août 2007) et des caractères qu’elles comprennent.
  • (en) Unicode and Multilingual Support in HTML, Fonts, Web Browsers and Other Applications, le site d’Alan Wood recensant les différents blocs d’Unicode avec pages de tests, conseils et liens vers les ressources, polices, et utilitaires permettant de saisir et d’afficher les blocs en question avec les navigateurs Web ou dans d’autres logiciels.
  • (en) (de) Decode Unicode, Wiki recensant et commentant tous les 98 884 caractères d’Unicode en images.
  • (fr) CoeurLumiere.com, simple table des caractères Unicode de U+0000 à U+FFFF (attention, certains sont invalides en HTML et ne sont pas signalés).

Utilitaires

  • (fr) Graticiel BabelMap, visualisation et recherche des caractères des polices Unicode, de leurs propriétés et de leurs codages UTF-8, UTF-16, UTF-32.
  • (en) Un clavier pour taper tous les caractères Unicode dans Mozilla Firefox
  • (fr) The Unicode Sliderule, outil Internet de saisie de caractères Unicode.
  • (en) Shapecatcher Retrouver un caractère Unicode en le dessinant.
  • (fr) Lexilogos/clavier/unicode convertir des caractères en unicode.

Guides d'utilisation

  • (en) Markus Kuhn, UTF-8 and Unicode FAQ
  • (en) Comment utiliser Unicode sur les systèmes libres GNU/Linux ou compatibles.
  • (fr) Chapitres 2, 3, et 4 du livre Fontes et codages.
  • (fr) La saisie et l’échange de caractères phonétiques avec Unicode, à l’usage des novices.
  • (fr) Exemple d’utilisation d’Unicode et tests.
  • (fr) Vos applications Web en Unicode, (article et tutoriel sur la mise en pratique d'Unicode avec PHP et MySQL ainsi que l’implémentation côté client dans les documents XML, HTML et CSS)

Discussions et articles

  • (fr) Unicode, écriture du monde ? (vol.6 (2003) de la revue Document numérique, 364 pages). Intérêt : points de vue critiques (typographes, informaticiens, égyptologues, etc.) et entretien avec Ken Whistler, directeur technique du Consortium Unicode.
  • (en) Otfried Cheong, UniHan (article sur les problèmes d’unification des sinogrammes avec UniHan dans Unicode)

Articles connexes

  • Table des caractères Unicode
  • Unification des caractères sinographiques (UniHan)
  • Liste de caractères Unicode latins précomposés
  • Duplication de caractères Unicode
  • Caractères APL/APL2 en Unicode
  • Stringprep


TOUTES LES BALISES META : Liste complète des balises META

Tutorial HTML : Liste complète des balises META avec syntaxe, descriptions, commentaires, exemples, conseils ...

Même si les moteurs de recherche accordent une importance grandissante au contenu de vos pages, les balises META vous
permettent de livrer aux moteurs de recherche une description précise de vos pages, ce qui ne peut qu'améliorer leur référencement...

Par ailleurs, il faut préciser que les fonctions des balises META ne se limitent pas au seul réferencement...

Les balises META doivent être placées dans l'entête de votre page HTML, c'est à dire entre les balises <HEAD> </HEAD> .

Chaque page de votre site peut renfermer des balises META qui doivent être de préférence en rapport avec le contenu de la page.

Syntaxe générale : <META name="xxx" CONTENT="xxx">

Balise META : title
Syntaxe : <title>Titre de votre site</title>
Nombre de caractères : 100 Maxi

Fonctions :

- Permet d'afficher le titre votre site dans la barre supérieure de votre navigateur.
- C'est ce titre qui sera pris en compte comme intitulé de lorsqu'un utilisateur l'ajoutera à ses favoris ou signets.
- Le moteur de recherche s'en servira comme titre pour votre site.

Note :

- Ne pas oublier de définir cette balise pour chaque page, en évitant de mettre home, index, accueil pour la première page.

Exemple :

<title>Toutes les balises META</title>

Balise META : <meta name="publisher">

Syntaxe : <meta name="publisher" content="nom">

Compatible avec certains moteurs

Fonctions :

- Permet de spécifier l'éditeur du site.
- Il est possible de mettre plusieurs noms.

Ne pas la confondre avec la balise <meta name="author">

Exemple :

<meta name="publisher" content="webpublisher">

Balise META : <meta name="keywords">

Syntaxe :

<meta name="keywords" content="Les mots clés ici">
ou
<meta name="keywords" lang="xx" content="Les mots clés ici">
Cette balise possède l'attribut lang qui peut définir la langue utilisé pour votre site
(fr pour française, en pour Anglaise, en-us pour Américaine, de pour Allemande, it pour Italienne...)

Si votre site comporte plusieurs langues vous pouvez employer plusieurs balise keywords.

Nombre de caractères : 1000 Maxi ou 100 mots clés.
Dans le nombre de caractères, il ne faut pas oublier de compter les lettres accentuées une fois codées en Html. Par exemple la lettre "à", codée &agrave; en Html compte pour huit caractères.

Compatible avec tous moteurs.

Fonction :

- Indique aux moteurs de recherche les mots clés en rapport avec votre site.

Notes :

- Il ne faut surtout pas répéter plusieurs fois de suite le même mot clé ( vous risqueriez d'être "black-listé" ).
- Les mots clés sont séparés soit par une virgule, un espace ou une virgule et un espace, c'est au choix.

Balise META : <meta name="reply-to">

Syntaxe : <meta name="reply-to" content="email">

CompatIble avec tous moteurs

Fonction :

- Permet de spécifier l'adresse e-mail principale du site. Il est préférable de ne mettre qu' une seule adresse.

Exemple :

<meta name="reply-to" content="info@nomdusite.com">

Meta-Tag : <meta name="category">
Syntaxe : <meta name="category" content="nom">
Compatible avec certains moteurs

Fonction :0

- Permet de spécifier la catégorie de votre site. Utilisé par certains moteurs qui gênèrent un classement par catégorie.

Commentaire(s) :

- Cette balise n'est pas indispensable.

Exemple :

<meta name="category" content="internet">

Balise META : <meta name="robots">
Syntaxe : <meta name="robots" content="valeurs">
CompatIble avec tous moteurs

Fonction :

- Permet de spécifier les répertoires à référencer ou à exclure lorsque les robots (spiders) des moteurs examineront votre site.

Commentaire(s) :

- Cette balise n'est pas indispensable, il faut cependant penser à exclure les répertoires sensibles.

Valeurs possibles de l'attribut content :

Valeurs | Description
index | La page sera indexée par le robot
noindex | La page ne sera pas indexée par le robot.
follow | Les liens contenus dans la page seront indexés.
nofollow | Les liens contenus dans la page ne seront pas indexés.

Exemple :

<meta name="robots" content="index, follow"> : le moteur indexera la page et suivra tous les liens.

Balise META : <meta name="distribution">
Syntaxe : <meta name="distribution" content="valeur">
Trois valeurs possibles :

global : Accès Web
local : Accès uniquement en local
iu : Accès Intranet

Compatible avec certains moteurs

Fonction :

- Cette balise META définit la destination (public) de vos documents présents sur votre site Web.

Commentaire(s) :

- Cette balise n'est pas obligatoire

.Exemple :

<meta name="distribution" content="global">

Balise META : <meta name="description">
Syntaxe : <meta name="Description" content="Description de votre site...">
Nombre de caractères : 200 Maxi

Compatible avec tous moteurs

Fonctions :

- Cette description est prise en compte par le moteur de recherche comme description de la page dans laquelle elle est insérée.
- Les mots que constituent cette phrase sont aussi considérés comme des mots clés par la plupart des moteurs.

Commentaire(s) :

- Cette balise possède un attribut lang qui permet de définir la langue utilisé pour votre site (fr pour française, en pour Anglaise, en-us pour Américaine, de pour Allemande, it pour Italienne...).
- Evitez les phases de type : Le meilleur site du monde .... Le nec plus ultra .....
- Evitez les accents,sur certains moteurs il ne sont pas pris en compte.

Exemple :

<meta name="Description" content="Liste et syntaxe des principales balises meta.">

Balise META : <meta name="revisit-after">
Syntaxe : <meta name="revisit-after" content="nombre">
Compatible avec certains moteurs.

Fonctions :

- Permet de spécifier au spider (robot du moteur) de réindexer votre site suivant l'intervalle en jours donnée.
- 15 days" ou "30 days" sont les meilleurs compromis.

Commentaire(s) :

- Cette balise n'est pas indispensable.

Exemple :

<meta name="revisit-after" content="15 day">

Balise META : <meta name="author">
Syntaxe : <meta name="author" lang="fr" content="prénom nom">
Compatible avec tous moteurs.

Fonctions :

:- Permet d'identifier l'auteur du site.

Commentaire(s) :

- Mettre le nom en majuscule, et le prénom en minuscule.
- Vous pouvez si vous le souhaitez mettre plusieurs auteurs séparés par une virgule.

Exemple :
<meta name="author" lang="fr" content="Pierre DUPONT">

Balise META : <meta name="copyright">
Syntaxe : <meta name="copyright" content="nom">
Compatible avec certains moteurs.

Fonctions :

- Permet de spécifier le copyright du site.

Commentaire(s) :

- Vous pouvez mettre plusieurs noms séparés par une virgule.

Exemple :

<meta name="copyright" content="webagence">

Balise META : <meta name="generator">
Syntaxe : <meta name="generator" content="logiciels">
Compatible avec certains moteurs

Fonctions :

- Permet de spécifier les logiciels utilisés lors de la création du site Internet.

Commentaire(s) :

- Cette balise n'est pas indispensable.
- Vous pouvez mettre plusieurs logiciels séparés par des virgules.

Exemple :

<meta name="generator" content="Dreamweaver, Flash , Firewoks">

Balise META : <meta name="abstract">
Syntaxe : <meta name="abstract" content="Description de votre site ">
Nombre de caractères : 200 maxi

Compatible avec quelques rares moteurs

Fonctions :

- Phrase prise en compte par quelques moteurs de recherche comme description du site
- Les mots de cette phrase sont considérés comme des mots clés pour la plupart des moteurs de recherche.

L'Erreur à ne pas commettre : Evitez une phrase qui n'a aucun sens.

Commentaire(s) :

- Cette balise est très rare, elle n'est pas obligatoire.
- Cette balise ne remplace pas la balise classique <meta name="description"...>, elle doit venir en complément sur la 1ère page.
- Evitez les phases de type : Le meilleur site du monde .... Le nec plus ultra .....
- Evitez les accents,sur certains moteurs il ne sont pas pris en compte.

Exemple :

<meta name="abstract" content="Ce site présente ...">

Balise META : <meta name="identifier-url">
Syntaxe : <meta name="identifier-url" content="url">
Compatible avec tous moteurs.

Fonctions :

- Permet de spécifier l'url du site.

Commentaire(s) :

- Ne mettez pas cette balise sur toutes vos pages.
- Saissisez l'url d'entrée de votre site.
- Vous devez spécifier une seule URL..

Exemple :

<meta name="identifier-url" content="http://www.balisesmeta.com/">

          Exemple de balises META de ce document.

          <!-- Barre de titre navigateur + Titre favoris + Titre(2) métamoteurs -->
          <title>TOUTES LES BALISES META : Liste complète des balises META</title>
          <!-- Texte métamoteurs -->
          <meta name="Description" content="Liste des balises META avec syntaxe, exemples, commentaires">
          <!-- Mots-clés métamoteurs -->
          <meta name="Keywords" content="balise meta, balises meta, meta, meta tag, meta tags, balise, balises, tag, tags, balises html, balise html">
          <!-- Titre(1) métamoteurs -->
          <meta name="Subject" content="LISTE DES BALISES META">
          <!-- Classement métamoteurs -->
          <meta name="Classification" content="HTML, TAGS">
          <!-- Technique -->

          <meta name="ROBOTS" content="INDEX,FOLLOW,ALL">
          <meta name="Copyright" content="2004 Générale d'édition électronique">
          <meta name="Expires" content="never">
          <meta name="Rating" content="general">
          <meta name="Robots" content="index,follow,all">
          <meta name="Revisit-after" content="7 days">
          <meta name="Author" content="Générale d'édition électronique">
          <meta name="Identifier-URL" content="http://www.balisesmeta.com/">
          <meta name="Rev" content="">
          <meta name="distribution" content="Global">
          <meta name="Category" content="Internet">
          <meta name="Language" content="French">
          <meta name="Email" content="">
          <meta http-equiv="Reply-to" content="">
          <meta http-equiv="Content-Language" content="FR">
          <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">


Créer des liens

Vu dans ... http://fr.openclassrooms.com/informatique/cours et ou http://www.siteduzero.com

Au chapitre précédent, vous avez appris à créer une page HTML toute simple. D'accord, elle n'était pas franchement magnifique, mais c'était une vraie page HTML quand même.

Comme vous le savez, un site web est composé de plusieurs pages. Comment faire pour aller d'une page vers une autre ? À l'aide de liens pardi ! Dans ce chapitre, nous allons justement apprendre à créer des liens entre nos pages.

Je suppose que chacun d'entre vous sait ce qu'est un lien : il s'agit d'un texte sur lequel on peut cliquer pour se rendre sur une autre page.
On peut faire un lien d'une page a.html vers une page b.html, mais on peut aussi faire un lien vers un autre site (par exemple, http://www.siteduzero.com). Dans les deux cas, nous allons voir que le fonctionnement est le même.

Un lien vers un autre site

Il est facile de reconnaître les liens sur une page : ils sont écrits d'une façon différente (par défaut, en bleu et soulignés) et un curseur en forme de main apparaît lorsqu'on pointe dessus.

Je vous propose d'essayer de coder le lien qui amène vers le Site du Zéro, comme à la figure suivante.

Pour faire un lien, la balise que nous allons utiliser est très simple à retenir : <a>. Il faut cependant lui ajouter un attribut, href, pour indiquer vers quelle page le lien doit conduire.

Par exemple, le code ci-dessous est un lien qui amène vers le Site du Zéro, situé à l'adresse http://www.siteduzero.com :

<a href="http://www.siteduzero.com">Site du Zéro</a>

Nous allons placer ce lien au sein d'un paragraphe. Voici donc comment reproduire l'exemple de la figure précédente :

<p>Bonjour. Souhaitez-vous visiter le <a href="http://www.siteduzero.com">Site du Zéro</a> ?<br />
C'est un bon site ! ;-)</p>

Par défaut, le lien s'affiche en bleu souligné. Si vous avez déjà ouvert la page, le lien s'affiche en violet.
Nous verrons comment changer cette apparence lorsque nous étudierons le CSS.

Si vous voulez faire un lien vers un autre site, il suffit donc de copier son adresse (on parle d'URL) en http://. Notez que certains liens commencent parfois par https:// (sites sécurisés) ou d'autres préfixes (ftp://,…).

Si vous faites un lien vers un site qui comporte une adresse un peu bizarre avec des &, comme : http://www.site.com/?data=15&name=mateo21, vous devrez remplacer tous les « & » par « &amp; » dans votre lien

comme ceci : http://www.site.com/?data=15&amp;name=mateo21.

Vous ne verrez pas la différence, mais cela est nécessaire pour avoir une page web correctement construite en HTML5.

Les liens que nous venons de voir sont appelés liens absolus car on indique l'adresse complète. Nous allons maintenant voir que l'on peut écrire les liens d'une façon un peu différente, ce qui va nous être utile pour faire des liens entre les pages de notre site.

Un lien vers une autre page de son site

Nous venons d'apprendre à créer des liens vers des sites existants. Mais je suis sûr que vous aimeriez faire des liens entre les différentes pages de votre site, non ?

Oui, justement, comment je fais pour faire un lien vers une autre page de mon site ? Je ne connais pas son adresse en http://…, je commence à peine à créer mon site là ! Je n'ai pas d'adresse.

En effet, pour le moment, vous êtes en train de créer votre site sur votre ordinateur. Vous êtes le seul à pouvoir le voir et il n'a pas encore « d'adresse web » qui commence en http:// comme la plupart des sites. Heureusement, cela ne va pas nous empêcher de travailler.

Deux pages situées dans un même dossier

Pour commencer, nous allons créer deux fichiers correspondant à deux pages HTML différentes. Comme je suis très inspiré, je vous propose de les appeler page1.html et page2.html. Nous aurons donc ces deux fichiers sur notre disque dans le même dossier (figure suivante).

Plusieurs fichiers HTML dans un même dossier Plusieurs fichiers HTML dans un même dossier

Comment faire un lien de la page 1 vers la page 2, sans avoir d'adresse en http:// ? En fait, c'est facile : si les deux fichiers sont situés dans le même dossier, il suffit d'écrire comme cible du lien le nom du fichier vers lequel on veut amener.

Par exemple : <a href="page2.html">. On dit que c'est un lien relatif.

Voici le code que nous allons utiliser dans nos fichiers page1.html et page2.html.

page1.html
<p>Bonjour. Souhaitez-vous consulter <a href="page2.html">la page 2</a> ?</p>
page2.html

La page 2 (page d'arrivée) affichera simplement un message pour indiquer que l'on est bien arrivé sur la page 2 :

<h1>Bienvenue sur la page 2 !</h1>

Deux pages situées dans des dossiers différents

Les choses se corsent un petit peu si les pages sont situées dans des dossiers différents. Idéalement, elles ne devraient pas être trop loin l'une de l'autre (dans un sous-dossier par exemple).

Imaginons que page2.html se trouve dans un sous-dossier appelé contenu, comme à la figure suivante.

Le fichier page2.html se trouve à l'intérieur du dossier contenu Le fichier page2.html se trouve à l'intérieur du dossier contenu

Dans ce cas de figure, le lien doit être rédigé comme ceci :

<a href="contenu/page2.html">

S'il y avait plusieurs sous-dossiers, on écrirait ceci :

<a href="contenu/autredossier/page2.html">

Et si le fichier ne se trouve pas dans un sous-dossier mais dans un dossier « parent », on fait comment ?

Si votre fichier cible est placé dans un dossier qui se trouve « plus haut » dans l'arborescence, il faut écrire deux points comme ceci :

<a href="../page2.html">

Résumé en images

Les liens relatifs ne sont pas bien compliqués à utiliser une fois qu'on a compris le principe. Il suffit de regarder dans quel « niveau de dossier » se trouve votre fichier cible pour savoir comment écrire votre lien. La figure suivante fait la synthèse des différents liens relatifs possibles.

Les différents liens relatifs Les différents liens relatifs

Un lien vers une ancre

Une ancre est une sorte de point de repère que vous pouvez mettre dans vos pages HTML lorsqu'elles sont très longues.
En effet, il peut alors être utile de faire un lien amenant plus bas dans la même page pour que le visiteur puisse sauter directement à la partie qui l'intéresse.

Pour créer une ancre, il suffit de rajouter l'attribut id à une balise qui va alors servir de repère. Ce peut être n'importe quelle balise, un titre par exemple.
Utilisez l'attribut id pour donner un nom à l'ancre. Cela nous servira ensuite pour faire un lien vers cette ancre. Par exemple :

<h2 id="mon_ancre">Titre</h2>

Ensuite, il suffit de créer un lien comme d'habitude, mais cette fois l'attribut href contiendra un dièse (#) suivi du nom de l'ancre. Exemple :

<a href="#mon_ancre">Aller vers l'ancre</a>

Normalement, si vous cliquez sur le lien, cela vous amènera plus bas dans la même page (à condition que la page comporte suffisamment de texte pour que les barres de défilement se déplacent automatiquement).
Voici un exemple de page comportant beaucoup de texte et utilisant les ancres (j'ai mis n'importe quoi dans le texte pour remplir ) :

<h1>Ma grande page</h1>

<p> Aller directement à la partie traitant de :<br />

<a href="#cuisine">La cuisine</a><br />

<a href="#rollers">Les rollers</a><br />

<a href="#arc">Le tir à l'arc</a><br /> </p>

<h2 id="cuisine">La cuisine</h2>

<p>... (beaucoup de texte) ...</p> <h2 id="rollers">Les rollers</h2> <p>... (beaucoup de texte) ...</p> <h2 id="arc">Le tir à l'arc</h2> <p>... (beaucoup de texte) ...</p>

S'il ne se passe rien quand vous cliquez sur les liens, c'est qu'il n'y a pas assez de texte. Dans ce cas, vous pouvez soit rajouter du blabla dans la page pour qu'il y ait (encore) plus de texte, soit réduire la taille de la fenêtre de votre navigateur pour faire apparaître les barres de défilement sur le côté.

L'attribut id sert à donner un nom « unique » à une balise, pour s'en servir de repère. Et, croyez-moi, vous n'avez pas fini d'entendre parler de cet attribut. Ici, on s'en sert pour faire un lien vers une ancre mais, en CSS, il nous sera très utile pour « repérer » une balise précise, vous verrez.
Évitez cependant de créer des id avec des espaces ou des caractères spéciaux, utilisez simplement, dans la mesure du possible, des lettres et chiffres pour que la valeur soit reconnue par tous les navigateurs.

Lien vers une ancre située dans une autre page

Alors là je vous préviens, on va faire le Mégamix !

L'idée, c'est de faire un lien qui ouvre une autre page ET qui amène directement à une ancre située plus bas sur cette page.
En pratique c'est assez simple à faire : il suffit de taper le nom de la page, suivi d'un dièse (#), suivi du nom de l'ancre.

Par exemple : <a href="ancres.html#rollers">

… vous amènera sur la page ancres.html, directement au niveau de l'ancre appelée rollers.

Voici une page qui contient trois liens, chacun amenant vers une des ancres de la page de l'exemple précédent :

<h1>Le Mégamix</h1>
<p>
    Rendez-vous quelque part sur une autre page :<br />
    <a href="ancres.html#cuisine">La cuisine</a><br />
    <a href="ancres.html#rollers">Les rollers</a><br />
    <a href="ancres.html#arc">Le tir à l'arc</a><br />
</p>

Cas pratiques d'utilisation des liens

Je vais essayer de vous montrer ici quelques cas pratiques d'utilisation des liens. Par exemple, saviez-vous qu'il est très facile de faire des liens qui lancent un téléchargement ? Qui créent un nouvel e-mail ? Qui ouvrent une nouvelle fenêtre ?

Non ? Eh bien nous allons voir tout cela ici.

Un lien qui affiche une infobulle au survol

Vous pouvez utiliser l'attribut title qui affiche une bulle d'aide lorsqu'on pointe sur le lien. Cet attribut est facultatif.

Vous aurez un résultat ressemblant à la figure suivante.

Une infobulle Une infobulle

La bulle d'aide peut être utile pour informer le visiteur avant même qu'il n'ait cliqué sur le lien.
Voici comment reproduire ce résultat :

<p>Bonjour. Souhaitez-vous visiter le <a href="http://www.siteduzero.com" title="Réservé aux débutants">Site du Zéro</a> ?</p>

Un lien qui ouvre une nouvelle fenêtre

Il est possible de « forcer » l'ouverture d'un lien dans une nouvelle fenêtre. Pour cela, on rajoutera target="_blank" à la balise <a> :

<p>Bonjour. Souhaitez-vous visiter le <a href="http://www.siteduzero.com" target="_blank">Site du Zéro</a> ?<br />
Le site s'affichera dans une autre fenêtre.</p>

Selon la configuration du navigateur, la page s'affichera dans une nouvelle fenêtre ou un nouvel onglet. Vous ne pouvez pas choisir entre l'ouverture d'une nouvelle fenêtre ou d'un nouvel onglet.

Notez cependant qu'il est déconseillé d'abuser de cette technique car elle perturbe la navigation. Le visiteur lui-même peut décider s'il veut ouvrir le lien dans une nouvelle fenêtre. Il fera Maj + Clic sur le lien pour ouvrir dans une nouvelle fenêtre ou Ctrl + Clic pour ouvrir dans un nouvel onglet.

Un lien pour envoyer un e-mail

Si vous voulez que vos visiteurs puissent vous envoyer un e-mail, vous pouvez utiliser des liens de type mailto. Rien ne change au niveau de la balise, vous devez simplement modifier la valeur de l'attribut href comme ceci :

<p><a href="mailto:votrenom@bidule.com">Envoyez-moi un e-mail !</a></p>

Il suffit donc de faire commencer le lien par mailto: et d'écrire l'adresse e-mail où on peut vous contacter. Si vous cliquez sur le lien, un nouveau message vide s'ouvre, prêt à être envoyé à votre adresse e-mail.

Un lien pour télécharger un fichier

Beaucoup d'entre vous se demandent comment cela se passe pour le téléchargement d'un fichier… En fait, il faut procéder exactement comme si vous faisiez un lien vers une page web, mais en indiquant cette fois le nom du fichier à télécharger.

Par exemple, supposez que vous vouliez faire télécharger monfichier.zip. Placez simplement ce fichier dans le même dossier que votre page web (ou dans un sous-dossier) et faites un lien vers ce fichier :

<p><a href="monfichier.zip">Télécharger le fichier</a></p>

C'est tout ! Le navigateur, voyant qu'il ne s'agit pas d'une page web à afficher, va lancer la procédure de téléchargement lorsqu'on cliquera sur le lien.

En résumé

    Les liens permettent de changer de page et sont, par défaut, écrits en bleu et soulignés.

  • Pour insérer un lien, on utilise la balise <a> avec l'attribut href pour indiquer l'adresse de la page cible. Exemple : <a href="http://www.siteduzero.com">.

  • On peut faire un lien vers une autre page de son site simplement en écrivant le nom du fichier : <a href="page2.html">.

  • Les liens permettent aussi d'amener vers d'autres endroits sur la même page. Il faut créer une ancre avec l'attribut id pour « marquer » un endroit dans la page, puis faire un lien vers l'ancre comme ceci :

    <a href="#ancre">.


HTML : la base du web — Alexandre Niveau — Université de Caen Normandie

Vu dans ... HTML : la base du web — Alexandre Niveau — Université de Caen Normandie

HTML : la base du web

Alexandre Niveau
GREYC — Université de Caen
Partiellement adapté du cours de Jean-Marc Lecarpentier

Quelle est la forme d'une page web ?

Les pages web, même extrêmement simples, ne pourraient pas être de simples images. Par exemple,
  • l'internaute veut pouvoir sélectionner le texte (copier-coller)
  • l'affichage dépend de la taille de la fenêtre et de l'écran
  • une image pèse lourd !
démo: fichier texte avec un message, image du texte, document office avec le même message: montrer les différences de taille (du -b)

Une page web est un simple fichier texte, très léger, que le navigateur interprète pour l'afficher joliment démo sur sandbox?

Les informations contenues sur le web sont accessibles de plusieurs façons différentes : navigateurs visuels, mais aussi textuels ou audio, robots…

le fichier texte ne doit pas décrire à quoi doit ressembler la page, mais quelle est la nature de chacun de ses éléments : on parle de sémantique

Sémantique d'une page web

Exemple d'une page wikipédia demander de citer des types d'éléments, puis ajouter * { border: 1px solid black; padding: .1em; } dans l'éditeur de style

Types d'éléments :
  • article, menus
  • titre et sous-titre de la page
  • texte mis en valeur
  • lien
  • paragraphe
  • titre de section
  • infobox
  • image, légende d'une image
  • appel de note
  • galerie
  • liste, item de liste
  • …
Certains éléments sont contenus dans d'autres éventuellement: ajouter la règle background-color: rgba(200,0,0,0.1) !important; padding: 1rem !important; pour voir la hiérarchie…

la structure d'une page web est arborescente

dessiner l'arbre, et faire de même pour un twitter par ex.

HTML, c'est quoi ?

HTML = HyperText Markup Language, langage de balisage hypertextuel
  • un « langage », c'est-à-dire un certain format de fichier texte
  • qui permet de représenter un document hypertextuel (texte avec des liens)
  • en précisant la sémantique de ses éléments et leur structuration en arbre grâce à un balisage on va voir plus loin de quoi il s'agit

De nos jours le HTML ne sert pas qu'à représenter des documents textuels

les pages web incluent des images, des vidéos, des sons

une page web n'est plus forcément un document : elle peut être une application

Mais les principes de base sont toujours les mêmes.

Histoire des langages de balisage

  • SGML : un langage créé par et pour les imprimeurs
  • HTML : un langage de présentation sur écran adapté à l'hypertexte
  • XML : une version simplifiée et extensible de SGML pour gérer des données
  • XHTML : HTML considéré comme une application XML
  • HTML5 : dernière version d'HTML, orientée applications web

Langage de balisage ?

  • Un fichier HTML est un simple fichier texte (contrairement aux fichiers manipulés par les logiciels de traitement de texte, par ex.)
  • Langage de balisage : le contenu est mis en forme avec des balises
  • Une balise est délimitée par les caractères « < » et « > ». Exemple:
    <h1>Mon avis sur le langage HTML</h1>
Le HTML, c'est <em>génial</em> !
  • Ce qui est à l'intérieur d'une balise (entre les crochets) n'apparaît jamais dans le rendu final.
  • En général, les balises vont par deux, une ouvrante et une fermante. Elles ont le même nom (ici h1 et em), mais la balise fermante a un slash au début.
  • L'ensemble « balise ouvrante + contenu + balise fermante » constitue un élément HTML. Dans l'exemple, on a donc un élément de type h1 (un titre) et un élément de type em (du texte mis en valeur).

Arborescence d'éléments

  • Un élément peut contenir d'autres éléments :
    <p>Il est <strong>interdit</strong> de manger de la choucroute ici.</p>
    Ici on a un élément p (un paragraphe) qui contient du texte et un élément strong (du texte mis fortement en valeur).
  • Règle fondamentale : pas de chevauchement de balises…
    <em><strong>ceci est mal balisé</em></strong>
    … sinon on ne sait pas quel élément contient l'autre !
  • Une page HTML est constituée d'une hiérarchie arborescente d'éléments.

Attributs

  • Un élément peut avoir des attributs : ce sont des paramètres de l'élément, qui n'apparaîtront pas comme du texte. Exemple d'un lien (élément a) :
    <a href="http://example.com">un lien vers un site</a>
    Ici l'attribut sert à indiquer l'URL vers lequel pointe le lien.
  • Les attributs prennent toujours place dans une balise ouvrante. Un attribut est formé par un nom (ici href), le signe =, et une valeur entre guillemets.
  • Il peut y avoir plusieurs attributs dans une même balise.

Éléments vides

  • Certains éléments ne servant pas à afficher du texte, ils ne peuvent pas avoir de contenu. Exemple : une image
    <img src="toto.jpg" alt="Une photo de Toto" />
  • Dans ce cas, l'élément n'est constitué que d'une seule balise. On parle d'éléments vides.
  • La balise est en quelque sorte à la fois ouvrante et fermante ; on l'indique en mettant une espace et un slash avant le caractère « > ».

Page HTML minimale

Une page HTML correcte a une certaine structure de base.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8" />
        <title>Hello HTML</title>
    </head>
    <body>
        <h1>Hello HTML</h1>
        <p>Bye now.</p>
    </body>
</html>
Résultat

La figure de droite représente l'arbre DOM (Document Object Model) : c'est la façon dont le navigateur « voit » le HTML.

Structure d'un fichier HTML

Un fichier HTML est composé
  • d'un prologue, qui indique le type de document
  • et de l'élément racine de l'arbre DOM, de type html
L'élément racine est lui-même composé de deux éléments
  • en-tête (élément <head>) : informations de « service » sur le document, permettant notamment aux navigateurs de le présenter et aux robots de l'indexer
  • corps du document (élément <body>) : contenu proprement dit

Prologue et élément racine

XHTML : déclaration XML + DOCTYPE + plusieurs attributs à la racine
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xml:lang="fr"
      lang="fr">
HTML5 : DOCTYPE et élément racine simplifiés
<!DOCTYPE html>
<html lang="fr">

Sans prologue, le navigateur passe en quirks mode : il croit qu'il a affaire à une très vieille page web et essaie d'émuler les anciens navigateurs

En-tête : élément head

Regroupe les « informations de service » sur le document
<head>
  <title>Titre significatif (pour les moteurs de recherche)<title>
  <meta charset="UTF-8" />
  <meta name="ROBOTS" content="INDEX, FOLLOW" />
  <meta name="keywords" content="cours, HTML, licence" />
  <link rel="stylesheet" media="screen" href="diapos.css" />
</head>
L'en-tête contient
  • le titre de la page
  • la déclaration du codage des caractères
  • les métadonnées (descriptives, juridiques…)
  • les feuilles de style CSS
  • les scripts (pas obligatoirement)

Le corps du document : élément body

<body>
  <h2>Un titre de section</h2>
  <p class="intro">
    Ici le texte du paragraphe
    introductif, qui aura une présentation
    spécifique...
  </p>

  <p>
    du texte et encore du texte...,
    parfois <em>mis en valeur</em>, parfois non...
  </p>
</body>

Interprétation des caractères d'espacement en HTML

Le navigateur ne se contente pas d'interpréter les balises quand il met en forme du HTML

Le contenu d'un fichier HTML ne se retrouve pas tel quel à l'écran

En particulier, toute suite de caractères d'espacement (espace, saut de ligne, tabulation) est considérée comme un seul caractère espace par le navigateur

Si on veut vraiment sauter une ligne au milieu d'une phrase, il faut utiliser la balise <br />

Mais attention : il est très rare d'avoir vraiment besoin de sauter une ligne, en général l'utilisation de paragraphes (élément p) suffit et est plus propre

Eléments de bloc et inline

Deux principaux types d'éléments
  • Elements de bloc : structurent le contenu. Par défaut commencent sur une nouvelle ligne.
    titres   : <h1>...</h1> , <h2>...</h2>
paragraphe : <p>
séparateur : <hr />
listes : <ul> et <ol>, qui contiennent des items de liste <li>
division générique : <div>...</div>
  • Eléments inline : s'inscrivent dans le flux du texte. Leur taille dépend de leur contenu.
    image  : <img src="maphoto.jpg" alt="ma photo" />
lien (« ancre ») : <a href="http://www.w3.org">hypertexte</a>
saut de ligne : <br />
inline générique : texte <span>texte spécial</span> texte

Un élément inline doit toujours être intégré dans un élément de bloc

Un élément inline autre qu'une ancre ne peut contenir que des éléments inline

HTML5

HTML5 a introduit un certain nombre de nouveaux éléments.
  • Structuration de la page et du contenu : section, article, main, nav, aside, header, footer, main
  • Illustrations: figure, figcaption
  • Multimédia : audio, video, canvas

Quels éléments choisir ?

L'utilisation des éléments HTML classiques est assez claire, mais ce n'est pas toujours le cas des nouveaux éléments de structuration de HTML5.
  • main : le contenu principal de la page ; doit être unique
  • nav : navigation globale (site) ou locale (dans la page)
  • header : un « en-tête ». Peut être une bannière, mais aussi un en-tête d'article, etc.
  • footer : un « pied ». Peut être un pied de page, mais aussi un pied d'article, etc.
  • article : a du sens indépendamment du reste de la page
  • aside : non indispensable pour la compréhension
  • section : découpage logique, unité thématique à laquelle il serait envisageable d'ajouter un titre (même si en pratique il n'y en a pas forcément).
    • on peut mettre des section dans des article, mais aussi des article dans des section !
    • À ne pas utiliser comme un div générique !

Choix des éléments

Aide à la décision (PDF)

à propos de sections et outline: Don’t Style Headings Using HTML5 Sections

Content Model de HTML5

Basé sur 7 catégories de contenu (l'image SVG non reconnue dans chm)(passer la souris sur l'image)

Détails : recommandation W3C

Éléments transparents : exemple de la balise a

Conformité des fichiers HTML

Un fichier HTML5 est conforme (ou valide) s'il respecte la norme HTML5 du W3C

Un fichier XHTML est conforme s'il respecte la DTD qui a été indiquée dans son prologue (comme tout fichier XML)

On vérifie la conformité grâce au validateur mis en place par le W3C : http://validator.w3.org (validateur local validator.info.unicaen.fr)

Accessibilité

Un aspect fondamental, trop souvent négligé : permettre à tout le monde d'accéder aux informations

C'est l'objectif principal des éléments de structuration de HTML5

Web Accessibility Initiative (WAI)

Outils de test : penser à vérifier l'accessibilité de son site.
  • TAW en ligne
  • Extension TAW de Firefox

WAI-ARIA : définition d'attributs pour l'accessibilité

Règle de base : une page lisible sans style et sans JavaScript a une accessibilité minimum garantie. Penser à toujours regarder à quoi ressemblent vos pages en ne gardant que le HTML. C'est le strict minimum !

Rappelez-vous aussi que bonne accessibilité va généralement de pair avec bonne ergonomie et bon référencement.

Se documenter en ligne : méfiance !

Quand on est dev web, il est fondamental de savoir se documenter en ligne

Les technologies évoluent assez vite : ce qui était vrai il y a 5 ans ne l'est plus forcément

Il faut apprendre à vérifier la pertinence des informations trouvées

évaluer si telle documentation est toujours d'actualité, notamment en fonction de la date de parution

reconnaître les signes : par exemple, si les balises sont en majuscules dans les exemples, la page a probablement une quinzaine d'années ⇒ il est peu probable qu'elle apporte une réponse pertinente à votre question…

Quelques ressources en ligne

Des ressources intéressantes (outre les specs du W3C, pas forcément faciles à lire pour se documenter rapidement) :
  • Mozilla Developer Network (MDN) : une bonne référence, généralement très à jour et fiable. Possède une version en français, moins à jour, mais assez fiable également.
  • CSS-tricks, une référence plutôt fiable pour le CSS
  • w3schools, une référence avec des exemples interactifs bien faits. Attention : ce n'est pas du tout un site officiel du W3C, et il n'est pas toujours à jour. Il peut être risqué de l'utiliser comme référence.

À droite de chaque page de cours, je mets une boîte avec de nombreux liens. Certains visent à approfondir un sujet, d'autres sont des tutoriels que j'ai trouvés bien faits. A priori, commencer par regarder à cet endroit (plutôt que chercher aléatoirement sur le web) peut être une bonne idée.

Spécifications et normes

  • W3C Recommendation : HTML5
  • Spec HTML5 version développeurs
  • WAI : Web Accessibility Initiative stratégies et ressources pour améliorer l'accessibilité des sites web

Références et guides

  • Tous les éléments HTML sur MDN

Sites

  • Site du W3C World Wide Web Consortium
  • Mozilla Developer Network specs, référence, et tutos sur HTML, CSS et JS
  • HTML5 Doctor
  • html5-css3.fr tutos et démos en français
  • Référentiels pour l'accessibilité du web

Tutoriels

  • Tutos HTML sur webplatform.org
  • HTML5: structure globale du document
  • Les balises structurantes de HTML5
  • The section element
  • Avoiding common HTML5 mistakes
  • Introduction to web accessibility (astuces simples, sous forme de slideshow)

Lectures complémentaires

  • The Importance Of HTML5 Sectioning Elements pour l’accessibilité
  • Headings HTML5, au service de la sémantique
  • HTML structural elements de HTML4 à HTML5
  • Structures et sections d'un document HTML5 et algorithme d'outline
  • What every programmer needs to know about encodings and charsets to work with text

Outils

  • Validateur HTML local
  • Validateur HTML du W3C
  • A-checker : vérification de l'accessibilité
  • TAW : un autre vérificateur d'accessibilité
Licence Creative Commons CC-BY-NC-SA

Ce cours est mis à disposition selon les termes de la licence Creative Commons Attribution — Pas d’utilisation commerciale — Partage dans les mêmes conditions 4.0 International.


France

Vu dans ... https://www.lehtml.com/index.htm

Apprendre le langage Html
www.ccim.be/ccim328/html/index.htm

Préambule

Notre objectif dans l'élaboration de cette formation consacrée à la création de pages Web et donc au langage Html a été la simplicité de l'exposé et le souci de fournir des bases saines pour une étude et une utilisation plus poussée.

Nous n'avons nullement la prétention d'être exhaustif et d'être "LA" référence. Nous savons pertinemment que notre synthèse est très subjective et que nous ferons hurler les puristes. Nous espérons cependant vous faire comprendre et apprécier le langage Html et vous donner l'envie d'en apprendre plus au sujet de la publication sur Internet.


Apprendre le langage Html

Vu dans ... https://www.lehtml.com/index.htm

Apprendre le langage Html
www.ccim.be/ccim328/html/index.htm

Préambule

Notre objectif dans l'élaboration de cette formation consacrée à la création de pages Web et donc au langage Html a été la simplicité de l'exposé et le souci de fournir des bases saines pour une étude et une utilisation plus poussée.

Nous n'avons nullement la prétention d'être exhaustif et d'être "LA" référence. Nous savons pertinemment que notre synthèse est très subjective et que nous ferons hurler les puristes. Nous espérons cependant vous faire comprendre et apprécier le langage Html et vous donner l'envie d'en apprendre plus au sujet de la publication sur Internet.

Chapitre 1 : Le Web parle Html

HTML est le langage universel utilisé pour communiquer sur le Web. Votre information sera ainsi transportée sur cette gigantesque toile de réseaux interconnectés qu'est Internet, pour aboutir sur l'ordinateur de votre lecteur grâce à un programme appelé navigateur ou browser.

- Vous avez donc deux interlocuteurs :

1. le browser de votre lecteur

2. et votre lecteur lui-même.

Ce logiciel, que l'on appelle un browser, vous permet de surfer sur le Net et d'afficher sur votre écran les "pages" qu'il a interceptées. Il y a, hélas, beaucoup de marques et de types de browsers différents. Des simples, des archaïques ou des sophistiqués... Les plus connus sont Netscape dans sa version 2, 3 et 4 ainsi Internet Explorer de Microsoft mais il en existe beaucoup d'autres.

- Chaque browser a sa propre façon de travailler.

A la différence de votre traitement de texte préféré qui restitue exactement votre document sur une feuille de papier avec votre police de caractères et votre mise en page, vous ne saurez jamais exactement ce que le browser de votre lecteur du bout du monde affichera sur l'écran de celui-ci.

- En HTML, vous n'avez pas la maîtrise totale de votre document.

Pour transiter le plus rapidement possible sur les lignes téléphoniques, on a adopté un format de texte très compact mais aussi (par conséquence) peu sophistiqué. C'est le bon vieux format de texte pur et dur, sans fioritures du Bloc-notes ou Notepad de Windows par exemple. Et de plus ce format ASCII a été amputé d'un bit (7 bits au lieu de 8) ! Vous serez donc privé de certains caractères spéciaux comme le é pour lesquels il faudra passer par des codes particuliers.

- Mais récompense suprême... Html est un langage universel qui s'adapte à toutes les plate-formes que ce soit
Windows, Macintoch, Unix, OS/2...

En plus du texte adressé à votre lecteur, il vous faudra inclure des instructions pour le browser de celui-ci. Ces instructions seront différenciées de votre texte par les signes < et > par exemple <html>. Ces "instructions" s'appellent des tags ou des balises.

Quand vous écrirez les balises de votre page HTML, il faudra garder à l'esprit :

- qu'une balise marque une action pour le browser (ce qu'il doit faire...).

- que les attributs précisent les modalités de cette action (comment il doit le faire...).

Chapitre 2 : Vos premiers outils

2.1 Vous avez besoin:

· d'un éditeur de texte tout simple comme par exemple le Bloc-notes ou Notepad de Windows ou tout autre équivalent dans votre système d'exploitation.

· d'un browser soit Netscape Navigator (payant) que vous pouvez cependant télécharger gratuitement au site de Netscape (http://home.netscape.com) ou sur les CD de certains mensuels informatiques soit Microsoft Explorer (gratuit également) à télécharger (http://www.microsoft.com) ou dans les revues.

2.2 Vous n'avez pas besoin:

· d'être connecté pour écrire, voir et peaufiner vos pages Html.

· d'avoir le dernier éditeur Html sans doute performant mais coûteux qu'il sera toujours temps d'adopter lorsque vous aurez usé vos petits doigts sur vos premières pages. Nous pensons à Claris Home Page, Frontpage de Microsoft, Hotdog, Hotmetal, WebExpert ou Netscape Editor ainsi qu'aux dizaines d'autres éditeurs que vous rencontrerez sur le Web.

2.3 Conseils

Le langage Html étant un ensemble de balises et d'attributs, il nous paraît utile sinon indispensable de les passer en revue et surtout de les visionner au moins une fois car :

· si les éditeurs Html vous faciliteront grandement la tâche, ils ne sont pas toujours parfaits surtout lors des modifications, annulations ou suppressions en cours de travail. Il vous faudra bien alors vous plonger dans le code source pour corriger les dysfonctionnements.

· les codes source de vous pages préférées sont disponibles (et sans copyright). Il est alors possible de s'en inspirer pour reprendre le procédé sans avoir à réinventer le monde.

· ces mêmes éditeurs Html vous proposeront des termes comme" En-tête, Heading, Cell spacing, Numered List..." qui sont propres au langage Html.

· vous aurez besoin d'une connaissance pointue du Html pour inclure les codes du Javascript ou du VBscript dans vos pages.

Chapitre 3 : Le document Html minimum

3.1 Voici vos premières balises ou tags :

<HTML> | Ceci est le début d'un document de type HTML.
</HTML> | Ceci est la fin d'un document de type HTML.
<HEAD> | Ceci est le début de la zone d'en-tête (prologue au document proprement dit contenant des informations destinées au browser).
</HEAD> | Ceci est la fin de la zone d'en-tête.
<TITLE> | Ceci est le début du titre de la page.
</TITLE> | Ceci est la fin du titre de la page.
<BODY> | Ceci est le début du document proprement dit.
</ BODY> | Ceci est la fin du document proprement dit.

· Vous aurez remarqué qu'à chaque balise de début d'une action, soit <...>, correspond (en toute logique) une balise de fin d'une action </...>.

· Vous noterez aussi que les balises ne sont pas "case sensitive". Il est donc équivalent d'écrire <HTML>, <html>, <Html>, etc.

3.2 Faisons ensemble notre premier document Html:

- Ouvrir l'éditeur de texte.

- Ecrire les codes Html suivants:

<HTML>

<HEAD>

<TITLE>Document Html minimum</TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

- Enregistrer le document avec l'extension .html ou .htm.

- Ouvrir le navigateur.

- Afficher le document via le menu File/Open file...

- Admirer votre premier document Html.

Celui-ci est vide (et c'est normal) mais tout à fait opérationnel! Il faudra maintenant lui fournir votre information à l'intérieur des balises <BODY></BODY>. Remarquez que votre "TITLE" est présent dans la fenêtre de Netscape.

Pour vos éventuelles modifications, il n'est pas nécessaire de rouvrir à chaque fois le navigateur.

· Retourner dans l'éditeur de texte (sans fermer le navigateur).

· Modifier les codes Html.

· Enregistrer le fichier.

· Utiliser la commande Reload du browser ou si celui-ci est paresseux cliquer dans la barre "Location" et faire "Enter".

Chapitre 4 : Le texte

Tout document Html contiendra en majorité du texte. Voyons comment l'agrémenter par quelques balises élémentaires.

Gras | [Bold] | <B>...</B> <STRONG>...</STRONG> | Début et fin de zone en gras
Italique | [Italic] | <I>...</I> <EM>...</EM> | Début et fin de zone en italique
Taille de caractère | [Font size] | <FONT SIZE=?>...</FONT> | Début et fin de zone avec cette taille
Couleur de caractère | [Font color] | <FONT COLOR="#$$$$$$"></FONT> | Début et fin de zone en couleur
A la ligne | [Line break] | <BR> | Aller à la ligne
Commentaires | [Comments] | <!-- *** --> | Ne pas afficher
Centrage | [Center] | <CENTER></CENTER> | Centrer

Ouvrir l'éditeur de texte

<HTML>

<HEAD><TITLE></TITLE></HEAD>

<BODY>texte simple<BR>

<B>texte en gras</B><BR>

<STRONG>texte en gras</STRONG><BR>

<I>texte en italique</I><BR>

<EM>texte en italique</EM><BR>

<B><I>texte en gras et en italique</I></B><BR>

<FONT SIZE=5>texte</FONT>

<FONT COLOR="#0000FF">en bleu</FONT>

<!--C'est fini-->

</BODY>

</HTML>

- Ouvrir le browser

Quelques commentaires s'imposent;

· Le texte tout simple s'écrit sans balises. Il sera repris par le browser avec la police et taille de caractères choisies dans sa configuration par défaut.

· Le browser affiche le texte qu'on lui "dicte" en passant à la ligne lorsque celui-ci atteint le bord de la fenêtre. Pour le forcer à passer outre à cette règle de conduite et à faire un saut à la ligne comme vous le souhaitez, il faut une instruction particulière. C'est la balise <BR>. Celle-ci représente une action ponctuelle et n'a donc pas besoin de balise de fin.

· Le même browser ne tient compte que d'un seul espace entre les mots. Ainsi pour lui
<FONT SIZE=5>texte</FONT>
<FONT COLOR="#0000FF">en bleu</FONT> est équivalent à
<FONT SIZE=5>texte</FONT><FONT COLOR="#0000FF">en bleu</FONT>

· Il n'est pas rare d'utiliser plusieurs balises pour un même élément de texte. Il faut veiller à bien les imbriquer. Ainsi <B><I>...</I></B> est correct et <B><I>...</B></I> risque de vous créer des ennuis.

· La taille dans <FONT SIZE=?> peut être indiquée de deux façons :

1. avec un nombre de 1 à 7. La valeur par défaut étant 3.

2. de façon relative par rapport à la valeur par défaut (ici 0). Soit -3 -2 -1 0 +1 +2 +3.

· Pour les puristes , les balises <I> et <EM>, <B> et <STRONG> ne sont pas totalement équivalentes. Vous verrez en poussant plus avant votre étude du langage Html que <EM> et <STRONG> appartiennent aux définitions structurales (style logique) dont l'apparence dépend des options reprises dans la configuration du browser. Les balises <B> et <I> appartiennent aux formats de présentation (style physique) dont l'apparence dépend de la volonté de l'auteur.

Voici les codes de quelques couleurs basiques.

Bleu | #0000FF | Vert | #00FF00
Blanc | #FFFFFF | Violet | #8000FF
Rouge | #FF0000 | Jaune | #FFFF00
Gris clair | #C0C0C0 | Noir | #000000

Chapitre 5 : Du texte encore...

Des balises de texte, il y en plein des valises! Selon les versions du HTML (nous en sommes à la version HTML 3.2) et l'apparition des éditeurs Html évolués, certains tags sont moins utilisés. D'autres aussi sont tout bonnement d'un emploi rare ou pour le moins particulier.

En voici quelques-uns qui compléteront votre panoplie actuelle.

· Le tag <BLOCKQUOTE>...</BLOCKQUOTE> introduit une citation.
Son utilité serait douteuse si le texte de cette citation n'était introduit avec un léger retrait à gauche et à droite. Ce qui est bien pratique pour agrémenter la présentation.

Voici un texte normal sans blockquote.

Voici un texte avec blockquote. Remarquez le retrait.

Pour la petite histoire ce tag n'était pas prévu dans Netscape Editor de la version Gold 3.0 mais il a été ajouté
à la version Netscape Communicator 4.0. Le même effet peut être réalisé par un tableau ou un tag de liste
vide.

· Vous savez déjà que les browsers ne reconnaissent qu'un espace entre les mots. Ce qui peut se révéler gênant dans certaines situations.
La balise <PRE>...</PRE> affiche un texte dit préformaté. Le browser prend ainsi en compte tous les espaces et sauts de ligne définis à l'écran. P r a t i q u e

Avant que les tableaux ne soient reconnus par les browsers, les braves pionniers du Html devaient employer ce tag pour faire des tableaux.

· Le tag <ADDRESS>...</ADDRESS> pour indiquer une adresse (généralement en fin de document).
Voici mon adresse avec cette balise :
Van Lancker Luc
Rue des Brasseurs, 22
7700 Mouscron (Belgium)

· La balise <U>...</U> souligne le texte.
Comme, par convention, les éléments servant d'hyperlien sont soulignés (c'est le même que dans les fichiers d'aide), on évitera le souligner des éléments de texte pour lui donner de l'importance. On préfèrera la mettre en gras ou dans un format ou une couleur de police différent. Il ne faut donc pas en abuser.

· En parler ou ne pas en parler, voilà la question! Netscape 3.0 et plus (et pas Microsoft Explorer) permet d'afficher un texte clignotant par la balise <BLINK>...</BLINK>. Ce tag est un peu tourné en dérision car il est rapidement ennuyeux. On lui préfèrera une image animée qui peut être débranchée après quelques clignotements.
Particularité Netscape! (uniquement)

· Les tags <SUB>...</SUB> et <SUP>...</SUP> placent le texte respectivement en indice et en exposant. Ainsi, <SUB>escalier</SUB>escalier<SUP>escalier</SUP> aura comme résultat

 |  | escalier
 | escalier |
escalier |  |

· Pour aligner du texte, on a utilisé l'attribut ALIGN ou le tag <CENTER>. Il existe une balise permettant d'aligner différents éléments. c'est le tag :
<DIV align=left>...</DIV>
<DIV align=center>...</DIV>
<DIV align=right>...</DIV>

Cette alternative pour l'alignement horizontal du texte est parfois bien utile pour définir l'alignement d'une portion de texte. Il nous est très utile pour parer à certaines "paresses" de Microsoft Explorer 3.0 par exemple.

· Il existe encore bien d'autres balises que je vous invite à découvrir dans vos études suivantes.

Chapitre 6 : Les titres et les listes

Tout document d'une certaine consistance se doit de présenter, par exemple dans la table des matières, les différents niveaux de son exposé. Html a disposé dès son origine d'outils spécialement conçus à cet effet.

En-têtes | [Heading] | <Hn></Hn> avec n=1 à 6 | Afficher une en-tête de niveau n et sauter une ligne
Liste non-ordonnée | [Bullet list] | <UL></UL> | Afficher le texte sous forme d'une liste non-ordonnée.
Liste ordonnée | [Numbered list] | <OL></OL> | Afficher le texte sous forme d'une liste ordonnée.
Elément de liste | [List items] | <LI> | Voici un élément de la liste
Paragraphe | [Paragraph] | <P></P> | Saut de ligne, insérer une ligne vierge et commencer un paragraphe

Comme d'habitude...

- On ouvre son petit éditeur de texte

<H1>Les mois du printemps</H1>

<UL><LI>avril

<LI>mai

<LI>juin</UL>

<P>

<H3>Les mois d'automne</H3>

<OL><LI>octobre

<LI>novembre

<LI>d&eacute;cembre</OL>

- Et on ouvre son petit browser

Les mois du printemps

· avril

· mai

· juin

Les mois d'automne

1. octobre

2. novembre

3. décembre

- Quelques commentaires s'imposent;

1. &eacute; est l'un de ces caractères spéciaux utilisés pour représenter le é. Les éditeurs Html vous déchargeront de cette corvée.

2. Les paragraphes et les en-têtes peuvent s'aligner à gauche, au centre ou à droite.
<H1 align=left></H1>
<P align=left></P>
<H1 align=center></H1>
<P align=center></P>
<H1 align=right></H1>
<P align=right></P>

3. Les listes peuvent s'imbriquer:
<H4>Les 12 mois</H4>
<UL><LI>Les mois du printemps
<OL><LI>avril
</OL></UL>
Les 12 mois

· Les mois du printemps

1. avril

Chapitre 7 : Les liens

Html (Hyper Text Markup Language) est un langage hypertexte (et hypergraphique) qui vous permet en cliquant sur un mot, généralement souligné (ou une image) de vous transporter;

· vers un autre endroit du document.

· vers un autre fichier Html situé sur votre ordinateur.

· vers un autre ordinateur situé sur le Web.

Ce système d'hypertexte vous est familier car il est également utilisé par les fichiers d'aide de Windows. Ce sont ces liens qui vous permettent de surfer de page en page et qui constituent l'essence des documents Html.

La syntaxe de ces liens entre plusieurs pages, est simple mais entraînera de nombreux commentaires :

<A HREF="URL ou adresse">...</A>

7.1 Lien externe

Tout ordinateur situé sur le réseau Internet possède une adresse ou une URL (Universal Ressource Locator). Html permet d'accéder à toutes les machines et toutes les ressources du Net. Pour peu qu'Internet vous soit un peu familier, ce sont les adresses du type :

http://serveur/chemin.../fichier

ftp://serveur/chemin.../fichier

mailto:utilisateur@hôte

7.2 Lien local

L'organisation classique, et plus que conseillée, d'un site Web consiste à regrouper l'ensemble des éléments de celui-ci (fichiers htm, images, ...) dans un même répertoire. Vous pourrez ainsi "transporter" aisément votre site pour le présenter sur un autre ordinateur et ,but ultime, le charger sur un serveur. Cette façon de procéder est la plus aisée et vous évitera pas mal de problèmes. L'adresse du lien sera alors tout simplement :

fichier.htm

7.3 Lien mixte

Nous entendons par là un lien vers un fichier situé à un autre endroit de votre ordinateur (et donc non situé dans le répertoire de votre site). Attention Danger! En effet, il est peu probable que le serveur Web qui hébergera votre site, possède la même arborescence que votre disque local. L'adresse prendra la forme

file:///lecteur:/répertoire/fichier.htm (en adressage absolu).

../../../fichier.htm (en adressage relatif).

Cette matière d'adressage absolu et relatif dépasse le cadre de cet exposé et je vous invite en cas d'utilisation à vous plonger dans la documentation relative à ce sujet.

7.4 Expérimentons tout ceci.

- Dans l'éditeur de texte,

nous allons créer deux fichiers Htlm.

· le fichier 1.htm:
<A HREF="2.HTM">Aller vers le document 2</A>

· le fichier 2.htm:
<A HREF="1.HTM">Retour au document 1</A>

- On sauve ces deux fichiers dans un même répertoire.

- Le browser vous affichera :

7.5 Les ancres

Des liens peuvent aussi pointer vers un endroit précis du même document ou d'un autre fichier. C'est ce qu'on appelle les ancres, ancrages ou pointeurs [Anchor].

Point d'ancrage | <A NAME="***">...</A> | Ceci est une cible
Lien vers une ancre dans la même page | <A HREF="#***">...</A> | Lien vers la cible *** dans la même page
Lien vers une ancre dans une autre page | <A HREF="URL#***">...</A> | Lien vers la cible *** dans une autre page

Plusieurs liens à l'intérieur d'un même document supposent que ce document présente une certaine longueur sinon une longueur certaine (et donc un temps de chargement assez long). Ainsi, on préférera généralement à cette technique le découpage d'un longue page en un ensemble de plusieurs pages de dimension plus réduite.

Chapitre 8 : Les images

8.1 GIF ou JPEG?

Avant de passer aux balises, il faut savoir ce qui suit.

· Les deux formats d'image (maximum 256 couleurs) reconnus sur le Web, sont le format GIF (version 89a) et le format JPEG. Pour le format GIF, on retiendra la caractéristique "entrelacé" qui permet de charger progressivement l'image lors de l'ouverture de la page. Ces deux formats donnent des résultats assez équivalents bien que JPG soit plutôt recommandé pour des images avec des tons nuancés ou dégradés.

· L'ennemi sur le Web, c'est la taille des images! Plus l'image sera grande, plus le temps de chargement sera long... au risque de décourager vos visiteurs. Si cela est possible, une image en 16couleurs peut très bien faire l'affaire. Présenter une petite image indiquant un lien vers l'image complète est également un bon conseil.

· Il n'est pas inutile de prévoir dans votre panoplie de compositeur Web, un logiciel de retouche d'images. A ce propos "Paint Shop Pro" a la triple qualité d'être disponible en shareware, d'être très intuitif et d'être performant. En outre, un tel logiciel vous permettra de composer vos propres images et ainsi de personnaliser vos pages.

· Dois-je rappeler qu'il est très facile de se faire une bibliothèque d'images tout en surfant sur le Web? Avec Netscape, il suffit de se positionner sur l'image, de cliquer avec le bouton droit de la souris et de suivre les instructions du menu déroulant (Save Image As...).

8.2 Le code Html est :

<IMG SRC="Adresse de l'image"> Afficher l'image qui se trouve à l'adresse...

La balise image possède de nombreux attributs.

Texte alternatif alt="****" | Pour les browser n'ayant pas l'option "image" activée
Dimensions width=? height=? | Hauteur et largeur (en pixels)
border=? (en pixels) | Bordure
align=top align=middle align=botton align=left align=right | Alignement

8.3 Commentaires :

· En Html, l'image ne fait pas partie de votre document. Le browser va la chercher à l'adresse indiquée. Généralement, on place les images dans le même répertoire que les pages Html.

· Presque en conséquence logique de ceci, le fait d'utiliser la même image à plusieurs reprises dans un fichier Html ne modifie en rien sa taille.

· Prévoir un texte pour les browsers n'ayant pas l'option image activée, permet au lecteur de ne pas perdre le fil de l'exposé et peut-être d'activer cette option pour découvrir votre oeuvre.

· Il est important pour la fluidité de l'affichage de préciser la taille en hauteur et largeur de l'image car le browser peut ainsi connaissant l'emplacement à réserver pour celle-ci, continuer à afficher le texte. Cette information vous est donnée par Paint Shop Pro.

8.4 L'attribut Align

L'attribut align positionne l'image par rapport au texte

<IMG SRC="HELP.gif" align=TOP>Fichier d'aide

<IMG SRC="HELP.gif" align=CENTER>Fichier d'aide

<IMG SRC="HELP.gif" align=BOTTOM>Fichier d'aide

8.5 Lien sur image

Les balises sont :

<A HREF="fichier.htm"><IMG SRC="image.gif"></A>

Remarquons que les images cliquables sont entourées d'une bordure.

Chapitre 9 : Les séparateurs

Les browsers intègrent un outil de mise en forme intéressant pour clarifier la présentation de votre texte. C'est la ligne horizontale.

La syntaxe en est fort simple:

Ligne horizontale [Horizontal Rule] <HR> Insérer une ligne horizontale

Ce tag fort simple, nous permettra de comprendre un peu mieux le fonctionnement du navigateur. D'abord, vous avez déjà découvert au fil de vos erreurs qu'il est plutôt gentil car il s'efforce toujours d'afficher quelque chose. Ensuite, il vous ménage le travail en prenant à sa charge des valeurs par défaut d'un certain nombre d'attributs. Dans le cas présent, les valeurs par défaut de la balise <HR> sont : une épaisseur de trait de 2 pixels, un alignement centré et une largeur de 100% de la fenêtre. Vous pouvez très bien modifier au gré de votre fantaisie les valeurs de ces différents attributs.

<HR size=?> | Epaisseur en pixels
<HR width=?> | Largeur en pixels
<HR width="%"> | Largeur en % de la fenêtre
<HR align=left> <HR align=right> <HR align=center> | Alignement gauche Alignement droite Alignement centré

Il est donc tout à fait équivalent d'écrire:

· <HR> ou

· <HR size=2 align=center width="100%"

Je vous propose un petit exercice:

- Avec l'éditeur de texte

<H3 align=center>Van Lancker Luc</H3>

<HR align=center size=8 width="50%">

- Avec le browser

- Commentaires :

· On préférera spécifier la largeur en % de la fenêtre plutôt qu'en pixels car l'affichage s'adaptera ainsi à toutes les tailles et résolutions d'écran.

· On peut préférer l'usage d'images comme séparateur (comme c'est la cas ici) pour personnaliser son ouvrage.

Chapitre 10 : Les arrière-plans

Le langage Html permet d'agrémenter la présentation du document d'un arrière-plan [background] coloré ou composé d'une image. Ce qui apporte un élément "artistique" à votre page.

La balise à utiliser ne pose pas de problème :

Couleur d'arrière-plan <BODY BGCOLOR="#$$$$$$">

Donc, pas de problèmes! On fait un essai...

<BODY BGCOLOR="#000088">

<H1>Bonjour</H1>

</BODY>

Joli! Mais la lisibilité n'est pas parfaite. Heureusement, des balises sont prévues pour modifier les couleurs utilisées par défaut par le browser pour le texte et les liens.

Couleur de texte | <BODY TEXT="#$$$$$$">
Couleur de lien | <BODY LINK="#$$$$$$">
Lien visité | <BODY VLINK="#$$$$$$">
Lien actif | <BODY ALINK="#$$$$$$">

Reprenons notre exemple;

<BODY BGCOLOR="#000088" TEXT="#FFFF00">

<H1>Bonjour</H1>

</BODY>

On peut aussi prévoir un fond en image. Cette image (petite de préférence) est affichée en mosaïque par le browser. Attention aux raccords... comme lorsque vous posez du papier peint.

Texture d'arrière-plan <BODY BACKGROUND="Adresse">

Ce qui peut nous donner :

<BODY BACKGROUND="PAPER.gif">

<H1>Bonjour</H1>

</BODY>

Chapitre 11 : Les tableaux

En Html, les tableaux servent non seulement à aligner des chiffres mais surtout à placer des éléments à l'emplacement que vous souhaitez. L'usage des tableaux est donc très fréquent.

Un tableau est composé de lignes et de colonnes qui forment les cellules du tableau.

Les balises de base sont donc :

Définition du tableau | [Table] | <TABLE></TABLE> | Début et fin de tableau
Définition d'une ligne | [Table Row] | <TR></TR> | Début et fin de ligne
Définition d'une cellule | [Table Data] | <TD></TD> | Début et fin de cellule

11.1 Un tableau à deux lignes et deux colonnes, et donc à quatre cellules se représente comme suit :

<TABLE>

<TR><TD>1</TD><TD>2</TD></TR>

<TR><TD>3</TD><TD>4</TD></TR>

</TABLE>

11.2 Si vous souhaitez y adjoindre des bordures :

Bordure de cadre

[Border]

<TABLE border=?></TABLE>

<TABLE border=2>

<TR><TD>1</TD><TD>2</TD></TR>

<TR><TD>3</TD><TD>4</TD></TR>

</TABLE>

Il y a encore trois éléments (définis par défaut mais modifiables) :

L'espace entre les cellules ou l'épaisseur des lignes du quadrillage | <TABLE cellspacing=?>
L'enrobage des cellules ou l'espace entre le bord et le contenu | <TABLE cellpadding=?>
La largeur de la table | <TABLE width=?> <TABLE width=%>

Construisons un exemple :

<TABLE border=2 cellspacing=10>

<TR><TD>1</TD><TD>2</TD></TR>

<TR><TD>3</TD><TD>4</TD></TR>

</TABLE>

<TABLE border=2 cellpadding=10>

<TR><TD>1</TD><TD>2</TD></TR>

<TR><TD>3</TD><TD>4</TD></TR>

</TABLE>

Chapitre 12 : Les cellules des tableaux

Nous n'en avons pas fini avec les tableaux. Allons plus loin dans notre étude en nous penchant sur les cellules de ces tableaux.

Avant toutes choses, les cellules peuvent contenir tous les éléments Html déjà passés en revue soit :

· du texte

· des images

· des liens

· des arrière-plans

· et même des tableaux (eh oui!)

Bien que l'allure de votre tableaux soit déjà déterminée, chaque cellule est en quelque sorte un petit univers à part qui a ses propres spécifications. Découvrons les balises.

Largeur d'une cellule | <TD width=?> en pixels
 | <TD width=%> en pourcentage
Fusion de lignes | <TD rowspan=?>
Fusion de colonnes | <TD colspan=?>

Découvrons ceci par des exemples.

Je veux un tableau centré qui occupe 60% de la fenêtre avec sur une ligne, trois colonnes égales. Essayons ceci :

<CENTER><TABLE width=60% border=1>

<TR>

<TD>cellule1</TD>

<TD>cel. 2</TD>

<TD>3</TD>

</TR>

</TABLE></CENTER>

Pas brillant! Et avec la balise de largeur de la cellule?

<CENTER><TABLE width=60% border=1>

<TR>

<TD width=33%>cellule1</TD>

<TD width=33%>cel. 2</TD>

<TD width=34%>3</TD>

</TR>

</TABLE></CENTER>

Impeccable! Prenons le même tableau mais avec 2 lignes.

<CENTER><TABLE width=60% border=1>

<TR><TD width=33%>cellule1</TD><TD width=33%>cel. 2</TD>

<TD width=34%>3</TD></TR>

<TR><TD width=33%>cellule1</TD><TD width=33%>cel. 2</TD>

<TD width=34%>3</TD></TR>

</TABLE></CENTER>

Je souhaite que la première ligne prenne toute la largeur de la ligne. La première cellule doit donc déborder sur 3 cellules horizontales.

<CENTER><TABLE width=60% border=1>

<TR>

<TD colspan=3>cellule 1</TD>

</TR>

<TR> <TD width=33%>cellule 1</TD> <TD width=33%>cel 2</TD>

<TD width=34%>3</TD> </TR>

</TABLE></CENTER>

Dans le même style, je souhaite que la première colonne prenne toute la hauteur de la colonne. La première cellule doit donc déborder sur 2 cellules verticales.

<CENTER><TABLE width=60% border=1>

<TR>

<TD width=33% rowspan=2>cellule 1</TD>

<TD width=33%>cel 2</TD>

<TD width=34%>3</TD>

</TR>

<TR>

<TD width=33%>cel 2</TD>

<TD width=34%>3</TD>

</TR>

</TABLE></CENTER>

Maintenant, comme le disait un gardien de prison de mes connaissances, il est temps de mettre de l'ordre dans les cellules [Je n'ai pas pu résister...].

Ligne de tableau | <TR align=left/center/right> <TR valign=top/middle/bottom> | horizontalement verticalement
Cellule de tableau | <TD align=left/center/right> <TD valign=top/middle/bottom> | horizontalement verticalement

A titre d'exemple, reprenons le tableau suivant :

Avec quelques aménagements, il devient...

<CENTER><TABLE width=60% border=1>

<TR>

<TD colspan=3 align=center>Tarif au ../../..</TD>

</TR>

<TR>

<TD width=33% >Article 1</TD><TD width=33%>Ref 002 </TD>

<TD width=34% align=right>30fr</TD>

</TR>

</TABLE></CENTER>

Pour terminer cette leçon, il est aussi possible de changer la couleur de la cellule.

Couleur de la cellule <TD BGCOLOR="#$$$$$$">

Notre dernier exemple pourrait devenir :

<TD colspan=3 align=center bgcolor="#000088">

Chapitre 13 : Les frames

Quoi de plus simple que les frames? Mais aussi quoi de plus délicat et dangereux (risque de plantage) que les frames? En outre, tous les browsers n'ont pas la possibilité de les afficher.

Pour diviser l'écran en plusieurs fenêtres, les balises sont peu nombreuses :

Zone avec des fenêtres |
<FRAMESET> </FRAMESET> | Début de zone avec des fenêtres Fin de zone avec des fenêtres
Agencement des fenêtres |
<FRAMESET ROWS="..."> | Fenêtres horizontales
<FRAMESET COLS="..."> | Fenêtres verticales

13.1 Il est impératif de travailler avec des exemples. Pour obtenir un agencement ainsi :

Il faut employer les balises suivantes :

<HTML>

<HEAD></HEAD>

<FRAMESET ROWS="30%,70%">

<FRAME>

<FRAME>

</FRAMESET>

</HTML>

Attention! <FRAMESET></FRAMESET> remplace <BODY></BODY>

L'attribut ROWS="hauteur1,hauteur2,...,hauteurN" définit la hauteur des différentes fenêtres en cas de division horizontale.

La hauteur s'exprime en pixels ou en %. Dans ce cas, on veillera à ce que le total soit égal à100%;

13.2 Le même pour un agencement vertical

<FRAMESET COLS="30%,70%">

<FRAME>

<FRAME>

</FRAMESET>

L'attribut COLS="largeur1,largeur2,...,largeurN" définit la largeur des différentes fenêtres en cas de division verticale.

La largeur s'exprime en pixels ou en %. Dans ce cas, on veillera à ce que le total soit égal à100%;

13.3 On peut mélanger les deux :

<FRAMESET ROWS="30%,70%">

<FRAME>

<FRAMESET COLS="30%,70%">

<FRAME>

<FRAME>

</FRAMESET>

</FRAMESET>

13.4 Pour l'instant, nos frames sont vides. On va donc leur donner à manger par des attributs de la balise :

<FRAME .SRC="URL ou adresse du document à afficher dans la fenêtre">

On construit 3 fichiers Html élémentaires que l'on place dans le même répertoire que le fichier de frames :

A.htm | B.htm | C.htm
<HTML><BODY> <H4>A</H4> </BODY></HTML> | <HTML><BODY> <H1>B</H1> </BODY></HTML> | <HTML><BODY> <H1>C</H1> </BODY></HTML>

On reprend le fichier de frame précédent que l'on complète.

<FRAMESET ROWS="30%,70%">

<FRAME SRC="A.htm">

<FRAMESET COLS="30%,70%">

<FRAME SRC="B.htm">

<FRAME SRC="C.htm">

</FRAMESET>

</FRAMESET>

Les ascenseurs, comme à la fenêtre A, apparaissent automatiquement. Par l'attribut de la balise <FRAME> SCROLLING="yes/no/auto" vous pouvez indiquer si la fenêtre doit ou non posséder une barre de défilement.

13.5 Un autre attribut de cette balise <FRAME> est NAME="NOM". Name indique le nom de la fenêtre de telle sorte que cette frame puisse être utilisée comme cible d'un lien hypertexte.

Ainsi, je voudrais faire un lien sur B pour afficher le contenu de ce lien (prenons le fichier A.htm pour éviter de l'encodage) dans C .

Le fichier de frames devient :

<FRAMESET ROWS="30%,70%">

<FRAME SRC="A.htm">

<FRAMESET COLS="30%,70%">

<FRAME SRC="B.htm">

<FRAME SRC="C.htm" NAME="fenetreC">

</FRAMESET>

</FRAMESET>

Et on met un lien vers A.htm dans le fichier B.htm en désignant comme cible la frame C.

<HTML><BODY>

<A HREF="A.htm" TARGET="fenetreC"><H1>B</H1></A>

</BODY></HTML>

L'attribut TARGET peut aussi prendre certaines valeurs prédéfinies :

· _blank qui indique au browser qu'il doit créer une nouvelle fenêtre afin d'y afficher le fichier. Dans ce cas, vous ouvrer en fait un nouveau browser.

· _self qui indique que le fichier sera chargé dans la même fenêtre que celle dans laquelle se trouve le lien.

· _top qui implique l'affichage du fichier sur toute la surface de la fenêtre du browser.

VERIFIEZ TOUJOURS VOS DIFFERENTS LIENS AVEC DES FRAMES. Vous éviterez ainsi que votre beau site ne devienne rapidement une "soupe".

13.6 Par défaut, les cadres sont séparés par des bordures. Il est possible de supprimer ces bordures mais les attributs à utiliser diffèrent selon Netscape ou Internet Explorer. Netscape utilise l'attribut "border=0" et Explorer, les attributs "frameborder=no" et "framespacing=0" (pour enlever l'espace entre les cadres). Le tout cohabite sans problème. La balise devient alors par exemple :

<FRAMESET COLS="30%,70%" border=0 frameborder=no framespacing=0>

13.7 Il y a pour terminer la balise <NOFRAMES>...</NOFRAMES> qui est utilisée pour indiquer le texte que doivent afficher les browsers incapables de gérer les frames. Il est même indiqué de prévoir une page sans fenêtres pour que ces visiteurs puissent profiter quand-même de votre site.

Chapitre 14 : Le choix d'un éditeur

Un éditeur Html s'impose pour vous décharger d'un certain nombre de tâches fastidieuses comme les caractères spéciaux, les codes de couleur, l'encodage des balises, etc.

Comme l'éventail offert est large (une petite cinquantaine sous Windows), il est utile de guider votre choix même si nous entrons ici dans le domaine du subjectif.

14.1 Critères généraux

· La majorité des éditeurs est disponible sur le Net en version d'évaluation. Pourquoi n'en profiteriez-vous pas pour en essayer plusieurs avant de faire votre choix?

· A éviter sinon à proscrire les éditeurs "qui écrivent pour vous". Un éditeur doit vous faciliter le travail tout en vous laissant la main dans l'élaboration de votre page.

· Adoptez un éditeur avec lequel vous vous sentez à l'aise. Même s'il n'est pas le plus côté, il sera votre compagnon de longues heures de travail.

· Les éditeurs Html les plus récents sont WYSIWYG (What You See Is What You Get) ou avec prévisualisation intégrée comme votre traitement de texte. Le codage des balises Html n'apparaît donc plus. Il serait dommage de se priver de cette propriété! Gardez cependant toujours à l'esprit que cette prévisulisation n'est pas (et ne sera jamais) fidèle à 100% par rapport à ce qui sera affiché par le browser et qu'elle ne vous empêche nullement de consulter quand même le code source.

· Pourquoi un? On peut très bien imaginer un éditeur évolué pour le courant et un éditeur de la première génération (plus proche des tags purs et durs) pour les réalisations plus pointues.

14.2. Des noms ! Des noms ... [mis à jour fin 2000]

Dreamweaver | Macromedia Dreamweaver est considéré par beaucoup comme le meilleur éditeur Html du moment. C'est assurément une bonne pointure. Les Webmestres apprécieront sa façon intelligente de concevoir la création de sites (codage Html propre et académique, compatibilité avec les différents navigateurs, mises à jour dans tout le site,...). Il est peut-être un peu déroutant lors de la première prise en main avec ses différentes palettes d'outils mais on s'y habitue aisément. Complet, performant, professionnel et évolutif (même s'il n'y a pas grande différence entre la version 2.0 et 3.0). Un seul handicap cependant, c'est son prix [trop] élevé.
FrontPage 2000 | Microsoft quand tu nous tiens... Le fameux "look and feel" de Windows appliqué à l'éditeur de Microsoft rend sa prise en main des plus aisée par les utilisateurs de Microsoft Office et plus spécialement de Word. Un bon sinon un très bon produit. De plus la version 2000 me semble en très net progrès par rapport à FrontPage 98. Certains (dont l'auteur) reprochent à FrontPage une façon peu académique d'écrire le Html et il n'est pas rare que certaines choses ne passent pas sur les navigateurs de la firme Netscape. Personnellement, je ne comprend pas trop bien leur façon de concevoir et de travailler un site, ce qui ne manquera pas de déconcerter les webmestres.
WebExpert 4.0 | "On savait faire du Html en ce temps là"... WebExpert est le seul éditeur de cette série à ne pas être entièrement "Wysiwyg" et à encore présenter les balises. Et c'est loin d'être inutile car on garde encore la sensation de faire du Html et non du traitement de texte. WebExpert est un éditeur complet, intelligent et respectueux du code et de l'esprit Html. En outre ses scripts et ses aides bien réalisées dépanneront plus d'un concepteur débutant. J'avoue avoir été un peu perdu devant tous ses onglets et autres icônes qui se sont généreusement ajoutés au fil des versions. WebExpert y a perdu sa simplicité d'utilisation et un peu aussi de sa modernité. Atout maître, son prix reste très compétitif.
Adobe GoLive 4.0 | On adore ou on déteste !... Adobe Golive ravira les concepteurs graphiques de par son interface et sa possibilité de "placer" les éléments dans la page Web. Les webdesigneurs d'essence bureautique seront assurément déconcertés voire perdu dans cet univers de palettes et autres outils (un grand écran ne sera pas un luxe). Quant aux puristes du codage Html, on ne peut que leur conseiller de ne pas consulter le code source ou de prévoir une équipe de réanimation sur place. Malgré tout, certains infographistes ne jurent que par Golive. Alors ...
Namo WebEditor 3.0 | Sympathique !.... Plus évolué que FrontPage Express moins complexe que FrontPage 98 ou 2000, cet éditeur devrait ravir les webmestres débutants ou plus avancés qui cherchent à faire du bon travail sur la toile sans devoir passer par ces "usines à gaz", plus performantes peut-être mais d'une approche nettement plus compliquée. Raisonnablement complet, intelligemment conçu, Namo WebEditor laisse l'impression que tout a été pensé pour obtenir un maximum d'efficacité et de convivialité. Pas "Le" meilleur sûrement, mais le plus abordable assurément. Une alternative non négligeable !!!!
Netscape Composer | Inclus dans la suite Netscape Communicator 4.0 et ses déclinaisons suivantes, Netscape Composoer est donc un éditeur gratuit. Autant en profiter pour faire ses premiers pas de Webmestre. Bien conçu, cet éditeur reprend les principales et donc les plus usuelles fonctions du Html. J'ai par exemple toujours apprécié la réalisation des tableaux sous Netscape qui tout étant simple, permet d'avoir un résultat impeccable. Il faut cependant avouer qu'il ne fait plus le poids face aux éditeurs Html spécialisés, abordés ci-dessus. Pour débuter seulement...
FrontPage Express | Commentaires assez similaires. FrontPage Express est inclus dans la suite Microsoft Internet Explorer 4.0, 5.0 et suivantes. FontPage Express est don un éditeur gratuit. Autant en profiter pour faire ses premiers pas de Webmestre. Cet éditeur reprend les fonctions les plus usuelles du Html et sa prise en main est facilitée par une interface qui n'est pas sans rappeler Microsoft Word. Il permet donc de réaliser très rapidement quelques pages Html. Attention cependant aux pièges de FrontPage Express qui (produit Microsoft) "écrit" principalement pour Microsoft Explorer. Mauvaises surprises assurées lors d'une lecture sous un autre navigateur. Pour débuter seulement...
Et autres... | Que nous ne connaissons que de nom. HotDog Webfast HotMetal HomePage PageMill 1st Page 2000 CoffeeCup HTML HomeSite et bien d'autres encore que vous pouvez découvrir en lançant les Yahoo, Lycos, Alta Vista et autres Google sur une recherche avec pour objet "html editor" ou "éditeur html".

14.3. LES EXTENSIONS DE WORD

Malgré plusieurs essais, aucune extension de Word de la version 7 (95) ou 8 (97) ne nous a laissé un souvenir, disons, impérissable... sauf si vous restez aux fonctions toutes simples voire simplistes. Préférez alors FrontPage 98 ou 2000 si vous êtes "accros" des produits Microsoft.

Chapitre 15 : Des conseils en vrac

Le lecteur d'une présentation informatisée fera toujours une corrélation entre la valeur du contenu de celle-ci et la fiabilité de votre application.

Alors testez, testez... il en restera toujours quelque chose.

· Tous les liens sont-ils bien définis?

· Toutes les images sont-elles bien présentes?

· Que se passe-t-il avec un browser différent?

· Et si votre site change d'emplacement?

· Et avec une autre résolution d'écran?

Il est de bon conseil de tester les pages Web avec différents navigateurs (Netscape 2 et/ou 3, Explorer 3.0) et avec différentes résolutions d'écran (640/480, 800/600, 1024/768). Des surprises ne manqueront pas à l'appel (surtout avec Explorer 3.0).

Un truc tout simple est de changer votre site en construction de disque ou de répertoire. Il n'est pas non plus inutile de signaler les conditions optimales pour visionner votre site.

Votre page d'accueil doit être attirante à l'oeil comme à l'esprit de votre lecteur. Il faut donc la soigner plus que toutes les autres pages. Cette Homepage doit donner envie aux interlocuteurs intéressés par le sujet à aller plus loin dans votre site et permettre au surfer pressé non concerné à continuer sans remords son cybervoyage.

Généralement, on se contentera d'une ébauche de page d'accueil durant la construction du site et on fignolera cette première page en dernier lieu.

On gardera à l'esprit les questions suivantes :

· Des informations détaillées sur le contenu sont-elles directement ou rapidement disponibles?

· Votre titre résume-t-il bien le contenu de vos pages?

· L'esthétique de votre page est-elle de bon goût? Originale? Attrayante?

· N'y a-t-il rien qui ne puisse choquer inutilement un lecteur d'une culture différente de la vôtre?

· Le raffinement de votre page d'accueil n'est-il pas excessif au point de pénaliser lourdement le temps de chargement (image trop grande ou texte trop long)?

Et pour terminer une série de conseils divers.

· Présenter l'information de façon claire et sobre.

· Diffuser de l'information -- UTILE --

· Eviter de mettre trop d'informations dans la même page.

· Concevoir une structure pertinente.

· Respecter la législation sur le copyright et les droits d'auteur.

· Prévoir sur chaque page un lien vers la page d'accueil.

· Mettre régulièrement à jour le contenu.

· Mettre un titre à chaque document.

· Limiter la taille des images.

· Inclure un texte alternatif pour les images.

· Faire connaître le site aux moteurs de recherche.

· Vérifier le résultat de la mise en page à l'impression.

Chapitre 16 : Html avancé en bref

Même si nous ne faisons que le présenter brièvement, la publication Html, c'est aussi :

· Les images animées.

· Les images cliquables ou mapées

· Les détails de la balise <HEAD>

· Les formulaires

· Les Javascripts

· Les applets Java

16.1 Les images animées qui agrémentent les pages Web sont des images GIF, composées un peu comme les dessins animés, par des logiciels conçus à cet effet. A utiliser avec modération!

Des Gifs animées sont disponibles sur le Web. Vous pouvez aussi en créer vous-même assez facilement grâce à de petits programmes comme Microsoft Gif Animator, Gif Construction Set, Cel Assembler ou Animation Shop de Paint Shop Pro 5 ...

16.2 Les images cliquables sont divisées en zones sur lesquelles il est possible de cliquer et d'ouvrir ainsi une page située à une adresse (URL) déterminée. On apppelle aussi cette propriété l'hypergraphique par rapport à l'hypertexte.

Ici aussi de petits logiciels comme Mapedit, Map This, CrossEye, Web Hotspots... vous seront d'une grande utilité.

Les balises seront :

- pour l'image :

<IMG SRC="image.gif" USEMAP="#nom">

- pour les zones cliquables :

<MAP NAME="nom">

<Image><AREA SHAPE=RECT COORDS="X1,Y1,X2,Y2" HREF="URL">

<Image>...

</MAP>

Sans entrer dans les détails, voici une image où en cliquant sur la lettre B, le fichier B.htm sera ouvert et en cliquant sur la lettre C, ce sera au tour du fichier C.htm.

Le code source est :

<BODY>

<IMG SRC="ABC.gif" USEMAP="#Alpha">

<MAP NAME="Alpha">

<Image><AREA SHAPE=RECT COORDS="40,10,60,40" HREF="B.htm">

<Image><AREA SHAPE=RECT COORDS="70,10,95,45" HREF="C.htm>

</MAP>

</BODY>

16.3 Nous avons été très bref lors de l'étude de la balise <HEAD>. En plus de l'élément <TITLE> (titre), l'en-tête de votre page contient bien d'autres informations importantes qui intéressent le navigateur.

Le tag META sera particulièrement utile pour faire reconnaître votre page par les robots de recherche du genre AltaVista.

<META NAME="description" CONTENT="description de votre page">

Cette balise indique au robot de recherche que le contenu de CONTENT est la description de votre page Html, contenu qu'il pourra afficher comme résultat d'une recherche d'un utilisateur.

<META NAME="keywords" CONTENT="mot-clé, mot-clé, mot-clé, ...">

Cette balise indique au robot de recherche que le contenu de CONTENT est une série de mots-clés qui définira plus finement votre page. Il peut être utile de prévoir quelques mots-clés en anglais si vos pages sont en français.

<META NAME="HTTP-EQUIV="refresh" CONTENT="x" URL="adresse">

Ce tag qui fait plutôt partie des trucs et astuces de Html, appellera automatiquement une autre page (située à l'URL indiquée) après un délai de x secondes. Utilisé par exemple dans un frame, le rafraîchissement de la page permettra d'afficher à intervalle régulier différentes informations (publicitaires ou autres).

Il existe encore d'autres balises d'en-tête que vous découvrirez au fil de votre utilisation du langage Html.

16.4 Avec les formulaires, le langage Html vous ouvre la porte de l'interactivité. Votre interlocuteur pourra remplir un champ de saisie de texte ou d'autres objets interactifs comme des cases à cocher. Ces données seront transmises au serveur, par exemple à votre adresse électronique (Mail).

Les formulaires peuvent prendre la forme :

- d'une ligne de texte

- de boutons radio

- de cases à cocher

- d'un menu déroulant

A la suite du ou des formulaires, il y aura un bouton dont la fonction sera d'envoyer les messages (par exemple à votre adresse électronique).

16.5 Jusqu'à présent, nous n'avons que publié des pages sur le Web. Avec Javascript et Java, nous allons découvrir les éléments pour programmer sur le Web.

Javascript est un ensemble de codes (scripts) directement incorporés dans Html, qui permet de faire réaliser au browser certaines fonctions déterminées. Pour autant que le navigateur le permette bien entendu (ce que font nos deux complices, Netscape 2.0 et plus et Microsoft Explorer 3.0 [en principe pour ce dernier cependant] ).

A titre d'exemple, on peut aisément faire apparaître avec Javascript un petit message du genre "Attention!" lorsque l'utilisateur clique sur un bouton.

Le code est assez simple :

<HTML>

<HEAD>

<SCRIPT language="JavaScript">

<!--

function hello() {

alert("Attention!");

}

// -->

</SCRIPT>

</HEAD>

<BODY>

...<input type=button name="" value=" Pour le test " onClick="hello()">...

</BODY>

</HTML>

On peut aussi réaliser en Javascript des choses plus complexes sans un long apprentissage (et sans compilateur). De façon très schématique Javascript serait une version étendue de Html ou une version simplifiée de Java.

Vous trouverez sur le Web des petites applications que vous pouvez modifier légèrement (en changeant le texte par exemple) pour les inclure dans vos pages.

16.6 Java est quant à lui un langage de programmation à part entière développé par Sun Microsystems. Il est nettement plus lourd et compliqué que Javascript mais également beaucoup plus puissant. Ce qui ouvre des perpectives immenses à l'évolution future des pages Html.

Java est donc un langage orienté objet (proche de C++) qui permet de compiler des programmes exécutables mais aussi de petites applications, indépendantes de toute plate-forme, appelées des applets. Ces applets, pourvu que le navigateur sache les interpréter, sont exécutées en local sur la machine affichant le document.

Si vous ne vous sentez pas une âme de programmeur. Cela ne vous empêchera pas d'utiliser des applets Java. Vous en trouverez sur le Net, avec leurs sources et paramètres. Il suffit de lancer une recherche avec comme critère "Java Applet".

Attention Javascipt et Java peuvent faire planter le système de votre lecteur!

Cette intégration des applets est réalisée par le tag <APPLET>..</APPLET>.

Par exemple :

<APPLET code="clock.class" width=200 height=200>

<PARAM ... les paramètres transmis par l'auteur ... >

</APPLET>

où "clock.class" est le fichier du programme Java exécutable qui se trouve dans le répertoire de ce site.

J'aimerais ajouter que les applets Java (mais c'est une appréciation toute personnelle) sont assez lentes et ralentissent fortement le site.

Chapitre 17 : Créer votre site Internet

Un site Internet est un ensemble de pages Html, reliées entre elles, généralement consacrées à un sujet déterminé, et qui sont portées à la libre connaissance de la communauté des internautes. Un site Internet constitue l'outil le plus moderne de communication et de publication. Voici ci-après les différentes procédures à suivre pour créer un site.

17.1. Trouver un contenu

Dur, dur ! Publier quand on n'a rien à dire est inutile. Les pages personnelles avec le chanteur préféré ou le sport de prédilection n'ont à mon avis qu'un intérêt fort limité. Cherchez dans vos zones de compétences -- qu'elles soient professionnelles ou dans le domaine de vos loisirs -- un sujet, un thème, une passion que vous souhaitez partager. Ne visez pas à tout prix l'expertise, Internet est assez étendu pour trouver un public pourvu que votre site soit de qualité. Je serais tenté de dire qu'un site s'écrit autant (sinon plus...) avec ses tripes qu'avec sa tête.

17.2. Structurer le contenu

Une des règles d'or pour la réalisation d'un site est que chaque page Html ne peut dépasser 3 à 5 écrans, pour des raisons de temps de chargement et de lisibilité. Il faudra donc découper votre contenu en pages et sous-pages (qui ne correspondront pas forcément à vos chapitres). Ensuite il faudra relier ses différentes pages de façon logique afin que votre cher lecteur puisse naviguer avec aisance dans votre site. Ce qui ne pose pas (trop) de difficultés du point de vue technique, car le langage Html est, par essence, un langage hypertexte ou plus simple encore un langage de liens.

Des petits repères graphiques rendront cette navigation plus intuitive pour votre lecteur. On prévoit généralement sur chaque page, un retour vers la page d'accueil ou table des matières pour venir au secours des lecteurs égarés ou encore à ceux (et cela arrive plus souvent qu'on le pense) qui entrent dans votre site par le thème d'une page déterminée.

17.3. Communiquer avec votre public

Communiquer avec des mots, des couleurs, la mise en page et les images. L'auteur d'un site Web se voit confronté avec la forme la plus aboutie de ce qu'on appelle la communication.

Dans cette communication par essence internationale, - visuelle autant que littéraire -, il faudra tenir compte des différences culturelles qui peuvent exister (même si votre site est ne s'adresse qu'aux francophones). Sobriété des mots et de la présentation graphique, concision, efficacité seront les éléments déterminants. Mais ce ne sera pas forcément la règle... Rester soi-même, me semble être le meilleur conseil. Le respect des règles et usages du Web en la matière (la fameuse Netiquette) sera le meilleur garant de la "mondialisation" de votre communication.

17.4. Connaître le langage Html

Le Web parle en langage Html. Sans Html point de salut ! Avec les éditeurs Html récents, on est loin du temps des "pionniers" du net (que je salue ici) qui en braves bénédictins du clavier devaient taper toutes les balises et autres caractères accentués. Il n'empêche que même avec le meilleur éditeur, vous devrez tôt ou tard plonger dans le code source Html. C'est pourquoi une bonne connaissance du Html se révélera très vite comme indispensable. Pour apprendre le langage Html, je ne peux que conseiller mon site (mais il y en existe d'autres...) à l'adresse : www.ccim.be/ccim328/html/index.htm.

Précisons que vous pouvez très bien faire un site sans Javascript ou VBscript.

17.5. Avoir quelques connaissances graphiques

Le 21ème siècle sera image ou ne sera pas. Il n'est pas nécessaire d'être un infographiste de choc pour faire un site mais un minimum de connaissances dans le traitement de l'image sera utile. La bonne connaissance d'un logiciel comme Paint Shop Pro, me semble une bonne introduction en matière de traitement graphique.

Ne perdez pas de vue pour le temps de chargement de votre page, que la plus petite image correspond à une ou plusieurs pages de texte. L'utilisation des images, aussi indispensable soit-elle pour la présentation, est donc toujours un compromis.

17.6. Avoir du temps et de la patience

Pour les non-initiés, faire un site est assez semblable à taper un article de presse ou un gros rapport. D'ailleurs, quand on parle de prix pour la réalisation d'un site, le prospect pousse généralement des hauts cris. Faire un site, c'est accoucher du contenu, veiller à une mise en page attrayante, faire et vérifier tous les hyperliens, parfois se battre avec le langage Html, le tester sous divers browsers (et surtout Explorer 3.0), le tester encore avec les différentes résolutions d'écran.

Le drame (et la richesse) de toute présentation multimédia, est que toute erreur ou faute de goût dans l'aspect visuel dépréciera automatiquement le contenu de celle-ci. Mais, qu'est ce que cela est passionnant !

17.7. Avoir un espace disque chez un provider

Si vous avez un connexion Internet, il y a de grandes chances que vous ayez déjà un espace disque compris dans votre abonnement. Sinon demandez le ou alors changez de provider... Si vous n'êtes pas connectés, appelez MacGuyver à votre secours ! Il existe sur Internet des bonnes âmes qui hébergent des sites (par exemple mygale.fr). Des Cyber clubs ou Cyber cafés peuvent vous fournir un espace disque pour une somme modique. Ou encore, vous avez peut-être un bon ami connecté qui n'utilise pas son espace disque. Alors...

Un méga est un minimum mais il y a déjà moyen de faire quelque chose de bien à condition de ne pas être trop gourmand en images. Avec votre espace disque, vous aurez aussi votre adresse Internet, du genre : www.nom_du_provider/votre répertoire.

17.8. Avoir une adresse électronique

Une adresse électronique n'est pas à proprement parler un élément d'un site. Mais sans elle, votre site perdrait toute sa saveur. Les possibilités du courrier électronique seront la suite ou le complément indispensable en terme de contact, de communication, de feed-back et autre interactivité avec les lecteurs de votre site.

17.9. Charger votre site

Cette procédure angoisse le plus les néophytes. En fait, c'est peut-être l'opération la plus simple dans la création de votre site. Avec des logiciels comme CuteFtp, par exemple, une fois connecté avec votre provider et votre mot de passe reconnu, le chargement de votre site est une opération dont la complexité (sic) correspond au déplacement de fichiers d'un répertoire à un autre répertoire dans l'Explorateur de Windows.

17.10. Faire connaître votre site

Le cercle de vos amis étant très vite épuisé, il faut passer par les moteurs de recherche et autres sites de référencement pour faire connaître votre oeuvre à la communauté des internautes. A vous les Yahoo, Francité, Alta Vista, Nomade, et autres Lycos ou Excite. Pour les francophones, on voit ces moteurs (en français) se multiplier. Et c'est une très bonne chose !

Il suffit pour cela d'aller sur le site du moteur de recherche en question. Trouver le lien "Ajouter un site" ou "Référencement" et de suivre scrupuleusement les instructions présentées à l'écran. Préparer à l'avance vos mots-clés ainsi qu'un bref descriptif de votre site. Pour ce dernier, il faut en quelques mots (150 à 250 mots) décrire votre site mais surtout donner envie aux surfeurs de venir le visiter.

17.11. Incorporer un compteur d'accès

Mettre un compteur ou ne pas en mettre. Voilà la question ! Témoin impartial de la réussite (à la condition de ne pas le trafiquer) ou du peu d'intérêt de votre site, un compteur d'accès sera votre audimat ou du moins l'indice de fréquentation de celui-ci.

Si vous trouvez votre compteur un peu paresseux, prenez d'abord patience car le temps de réaction entre la déclaration de votre site aux moteurs de recherche et l'arrivée des visiteurs peut prendre plusieurs (longues) semaines. Les chiffres du compteur d'accès doivent être cependant modulés par la qualité de votre courrier électronique. On peut très bien imaginer un super site sur un sujet pointu qui passionne littéralement un petit groupe d'initiés.

Vous trouverez aisément ce type de compteur, soit chez votre provider, soit sur le Web.

17.12. Faire des mises à jour

Au contraire d'un livre, un site Internet est quelque chose de vivant... Votre contenu évolue, votre courrier vous permet de mieux cibler votre public, vos lecteurs vous suggèrent telle ou telle ajoute, votre présentation graphique vieillit quelque peu, voilà autant de bonnes raisons de faire des mises à jour régulières qui permettront de fidéliser vos lecteurs.

Voilà, un long travail se termine. A vous maintenant l'angoisse du compteur, le trésor des premiers mails, la mise en oeuvre des dernières corrections et des premières mises à jour. Et puis je vous jure le prochain, il sera encore plus super !

Apprendre le langage Html
www.ccim.be/ccim328/html/
Copyright 1998

Version au17 novembre 2000

L'auteur

Van Lancker Luc

Rue des Brasseurs, 22

7700 Mouscron

Belgique

Vanlancker.Luc@ccim.be

Un mot d'encouragement ou un compliment fait toujours plaisir.

Critiques et suggestions seront aussi examinées avec attention.

Du même auteur :

Apprendre le Javascript

Apprendre le Vbscript

Maîtriser le langage Html

www.ccim.be/ccim328/js/index.htm
www.ccim.be/ccim328/vb/index.htm
www.ccim.be/ccim328/htmlplus/index.htm

Liste des principales balises Html

Mise en forme des caractères

<B>...</B> | Texte en gras
<BIG>...</BIG> | Agrandissement de la taille des caractères
<BLINK>...</BLINK> | Texte clignotant (Netscape seul)
<EM>...</EM> | Texte en italique
<FONT color="#XXXXXX">...</FONT> | Texte en couleur où XXXXXX est une valeur hexadécimale
<FONT size=X>...</FONT> | Taille des caractères où X est une valeur de 1 à 7
<I>...</I> | Texte en italique
<NOBR>...</NOBR> | Empêche les ruptures automatiques de ligne des navigateurs
<PRE>...</PRE> | Texte préformaté, soit avec affichage de tous les espaces et sauts de ligne
<SMALL>...</SMALL> | Réduction de la taille des caractères
<STRONG>...</STRONG> | Mise en gras du texte
<SUB>...</SUB> | Texte en indice
<SUP>...</SUP> | Texte en exposant
<U>...</U> | Texte souligné

Mise en forme du texte

<!--...--> | Commentaire ignoré par le navigateur
<BR> | A la ligne
<BLOCKQUOTE>...</BLOCKQUOTE> | Citation (introduit un retrait du texte)
<CENTER>...</CENTER> | Centre tout élément compris dans le tag
<DIV align=center> ...</DIV> | Centre l'élément encadré par le tag
<DIV align=left> ...</DIV> | Aligne l'élément à gauche
<DIV align=right> ...</DIV> | Aligne l'élément à droite
<Hx>...</Hx> <Hx align=center>...</Hx> <Hx align=left>...</Hx> <Hx align=right>...</Hx> | Titre où x a une valeur de 1 à 7 Titre centré Titre aligné à gauche Titre aligné à droite
<P>...</P> <P align=center>...</P> <P align=left>...</P> <P align=right>...</P> | Nouveau paragraphe Paragraphe centré Paragraphe aligné à gauche Paragraphe aligné à droite

Listes

<UL> <LI> </UL> | Liste non numérotée (dite à puces) Elément de liste
<OL> <LI> </OL> | Liste numérotée Elément de liste
<DL> <DT>...</DT> <DD>...</DD> </DL> | Liste de glossaire Terme de glossaire (sans retrait) Explication du terme (avec retrait) Ligne de séparation
<HR> | Trait horizontal (centré par défaut)
<HR width="x%"> | Largeur du trait en %
<HR width=x> | Largeur du trait en pixels
<HR size=x> | Hauteur du trait en pixels
<HR align=center> <HR align=left> <HR align=right> | Trait centré (défaut) Trait aligné à gauche Trait aligné à droite
<HR noshade> | Trait sans effet d'ombrage

Hyperliens

<A href="http://...">...</A> | Lien vers une page Web
<A href="mailto:...">...</A> | Lien vers une adresse Email
<A href="fichier.htm">...</A> | Lien vers la page locale fichier.htm située dans le même dossier
<A name="xyz">...</A> | Définition d'une ancre
<A href="xyz">...</A> <A href="fichier#xyz">...</A> | Lien vers une ancre

Images

<IMG src="xyz.gif"> <IMG src="xyz.pjg> | Insertion d'une image au format Gif ou Jpg (voir liens pour l'adressage)
<IMG ... width=x height=y> | Mise à l'échelle de l'image en pixels
< IMG ... border=x> | Définition de la bordure d'une image avec lien
<IMG ... alt="votre texte"> | Texte alternatif lorsque l'image n'est pas affichée
<IMG ... align=bottom> <IMG ... align=middle> <IMG ... align=top> <IMG ... align=left> <IMG ... align=right> | Aligne l'image en bas Aligne l'image au milieu Aligne l'image en haut Aligne l'image à gaughe Aligne l'image à droite
<IMG ... hspace=x> <IMG ... vspace=y> | Espacement horizontal entre l'image et le texte Espacement vertical entre l'image et le texte

Tableau

<TABLE>...</TABLE> | Définition d'un tableau
<TABLE width="x%"> | Largeur du tableau en %
< TABLE width=x> | Largeur du tableau en pixels
<TABLE border=x> | Largeur de la bordure
<TABLE cellpadding=x> | Espace entre la bordure et le texte
<TABLE cellspacing=x> | Epaisseur du trait entre les cellules
<TR>...</TR> | Ligne du tableau
<TD>...</TD> | Cellule du tableau
<TD bgcolor="#XXXXXX"> | Couleur d'une cellule de tableau
<TD width="x%"> <TD width=x> | Largeur de colonne en % Largeur de colonne en pixels
<TD align=center> <TD align=left> <TD align=right> | Texte dans la cellule centré Texte dans la cellule aligné à gauche Texte dans la cellule aligné à droite
<TD valign=bottom> <TD valign=middle> <TD valign=top> | Alignement vers le bas du contenu d'une cellule Centrage vertical du contenu d'une cellule Alignement vers le haut du contenu d'une cellule
<TD colspan=x> <TD rowspan=x> | Nombre de cellules à fusionner horizontalement Nombre de cellules à fusionner verticalement

Frames

<FRAMESET>...</FRAMESET> | Définit une structure de frames(remplace alors le tag BODY)
<FRAMESET rows="x%,y%,..."> | Division horizontale de la fenêtre en %
<FRAMESET cols="x%,y%,..."> | Division verticale de la fenêtre en %
<FRAME src="fichier.htm"> | Fichier affiché dans une fenêtre de frames
<NOFRAMES>...</NOFRAMES> | Contenu pour les browsers non prévus pour les frames

Fichier Html

<HTML>...</HTML> | Début et fin de fichier Html
<HEAD>...</HEAD> | Zone d'en-tête d'un fichier Html
<TITLE>...</TITLE> | Titre affiché par le browser (élément de HEAD)
<BODY>...</BODY> | Début et fin du corps du fichier Html
<BODY bgcolor="#XXXXXX"> | Couleur d'arrière-plan (en hexadécimal)
<BODY background="xyz.gif"> | Image d'arrière-plan

Apprendre le langage Html www.ccim.be/ccim328/html/

Les caractères spéciaux

Voici ces caractères en code ISO 5589-1 (appelée aussi ISO-Latin 1), ainsi que leur abréviation ENTITY.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

Caractère | Code ISO | ENTITY | Caractère | Code ISO | ENTITY | Caractère | Code ISO | ENTITY
 | &#129; |  | « | &#171; | &laquo; | Õ | &#213; | &Otilde;
‚ | &#130; |  | ¬ | &#172; | &not; | Ö | &#214; | &Ouml;
ƒ | &#131; |  |  | &#173; | &shy; | ´ | &#215; | &times;
„ | &#132; |  | ® | &#174; | &reg; | Ø | &#216; | &Oslash;
… | &#133; |  | ¯ | &#175; | &masr; | Ù | &#217; | &Ugrave;
† | &#134; |  | ° | &#176; | &deg; | Ú | &#218; | &Uacute;
‡ | &#135; |  | ± | &#177; | &plusmn; | Û | &#219; | &Ucirc;
ˆ | &#136; |  | ² | &#178; | &sup2; | Ü | &#220; | &Uuml;
‰ | &#137; |  | ³ | &#179; | &sup3; | Ý | &#221; | &Yacute;
Š | &#138; |  | ´ | &#180; | &acute; | Þ | &#222; | &THORN
‹ | &#139; |  | m | &#181; | &micro; | ß | &#223; | &szlig;
Œ | &#140; |  | ¶ | &#182; | &para; | à | &#224; | &agrace;
 | &#141; |  | · | &#183; | &middot; | á | &#225; | &aacute;
 | &#142; |  | ¸ | &#184; | &cedil; | â | &#226; | &acirc;
 | &#143; |  | 1 | &#185; | &sup1; | ã | &#227; | &atilde;
 | &#144; |  | º | &#186; | &ordm; | ä | &#228; | &auml;
‘ | &#145; |  | » | &#187; | &raquo; | å | &#229; | &aring;
’ | &#146; |  | ¼ | &#188; | &frac14; | æ | &#230; | &aelig;
“ | &#147; |  | ½ | &#189; | &frac12; | ç | &#231; | &ccedil;
” | &#148; |  | ¾ | &#190; | &frac34; | è | &#232; | &egrave;
• | &#149; |  | ¿ | &#191; | &iquest; | é | &#233; | &eacute;
– | &#150; |  | À | &#192; | &Agrave; | ê | &#234; | &ecirc;
— | &#151; |  | Á | &#193; | &Aacute; | ë | &#235; | &euml;
˜ | &#152; |  | Â | &#194; | &Acirc; | ì | &#236; | &igrave;
™ | &#153; |  | Ã | &#195; | &Atilde; | í | &#237; | &iacute;
š | &#154; |  | Ä | &#196; | &Auml; | î | &#238; | &icirc;
› | &#155; |  | Å | &#197; | &Aring; | ï | &#239; | &iuml;
œ | &#156; |  | Æ | &#198 | &Aelig | ð | &#240; | &eth;
 | &#157; |  | Ç | &#199; | &Ccedil; | ñ | &#241; | &ntilde;
 | &#158; |  | È | &#200; | &Egrave; | ò | &#242; | &ograve;
Ÿ | &#159; |  | É | &#201; | &Eacute; | ó | &#243; | &oacute;
espace | &#160; | &nbsp; | Ê | &#202; | &Ecric; | ô | &#244; | &ocirc;
¡ | &#161; | &iexcl; | Ë | &#203; | &Euml; | õ | &#245; | &otilde;
¢ | &#162; | &cent; | Ì | &#204; | &Igrave; | ö | &#246; | &ouml;
£ | &#163; | &pound; | Í | &#205; | &Iacute; | ¸ | &#247; | &divide;
¤ | &#164; | &curren; | Î | &#206; | &Icirc; | ø | &#248; | &oslash;
¥ | &#165; | &yen | Ï | &#207; | &Iuml; | ù | &#249; | &ugrave;
¦ | &#166; | &brvbar; | Ð | &#208; | &ETH; | ú | &#250; | &uacute;
§ | &#167; | &sect; | Ñ | &#209; | &Ntilde; | û | &#251; | &ucirc;
¨ | &#168; | &uml; | Ò | &#210; | &Ograve; | ü | &#252; | &uuml;
© | &#169; | &copy; | Ó | &#211; | &Oacute; | ý | &#253; | &yacute;
ª | &#170; | &ordf; | Ô | &#212; | &Ocirc; | þ | &#254; | &thorn;
 |  |  |  |  |  | ÿ | &#255; | &yuml;

Apprendre le langage Html www.ccim.be/ccim328/html/


France

Chapitre 1 : Le Web parle Html

HTML est le langage universel utilisé pour communiquer sur le Web. Votre information sera ainsi transportée sur cette gigantesque toile de réseaux interconnectés qu'est Internet, pour aboutir sur l'ordinateur de votre lecteur grâce à un programme appelé navigateur ou browser.

- Vous avez donc deux interlocuteurs :

1. le browser de votre lecteur

2. et votre lecteur lui-même.

Ce logiciel, que l'on appelle un browser, vous permet de surfer sur le Net et d'afficher sur votre écran les "pages" qu'il a interceptées. Il y a, hélas, beaucoup de marques et de types de browsers différents. Des simples, des archaïques ou des sophistiqués... Les plus connus sont Netscape dans sa version 2, 3 et 4 ainsi Internet Explorer de Microsoft mais il en existe beaucoup d'autres.

- Chaque browser a sa propre façon de travailler.

A la différence de votre traitement de texte préféré qui restitue exactement votre document sur une feuille de papier avec votre police de caractères et votre mise en page, vous ne saurez jamais exactement ce que le browser de votre lecteur du bout du monde affichera sur l'écran de celui-ci.

- En HTML, vous n'avez pas la maîtrise totale de votre document.

Pour transiter le plus rapidement possible sur les lignes téléphoniques, on a adopté un format de texte très compact mais aussi (par conséquence) peu sophistiqué. C'est le bon vieux format de texte pur et dur, sans fioritures du Bloc-notes ou Notepad de Windows par exemple. Et de plus ce format ASCII a été amputé d'un bit (7 bits au lieu de 8) ! Vous serez donc privé de certains caractères spéciaux comme le é pour lesquels il faudra passer par des codes particuliers.

- Mais récompense suprême... Html est un langage universel qui s'adapte à toutes les plate-formes que ce soit
Windows, Macintoch, Unix, OS/2...

En plus du texte adressé à votre lecteur, il vous faudra inclure des instructions pour le browser de celui-ci. Ces instructions seront différenciées de votre texte par les signes < et > par exemple <html>. Ces "instructions" s'appellent des tags ou des balises.

Quand vous écrirez les balises de votre page HTML, il faudra garder à l'esprit :

- qu'une balise marque une action pour le browser (ce qu'il doit faire...).

- que les attributs précisent les modalités de cette action (comment il doit le faire...).


France

Chapitre 2 : Vos premiers outils

2.1 Vous avez besoin:

· d'un éditeur de texte tout simple comme par exemple le Bloc-notes ou Notepad de Windows ou tout autre équivalent dans votre système d'exploitation.

· d'un browser soit Netscape Navigator (payant) que vous pouvez cependant télécharger gratuitement au site de Netscape (http://home.netscape.com) ou sur les CD de certains mensuels informatiques soit Microsoft Explorer (gratuit également) à télécharger (http://www.microsoft.com) ou dans les revues.

2.2 Vous n'avez pas besoin:

· d'être connecté pour écrire, voir et peaufiner vos pages Html.

· d'avoir le dernier éditeur Html sans doute performant mais coûteux qu'il sera toujours temps d'adopter lorsque vous aurez usé vos petits doigts sur vos premières pages. Nous pensons à Claris Home Page, Frontpage de Microsoft, Hotdog, Hotmetal, WebExpert ou Netscape Editor ainsi qu'aux dizaines d'autres éditeurs que vous rencontrerez sur le Web.

2.3 Conseils

Le langage Html étant un ensemble de balises et d'attributs, il nous paraît utile sinon indispensable de les passer en revue et surtout de les visionner au moins une fois car :

· si les éditeurs Html vous faciliteront grandement la tâche, ils ne sont pas toujours parfaits surtout lors des modifications, annulations ou suppressions en cours de travail. Il vous faudra bien alors vous plonger dans le code source pour corriger les dysfonctionnements.

· les codes source de vous pages préférées sont disponibles (et sans copyright). Il est alors possible de s'en inspirer pour reprendre le procédé sans avoir à réinventer le monde.

· ces mêmes éditeurs Html vous proposeront des termes comme" En-tête, Heading, Cell spacing, Numered List..." qui sont propres au langage Html.

· vous aurez besoin d'une connaissance pointue du Html pour inclure les codes du Javascript ou du VBscript dans vos pages.


France

Chapitre 3 : Le document Html minimum

3.1 Voici vos premières balises ou tags :

<HTML> | Ceci est le début d'un document de type HTML.
</HTML> | Ceci est la fin d'un document de type HTML.
<HEAD> | Ceci est le début de la zone d'en-tête (prologue au document proprement dit contenant des informations destinées au browser).
</HEAD> | Ceci est la fin de la zone d'en-tête.
<TITLE> | Ceci est le début du titre de la page.
</TITLE> | Ceci est la fin du titre de la page.
<BODY> | Ceci est le début du document proprement dit.
</ BODY> | Ceci est la fin du document proprement dit.

· Vous aurez remarqué qu'à chaque balise de début d'une action, soit <...>, correspond (en toute logique) une balise de fin d'une action </...>.

· Vous noterez aussi que les balises ne sont pas "case sensitive". Il est donc équivalent d'écrire <HTML>, <html>, <Html>, etc.

3.2 Faisons ensemble notre premier document Html:

- Ouvrir l'éditeur de texte.

- Ecrire les codes Html suivants:

<HTML>

<HEAD>

<TITLE>Document Html minimum</TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

- Enregistrer le document avec l'extension .html ou .htm.

- Ouvrir le navigateur.

- Afficher le document via le menu File/Open file...

- Admirer votre premier document Html.

Celui-ci est vide (et c'est normal) mais tout à fait opérationnel! Il faudra maintenant lui fournir votre information à l'intérieur des balises <BODY></BODY>. Remarquez que votre "TITLE" est présent dans la fenêtre de Netscape.

Pour vos éventuelles modifications, il n'est pas nécessaire de rouvrir à chaque fois le navigateur.

· Retourner dans l'éditeur de texte (sans fermer le navigateur).

· Modifier les codes Html.

· Enregistrer le fichier.

· Utiliser la commande Reload du browser ou si celui-ci est paresseux cliquer dans la barre "Location" et faire "Enter".


France

Chapitre 4 : Le texte

Tout document Html contiendra en majorité du texte. Voyons comment l'agrémenter par quelques balises élémentaires.

Gras | [Bold] | <B>...</B> <STRONG>...</STRONG> | Début et fin de zone en gras
Italique | [Italic] | <I>...</I> <EM>...</EM> | Début et fin de zone en italique
Taille de caractère | [Font size] | <FONT SIZE=?>...</FONT> | Début et fin de zone avec cette taille
Couleur de caractère | [Font color] | <FONT COLOR="#$$$$$$"></FONT> | Début et fin de zone en couleur
A la ligne | [Line break] | <BR> | Aller à la ligne
Commentaires | [Comments] | <!-- *** --> | Ne pas afficher
Centrage | [Center] | <CENTER></CENTER> | Centrer

Ouvrir l'éditeur de texte

<HTML>

<HEAD><TITLE></TITLE></HEAD>

<BODY>texte simple<BR>

<B>texte en gras</B><BR>

<STRONG>texte en gras</STRONG><BR>

<I>texte en italique</I><BR>

<EM>texte en italique</EM><BR>

<B><I>texte en gras et en italique</I></B><BR>

<FONT SIZE=5>texte</FONT>

<FONT COLOR="#0000FF">en bleu</FONT>

<!--C'est fini-->

</BODY>

</HTML>

- Ouvrir le browser

Quelques commentaires s'imposent;

· Le texte tout simple s'écrit sans balises. Il sera repris par le browser avec la police et taille de caractères choisies dans sa configuration par défaut.

· Le browser affiche le texte qu'on lui "dicte" en passant à la ligne lorsque celui-ci atteint le bord de la fenêtre. Pour le forcer à passer outre à cette règle de conduite et à faire un saut à la ligne comme vous le souhaitez, il faut une instruction particulière. C'est la balise <BR>. Celle-ci représente une action ponctuelle et n'a donc pas besoin de balise de fin.

· Le même browser ne tient compte que d'un seul espace entre les mots. Ainsi pour lui
<FONT SIZE=5>texte</FONT>
<FONT COLOR="#0000FF">en bleu</FONT> est équivalent à
<FONT SIZE=5>texte</FONT><FONT COLOR="#0000FF">en bleu</FONT>

· Il n'est pas rare d'utiliser plusieurs balises pour un même élément de texte. Il faut veiller à bien les imbriquer. Ainsi <B><I>...</I></B> est correct et <B><I>...</B></I> risque de vous créer des ennuis.

· La taille dans <FONT SIZE=?> peut être indiquée de deux façons :

1. avec un nombre de 1 à 7. La valeur par défaut étant 3.

2. de façon relative par rapport à la valeur par défaut (ici 0). Soit -3 -2 -1 0 +1 +2 +3.

· Pour les puristes , les balises <I> et <EM>, <B> et <STRONG> ne sont pas totalement équivalentes. Vous verrez en poussant plus avant votre étude du langage Html que <EM> et <STRONG> appartiennent aux définitions structurales (style logique) dont l'apparence dépend des options reprises dans la configuration du browser. Les balises <B> et <I> appartiennent aux formats de présentation (style physique) dont l'apparence dépend de la volonté de l'auteur.

Voici les codes de quelques couleurs basiques.

Bleu | #0000FF | Vert | #00FF00
Blanc | #FFFFFF | Violet | #8000FF
Rouge | #FF0000 | Jaune | #FFFF00
Gris clair | #C0C0C0 | Noir | #000000

Chapitre 4 : Le texte

Tout document Html contiendra en majorité du texte. Voyons comment l'agrémenter par quelques balises élémentaires.

Gras | [Bold] | <B>...</B> <STRONG>...</STRONG> | Début et fin de zone en gras
Italique | [Italic] | <I>...</I> <EM>...</EM> | Début et fin de zone en italique
Taille de caractère | [Font size] | <FONT SIZE=?>...</FONT> | Début et fin de zone avec cette taille
Couleur de caractère | [Font color] | <FONT COLOR="#$$$$$$"></FONT> | Début et fin de zone en couleur
A la ligne | [Line break] | <BR> | Aller à la ligne
Commentaires | [Comments] | <!-- *** --> | Ne pas afficher
Centrage | [Center] | <CENTER></CENTER> | Centrer

Ouvrir l'éditeur de texte

<HTML>

<HEAD><TITLE></TITLE></HEAD>

<BODY>texte simple<BR>

<B>texte en gras</B><BR>

<STRONG>texte en gras</STRONG><BR>

<I>texte en italique</I><BR>

<EM>texte en italique</EM><BR>

<B><I>texte en gras et en italique</I></B><BR>

<FONT SIZE=5>texte</FONT>

<FONT COLOR="#0000FF">en bleu</FONT>

<!--C'est fini-->

</BODY>

</HTML>

- Ouvrir le browser

Quelques commentaires s'imposent;

· Le texte tout simple s'écrit sans balises. Il sera repris par le browser avec la police et taille de caractères choisies dans sa configuration par défaut.

· Le browser affiche le texte qu'on lui "dicte" en passant à la ligne lorsque celui-ci atteint le bord de la fenêtre. Pour le forcer à passer outre à cette règle de conduite et à faire un saut à la ligne comme vous le souhaitez, il faut une instruction particulière. C'est la balise <BR>. Celle-ci représente une action ponctuelle et n'a donc pas besoin de balise de fin.

· Le même browser ne tient compte que d'un seul espace entre les mots. Ainsi pour lui
<FONT SIZE=5>texte</FONT>
<FONT COLOR="#0000FF">en bleu</FONT> est équivalent à
<FONT SIZE=5>texte</FONT><FONT COLOR="#0000FF">en bleu</FONT>

· Il n'est pas rare d'utiliser plusieurs balises pour un même élément de texte. Il faut veiller à bien les imbriquer. Ainsi <B><I>...</I></B> est correct et <B><I>...</B></I> risque de vous créer des ennuis.

· La taille dans <FONT SIZE=?> peut être indiquée de deux façons :

1. avec un nombre de 1 à 7. La valeur par défaut étant 3.

2. de façon relative par rapport à la valeur par défaut (ici 0). Soit -3 -2 -1 0 +1 +2 +3.

· Pour les puristes , les balises <I> et <EM>, <B> et <STRONG> ne sont pas totalement équivalentes. Vous verrez en poussant plus avant votre étude du langage Html que <EM> et <STRONG> appartiennent aux définitions structurales (style logique) dont l'apparence dépend des options reprises dans la configuration du browser. Les balises <B> et <I> appartiennent aux formats de présentation (style physique) dont l'apparence dépend de la volonté de l'auteur.

Voici les codes de quelques couleurs basiques.

Bleu | #0000FF | Vert | #00FF00
Blanc | #FFFFFF | Violet | #8000FF
Rouge | #FF0000 | Jaune | #FFFF00
Gris clair | #C0C0C0 | Noir | #000000

Chapitre 4 : Le texte

Tout document Html contiendra en majorité du texte. Voyons comment l'agrémenter par quelques balises élémentaires.

Gras | [Bold] | <B>...</B> <STRONG>...</STRONG> | Début et fin de zone en gras
Italique | [Italic] | <I>...</I> <EM>...</EM> | Début et fin de zone en italique
Taille de caractère | [Font size] | <FONT SIZE=?>...</FONT> | Début et fin de zone avec cette taille
Couleur de caractère | [Font color] | <FONT COLOR="#$$$$$$"></FONT> | Début et fin de zone en couleur
A la ligne | [Line break] | <BR> | Aller à la ligne
Commentaires | [Comments] | <!-- *** --> | Ne pas afficher
Centrage | [Center] | <CENTER></CENTER> | Centrer

Ouvrir l'éditeur de texte

<HTML>

<HEAD><TITLE></TITLE></HEAD>

<BODY>texte simple<BR>

<B>texte en gras</B><BR>

<STRONG>texte en gras</STRONG><BR>

<I>texte en italique</I><BR>

<EM>texte en italique</EM><BR>

<B><I>texte en gras et en italique</I></B><BR>

<FONT SIZE=5>texte</FONT>

<FONT COLOR="#0000FF">en bleu</FONT>

<!--C'est fini-->

</BODY>

</HTML>

- Ouvrir le browser

Quelques commentaires s'imposent;

· Le texte tout simple s'écrit sans balises. Il sera repris par le browser avec la police et taille de caractères choisies dans sa configuration par défaut.

· Le browser affiche le texte qu'on lui "dicte" en passant à la ligne lorsque celui-ci atteint le bord de la fenêtre. Pour le forcer à passer outre à cette règle de conduite et à faire un saut à la ligne comme vous le souhaitez, il faut une instruction particulière. C'est la balise <BR>. Celle-ci représente une action ponctuelle et n'a donc pas besoin de balise de fin.

· Le même browser ne tient compte que d'un seul espace entre les mots. Ainsi pour lui
<FONT SIZE=5>texte</FONT>
<FONT COLOR="#0000FF">en bleu</FONT> est équivalent à
<FONT SIZE=5>texte</FONT><FONT COLOR="#0000FF">en bleu</FONT>

· Il n'est pas rare d'utiliser plusieurs balises pour un même élément de texte. Il faut veiller à bien les imbriquer. Ainsi <B><I>...</I></B> est correct et <B><I>...</B></I> risque de vous créer des ennuis.

· La taille dans <FONT SIZE=?> peut être indiquée de deux façons :

1. avec un nombre de 1 à 7. La valeur par défaut étant 3.

2. de façon relative par rapport à la valeur par défaut (ici 0). Soit -3 -2 -1 0 +1 +2 +3.

· Pour les puristes , les balises <I> et <EM>, <B> et <STRONG> ne sont pas totalement équivalentes. Vous verrez en poussant plus avant votre étude du langage Html que <EM> et <STRONG> appartiennent aux définitions structurales (style logique) dont l'apparence dépend des options reprises dans la configuration du browser. Les balises <B> et <I> appartiennent aux formats de présentation (style physique) dont l'apparence dépend de la volonté de l'auteur.

Voici les codes de quelques couleurs basiques.

Bleu | #0000FF | Vert | #00FF00
Blanc | #FFFFFF | Violet | #8000FF
Rouge | #FF0000 | Jaune | #FFFF00
Gris clair | #C0C0C0 | Noir | #000000


France

Chapitre 5 : Du texte encore...

Des balises de texte, il y en plein des valises! Selon les versions du HTML (nous en sommes à la version HTML 3.2) et l'apparition des éditeurs Html évolués, certains tags sont moins utilisés. D'autres aussi sont tout bonnement d'un emploi rare ou pour le moins particulier.

En voici quelques-uns qui compléteront votre panoplie actuelle.

· Le tag <BLOCKQUOTE>...</BLOCKQUOTE> introduit une citation.
Son utilité serait douteuse si le texte de cette citation n'était introduit avec un léger retrait à gauche et à droite. Ce qui est bien pratique pour agrémenter la présentation.

Voici un texte normal sans blockquote.

Voici un texte avec blockquote. Remarquez le retrait.

Pour la petite histoire ce tag n'était pas prévu dans Netscape Editor de la version Gold 3.0 mais il a été ajouté
à la version Netscape Communicator 4.0. Le même effet peut être réalisé par un tableau ou un tag de liste
vide.

· Vous savez déjà que les browsers ne reconnaissent qu'un espace entre les mots. Ce qui peut se révéler gênant dans certaines situations.
La balise <PRE>...</PRE> affiche un texte dit préformaté. Le browser prend ainsi en compte tous les espaces et sauts de ligne définis à l'écran. P r a t i q u e

Avant que les tableaux ne soient reconnus par les browsers, les braves pionniers du Html devaient employer ce tag pour faire des tableaux.

· Le tag <ADDRESS>...</ADDRESS> pour indiquer une adresse (généralement en fin de document).
Voici mon adresse avec cette balise :
Van Lancker Luc
Rue des Brasseurs, 22
7700 Mouscron (Belgium)

· La balise <U>...</U> souligne le texte.
Comme, par convention, les éléments servant d'hyperlien sont soulignés (c'est le même que dans les fichiers d'aide), on évitera le souligner des éléments de texte pour lui donner de l'importance. On préfèrera la mettre en gras ou dans un format ou une couleur de police différent. Il ne faut donc pas en abuser.

· En parler ou ne pas en parler, voilà la question! Netscape 3.0 et plus (et pas Microsoft Explorer) permet d'afficher un texte clignotant par la balise <BLINK>...</BLINK>. Ce tag est un peu tourné en dérision car il est rapidement ennuyeux. On lui préfèrera une image animée qui peut être débranchée après quelques clignotements.
Particularité Netscape! (uniquement)

· Les tags <SUB>...</SUB> et <SUP>...</SUP> placent le texte respectivement en indice et en exposant. Ainsi, <SUB>escalier</SUB>escalier<SUP>escalier</SUP> aura comme résultat

 |  | escalier
 | escalier |
escalier |  |

· Pour aligner du texte, on a utilisé l'attribut ALIGN ou le tag <CENTER>. Il existe une balise permettant d'aligner différents éléments. c'est le tag :
<DIV align=left>...</DIV>
<DIV align=center>...</DIV>
<DIV align=right>...</DIV>

Cette alternative pour l'alignement horizontal du texte est parfois bien utile pour définir l'alignement d'une portion de texte. Il nous est très utile pour parer à certaines "paresses" de Microsoft Explorer 3.0 par exemple.

· Il existe encore bien d'autres balises que je vous invite à découvrir dans vos études suivantes.


France

Chapitre 6 : Les titres et les listes

Tout document d'une certaine consistance se doit de présenter, par exemple dans la table des matières, les différents niveaux de son exposé. Html a disposé dès son origine d'outils spécialement conçus à cet effet.

En-têtes | [Heading] | <Hn></Hn> avec n=1 à 6 | Afficher une en-tête de niveau n et sauter une ligne
Liste non-ordonnée | [Bullet list] | <UL></UL> | Afficher le texte sous forme d'une liste non-ordonnée.
Liste ordonnée | [Numbered list] | <OL></OL> | Afficher le texte sous forme d'une liste ordonnée.
Elément de liste | [List items] | <LI> | Voici un élément de la liste
Paragraphe | [Paragraph] | <P></P> | Saut de ligne, insérer une ligne vierge et commencer un paragraphe

Comme d'habitude...

- On ouvre son petit éditeur de texte

<H1>Les mois du printemps</H1>

<UL><LI>avril

<LI>mai

<LI>juin</UL>

<P>

<H3>Les mois d'automne</H3>

<OL><LI>octobre

<LI>novembre

<LI>d&eacute;cembre</OL>

- Et on ouvre son petit browser

Les mois du printemps

· avril

· mai

· juin

Les mois d'automne

1. octobre

2. novembre

3. décembre

- Quelques commentaires s'imposent;

1. &eacute; est l'un de ces caractères spéciaux utilisés pour représenter le é. Les éditeurs Html vous déchargeront de cette corvée.

2. Les paragraphes et les en-têtes peuvent s'aligner à gauche, au centre ou à droite.
<H1 align=left></H1>
<P align=left></P>
<H1 align=center></H1>
<P align=center></P>
<H1 align=right></H1>
<P align=right></P>

3. Les listes peuvent s'imbriquer:
<H4>Les 12 mois</H4>
<UL><LI>Les mois du printemps
<OL><LI>avril
</OL></UL>
Les 12 mois

· Les mois du printemps

1. avril


France

Chapitre 7 : Les liens

Html (Hyper Text Markup Language) est un langage hypertexte (et hypergraphique) qui vous permet en cliquant sur un mot, généralement souligné (ou une image) de vous transporter;

· vers un autre endroit du document.

· vers un autre fichier Html situé sur votre ordinateur.

· vers un autre ordinateur situé sur le Web.

Ce système d'hypertexte vous est familier car il est également utilisé par les fichiers d'aide de Windows. Ce sont ces liens qui vous permettent de surfer de page en page et qui constituent l'essence des documents Html.

La syntaxe de ces liens entre plusieurs pages, est simple mais entraînera de nombreux commentaires :

<A HREF="URL ou adresse">...</A>

7.1 Lien externe

Tout ordinateur situé sur le réseau Internet possède une adresse ou une URL (Universal Ressource Locator). Html permet d'accéder à toutes les machines et toutes les ressources du Net. Pour peu qu'Internet vous soit un peu familier, ce sont les adresses du type :

http://serveur/chemin.../fichier

ftp://serveur/chemin.../fichier

mailto:utilisateur@hôte

7.2 Lien local

L'organisation classique, et plus que conseillée, d'un site Web consiste à regrouper l'ensemble des éléments de celui-ci (fichiers htm, images, ...) dans un même répertoire. Vous pourrez ainsi "transporter" aisément votre site pour le présenter sur un autre ordinateur et ,but ultime, le charger sur un serveur. Cette façon de procéder est la plus aisée et vous évitera pas mal de problèmes. L'adresse du lien sera alors tout simplement :

fichier.htm

7.3 Lien mixte

Nous entendons par là un lien vers un fichier situé à un autre endroit de votre ordinateur (et donc non situé dans le répertoire de votre site). Attention Danger! En effet, il est peu probable que le serveur Web qui hébergera votre site, possède la même arborescence que votre disque local. L'adresse prendra la forme

file:///lecteur:/répertoire/fichier.htm (en adressage absolu).

../../../fichier.htm (en adressage relatif).

Cette matière d'adressage absolu et relatif dépasse le cadre de cet exposé et je vous invite en cas d'utilisation à vous plonger dans la documentation relative à ce sujet.

7.4 Expérimentons tout ceci.

- Dans l'éditeur de texte,

nous allons créer deux fichiers Htlm.

· le fichier 1.htm:
<A HREF="2.HTM">Aller vers le document 2</A>

· le fichier 2.htm:
<A HREF="1.HTM">Retour au document 1</A>

- On sauve ces deux fichiers dans un même répertoire.

- Le browser vous affichera :

7.5 Les ancres

Des liens peuvent aussi pointer vers un endroit précis du même document ou d'un autre fichier. C'est ce qu'on appelle les ancres, ancrages ou pointeurs [Anchor].

Point d'ancrage | <A NAME="***">...</A> | Ceci est une cible
Lien vers une ancre dans la même page | <A HREF="#***">...</A> | Lien vers la cible *** dans la même page
Lien vers une ancre dans une autre page | <A HREF="URL#***">...</A> | Lien vers la cible *** dans une autre page

Plusieurs liens à l'intérieur d'un même document supposent que ce document présente une certaine longueur sinon une longueur certaine (et donc un temps de chargement assez long). Ainsi, on préférera généralement à cette technique le découpage d'un longue page en un ensemble de plusieurs pages de dimension plus réduite.


France

Chapitre 8 : Les images

8.1 GIF ou JPEG?

Avant de passer aux balises, il faut savoir ce qui suit.

· Les deux formats d'image (maximum 256 couleurs) reconnus sur le Web, sont le format GIF (version 89a) et le format JPEG. Pour le format GIF, on retiendra la caractéristique "entrelacé" qui permet de charger progressivement l'image lors de l'ouverture de la page. Ces deux formats donnent des résultats assez équivalents bien que JPG soit plutôt recommandé pour des images avec des tons nuancés ou dégradés.

· L'ennemi sur le Web, c'est la taille des images! Plus l'image sera grande, plus le temps de chargement sera long... au risque de décourager vos visiteurs. Si cela est possible, une image en 16couleurs peut très bien faire l'affaire. Présenter une petite image indiquant un lien vers l'image complète est également un bon conseil.

· Il n'est pas inutile de prévoir dans votre panoplie de compositeur Web, un logiciel de retouche d'images. A ce propos "Paint Shop Pro" a la triple qualité d'être disponible en shareware, d'être très intuitif et d'être performant. En outre, un tel logiciel vous permettra de composer vos propres images et ainsi de personnaliser vos pages.

· Dois-je rappeler qu'il est très facile de se faire une bibliothèque d'images tout en surfant sur le Web? Avec Netscape, il suffit de se positionner sur l'image, de cliquer avec le bouton droit de la souris et de suivre les instructions du menu déroulant (Save Image As...).

8.2 Le code Html est :

<IMG SRC="Adresse de l'image"> Afficher l'image qui se trouve à l'adresse...

La balise image possède de nombreux attributs.

Texte alternatif alt="****" | Pour les browser n'ayant pas l'option "image" activée
Dimensions width=? height=? | Hauteur et largeur (en pixels)
border=? (en pixels) | Bordure
align=top align=middle align=botton align=left align=right | Alignement

8.3 Commentaires :

· En Html, l'image ne fait pas partie de votre document. Le browser va la chercher à l'adresse indiquée. Généralement, on place les images dans le même répertoire que les pages Html.

· Presque en conséquence logique de ceci, le fait d'utiliser la même image à plusieurs reprises dans un fichier Html ne modifie en rien sa taille.

· Prévoir un texte pour les browsers n'ayant pas l'option image activée, permet au lecteur de ne pas perdre le fil de l'exposé et peut-être d'activer cette option pour découvrir votre oeuvre.

· Il est important pour la fluidité de l'affichage de préciser la taille en hauteur et largeur de l'image car le browser peut ainsi connaissant l'emplacement à réserver pour celle-ci, continuer à afficher le texte. Cette information vous est donnée par Paint Shop Pro.

8.4 L'attribut Align

L'attribut align positionne l'image par rapport au texte

<IMG SRC="HELP.gif" align=TOP>Fichier d'aide

<IMG SRC="HELP.gif" align=CENTER>Fichier d'aide

<IMG SRC="HELP.gif" align=BOTTOM>Fichier d'aide

8.5 Lien sur image

Les balises sont :

<A HREF="fichier.htm"><IMG SRC="image.gif"></A>

Remarquons que les images cliquables sont entourées d'une bordure.


France

Chapitre 9 : Les séparateurs

Les browsers intègrent un outil de mise en forme intéressant pour clarifier la présentation de votre texte. C'est la ligne horizontale.

La syntaxe en est fort simple:

Ligne horizontale [Horizontal Rule] <HR> Insérer une ligne horizontale

Ce tag fort simple, nous permettra de comprendre un peu mieux le fonctionnement du navigateur. D'abord, vous avez déjà découvert au fil de vos erreurs qu'il est plutôt gentil car il s'efforce toujours d'afficher quelque chose. Ensuite, il vous ménage le travail en prenant à sa charge des valeurs par défaut d'un certain nombre d'attributs. Dans le cas présent, les valeurs par défaut de la balise <HR> sont : une épaisseur de trait de 2 pixels, un alignement centré et une largeur de 100% de la fenêtre. Vous pouvez très bien modifier au gré de votre fantaisie les valeurs de ces différents attributs.

<HR size=?> | Epaisseur en pixels
<HR width=?> | Largeur en pixels
<HR width="%"> | Largeur en % de la fenêtre
<HR align=left> <HR align=right> <HR align=center> | Alignement gauche Alignement droite Alignement centré

Il est donc tout à fait équivalent d'écrire:

· <HR> ou

· <HR size=2 align=center width="100%"

Je vous propose un petit exercice:

- Avec l'éditeur de texte

<H3 align=center>Van Lancker Luc</H3>

<HR align=center size=8 width="50%">

- Avec le browser

- Commentaires :

· On préférera spécifier la largeur en % de la fenêtre plutôt qu'en pixels car l'affichage s'adaptera ainsi à toutes les tailles et résolutions d'écran.

· On peut préférer l'usage d'images comme séparateur (comme c'est la cas ici) pour personnaliser son ouvrage.


France

Chapitre 10 : Les arrière-plans

Le langage Html permet d'agrémenter la présentation du document d'un arrière-plan [background] coloré ou composé d'une image. Ce qui apporte un élément "artistique" à votre page.

La balise à utiliser ne pose pas de problème :

Couleur d'arrière-plan <BODY BGCOLOR="#$$$$$$">

Donc, pas de problèmes! On fait un essai...

<BODY BGCOLOR="#000088">

<H1>Bonjour</H1>

</BODY>

Joli! Mais la lisibilité n'est pas parfaite. Heureusement, des balises sont prévues pour modifier les couleurs utilisées par défaut par le browser pour le texte et les liens.

Couleur de texte | <BODY TEXT="#$$$$$$">
Couleur de lien | <BODY LINK="#$$$$$$">
Lien visité | <BODY VLINK="#$$$$$$">
Lien actif | <BODY ALINK="#$$$$$$">

Reprenons notre exemple;

<BODY BGCOLOR="#000088" TEXT="#FFFF00">

<H1>Bonjour</H1>

</BODY>

On peut aussi prévoir un fond en image. Cette image (petite de préférence) est affichée en mosaïque par le browser. Attention aux raccords... comme lorsque vous posez du papier peint.

Texture d'arrière-plan <BODY BACKGROUND="Adresse">

Ce qui peut nous donner :

<BODY BACKGROUND="PAPER.gif">

<H1>Bonjour</H1>

</BODY>


France

Chapitre 11 : Les tableaux

En Html, les tableaux servent non seulement à aligner des chiffres mais surtout à placer des éléments à l'emplacement que vous souhaitez. L'usage des tableaux est donc très fréquent.

Un tableau est composé de lignes et de colonnes qui forment les cellules du tableau.

Les balises de base sont donc :

Définition du tableau | [Table] | <TABLE></TABLE> | Début et fin de tableau
Définition d'une ligne | [Table Row] | <TR></TR> | Début et fin de ligne
Définition d'une cellule | [Table Data] | <TD></TD> | Début et fin de cellule

11.1 Un tableau à deux lignes et deux colonnes, et donc à quatre cellules se représente comme suit :

<TABLE>

<TR><TD>1</TD><TD>2</TD></TR>

<TR><TD>3</TD><TD>4</TD></TR>

</TABLE>

11.2 Si vous souhaitez y adjoindre des bordures :

Bordure de cadre

[Border]

<TABLE border=?></TABLE>

<TABLE border=2>

<TR><TD>1</TD><TD>2</TD></TR>

<TR><TD>3</TD><TD>4</TD></TR>

</TABLE>

Il y a encore trois éléments (définis par défaut mais modifiables) :

L'espace entre les cellules ou l'épaisseur des lignes du quadrillage | <TABLE cellspacing=?>
L'enrobage des cellules ou l'espace entre le bord et le contenu | <TABLE cellpadding=?>
La largeur de la table | <TABLE width=?> <TABLE width=%>

Construisons un exemple :

<TABLE border=2 cellspacing=10>

<TR><TD>1</TD><TD>2</TD></TR>

<TR><TD>3</TD><TD>4</TD></TR>

</TABLE>

<TABLE border=2 cellpadding=10>

<TR><TD>1</TD><TD>2</TD></TR>

<TR><TD>3</TD><TD>4</TD></TR>

</TABLE>


France

Chapitre 12 : Les cellules des tableaux

Nous n'en avons pas fini avec les tableaux. Allons plus loin dans notre étude en nous penchant sur les cellules de ces tableaux.

Avant toutes choses, les cellules peuvent contenir tous les éléments Html déjà passés en revue soit :

· du texte

· des images

· des liens

· des arrière-plans

· et même des tableaux (eh oui!)

Bien que l'allure de votre tableaux soit déjà déterminée, chaque cellule est en quelque sorte un petit univers à part qui a ses propres spécifications. Découvrons les balises.

Largeur d'une cellule | <TD width=?> en pixels
 | <TD width=%> en pourcentage
Fusion de lignes | <TD rowspan=?>
Fusion de colonnes | <TD colspan=?>

Découvrons ceci par des exemples.

Je veux un tableau centré qui occupe 60% de la fenêtre avec sur une ligne, trois colonnes égales. Essayons ceci :

<CENTER><TABLE width=60% border=1>

<TR>

<TD>cellule1</TD>

<TD>cel. 2</TD>

<TD>3</TD>

</TR>

</TABLE></CENTER>

Pas brillant! Et avec la balise de largeur de la cellule?

<CENTER><TABLE width=60% border=1>

<TR>

<TD width=33%>cellule1</TD>

<TD width=33%>cel. 2</TD>

<TD width=34%>3</TD>

</TR>

</TABLE></CENTER>

Impeccable! Prenons le même tableau mais avec 2 lignes.

<CENTER><TABLE width=60% border=1>

<TR><TD width=33%>cellule1</TD><TD width=33%>cel. 2</TD>

<TD width=34%>3</TD></TR>

<TR><TD width=33%>cellule1</TD><TD width=33%>cel. 2</TD>

<TD width=34%>3</TD></TR>

</TABLE></CENTER>

Je souhaite que la première ligne prenne toute la largeur de la ligne. La première cellule doit donc déborder sur 3 cellules horizontales.

<CENTER><TABLE width=60% border=1>

<TR>

<TD colspan=3>cellule 1</TD>

</TR>

<TR> <TD width=33%>cellule 1</TD> <TD width=33%>cel 2</TD>

<TD width=34%>3</TD> </TR>

</TABLE></CENTER>

Dans le même style, je souhaite que la première colonne prenne toute la hauteur de la colonne. La première cellule doit donc déborder sur 2 cellules verticales.

<CENTER><TABLE width=60% border=1>

<TR>

<TD width=33% rowspan=2>cellule 1</TD>

<TD width=33%>cel 2</TD>

<TD width=34%>3</TD>

</TR>

<TR>

<TD width=33%>cel 2</TD>

<TD width=34%>3</TD>

</TR>

</TABLE></CENTER>

Maintenant, comme le disait un gardien de prison de mes connaissances, il est temps de mettre de l'ordre dans les cellules [Je n'ai pas pu résister...].

Ligne de tableau | <TR align=left/center/right> <TR valign=top/middle/bottom> | horizontalement verticalement
Cellule de tableau | <TD align=left/center/right> <TD valign=top/middle/bottom> | horizontalement verticalement

A titre d'exemple, reprenons le tableau suivant :

Avec quelques aménagements, il devient...

<CENTER><TABLE width=60% border=1>

<TR>

<TD colspan=3 align=center>Tarif au ../../..</TD>

</TR>

<TR>

<TD width=33% >Article 1</TD><TD width=33%>Ref 002 </TD>

<TD width=34% align=right>30fr</TD>

</TR>

</TABLE></CENTER>

Pour terminer cette leçon, il est aussi possible de changer la couleur de la cellule.

Couleur de la cellule <TD BGCOLOR="#$$$$$$">

Notre dernier exemple pourrait devenir :

<TD colspan=3 align=center bgcolor="#000088">


France

Chapitre 13 : Les frames

Quoi de plus simple que les frames? Mais aussi quoi de plus délicat et dangereux (risque de plantage) que les frames? En outre, tous les browsers n'ont pas la possibilité de les afficher.

Pour diviser l'écran en plusieurs fenêtres, les balises sont peu nombreuses :

Zone avec des fenêtres |
<FRAMESET> </FRAMESET> | Début de zone avec des fenêtres Fin de zone avec des fenêtres
Agencement des fenêtres |
<FRAMESET ROWS="..."> | Fenêtres horizontales
<FRAMESET COLS="..."> | Fenêtres verticales

13.1 Il est impératif de travailler avec des exemples. Pour obtenir un agencement ainsi :

Il faut employer les balises suivantes :

<HTML>

<HEAD></HEAD>

<FRAMESET ROWS="30%,70%">

<FRAME>

<FRAME>

</FRAMESET>

</HTML>

Attention! <FRAMESET></FRAMESET> remplace <BODY></BODY>

L'attribut ROWS="hauteur1,hauteur2,...,hauteurN" définit la hauteur des différentes fenêtres en cas de division horizontale.

La hauteur s'exprime en pixels ou en %. Dans ce cas, on veillera à ce que le total soit égal à100%;

13.2 Le même pour un agencement vertical

<FRAMESET COLS="30%,70%">

<FRAME>

<FRAME>

</FRAMESET>

L'attribut COLS="largeur1,largeur2,...,largeurN" définit la largeur des différentes fenêtres en cas de division verticale.

La largeur s'exprime en pixels ou en %. Dans ce cas, on veillera à ce que le total soit égal à100%;

13.3 On peut mélanger les deux :

<FRAMESET ROWS="30%,70%">

<FRAME>

<FRAMESET COLS="30%,70%">

<FRAME>

<FRAME>

</FRAMESET>

</FRAMESET>

13.4 Pour l'instant, nos frames sont vides. On va donc leur donner à manger par des attributs de la balise :

<FRAME .SRC="URL ou adresse du document à afficher dans la fenêtre">

On construit 3 fichiers Html élémentaires que l'on place dans le même répertoire que le fichier de frames :

A.htm | B.htm | C.htm
<HTML><BODY> <H4>A</H4> </BODY></HTML> | <HTML><BODY> <H1>B</H1> </BODY></HTML> | <HTML><BODY> <H1>C</H1> </BODY></HTML>

On reprend le fichier de frame précédent que l'on complète.

<FRAMESET ROWS="30%,70%">

<FRAME SRC="A.htm">

<FRAMESET COLS="30%,70%">

<FRAME SRC="B.htm">

<FRAME SRC="C.htm">

</FRAMESET>

</FRAMESET>

Les ascenseurs, comme à la fenêtre A, apparaissent automatiquement. Par l'attribut de la balise <FRAME> SCROLLING="yes/no/auto" vous pouvez indiquer si la fenêtre doit ou non posséder une barre de défilement.

13.5 Un autre attribut de cette balise <FRAME> est NAME="NOM". Name indique le nom de la fenêtre de telle sorte que cette frame puisse être utilisée comme cible d'un lien hypertexte.

Ainsi, je voudrais faire un lien sur B pour afficher le contenu de ce lien (prenons le fichier A.htm pour éviter de l'encodage) dans C .

Le fichier de frames devient :

<FRAMESET ROWS="30%,70%">

<FRAME SRC="A.htm">

<FRAMESET COLS="30%,70%">

<FRAME SRC="B.htm">

<FRAME SRC="C.htm" NAME="fenetreC">

</FRAMESET>

</FRAMESET>

Et on met un lien vers A.htm dans le fichier B.htm en désignant comme cible la frame C.

<HTML><BODY>

<A HREF="A.htm" TARGET="fenetreC"><H1>B</H1></A>

</BODY></HTML>

L'attribut TARGET peut aussi prendre certaines valeurs prédéfinies :

· _blank qui indique au browser qu'il doit créer une nouvelle fenêtre afin d'y afficher le fichier. Dans ce cas, vous ouvrer en fait un nouveau browser.

· _self qui indique que le fichier sera chargé dans la même fenêtre que celle dans laquelle se trouve le lien.

· _top qui implique l'affichage du fichier sur toute la surface de la fenêtre du browser.

VERIFIEZ TOUJOURS VOS DIFFERENTS LIENS AVEC DES FRAMES. Vous éviterez ainsi que votre beau site ne devienne rapidement une "soupe".

13.6 Par défaut, les cadres sont séparés par des bordures. Il est possible de supprimer ces bordures mais les attributs à utiliser diffèrent selon Netscape ou Internet Explorer. Netscape utilise l'attribut "border=0" et Explorer, les attributs "frameborder=no" et "framespacing=0" (pour enlever l'espace entre les cadres). Le tout cohabite sans problème. La balise devient alors par exemple :

<FRAMESET COLS="30%,70%" border=0 frameborder=no framespacing=0>

13.7 Il y a pour terminer la balise <NOFRAMES>...</NOFRAMES> qui est utilisée pour indiquer le texte que doivent afficher les browsers incapables de gérer les frames. Il est même indiqué de prévoir une page sans fenêtres pour que ces visiteurs puissent profiter quand-même de votre site.


France

Chapitre 14 : Le choix d'un éditeur

Un éditeur Html s'impose pour vous décharger d'un certain nombre de tâches fastidieuses comme les caractères spéciaux, les codes de couleur, l'encodage des balises, etc.

Comme l'éventail offert est large (une petite cinquantaine sous Windows), il est utile de guider votre choix même si nous entrons ici dans le domaine du subjectif.

14.1 Critères généraux

· La majorité des éditeurs est disponible sur le Net en version d'évaluation. Pourquoi n'en profiteriez-vous pas pour en essayer plusieurs avant de faire votre choix?

· A éviter sinon à proscrire les éditeurs "qui écrivent pour vous". Un éditeur doit vous faciliter le travail tout en vous laissant la main dans l'élaboration de votre page.

· Adoptez un éditeur avec lequel vous vous sentez à l'aise. Même s'il n'est pas le plus côté, il sera votre compagnon de longues heures de travail.

· Les éditeurs Html les plus récents sont WYSIWYG (What You See Is What You Get) ou avec prévisualisation intégrée comme votre traitement de texte. Le codage des balises Html n'apparaît donc plus. Il serait dommage de se priver de cette propriété! Gardez cependant toujours à l'esprit que cette prévisulisation n'est pas (et ne sera jamais) fidèle à 100% par rapport à ce qui sera affiché par le browser et qu'elle ne vous empêche nullement de consulter quand même le code source.

· Pourquoi un? On peut très bien imaginer un éditeur évolué pour le courant et un éditeur de la première génération (plus proche des tags purs et durs) pour les réalisations plus pointues.

14.2. Des noms ! Des noms ... [mis à jour fin 2000]

Dreamweaver | Macromedia Dreamweaver est considéré par beaucoup comme le meilleur éditeur Html du moment. C'est assurément une bonne pointure. Les Webmestres apprécieront sa façon intelligente de concevoir la création de sites (codage Html propre et académique, compatibilité avec les différents navigateurs, mises à jour dans tout le site,...). Il est peut-être un peu déroutant lors de la première prise en main avec ses différentes palettes d'outils mais on s'y habitue aisément. Complet, performant, professionnel et évolutif (même s'il n'y a pas grande différence entre la version 2.0 et 3.0). Un seul handicap cependant, c'est son prix [trop] élevé.
FrontPage 2000 | Microsoft quand tu nous tiens... Le fameux "look and feel" de Windows appliqué à l'éditeur de Microsoft rend sa prise en main des plus aisée par les utilisateurs de Microsoft Office et plus spécialement de Word. Un bon sinon un très bon produit. De plus la version 2000 me semble en très net progrès par rapport à FrontPage 98. Certains (dont l'auteur) reprochent à FrontPage une façon peu académique d'écrire le Html et il n'est pas rare que certaines choses ne passent pas sur les navigateurs de la firme Netscape. Personnellement, je ne comprend pas trop bien leur façon de concevoir et de travailler un site, ce qui ne manquera pas de déconcerter les webmestres.
WebExpert 4.0 | "On savait faire du Html en ce temps là"... WebExpert est le seul éditeur de cette série à ne pas être entièrement "Wysiwyg" et à encore présenter les balises. Et c'est loin d'être inutile car on garde encore la sensation de faire du Html et non du traitement de texte. WebExpert est un éditeur complet, intelligent et respectueux du code et de l'esprit Html. En outre ses scripts et ses aides bien réalisées dépanneront plus d'un concepteur débutant. J'avoue avoir été un peu perdu devant tous ses onglets et autres icônes qui se sont généreusement ajoutés au fil des versions. WebExpert y a perdu sa simplicité d'utilisation et un peu aussi de sa modernité. Atout maître, son prix reste très compétitif.
Adobe GoLive 4.0 | On adore ou on déteste !... Adobe Golive ravira les concepteurs graphiques de par son interface et sa possibilité de "placer" les éléments dans la page Web. Les webdesigneurs d'essence bureautique seront assurément déconcertés voire perdu dans cet univers de palettes et autres outils (un grand écran ne sera pas un luxe). Quant aux puristes du codage Html, on ne peut que leur conseiller de ne pas consulter le code source ou de prévoir une équipe de réanimation sur place. Malgré tout, certains infographistes ne jurent que par Golive. Alors ...
Namo WebEditor 3.0 | Sympathique !.... Plus évolué que FrontPage Express moins complexe que FrontPage 98 ou 2000, cet éditeur devrait ravir les webmestres débutants ou plus avancés qui cherchent à faire du bon travail sur la toile sans devoir passer par ces "usines à gaz", plus performantes peut-être mais d'une approche nettement plus compliquée. Raisonnablement complet, intelligemment conçu, Namo WebEditor laisse l'impression que tout a été pensé pour obtenir un maximum d'efficacité et de convivialité. Pas "Le" meilleur sûrement, mais le plus abordable assurément. Une alternative non négligeable !!!!
Netscape Composer | Inclus dans la suite Netscape Communicator 4.0 et ses déclinaisons suivantes, Netscape Composoer est donc un éditeur gratuit. Autant en profiter pour faire ses premiers pas de Webmestre. Bien conçu, cet éditeur reprend les principales et donc les plus usuelles fonctions du Html. J'ai par exemple toujours apprécié la réalisation des tableaux sous Netscape qui tout étant simple, permet d'avoir un résultat impeccable. Il faut cependant avouer qu'il ne fait plus le poids face aux éditeurs Html spécialisés, abordés ci-dessus. Pour débuter seulement...
FrontPage Express | Commentaires assez similaires. FrontPage Express est inclus dans la suite Microsoft Internet Explorer 4.0, 5.0 et suivantes. FontPage Express est don un éditeur gratuit. Autant en profiter pour faire ses premiers pas de Webmestre. Cet éditeur reprend les fonctions les plus usuelles du Html et sa prise en main est facilitée par une interface qui n'est pas sans rappeler Microsoft Word. Il permet donc de réaliser très rapidement quelques pages Html. Attention cependant aux pièges de FrontPage Express qui (produit Microsoft) "écrit" principalement pour Microsoft Explorer. Mauvaises surprises assurées lors d'une lecture sous un autre navigateur. Pour débuter seulement...
Et autres... | Que nous ne connaissons que de nom. HotDog Webfast HotMetal HomePage PageMill 1st Page 2000 CoffeeCup HTML HomeSite et bien d'autres encore que vous pouvez découvrir en lançant les Yahoo, Lycos, Alta Vista et autres Google sur une recherche avec pour objet "html editor" ou "éditeur html".

14.3. LES EXTENSIONS DE WORD

Malgré plusieurs essais, aucune extension de Word de la version 7 (95) ou 8 (97) ne nous a laissé un souvenir, disons, impérissable... sauf si vous restez aux fonctions toutes simples voire simplistes. Préférez alors FrontPage 98 ou 2000 si vous êtes "accros" des produits Microsoft.


France

Chapitre 15 : Des conseils en vrac

Le lecteur d'une présentation informatisée fera toujours une corrélation entre la valeur du contenu de celle-ci et la fiabilité de votre application.

Alors testez, testez... il en restera toujours quelque chose.

· Tous les liens sont-ils bien définis?

· Toutes les images sont-elles bien présentes?

· Que se passe-t-il avec un browser différent?

· Et si votre site change d'emplacement?

· Et avec une autre résolution d'écran?

Il est de bon conseil de tester les pages Web avec différents navigateurs (Netscape 2 et/ou 3, Explorer 3.0) et avec différentes résolutions d'écran (640/480, 800/600, 1024/768). Des surprises ne manqueront pas à l'appel (surtout avec Explorer 3.0).

Un truc tout simple est de changer votre site en construction de disque ou de répertoire. Il n'est pas non plus inutile de signaler les conditions optimales pour visionner votre site.

Votre page d'accueil doit être attirante à l'oeil comme à l'esprit de votre lecteur. Il faut donc la soigner plus que toutes les autres pages. Cette Homepage doit donner envie aux interlocuteurs intéressés par le sujet à aller plus loin dans votre site et permettre au surfer pressé non concerné à continuer sans remords son cybervoyage.

Généralement, on se contentera d'une ébauche de page d'accueil durant la construction du site et on fignolera cette première page en dernier lieu.

On gardera à l'esprit les questions suivantes :

· Des informations détaillées sur le contenu sont-elles directement ou rapidement disponibles?

· Votre titre résume-t-il bien le contenu de vos pages?

· L'esthétique de votre page est-elle de bon goût? Originale? Attrayante?

· N'y a-t-il rien qui ne puisse choquer inutilement un lecteur d'une culture différente de la vôtre?

· Le raffinement de votre page d'accueil n'est-il pas excessif au point de pénaliser lourdement le temps de chargement (image trop grande ou texte trop long)?

Et pour terminer une série de conseils divers.

· Présenter l'information de façon claire et sobre.

· Diffuser de l'information -- UTILE --

· Eviter de mettre trop d'informations dans la même page.

· Concevoir une structure pertinente.

· Respecter la législation sur le copyright et les droits d'auteur.

· Prévoir sur chaque page un lien vers la page d'accueil.

· Mettre régulièrement à jour le contenu.

· Mettre un titre à chaque document.

· Limiter la taille des images.

· Inclure un texte alternatif pour les images.

· Faire connaître le site aux moteurs de recherche.

· Vérifier le résultat de la mise en page à l'impression.


France

Chapitre 16 : Html avancé en bref

Même si nous ne faisons que le présenter brièvement, la publication Html, c'est aussi :

· Les images animées.

· Les images cliquables ou mapées

· Les détails de la balise <HEAD>

· Les formulaires

· Les Javascripts

· Les applets Java

16.1 Les images animées qui agrémentent les pages Web sont des images GIF, composées un peu comme les dessins animés, par des logiciels conçus à cet effet. A utiliser avec modération!

Des Gifs animées sont disponibles sur le Web. Vous pouvez aussi en créer vous-même assez facilement grâce à de petits programmes comme Microsoft Gif Animator, Gif Construction Set, Cel Assembler ou Animation Shop de Paint Shop Pro 5 ...

16.2 Les images cliquables sont divisées en zones sur lesquelles il est possible de cliquer et d'ouvrir ainsi une page située à une adresse (URL) déterminée. On apppelle aussi cette propriété l'hypergraphique par rapport à l'hypertexte.

Ici aussi de petits logiciels comme Mapedit, Map This, CrossEye, Web Hotspots... vous seront d'une grande utilité.

Les balises seront :

- pour l'image :

<IMG SRC="image.gif" USEMAP="#nom">

- pour les zones cliquables :

<MAP NAME="nom">

<Image><AREA SHAPE=RECT COORDS="X1,Y1,X2,Y2" HREF="URL">

<Image>...

</MAP>

Sans entrer dans les détails, voici une image où en cliquant sur la lettre B, le fichier B.htm sera ouvert et en cliquant sur la lettre C, ce sera au tour du fichier C.htm.

Le code source est :

<BODY>

<IMG SRC="ABC.gif" USEMAP="#Alpha">

<MAP NAME="Alpha">

<Image><AREA SHAPE=RECT COORDS="40,10,60,40" HREF="B.htm">

<Image><AREA SHAPE=RECT COORDS="70,10,95,45" HREF="C.htm>

</MAP>

</BODY>

16.3 Nous avons été très bref lors de l'étude de la balise <HEAD>. En plus de l'élément <TITLE> (titre), l'en-tête de votre page contient bien d'autres informations importantes qui intéressent le navigateur.

Le tag META sera particulièrement utile pour faire reconnaître votre page par les robots de recherche du genre AltaVista.

<META NAME="description" CONTENT="description de votre page">

Cette balise indique au robot de recherche que le contenu de CONTENT est la description de votre page Html, contenu qu'il pourra afficher comme résultat d'une recherche d'un utilisateur.

<META NAME="keywords" CONTENT="mot-clé, mot-clé, mot-clé, ...">

Cette balise indique au robot de recherche que le contenu de CONTENT est une série de mots-clés qui définira plus finement votre page. Il peut être utile de prévoir quelques mots-clés en anglais si vos pages sont en français.

<META NAME="HTTP-EQUIV="refresh" CONTENT="x" URL="adresse">

Ce tag qui fait plutôt partie des trucs et astuces de Html, appellera automatiquement une autre page (située à l'URL indiquée) après un délai de x secondes. Utilisé par exemple dans un frame, le rafraîchissement de la page permettra d'afficher à intervalle régulier différentes informations (publicitaires ou autres).

Il existe encore d'autres balises d'en-tête que vous découvrirez au fil de votre utilisation du langage Html.

16.4 Avec les formulaires, le langage Html vous ouvre la porte de l'interactivité. Votre interlocuteur pourra remplir un champ de saisie de texte ou d'autres objets interactifs comme des cases à cocher. Ces données seront transmises au serveur, par exemple à votre adresse électronique (Mail).

Les formulaires peuvent prendre la forme :

- d'une ligne de texte

- de boutons radio

- de cases à cocher

- d'un menu déroulant

A la suite du ou des formulaires, il y aura un bouton dont la fonction sera d'envoyer les messages (par exemple à votre adresse électronique).

16.5 Jusqu'à présent, nous n'avons que publié des pages sur le Web. Avec Javascript et Java, nous allons découvrir les éléments pour programmer sur le Web.

Javascript est un ensemble de codes (scripts) directement incorporés dans Html, qui permet de faire réaliser au browser certaines fonctions déterminées. Pour autant que le navigateur le permette bien entendu (ce que font nos deux complices, Netscape 2.0 et plus et Microsoft Explorer 3.0 [en principe pour ce dernier cependant] ).

A titre d'exemple, on peut aisément faire apparaître avec Javascript un petit message du genre "Attention!" lorsque l'utilisateur clique sur un bouton.

Le code est assez simple :

<HTML>

<HEAD>

<SCRIPT language="JavaScript">

<!--

function hello() {

alert("Attention!");

}

// -->

</SCRIPT>

</HEAD>

<BODY>

...<input type=button name="" value=" Pour le test " onClick="hello()">...

</BODY>

</HTML>

On peut aussi réaliser en Javascript des choses plus complexes sans un long apprentissage (et sans compilateur). De façon très schématique Javascript serait une version étendue de Html ou une version simplifiée de Java.

Vous trouverez sur le Web des petites applications que vous pouvez modifier légèrement (en changeant le texte par exemple) pour les inclure dans vos pages.

16.6 Java est quant à lui un langage de programmation à part entière développé par Sun Microsystems. Il est nettement plus lourd et compliqué que Javascript mais également beaucoup plus puissant. Ce qui ouvre des perpectives immenses à l'évolution future des pages Html.

Java est donc un langage orienté objet (proche de C++) qui permet de compiler des programmes exécutables mais aussi de petites applications, indépendantes de toute plate-forme, appelées des applets. Ces applets, pourvu que le navigateur sache les interpréter, sont exécutées en local sur la machine affichant le document.

Si vous ne vous sentez pas une âme de programmeur. Cela ne vous empêchera pas d'utiliser des applets Java. Vous en trouverez sur le Net, avec leurs sources et paramètres. Il suffit de lancer une recherche avec comme critère "Java Applet".

Attention Javascipt et Java peuvent faire planter le système de votre lecteur!

Cette intégration des applets est réalisée par le tag <APPLET>..</APPLET>.

Par exemple :

<APPLET code="clock.class" width=200 height=200>

<PARAM ... les paramètres transmis par l'auteur ... >

</APPLET>

où "clock.class" est le fichier du programme Java exécutable qui se trouve dans le répertoire de ce site.

J'aimerais ajouter que les applets Java (mais c'est une appréciation toute personnelle) sont assez lentes et ralentissent fortement le site.


France

Chapitre 17 : Créer votre site Internet

Un site Internet est un ensemble de pages Html, reliées entre elles, généralement consacrées à un sujet déterminé, et qui sont portées à la libre connaissance de la communauté des internautes. Un site Internet constitue l'outil le plus moderne de communication et de publication. Voici ci-après les différentes procédures à suivre pour créer un site.

17.1. Trouver un contenu

Dur, dur ! Publier quand on n'a rien à dire est inutile. Les pages personnelles avec le chanteur préféré ou le sport de prédilection n'ont à mon avis qu'un intérêt fort limité. Cherchez dans vos zones de compétences -- qu'elles soient professionnelles ou dans le domaine de vos loisirs -- un sujet, un thème, une passion que vous souhaitez partager. Ne visez pas à tout prix l'expertise, Internet est assez étendu pour trouver un public pourvu que votre site soit de qualité. Je serais tenté de dire qu'un site s'écrit autant (sinon plus...) avec ses tripes qu'avec sa tête.

17.2. Structurer le contenu

Une des règles d'or pour la réalisation d'un site est que chaque page Html ne peut dépasser 3 à 5 écrans, pour des raisons de temps de chargement et de lisibilité. Il faudra donc découper votre contenu en pages et sous-pages (qui ne correspondront pas forcément à vos chapitres). Ensuite il faudra relier ses différentes pages de façon logique afin que votre cher lecteur puisse naviguer avec aisance dans votre site. Ce qui ne pose pas (trop) de difficultés du point de vue technique, car le langage Html est, par essence, un langage hypertexte ou plus simple encore un langage de liens.

Des petits repères graphiques rendront cette navigation plus intuitive pour votre lecteur. On prévoit généralement sur chaque page, un retour vers la page d'accueil ou table des matières pour venir au secours des lecteurs égarés ou encore à ceux (et cela arrive plus souvent qu'on le pense) qui entrent dans votre site par le thème d'une page déterminée.

17.3. Communiquer avec votre public

Communiquer avec des mots, des couleurs, la mise en page et les images. L'auteur d'un site Web se voit confronté avec la forme la plus aboutie de ce qu'on appelle la communication.

Dans cette communication par essence internationale, - visuelle autant que littéraire -, il faudra tenir compte des différences culturelles qui peuvent exister (même si votre site est ne s'adresse qu'aux francophones). Sobriété des mots et de la présentation graphique, concision, efficacité seront les éléments déterminants. Mais ce ne sera pas forcément la règle... Rester soi-même, me semble être le meilleur conseil. Le respect des règles et usages du Web en la matière (la fameuse Netiquette) sera le meilleur garant de la "mondialisation" de votre communication.

17.4. Connaître le langage Html

Le Web parle en langage Html. Sans Html point de salut ! Avec les éditeurs Html récents, on est loin du temps des "pionniers" du net (que je salue ici) qui en braves bénédictins du clavier devaient taper toutes les balises et autres caractères accentués. Il n'empêche que même avec le meilleur éditeur, vous devrez tôt ou tard plonger dans le code source Html. C'est pourquoi une bonne connaissance du Html se révélera très vite comme indispensable. Pour apprendre le langage Html, je ne peux que conseiller mon site (mais il y en existe d'autres...) à l'adresse : www.ccim.be/ccim328/html/index.htm.

Précisons que vous pouvez très bien faire un site sans Javascript ou VBscript.

17.5. Avoir quelques connaissances graphiques

Le 21ème siècle sera image ou ne sera pas. Il n'est pas nécessaire d'être un infographiste de choc pour faire un site mais un minimum de connaissances dans le traitement de l'image sera utile. La bonne connaissance d'un logiciel comme Paint Shop Pro, me semble une bonne introduction en matière de traitement graphique.

Ne perdez pas de vue pour le temps de chargement de votre page, que la plus petite image correspond à une ou plusieurs pages de texte. L'utilisation des images, aussi indispensable soit-elle pour la présentation, est donc toujours un compromis.

17.6. Avoir du temps et de la patience

Pour les non-initiés, faire un site est assez semblable à taper un article de presse ou un gros rapport. D'ailleurs, quand on parle de prix pour la réalisation d'un site, le prospect pousse généralement des hauts cris. Faire un site, c'est accoucher du contenu, veiller à une mise en page attrayante, faire et vérifier tous les hyperliens, parfois se battre avec le langage Html, le tester sous divers browsers (et surtout Explorer 3.0), le tester encore avec les différentes résolutions d'écran.

Le drame (et la richesse) de toute présentation multimédia, est que toute erreur ou faute de goût dans l'aspect visuel dépréciera automatiquement le contenu de celle-ci. Mais, qu'est ce que cela est passionnant !

17.7. Avoir un espace disque chez un provider

Si vous avez un connexion Internet, il y a de grandes chances que vous ayez déjà un espace disque compris dans votre abonnement. Sinon demandez le ou alors changez de provider... Si vous n'êtes pas connectés, appelez MacGuyver à votre secours ! Il existe sur Internet des bonnes âmes qui hébergent des sites (par exemple mygale.fr). Des Cyber clubs ou Cyber cafés peuvent vous fournir un espace disque pour une somme modique. Ou encore, vous avez peut-être un bon ami connecté qui n'utilise pas son espace disque. Alors...

Un méga est un minimum mais il y a déjà moyen de faire quelque chose de bien à condition de ne pas être trop gourmand en images. Avec votre espace disque, vous aurez aussi votre adresse Internet, du genre : www.nom_du_provider/votre répertoire.

17.8. Avoir une adresse électronique

Une adresse électronique n'est pas à proprement parler un élément d'un site. Mais sans elle, votre site perdrait toute sa saveur. Les possibilités du courrier électronique seront la suite ou le complément indispensable en terme de contact, de communication, de feed-back et autre interactivité avec les lecteurs de votre site.

17.9. Charger votre site

Cette procédure angoisse le plus les néophytes. En fait, c'est peut-être l'opération la plus simple dans la création de votre site. Avec des logiciels comme CuteFtp, par exemple, une fois connecté avec votre provider et votre mot de passe reconnu, le chargement de votre site est une opération dont la complexité (sic) correspond au déplacement de fichiers d'un répertoire à un autre répertoire dans l'Explorateur de Windows.

17.10. Faire connaître votre site

Le cercle de vos amis étant très vite épuisé, il faut passer par les moteurs de recherche et autres sites de référencement pour faire connaître votre oeuvre à la communauté des internautes. A vous les Yahoo, Francité, Alta Vista, Nomade, et autres Lycos ou Excite. Pour les francophones, on voit ces moteurs (en français) se multiplier. Et c'est une très bonne chose !

Il suffit pour cela d'aller sur le site du moteur de recherche en question. Trouver le lien "Ajouter un site" ou "Référencement" et de suivre scrupuleusement les instructions présentées à l'écran. Préparer à l'avance vos mots-clés ainsi qu'un bref descriptif de votre site. Pour ce dernier, il faut en quelques mots (150 à 250 mots) décrire votre site mais surtout donner envie aux surfeurs de venir le visiter.

17.11. Incorporer un compteur d'accès

Mettre un compteur ou ne pas en mettre. Voilà la question ! Témoin impartial de la réussite (à la condition de ne pas le trafiquer) ou du peu d'intérêt de votre site, un compteur d'accès sera votre audimat ou du moins l'indice de fréquentation de celui-ci.

Si vous trouvez votre compteur un peu paresseux, prenez d'abord patience car le temps de réaction entre la déclaration de votre site aux moteurs de recherche et l'arrivée des visiteurs peut prendre plusieurs (longues) semaines. Les chiffres du compteur d'accès doivent être cependant modulés par la qualité de votre courrier électronique. On peut très bien imaginer un super site sur un sujet pointu qui passionne littéralement un petit groupe d'initiés.

Vous trouverez aisément ce type de compteur, soit chez votre provider, soit sur le Web.

17.12. Faire des mises à jour

Au contraire d'un livre, un site Internet est quelque chose de vivant... Votre contenu évolue, votre courrier vous permet de mieux cibler votre public, vos lecteurs vous suggèrent telle ou telle ajoute, votre présentation graphique vieillit quelque peu, voilà autant de bonnes raisons de faire des mises à jour régulières qui permettront de fidéliser vos lecteurs.

Voilà, un long travail se termine. A vous maintenant l'angoisse du compteur, le trésor des premiers mails, la mise en oeuvre des dernières corrections et des premières mises à jour. Et puis je vous jure le prochain, il sera encore plus super !

Apprendre le langage Html
www.ccim.be/ccim328/html/
Copyright 1998

Version au17 novembre 2000

L'auteur

Van Lancker Luc

Rue des Brasseurs, 22

7700 Mouscron

Belgique

Vanlancker.Luc@ccim.be

Un mot d'encouragement ou un compliment fait toujours plaisir.

Critiques et suggestions seront aussi examinées avec attention.

Du même auteur :

Apprendre le Javascript

Apprendre le Vbscript

Maîtriser le langage Html

www.ccim.be/ccim328/js/index.htm
www.ccim.be/ccim328/vb/index.htm
www.ccim.be/ccim328/htmlplus/index.htm

Liste des principales balises Html

Mise en forme des caractères

<B>...</B> | Texte en gras
<BIG>...</BIG> | Agrandissement de la taille des caractères
<BLINK>...</BLINK> | Texte clignotant (Netscape seul)
<EM>...</EM> | Texte en italique
<FONT color="#XXXXXX">...</FONT> | Texte en couleur où XXXXXX est une valeur hexadécimale
<FONT size=X>...</FONT> | Taille des caractères où X est une valeur de 1 à 7
<I>...</I> | Texte en italique
<NOBR>...</NOBR> | Empêche les ruptures automatiques de ligne des navigateurs
<PRE>...</PRE> | Texte préformaté, soit avec affichage de tous les espaces et sauts de ligne
<SMALL>...</SMALL> | Réduction de la taille des caractères
<STRONG>...</STRONG> | Mise en gras du texte
<SUB>...</SUB> | Texte en indice
<SUP>...</SUP> | Texte en exposant
<U>...</U> | Texte souligné

Mise en forme du texte

<!--...--> | Commentaire ignoré par le navigateur
<BR> | A la ligne
<BLOCKQUOTE>...</BLOCKQUOTE> | Citation (introduit un retrait du texte)
<CENTER>...</CENTER> | Centre tout élément compris dans le tag
<DIV align=center> ...</DIV> | Centre l'élément encadré par le tag
<DIV align=left> ...</DIV> | Aligne l'élément à gauche
<DIV align=right> ...</DIV> | Aligne l'élément à droite
<Hx>...</Hx> <Hx align=center>...</Hx> <Hx align=left>...</Hx> <Hx align=right>...</Hx> | Titre où x a une valeur de 1 à 7 Titre centré Titre aligné à gauche Titre aligné à droite
<P>...</P> <P align=center>...</P> <P align=left>...</P> <P align=right>...</P> | Nouveau paragraphe Paragraphe centré Paragraphe aligné à gauche Paragraphe aligné à droite

Listes

<UL> <LI> </UL> | Liste non numérotée (dite à puces) Elément de liste
<OL> <LI> </OL> | Liste numérotée Elément de liste
<DL> <DT>...</DT> <DD>...</DD> </DL> | Liste de glossaire Terme de glossaire (sans retrait) Explication du terme (avec retrait) Ligne de séparation
<HR> | Trait horizontal (centré par défaut)
<HR width="x%"> | Largeur du trait en %
<HR width=x> | Largeur du trait en pixels
<HR size=x> | Hauteur du trait en pixels
<HR align=center> <HR align=left> <HR align=right> | Trait centré (défaut) Trait aligné à gauche Trait aligné à droite
<HR noshade> | Trait sans effet d'ombrage

Hyperliens

<A href="http://...">...</A> | Lien vers une page Web
<A href="mailto:...">...</A> | Lien vers une adresse Email
<A href="fichier.htm">...</A> | Lien vers la page locale fichier.htm située dans le même dossier
<A name="xyz">...</A> | Définition d'une ancre
<A href="xyz">...</A> <A href="fichier#xyz">...</A> | Lien vers une ancre

Images

<IMG src="xyz.gif"> <IMG src="xyz.pjg> | Insertion d'une image au format Gif ou Jpg (voir liens pour l'adressage)
<IMG ... width=x height=y> | Mise à l'échelle de l'image en pixels
< IMG ... border=x> | Définition de la bordure d'une image avec lien
<IMG ... alt="votre texte"> | Texte alternatif lorsque l'image n'est pas affichée
<IMG ... align=bottom> <IMG ... align=middle> <IMG ... align=top> <IMG ... align=left> <IMG ... align=right> | Aligne l'image en bas Aligne l'image au milieu Aligne l'image en haut Aligne l'image à gaughe Aligne l'image à droite
<IMG ... hspace=x> <IMG ... vspace=y> | Espacement horizontal entre l'image et le texte Espacement vertical entre l'image et le texte

Tableau

<TABLE>...</TABLE> | Définition d'un tableau
<TABLE width="x%"> | Largeur du tableau en %
< TABLE width=x> | Largeur du tableau en pixels
<TABLE border=x> | Largeur de la bordure
<TABLE cellpadding=x> | Espace entre la bordure et le texte
<TABLE cellspacing=x> | Epaisseur du trait entre les cellules
<TR>...</TR> | Ligne du tableau
<TD>...</TD> | Cellule du tableau
<TD bgcolor="#XXXXXX"> | Couleur d'une cellule de tableau
<TD width="x%"> <TD width=x> | Largeur de colonne en % Largeur de colonne en pixels
<TD align=center> <TD align=left> <TD align=right> | Texte dans la cellule centré Texte dans la cellule aligné à gauche Texte dans la cellule aligné à droite
<TD valign=bottom> <TD valign=middle> <TD valign=top> | Alignement vers le bas du contenu d'une cellule Centrage vertical du contenu d'une cellule Alignement vers le haut du contenu d'une cellule
<TD colspan=x> <TD rowspan=x> | Nombre de cellules à fusionner horizontalement Nombre de cellules à fusionner verticalement

Frames

<FRAMESET>...</FRAMESET> | Définit une structure de frames(remplace alors le tag BODY)
<FRAMESET rows="x%,y%,..."> | Division horizontale de la fenêtre en %
<FRAMESET cols="x%,y%,..."> | Division verticale de la fenêtre en %
<FRAME src="fichier.htm"> | Fichier affiché dans une fenêtre de frames
<NOFRAMES>...</NOFRAMES> | Contenu pour les browsers non prévus pour les frames

Fichier Html

<HTML>...</HTML> | Début et fin de fichier Html
<HEAD>...</HEAD> | Zone d'en-tête d'un fichier Html
<TITLE>...</TITLE> | Titre affiché par le browser (élément de HEAD)
<BODY>...</BODY> | Début et fin du corps du fichier Html
<BODY bgcolor="#XXXXXX"> | Couleur d'arrière-plan (en hexadécimal)
<BODY background="xyz.gif"> | Image d'arrière-plan

Apprendre le langage Html www.ccim.be/ccim328/html/

Les caractères spéciaux

Voici ces caractères en code ISO 5589-1 (appelée aussi ISO-Latin 1), ainsi que leur abréviation ENTITY.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

Caractère | Code ISO | ENTITY | Caractère | Code ISO | ENTITY | Caractère | Code ISO | ENTITY
 | &#129; |  | « | &#171; | &laquo; | Õ | &#213; | &Otilde;
‚ | &#130; |  | ¬ | &#172; | &not; | Ö | &#214; | &Ouml;
ƒ | &#131; |  |  | &#173; | &shy; | ´ | &#215; | &times;
„ | &#132; |  | ® | &#174; | &reg; | Ø | &#216; | &Oslash;
… | &#133; |  | ¯ | &#175; | &masr; | Ù | &#217; | &Ugrave;
† | &#134; |  | ° | &#176; | &deg; | Ú | &#218; | &Uacute;
‡ | &#135; |  | ± | &#177; | &plusmn; | Û | &#219; | &Ucirc;
ˆ | &#136; |  | ² | &#178; | &sup2; | Ü | &#220; | &Uuml;
‰ | &#137; |  | ³ | &#179; | &sup3; | Ý | &#221; | &Yacute;
Š | &#138; |  | ´ | &#180; | &acute; | Þ | &#222; | &THORN
‹ | &#139; |  | m | &#181; | &micro; | ß | &#223; | &szlig;
Œ | &#140; |  | ¶ | &#182; | &para; | à | &#224; | &agrace;
 | &#141; |  | · | &#183; | &middot; | á | &#225; | &aacute;
 | &#142; |  | ¸ | &#184; | &cedil; | â | &#226; | &acirc;
 | &#143; |  | 1 | &#185; | &sup1; | ã | &#227; | &atilde;
 | &#144; |  | º | &#186; | &ordm; | ä | &#228; | &auml;
‘ | &#145; |  | » | &#187; | &raquo; | å | &#229; | &aring;
’ | &#146; |  | ¼ | &#188; | &frac14; | æ | &#230; | &aelig;
“ | &#147; |  | ½ | &#189; | &frac12; | ç | &#231; | &ccedil;
” | &#148; |  | ¾ | &#190; | &frac34; | è | &#232; | &egrave;
• | &#149; |  | ¿ | &#191; | &iquest; | é | &#233; | &eacute;
– | &#150; |  | À | &#192; | &Agrave; | ê | &#234; | &ecirc;
— | &#151; |  | Á | &#193; | &Aacute; | ë | &#235; | &euml;
˜ | &#152; |  | Â | &#194; | &Acirc; | ì | &#236; | &igrave;
™ | &#153; |  | Ã | &#195; | &Atilde; | í | &#237; | &iacute;
š | &#154; |  | Ä | &#196; | &Auml; | î | &#238; | &icirc;
› | &#155; |  | Å | &#197; | &Aring; | ï | &#239; | &iuml;
œ | &#156; |  | Æ | &#198 | &Aelig | ð | &#240; | &eth;
 | &#157; |  | Ç | &#199; | &Ccedil; | ñ | &#241; | &ntilde;
 | &#158; |  | È | &#200; | &Egrave; | ò | &#242; | &ograve;
Ÿ | &#159; |  | É | &#201; | &Eacute; | ó | &#243; | &oacute;
espace | &#160; | &nbsp; | Ê | &#202; | &Ecric; | ô | &#244; | &ocirc;
¡ | &#161; | &iexcl; | Ë | &#203; | &Euml; | õ | &#245; | &otilde;
¢ | &#162; | &cent; | Ì | &#204; | &Igrave; | ö | &#246; | &ouml;
£ | &#163; | &pound; | Í | &#205; | &Iacute; | ¸ | &#247; | &divide;
¤ | &#164; | &curren; | Î | &#206; | &Icirc; | ø | &#248; | &oslash;
¥ | &#165; | &yen | Ï | &#207; | &Iuml; | ù | &#249; | &ugrave;
¦ | &#166; | &brvbar; | Ð | &#208; | &ETH; | ú | &#250; | &uacute;
§ | &#167; | &sect; | Ñ | &#209; | &Ntilde; | û | &#251; | &ucirc;
¨ | &#168; | &uml; | Ò | &#210; | &Ograve; | ü | &#252; | &uuml;
© | &#169; | &copy; | Ó | &#211; | &Oacute; | ý | &#253; | &yacute;
ª | &#170; | &ordf; | Ô | &#212; | &Ocirc; | þ | &#254; | &thorn;
 |  |  |  |  |  | ÿ | &#255; | &yuml;

Apprendre le langage Html www.ccim.be/ccim328/html/

Chapitre 17 : Créer votre site Internet

Un site Internet est un ensemble de pages Html, reliées entre elles, généralement consacrées à un sujet déterminé, et qui sont portées à la libre connaissance de la communauté des internautes. Un site Internet constitue l'outil le plus moderne de communication et de publication. Voici ci-après les différentes procédures à suivre pour créer un site.

17.1. Trouver un contenu

Dur, dur ! Publier quand on n'a rien à dire est inutile. Les pages personnelles avec le chanteur préféré ou le sport de prédilection n'ont à mon avis qu'un intérêt fort limité. Cherchez dans vos zones de compétences -- qu'elles soient professionnelles ou dans le domaine de vos loisirs -- un sujet, un thème, une passion que vous souhaitez partager. Ne visez pas à tout prix l'expertise, Internet est assez étendu pour trouver un public pourvu que votre site soit de qualité. Je serais tenté de dire qu'un site s'écrit autant (sinon plus...) avec ses tripes qu'avec sa tête.

17.2. Structurer le contenu

Une des règles d'or pour la réalisation d'un site est que chaque page Html ne peut dépasser 3 à 5 écrans, pour des raisons de temps de chargement et de lisibilité. Il faudra donc découper votre contenu en pages et sous-pages (qui ne correspondront pas forcément à vos chapitres). Ensuite il faudra relier ses différentes pages de façon logique afin que votre cher lecteur puisse naviguer avec aisance dans votre site. Ce qui ne pose pas (trop) de difficultés du point de vue technique, car le langage Html est, par essence, un langage hypertexte ou plus simple encore un langage de liens.

Des petits repères graphiques rendront cette navigation plus intuitive pour votre lecteur. On prévoit généralement sur chaque page, un retour vers la page d'accueil ou table des matières pour venir au secours des lecteurs égarés ou encore à ceux (et cela arrive plus souvent qu'on le pense) qui entrent dans votre site par le thème d'une page déterminée.

17.3. Communiquer avec votre public

Communiquer avec des mots, des couleurs, la mise en page et les images. L'auteur d'un site Web se voit confronté avec la forme la plus aboutie de ce qu'on appelle la communication.

Dans cette communication par essence internationale, - visuelle autant que littéraire -, il faudra tenir compte des différences culturelles qui peuvent exister (même si votre site est ne s'adresse qu'aux francophones). Sobriété des mots et de la présentation graphique, concision, efficacité seront les éléments déterminants. Mais ce ne sera pas forcément la règle... Rester soi-même, me semble être le meilleur conseil. Le respect des règles et usages du Web en la matière (la fameuse Netiquette) sera le meilleur garant de la "mondialisation" de votre communication.

17.4. Connaître le langage Html

Le Web parle en langage Html. Sans Html point de salut ! Avec les éditeurs Html récents, on est loin du temps des "pionniers" du net (que je salue ici) qui en braves bénédictins du clavier devaient taper toutes les balises et autres caractères accentués. Il n'empêche que même avec le meilleur éditeur, vous devrez tôt ou tard plonger dans le code source Html. C'est pourquoi une bonne connaissance du Html se révélera très vite comme indispensable. Pour apprendre le langage Html, je ne peux que conseiller mon site (mais il y en existe d'autres...) à l'adresse : www.ccim.be/ccim328/html/index.htm.

Précisons que vous pouvez très bien faire un site sans Javascript ou VBscript.

17.5. Avoir quelques connaissances graphiques

Le 21ème siècle sera image ou ne sera pas. Il n'est pas nécessaire d'être un infographiste de choc pour faire un site mais un minimum de connaissances dans le traitement de l'image sera utile. La bonne connaissance d'un logiciel comme Paint Shop Pro, me semble une bonne introduction en matière de traitement graphique.

Ne perdez pas de vue pour le temps de chargement de votre page, que la plus petite image correspond à une ou plusieurs pages de texte. L'utilisation des images, aussi indispensable soit-elle pour la présentation, est donc toujours un compromis.

17.6. Avoir du temps et de la patience

Pour les non-initiés, faire un site est assez semblable à taper un article de presse ou un gros rapport. D'ailleurs, quand on parle de prix pour la réalisation d'un site, le prospect pousse généralement des hauts cris. Faire un site, c'est accoucher du contenu, veiller à une mise en page attrayante, faire et vérifier tous les hyperliens, parfois se battre avec le langage Html, le tester sous divers browsers (et surtout Explorer 3.0), le tester encore avec les différentes résolutions d'écran.

Le drame (et la richesse) de toute présentation multimédia, est que toute erreur ou faute de goût dans l'aspect visuel dépréciera automatiquement le contenu de celle-ci. Mais, qu'est ce que cela est passionnant !

17.7. Avoir un espace disque chez un provider

Si vous avez un connexion Internet, il y a de grandes chances que vous ayez déjà un espace disque compris dans votre abonnement. Sinon demandez le ou alors changez de provider... Si vous n'êtes pas connectés, appelez MacGuyver à votre secours ! Il existe sur Internet des bonnes âmes qui hébergent des sites (par exemple mygale.fr). Des Cyber clubs ou Cyber cafés peuvent vous fournir un espace disque pour une somme modique. Ou encore, vous avez peut-être un bon ami connecté qui n'utilise pas son espace disque. Alors...

Un méga est un minimum mais il y a déjà moyen de faire quelque chose de bien à condition de ne pas être trop gourmand en images. Avec votre espace disque, vous aurez aussi votre adresse Internet, du genre : www.nom_du_provider/votre répertoire.

17.8. Avoir une adresse électronique

Une adresse électronique n'est pas à proprement parler un élément d'un site. Mais sans elle, votre site perdrait toute sa saveur. Les possibilités du courrier électronique seront la suite ou le complément indispensable en terme de contact, de communication, de feed-back et autre interactivité avec les lecteurs de votre site.

17.9. Charger votre site

Cette procédure angoisse le plus les néophytes. En fait, c'est peut-être l'opération la plus simple dans la création de votre site. Avec des logiciels comme CuteFtp, par exemple, une fois connecté avec votre provider et votre mot de passe reconnu, le chargement de votre site est une opération dont la complexité (sic) correspond au déplacement de fichiers d'un répertoire à un autre répertoire dans l'Explorateur de Windows.

17.10. Faire connaître votre site

Le cercle de vos amis étant très vite épuisé, il faut passer par les moteurs de recherche et autres sites de référencement pour faire connaître votre oeuvre à la communauté des internautes. A vous les Yahoo, Francité, Alta Vista, Nomade, et autres Lycos ou Excite. Pour les francophones, on voit ces moteurs (en français) se multiplier. Et c'est une très bonne chose !

Il suffit pour cela d'aller sur le site du moteur de recherche en question. Trouver le lien "Ajouter un site" ou "Référencement" et de suivre scrupuleusement les instructions présentées à l'écran. Préparer à l'avance vos mots-clés ainsi qu'un bref descriptif de votre site. Pour ce dernier, il faut en quelques mots (150 à 250 mots) décrire votre site mais surtout donner envie aux surfeurs de venir le visiter.

17.11. Incorporer un compteur d'accès

Mettre un compteur ou ne pas en mettre. Voilà la question ! Témoin impartial de la réussite (à la condition de ne pas le trafiquer) ou du peu d'intérêt de votre site, un compteur d'accès sera votre audimat ou du moins l'indice de fréquentation de celui-ci.

Si vous trouvez votre compteur un peu paresseux, prenez d'abord patience car le temps de réaction entre la déclaration de votre site aux moteurs de recherche et l'arrivée des visiteurs peut prendre plusieurs (longues) semaines. Les chiffres du compteur d'accès doivent être cependant modulés par la qualité de votre courrier électronique. On peut très bien imaginer un super site sur un sujet pointu qui passionne littéralement un petit groupe d'initiés.

Vous trouverez aisément ce type de compteur, soit chez votre provider, soit sur le Web.

17.12. Faire des mises à jour

Au contraire d'un livre, un site Internet est quelque chose de vivant... Votre contenu évolue, votre courrier vous permet de mieux cibler votre public, vos lecteurs vous suggèrent telle ou telle ajoute, votre présentation graphique vieillit quelque peu, voilà autant de bonnes raisons de faire des mises à jour régulières qui permettront de fidéliser vos lecteurs.

Voilà, un long travail se termine. A vous maintenant l'angoisse du compteur, le trésor des premiers mails, la mise en oeuvre des dernières corrections et des premières mises à jour. Et puis je vous jure le prochain, il sera encore plus super !

Apprendre le langage Html
www.ccim.be/ccim328/html/
Copyright 1998

Version au17 novembre 2000

L'auteur

Van Lancker Luc

Rue des Brasseurs, 22

7700 Mouscron

Belgique

Vanlancker.Luc@ccim.be

Un mot d'encouragement ou un compliment fait toujours plaisir.

Critiques et suggestions seront aussi examinées avec attention.

Du même auteur :

Apprendre le Javascript

Apprendre le Vbscript

Maîtriser le langage Html

www.ccim.be/ccim328/js/index.htm
www.ccim.be/ccim328/vb/index.htm
www.ccim.be/ccim328/htmlplus/index.htm

Liste des principales balises Html

Mise en forme des caractères

<B>...</B> | Texte en gras
<BIG>...</BIG> | Agrandissement de la taille des caractères
<BLINK>...</BLINK> | Texte clignotant (Netscape seul)
<EM>...</EM> | Texte en italique
<FONT color="#XXXXXX">...</FONT> | Texte en couleur où XXXXXX est une valeur hexadécimale
<FONT size=X>...</FONT> | Taille des caractères où X est une valeur de 1 à 7
<I>...</I> | Texte en italique
<NOBR>...</NOBR> | Empêche les ruptures automatiques de ligne des navigateurs
<PRE>...</PRE> | Texte préformaté, soit avec affichage de tous les espaces et sauts de ligne
<SMALL>...</SMALL> | Réduction de la taille des caractères
<STRONG>...</STRONG> | Mise en gras du texte
<SUB>...</SUB> | Texte en indice
<SUP>...</SUP> | Texte en exposant
<U>...</U> | Texte souligné

Mise en forme du texte

<!--...--> | Commentaire ignoré par le navigateur
<BR> | A la ligne
<BLOCKQUOTE>...</BLOCKQUOTE> | Citation (introduit un retrait du texte)
<CENTER>...</CENTER> | Centre tout élément compris dans le tag
<DIV align=center> ...</DIV> | Centre l'élément encadré par le tag
<DIV align=left> ...</DIV> | Aligne l'élément à gauche
<DIV align=right> ...</DIV> | Aligne l'élément à droite
<Hx>...</Hx> <Hx align=center>...</Hx> <Hx align=left>...</Hx> <Hx align=right>...</Hx> | Titre où x a une valeur de 1 à 7 Titre centré Titre aligné à gauche Titre aligné à droite
<P>...</P> <P align=center>...</P> <P align=left>...</P> <P align=right>...</P> | Nouveau paragraphe Paragraphe centré Paragraphe aligné à gauche Paragraphe aligné à droite

Listes

<UL> <LI> </UL> | Liste non numérotée (dite à puces) Elément de liste
<OL> <LI> </OL> | Liste numérotée Elément de liste
<DL> <DT>...</DT> <DD>...</DD> </DL> | Liste de glossaire Terme de glossaire (sans retrait) Explication du terme (avec retrait) Ligne de séparation
<HR> | Trait horizontal (centré par défaut)
<HR width="x%"> | Largeur du trait en %
<HR width=x> | Largeur du trait en pixels
<HR size=x> | Hauteur du trait en pixels
<HR align=center> <HR align=left> <HR align=right> | Trait centré (défaut) Trait aligné à gauche Trait aligné à droite
<HR noshade> | Trait sans effet d'ombrage

Hyperliens

<A href="http://...">...</A> | Lien vers une page Web
<A href="mailto:...">...</A> | Lien vers une adresse Email
<A href="fichier.htm">...</A> | Lien vers la page locale fichier.htm située dans le même dossier
<A name="xyz">...</A> | Définition d'une ancre
<A href="xyz">...</A> <A href="fichier#xyz">...</A> | Lien vers une ancre

Images

<IMG src="xyz.gif"> <IMG src="xyz.pjg> | Insertion d'une image au format Gif ou Jpg (voir liens pour l'adressage)
<IMG ... width=x height=y> | Mise à l'échelle de l'image en pixels
< IMG ... border=x> | Définition de la bordure d'une image avec lien
<IMG ... alt="votre texte"> | Texte alternatif lorsque l'image n'est pas affichée
<IMG ... align=bottom> <IMG ... align=middle> <IMG ... align=top> <IMG ... align=left> <IMG ... align=right> | Aligne l'image en bas Aligne l'image au milieu Aligne l'image en haut Aligne l'image à gaughe Aligne l'image à droite
<IMG ... hspace=x> <IMG ... vspace=y> | Espacement horizontal entre l'image et le texte Espacement vertical entre l'image et le texte

Tableau

<TABLE>...</TABLE> | Définition d'un tableau
<TABLE width="x%"> | Largeur du tableau en %
< TABLE width=x> | Largeur du tableau en pixels
<TABLE border=x> | Largeur de la bordure
<TABLE cellpadding=x> | Espace entre la bordure et le texte
<TABLE cellspacing=x> | Epaisseur du trait entre les cellules
<TR>...</TR> | Ligne du tableau
<TD>...</TD> | Cellule du tableau
<TD bgcolor="#XXXXXX"> | Couleur d'une cellule de tableau
<TD width="x%"> <TD width=x> | Largeur de colonne en % Largeur de colonne en pixels
<TD align=center> <TD align=left> <TD align=right> | Texte dans la cellule centré Texte dans la cellule aligné à gauche Texte dans la cellule aligné à droite
<TD valign=bottom> <TD valign=middle> <TD valign=top> | Alignement vers le bas du contenu d'une cellule Centrage vertical du contenu d'une cellule Alignement vers le haut du contenu d'une cellule
<TD colspan=x> <TD rowspan=x> | Nombre de cellules à fusionner horizontalement Nombre de cellules à fusionner verticalement

Frames

<FRAMESET>...</FRAMESET> | Définit une structure de frames(remplace alors le tag BODY)
<FRAMESET rows="x%,y%,..."> | Division horizontale de la fenêtre en %
<FRAMESET cols="x%,y%,..."> | Division verticale de la fenêtre en %
<FRAME src="fichier.htm"> | Fichier affiché dans une fenêtre de frames
<NOFRAMES>...</NOFRAMES> | Contenu pour les browsers non prévus pour les frames

Fichier Html

<HTML>...</HTML> | Début et fin de fichier Html
<HEAD>...</HEAD> | Zone d'en-tête d'un fichier Html
<TITLE>...</TITLE> | Titre affiché par le browser (élément de HEAD)
<BODY>...</BODY> | Début et fin du corps du fichier Html
<BODY bgcolor="#XXXXXX"> | Couleur d'arrière-plan (en hexadécimal)
<BODY background="xyz.gif"> | Image d'arrière-plan

Apprendre le langage Html www.ccim.be/ccim328/html/

Les caractères spéciaux

Voici ces caractères en code ISO 5589-1 (appelée aussi ISO-Latin 1), ainsi que leur abréviation ENTITY.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

Caractère | Code ISO | ENTITY | Caractère | Code ISO | ENTITY | Caractère | Code ISO | ENTITY
 | &#129; |  | « | &#171; | &laquo; | Õ | &#213; | &Otilde;
‚ | &#130; |  | ¬ | &#172; | &not; | Ö | &#214; | &Ouml;
ƒ | &#131; |  |  | &#173; | &shy; | ´ | &#215; | &times;
„ | &#132; |  | ® | &#174; | &reg; | Ø | &#216; | &Oslash;
… | &#133; |  | ¯ | &#175; | &masr; | Ù | &#217; | &Ugrave;
† | &#134; |  | ° | &#176; | &deg; | Ú | &#218; | &Uacute;
‡ | &#135; |  | ± | &#177; | &plusmn; | Û | &#219; | &Ucirc;
ˆ | &#136; |  | ² | &#178; | &sup2; | Ü | &#220; | &Uuml;
‰ | &#137; |  | ³ | &#179; | &sup3; | Ý | &#221; | &Yacute;
Š | &#138; |  | ´ | &#180; | &acute; | Þ | &#222; | &THORN
‹ | &#139; |  | m | &#181; | &micro; | ß | &#223; | &szlig;
Œ | &#140; |  | ¶ | &#182; | &para; | à | &#224; | &agrace;
 | &#141; |  | · | &#183; | &middot; | á | &#225; | &aacute;
 | &#142; |  | ¸ | &#184; | &cedil; | â | &#226; | &acirc;
 | &#143; |  | 1 | &#185; | &sup1; | ã | &#227; | &atilde;
 | &#144; |  | º | &#186; | &ordm; | ä | &#228; | &auml;
‘ | &#145; |  | » | &#187; | &raquo; | å | &#229; | &aring;
’ | &#146; |  | ¼ | &#188; | &frac14; | æ | &#230; | &aelig;
“ | &#147; |  | ½ | &#189; | &frac12; | ç | &#231; | &ccedil;
” | &#148; |  | ¾ | &#190; | &frac34; | è | &#232; | &egrave;
• | &#149; |  | ¿ | &#191; | &iquest; | é | &#233; | &eacute;
– | &#150; |  | À | &#192; | &Agrave; | ê | &#234; | &ecirc;
— | &#151; |  | Á | &#193; | &Aacute; | ë | &#235; | &euml;
˜ | &#152; |  | Â | &#194; | &Acirc; | ì | &#236; | &igrave;
™ | &#153; |  | Ã | &#195; | &Atilde; | í | &#237; | &iacute;
š | &#154; |  | Ä | &#196; | &Auml; | î | &#238; | &icirc;
› | &#155; |  | Å | &#197; | &Aring; | ï | &#239; | &iuml;
œ | &#156; |  | Æ | &#198 | &Aelig | ð | &#240; | &eth;
 | &#157; |  | Ç | &#199; | &Ccedil; | ñ | &#241; | &ntilde;
 | &#158; |  | È | &#200; | &Egrave; | ò | &#242; | &ograve;
Ÿ | &#159; |  | É | &#201; | &Eacute; | ó | &#243; | &oacute;
espace | &#160; | &nbsp; | Ê | &#202; | &Ecric; | ô | &#244; | &ocirc;
¡ | &#161; | &iexcl; | Ë | &#203; | &Euml; | õ | &#245; | &otilde;
¢ | &#162; | &cent; | Ì | &#204; | &Igrave; | ö | &#246; | &ouml;
£ | &#163; | &pound; | Í | &#205; | &Iacute; | ¸ | &#247; | &divide;
¤ | &#164; | &curren; | Î | &#206; | &Icirc; | ø | &#248; | &oslash;
¥ | &#165; | &yen | Ï | &#207; | &Iuml; | ù | &#249; | &ugrave;
¦ | &#166; | &brvbar; | Ð | &#208; | &ETH; | ú | &#250; | &uacute;
§ | &#167; | &sect; | Ñ | &#209; | &Ntilde; | û | &#251; | &ucirc;
¨ | &#168; | &uml; | Ò | &#210; | &Ograve; | ü | &#252; | &uuml;
© | &#169; | &copy; | Ó | &#211; | &Oacute; | ý | &#253; | &yacute;
ª | &#170; | &ordf; | Ô | &#212; | &Ocirc; | þ | &#254; | &thorn;
 |  |  |  |  |  | ÿ | &#255; | &yuml;

Apprendre le langage Html www.ccim.be/ccim328/html/


Vu dans ... https://www.lehtml.com/index.htm

Architecture d'un site Web

1. Lignes de force

1.1. Publication papier

Avant de se lancer dans une publication Web, il est difficile d'éviter la comparaison avec la publication papier.

La plupart des concepts pour structurer l'information s'appuient sur l'organisation de livres, brochures, périodiques ou catalogues qui sont développés autour de la publication imprimée. Culturellement, il est impossible (voire dangereux car vous risquez de décontenancer votre interlocuteur) de passer outre à des siècles de règles et de conventions. Mais force est de constater que la publication sur Internet comporte ses propres spécificités.

Sans vouloir être exhaustif, soulignons en quelques-unes.

· L'internaute n'a pas la sensation physique du livre et risque d'être rapidement perdu dans le dédale d'écrans qui se présentent à lui. Il faut plus que jamais structurer l'exposé et offrir des outils de navigation pour lui permettre de se mouvoir ou même de le guider dans le site.

· Autant pour les yeux que pour l'esprit, l'auteur devra communiquer en terme d'écran et non plus en terme de feuille de papier d'un format déterminé.

· En Html, le langage informatique utilisé pour écrire les publications Web, vous n'avez pas la maîtrise de votre document comme dans une feuille de traitement de texte qui sort de votre imprimante. Un visiteur visionnera peut-être votre site avec une police de caractères plus grande, une grandeur d'écran différente ou une qualité d'image moindre...

· L'internaute a une démarche active vers l'information qu'il recherche. Sauf quelques "contemplatifs" du Web, l'internaute moyen lira vos pages en diagonales, dans un ordre dispersé, qui sera tout sauf celui souhaité par l'auteur, jusqu'à l'information recherchée. Une fois "son" information trouvée, votre site sera alors génial. Mais se souviendra-t-il de vos mises en pages et autres graphiques travaillés, retravaillés, bichonnées pendant de heures voire des semaines ?...

· La publication Web offre un rapport "prix / audience / délai" défiant toute concurrence vis à vis de l’édition traditionnelle. Le coût des moyens techniques est accessoire sinon dérisoire au vu de ceux de la production d'un livre ou d'une revue. La barre des 100 000 lecteurs est quelque chose d'accessible sur le Web, même pour un site personnel. Le délai des corrections, actualisations et autres mises à jour sera celui de votre propre créativité. Par contre, la publication Web est exigeante en travail et donc en temps à y consacrer.

· La différence essentielle est cependant l'interactivité qu'apporte la publication Web. Prenons simplement les e-mails de vos visiteurs [1 à 2% en moyenne], qui vous communiquent en temps réel, encouragements, critiques ou suggestions. Quelle mine d'or incomparable pour vos mises à jour ou les développements ultérieurs de votre œuvre !

1.2. Schéma global

Avant de se lancer dans la réalisation d'un site Web, il faut prendre le temps d'une réflexion préalable dont voici les lignes de force.

Le pourquoi de votre démarche (objectifs) engendrera le public que vous visez. La connaissance de votre public déterminera alors trois composantes : le contenu rédactionnel et la présentation visuelle de votre publication qui devront, l'un et l'autre, tenir compte des particularités de fonctionnement de ce nouvel outil de communication qu'est Internet.

En outre, votre site une fois sur le réseau, l'interactivité et précisément les e-mails de vos visiteurs vous permettront de mieux connaître "votre" public et d'affiner, lors de vos mises à jour, le précieux schéma de réflexion de votre site : objectifs à public à contenu, visuel et fonctionnel.

"Un site Web est donc trois composantes qui s'adressent chacune à une fraction de votre public. Ceux qui n'ont jamais visité votre site, les passants, apprécieront sa clarté et sa présentation visuelle harmonieuse. Ceux qui y reviennent une ou deux fois, les curieux, seront convaincus par la qualité du contenu. Enfin les habitués des lieux, les fidèles, vous témoigneront une infinie gratitude si, en plus, le téléchargement de vos pages est rapide." (Philippe Monteiro da Rocha)

1.3. Objectifs

Sans objectifs, pas de cohérence. Sans cohérence, pas de public non plus !

La première étape dans la conception d'un site Web est la définition des objectifs que vous poursuivez dans la création d'un site. Ces objectifs formeront la "colonne vertébrale" de votre communication qui apportera la cohérence indispensable à votre site.

Ces objectifs fourniront également un outil d'évaluation de votre site, au combien utile pour éventuellement corriger le tir ou vous guider dans ses développements ultérieurs.

Ces objectifs peuvent prendre des formes multiples :

· être présent sur le Web. Objectif minimaliste, il faudra dans ce cas veiller à la densité du contenu.

· faire des visiteurs ou du trafic. Ici le visuel risque d'être prépondérant mais n'espérez pas forcément une clientèle fidélisée.

· faire un site de liens. Le fonctionnel vous invitera à vérifier régulièrement la validité de ces mêmes liens.

· faire un site de promotion d'une association ou d'une marque commerciale. Un mariage harmonieux du contenu et du visuel sera votre priorité absolue et fera alors votre succès.

· faire un site commercial. Remplacez dans ce qui suit les mots "contenu pertinent" par "service probant".

· faire un site académique. Il faudra penser à alléger le poids du contenu par un visuel adapté et une facilité de navigation quasi intuitive.

· informer ou distraire. En deux mots, voilà deux programmes bien différents.

· etc.

1.4. Public visé

Connaître son public pour communiquer avec lui.

L'étape suivante dans le processus d'élaboration d'un site sera d'identifier les utilisateurs potentiels de votre site afin d’adapter votre communication à leurs besoins et leurs attentes.

Outre la densité du contenu et la sophistication du visuel, cette connaissance du public influencera également la structure ou l'aspect fonctionnel de votre site. Les internautes novices souhaitent une structure claire voire dirigiste tandis que les internautes expérimentés ont plutôt horreur d'une structure trop lourde qui leur donne l'impression d'être chapeauté et de freiner leur accès à l'information.

Les internautes novices et visiteurs occasionnels. Ces internautes novices sont demandeurs d'une structure claire et d'un aperçu qui illustre comment l'information est arrangée dans le site. Un menu textuel trop détaillé les décontenancera. Ainsi préféreront-ils un menu, idéalement agrémenté d'une touche graphique, de 4 à 6 sujets. Pour ces internautes novices, une page d'accueil au visuel attractif et à la mise en page soignée sera souvent décisive [attention, ils n'utilisent que très peu le défilement vertical]. Les visiteurs occasionnels apprécieront un plan du site, des pages d'aperçu et des petites icônes qui leur rappellent où se situe l'information dans le site. Un dictionnaire des termes techniques, acronymes et abréviations ainsi qu'une FAQ ["Frequently Asked Questions" ou Foire Aux Questions] peuvent être très utiles à ces visiteurs d'un jour.

Les internautes experts et visiteurs fidèles. Ces internautes expérimentés utiliseront votre site pour obtenir rapidement une information précise et pertinente. Ils se révèlent assez impatients lorsqu'ils sont confrontés à des petits menus en cascade de 4 à 6 choix et les fioritures graphiques leur importent peu. Ils ont généralement un but spécifique en tête et ils apprécieront les menus textuels détaillés, les outils de navigation clairs à la symbolique légère qui permettent une recherche rapide jusqu’à l'information souhaitée. En fait, ils ne feront que traverser votre site jusqu'à la bride du contenu qui les intéresse.

Le fin du fin en terme de structure d'un site étant celle qui est capable de s’adapter à plusieurs profils d'utilisateurs.

1.5. Contenu rédactionnel

Le Web est par essence textuel.

Le Web est une formidable source d'informations. Mais à la différence de la télévision par exemple, l'internaute doit adopter une démarche active car il doit aller chercher cette information. Dans cette recherche, il s'attend à trouver de l'information utile et un contenu pertinent et actualisé. Dans le cas contraire, l'internaute s'en ira frustré et on peut parier qu'il ne remettra jamais les pieds dans votre site.

N'oubliez pas non plus que le Web est un marché très concurrencé et que la plupart des sujets d’informations sont ou seront traités à de multiples reprises. La différence se fera sur la qualité et le détail du contenu.

L'internaute moyen après avoir longuement vagabondé dans tous les sens sur la toile, se limite très souvent, après quelques mois, à une vingtaine de sites qui correspondent à ses centres d'intérêt et qu'il revisite à intervalle régulier. Ces sites ainsi "élus" le sont non pas pour le graphisme puisqu'il le connaît par cœur et ne le regarde même plus, non pas pour la facilité de navigation puisqu'il l’oublie tellement il y est à l'aise, mais pour le contenu et surtout son actualisation régulière. Le contenu est le meilleur moyen pour fidéliser votre public. Faire venir le visiteur sur votre site, c'est bien, le faire revenir c’est assurément la plus belle réussite.

Par expérience, on remarque que ce n'est pas tant ceux qui n'ont rien à dire qui n'hésitent pas à publier sur le Web mais ceux qui, compétent dans une sphère d'activité, veulent à tout prix viser l'excellence. Le Web est large et les publics variés. De la vulgarisation à l'expertise, chaque niveau a sa place pourvu que le sujet soit traité de façon cohérente. Il est parfois plaisant d'avoir une explication claire et simple sur un sujet déterminé sans devoir entrer dans des développements pointus mais compliqués. Rien n'empêche alors de préciser d’entrée les limites de votre site.

Bien que l'auteur ne soit pas un champion en la matière, des fautes d'orthographe "énaurmes et trop nombreuse" non seulement agacent votre lecteur mais surtout déprécient la crédibilité de votre contenu et l'image de votre site. De grâce, il existe des correcteurs d'orthographe et des bons samaritains de la langue française pour vous relire ! [promis, je ferai des efforts...]

1.6. Présentation visuelle

Sans le graphisme, le Web ne serait pas ce qu'il est.

A n'en pas douter le Web a véritablement décollé grâce à son côté visuel. Par visuel, nous entendons non seulement les images et autres éléments graphiques mais également les animations que permettent les développements technologiques récents comme le Java, le Javascript et le Dhtml.

Dans les 30 secondes qui vous sont accordées pour convaincre un internaute à entrer dans votre site, le visuel prend toute son importance. Un aperçu du contenu éveillera assurément son intérêt mais c'est le visuel qui entraînera le clic "gagnant" vers l'intérieur de votre site.

Il ne faut cependant pas en conclure qu'il est indispensable d'être un infographiste de génie pour faire un site. L'important est bien que le visuel soit adapté à votre public...Et puis n'oubliez pas qu'un visuel sobre, net et attrayant suffit dans la plupart des cas.

Soulignons aussi que le visuel doit garder le visiteur sur le contenu et non le distraire de celui-ci. Le visuel est aussi (ou surtout ?) une autre façon de communiquer le contenu à votre visiteur. En aucun cas, il ne sera une occasion pour vous faire plaisir ou étaler gratuitement vos talents graphiques.

Enfin, n’oubliez pas que les internautes comportent, comme dans la vie de tous les jours, leur lot de myopes, presbytes et autres daltoniens. Pensez à eux avec des couleurs nettes et des images vraiment informatives.

Le visuel est aussi fort utile pour structurer votre propos et agrémenter votre mise en page. On veillera à créer tout au long des pages d'un site une identité et/ou une cohérence visuelle qui guidera l'internaute tout au long de sa visite. On prêtera une attention particulière à cette identité visuelle lorsque plusieurs personnes participent à l'élaboration du site.

Cet aspect visuel doit impérativement tenir compte de l'aspect fonctionnel de la publication sur Internet et tout spécialement du temps de chargement des images et du temps de réponse des animations (Java et dans une mesure moindre le Dhtml). Mis à part les sites à caractère pornographique, le délai de péremption de la patience de l'internaute moyen est vite épuisé... A ce stade de développement d'Internet et des télécommunications, le visuel et spécialement la taille des images sont encore toujours une question de compromis. On oublie trop vite qu’un site se juge en ligne à partir du réseau et non à partir de son disque dur !

Notons pour terminer que le visuel d'un site vieillira bien plus vite que le contenu. La Web a ses modes (mais oui, mais oui...) et il faudra penser à rafraîchir régulièrement le visuel de votre site.

1.7. Aspect fonctionnel

Comprendre le fonctionnement du Web et le comportement des internautes.

L'écran de votre visiteur et surtout le Web sera le support de votre publication. Ce nouveau moyen de communication a non seulement ses spécificités techniques mais aussi déjà ses "us et coutumes".

Si dans la publication papier, il suffit de tourner la feuille, sur le Web il faudra composer avec le temps de chargement de la page. Commençons par le texte. Une page de 15 à 30 K ne posera pas de problèmes c-à-d l'équivalent d'une feuille A4 maximum. Au-delà, le temps de chargement devient pénalisant surtout si en plus cette page comporte de nombreux tableaux imbriqués qui ralentissent le chargement. Mais n'oubliez pas qu'en Html, toutes les images sont des fichiers séparés qu'il faudra charger ensuite. Un total d'images de 30 à 50 K semble être dans la norme. Au delà des 80 K pour une image, le délai d'attente devient pour le capital patience de certains quelque chose de prohibitif surtout pour une page d'accueil. N'oubliez pas qu'une image qui a déjà été chargée, reste dans le "cache" de votre navigateur et qu'il ne la rechargera plus à partir du réseau mais de votre disque dur ce qui entraîne un chargement immédiat. Ce qui permet d'user et d'abuser des boutons, puces, tirets de séparations et autres bannières qui se retrouvent de pages en pages et qui agrémentent votre mise en page et forment l'identité visuelle d'un site.

Ces différentes (petites) pages doivent être structurées de façon logique afin que l'internaute puisse naviguer efficacement dans votre site. Nous consacrons plus loin dans le site un chapitre particulier sur les différentes structures d'un site Web. Il faudra aussi prévoir de petites icônes pour que l'internaute puisse utiliser aisément cette structure et se retrouver à tout moment dans l'exploration de votre site. Les maîtres du Web conseillent de prévoir pour chaque page une possibilité de retour à la page d'accueil. Ces petites icônes de navigation devront être d'un graphique simple et à d'une symbolique intuitive.

L'essence du Web est la notion d'interactivité. Interactivité entre les pages de votre site, interactivité entre votre site et les autres sites présents sur le Web, interactivité entre le Web et les autres outils disponibles sur Internet (qu'il s'agisse des moteurs de recherche, des e-mails, des listes de diffusion, des forums, des fichiers à télécharger, etc.). Interactivité, enfin, entre vos visiteurs et l'auteur. Tout concepteur d'un site Web doit toujours veiller à créer cette interactivité que ce soit simplement par de adresses e-mail cliquables, des formulaires (livres d'or) à caractère plus "officiels",

Pour ma part, je n'ai jamais, pour visiter un site, téléchargé un plugin, changé de browser, modifié la résolution d'écran ou le nombre de couleurs de mon ordinateur. Et je ne crois pas être le seul ! Un site s'il peut être optimisé pour une configuration déterminée, doit rester compatible quel que soit le visiteur. Juste retour aux sources de l'esprit d'universalité du Html et du Web.

2. Architecture d'un site

2.1. Découpe de l'information

Au royaume de l'hypertexte, la page est reine.

2.1.1. Raisons

La raison essentielle de la découpe du contenu en petites pages de dimension réduite réside dans un temps de chargement raisonnable pour le confort de l’internaute. Et n'oubliez pas que ce fameux temps de chargement comprend non seulement le texte de la page mais aussi les images voire autres animations du style Java, Javascript ou Dhtml. Avec un total de 45 ko, vous serez dans une zone idéale tandis qu’une page de 70 à 80 ko est à considérer comme un maximum pour un temps de chargement acceptable.

Des petits morceaux d'information sont plus adaptés à la lecture sur un écran d'ordinateur que la vision partielle d'un long document. La mémoire immédiate et la synthèse instantanée de l'esprit humain étant ce qu'elles sont, des pages Web très longues sont déstabilisantes car elles nécessitent le défilement vertical et l'obligation de se rappeler les informations ainsi disparues de l'écran. Selon certaines études psychologiques, la mémoire à court terme comprend entre 4 ou 7 petits éléments d'information.

En outre, cette découpe de l'information en petites unités logiques, associée à une structure rationnelle, facilite grandement la navigation et la recherche de l'information souhaitée.

Pour fixer un ordre de grandeur, cette découpe de l'information correspondra à 2 ou 3 écrans soit environ 1/2 à 1 feuille A4 sans mise en forme ou alors 2 à 3 feuilles A4 d'une mise en page particulièrement aérée.

2.1.2. Utilité

Le découpage de l'information en petits morceaux, organisés de façon uniforme est particulièrement adapté aux présentations Web car :

· peu d'utilisateurs passeront leur temps à lire de longs passages de texte sur l'écran. A la lecture en ligne, on préférera souvent enregistrer les longs documents ou même les imprimer.

· le découpage de l'information en petites unités et le système hypertexte font bon ménage. En effet, en cliquant sur un lien, l’internaute s'attend généralement à trouver un autre morceau d'information liée et complémentaire à la précédente et non un livre complet. Mais ne subdivisez pas trop votre information. Cliquer un lien pour ne trouver que quelques mots ou un petit paragraphe peut se révéler frustrant pour l’utilisateur et le distraire du véritable contenu. On utilisera alors plutôt (mais sans en abuser) les petites fenêtres pop-up du Javascript.

· une forme uniformisée du découpage et de la présentation crée une identité à votre site. Cette cohérence permettra très vite à vos visiteurs d'acquérir une certaines expérience pour leurs recherches et autres explorations, voire même de prévoir comment une nouvelle section de votre site sera organisée. Vous aurez alors créé "un site où on se sent à l'aise", ce qui est une des clés essentielles d'un bon site.

· l'essence de la navigation sur le World Wide Web n'est-elle pas l'acquisition d'un savoir à partir de multiples morceaux d'information acquis de façon non séquentielle ?

Ce concept de découpage de l'information doit cependant être flexible et adapté au sujet traité ainsi qu’à la logique d'organisation de votre site et au confort de votre visiteur. C'est la nature du contenu qui suggérera le meilleur moyen de subdiviser et d'organiser l'information. Ainsi, dans certains cas, des pages plus longues seront néanmoins nécessaires pour traiter complètement un sujet sans distraire le visiteur par une découpe intempestive de celui-ci. C'est particulièrement vrai lorsque l'on souhaite que l'utilisateur puisse imprimer ou enregistrer un sujet déterminé en une seule étape.

2.2. Structure

Sans une structure fonctionnelle, votre site sera un échec même si le contenu en est pertinent et bien rédigé.

"La chose la plus importante à considérer lorsqu'on prépare le design d'un site Web, c'est la satisfaction des utilisateurs. La facilité avec laquelle ils trouveront ce qu’ils recherchent déterminera la fréquence avec laquelle ils reviendront sur le site. Eviter de frustrer les internautes est l'objectif principal du design. Et au bout du compte, savoir structurer l'information qu'on présente est la base fondamentale d'une expérience réussie sur le Web." (Valérie Casey, professeur de Web Design à l'Université de San Francisco)

Le but est de fournir à l'usager l'information qu'il souhaite en un minimum d'étapes et donc un minimum de temps. Pour autant que des normes strictes existent en la matière, on parle de la "règle des 3 clics" selon laquelle toute information de votre site doit être disponible en maximum 3 clics de souris. Il faut donc hiérarchiser l'information selon une structure efficiente pour minimiser la navigation vers l'information.

2.2.1. Structure séquentielle

Le moyen le plus simple d'organiser l'information est la façon séquentielle C'est en quelque sorte le retour au livre avec sa narration linéaire : chapitre 1, chapitre 2, chapitre 3...

Les narrations, les lignes du temps ou autres exposés nécessitant un ordre logique se prêtent à ce genre de structure ainsi que les thèmes progressant du général au particulier. La structure séquentielle est aussi particulièrement adaptée aux sites d'apprentissage ou tutoriaux où le passage à une page suivante requiert des pré-requis exposés à la page précédente.

Cependant, cette structure séquentielle ne sera utilisée que pour des petits sites (ou des parties de sites plus grands) car de longues séquences narratives ou explicatives nécessiteront souvent une structure plus sophistiquée pour rester compréhensives.

2.2.2. Structure hiérarchisée

La structure hiérarchisée est une des meilleures façons d'organiser des blocs d'information complexes. Ce schéma d'organisation s'adapte particulièrement bien au site Web car les différents thèmes dépendent ainsi d'une seule et unique page soit la page d'index ou page d'accueil [homepage]. En outre les utilisateurs sont souvent familiarisés avec les diagrammes hiérarchisés comme les organigrammes et trouveront la métaphore facilement compréhensible pour les aider dans leur navigation.

Cette organisation hiérarchisée en blocs d'information indépendants nécessite cependant un gros travail d'analyse préalable de votre contenu (notions pré-requises, doublons d'information...) car cette structure hiérarchisée ne sera efficiente que si vous avez soigneusement organisé l'information disponible.

2.2.3. Structure en réseau

Ces mini Webs fonctionnent bien pour des petits sites destinés à des utilisateurs hautement qualifiés en quête d’enrichissement ou de perfectionnement plutôt qu'à la compréhension basique d'un sujet. On travaillera ici les associations d’idées et le libre cours de la pensée. Chaque visiteur parcourra votre site de façon unique selon ses propres intérêts et sa propre démarche vers l’information sans avoir l’impression d’être dirigé.

Ce type de structure exploite la pleine puissance des liens vers des informations à l’intérieur du site et vers des informations située dans d’autres sites de la toile.

Cette structure en réseau se révèle cependant ardue à mettre en place et finalement peu pratique surtout pour les internautes novices dans le sujet traité. Ceux-ci auront alors l’idée d’un site confus, difficilement exploitable.

2.2.4. En pratique

Rares sont cependant les visiteurs qui suivront à la lettre le schéma de votre structure et ils retrouveront bien vite leurs habitudes de navigation propres au Web soit de façon libre et non-linéaire. Paradoxalement, ce "surf" sur les différentes informations ne se révèle efficace qu'avec une structure bien organisée qui complète les lignes de force de la conception de votre site.

2.2.5. Structure en évolution

Pour les sites qui connaissent une croissance rapide et de nombreux développements, l'objectif sera de garder un équilibre entre les différents blocs d'informations. Et ce n'est pas toujours une chose aisée... Le feedback de vos utilisateurs et une analyse personnelle critique de votre site vous aideront à déterminer si certains passages ne sont que pauvrement structurés ou même si votre structure initiale est devenue, avec les différentes ajoutes, complètement obsolète.

L'objectif sera de maintenir une hiérarchisation équilibrée qui aidera l'accès rapide à l'information et une compréhension intuitive de la façon dont les éléments sont organisés.

Exemple d’une structure équilibrée

2.2.6. Sources

Le contenu de cette page consacrée à la structure d’un site Web est fortement inspiré de l’excellent site Web Style Guide qui fait référence en la matière. Les graphiques de cette page sont issus de la même source. Copyright Lynch & Horton, 1997. Yale University. http://info.med.yale.edu/caim/manual/

2.3. Outils de navigation

Un visiteur qui se perd est un visiteur qui ne reviendra plus.

Votre structure en place, il faut encore fournir à vos visiteurs, les outils de navigation indispensables pour une exploration aisée de votre site. Ces outils de navigations sont aussi indispensables à la circulation dans votre site que les panneaux de circulation du réseau routier.

Ces outils de navigation se présentent par des liens sous forme de texte ou seront plus agréablement conçus sous forme de petites images, boutons, icônes ou barres d’information. On veillera alors à un graphique simple et à la symbolique intuitive car ils se doivent d’être efficaces mais aussi de rester discrets par rapport au contenu et au visuel proprement dit. Ces outils de navigation qui se retrouvent de pages en pages contribuent aussi à créer l’identité graphique de site.

Quelques principes généralement adoptés par tous les concepteurs de site semblent se dégager. Les utilisateurs d’un site doivent toujours être capables de revenir à tout moment vers la page d’accueil [Home ou Index] ou vers les principaux points de navigation. Chaque page d’un site comporte donc un lien vers cette page d’accueil ou la page servant de dispatching. De plus, si le sens du contenu global y invite, on prévoira des possibilités de retour à la page précédente ou d’avancement à la page suivante.

Les barres qui proposent de multiples choix dans un espace réduit ont de nombreux adeptes car elles peuvent ainsi servir d’en-tête de page et donner une forte cohérence visuelle au site. Mais d’autres préféreront l’usage de frames ou de tableaux (voir plus loin dans le site).

La tendance actuelle sur le Web est de proposer plusieurs outils de navigation. Le premier sera celui qui vous guidera l’utilisateur dans la navigation du site selon les directives de l'auteur. Les autres donnent pleine liberté d’exploration au visiteur.

2.4. Page d'accueil

Pas une couverture mais plutôt un sommaire visuel et informatif.

Lorsque l'internaute clique sur votre site à partir d'un moteur de recherche ou encode directement votre adresse au clavier, c'est sur cette page qu'il aboutit. Il vous reste alors 30 secondes pour le convaincre de parcourir les pages de votre œuvre et vous récompenser ainsi de toutes vos heures de travail. C'est dire toute l'importance que l'on accordera à la conception et à réalisation de cette première page.

Cette page d'entrée de votre site prend le nom de page d'index (en référence à l'adresse index.htm), de "homepage" ou de page d'accueil. Pour les sites à structure hiérarchisée, cette page est tout naturellement celle qui est au sommet de la hiérarchie et vers laquelle on pourra revenir à partir de toutes les pages du site.

Les usages (ou le bon sens) dictent les éléments constitutifs de celle-ci :

· le nom ou le titre de votre site qui en reprendra l'objet.

· un sommaire (détaillé ou synthétique) qui donnera une vue d'ensemble du contenu et amorcera les outils de navigation.

· un élément visuel (logo, image, icône symbolique) pour l'aspect attractif.

· un court texte qui reprend le descriptif fourni aux moteurs de recherche (excellent pour le référencement et le classement).

· le nom de l'auteur et un lien vers l'adresse électronique de celui-ci.

· la date de réalisation ou de la dernière mise à jour.

· etc.

On évitera dans la page d'accueil :

· toute forme de publicité mensongère quant au contenu. Il m'arrive de remercier par e-mail des auteurs de site qui ont l'amabilité (ou l'honnêteté) de dire en termes élégants "Ce site n'est pas ..." et épargner ainsi aux internautes toute navigation et perte de temps inutile.

· des liens externes vers d'autres sites. C'est assurément sympa de votre part mais pourquoi risquer de perdre un visiteur potentiel avant même qu'il ait découvert vos pages.

· de devoir utiliser les barres de défilement vertical. Au-delà de 2 écrans, votre page d'accueil risque d'être beaucoup trop détaillée et donc pas assez attractive. A la limite, toute l'information importante devrait être concentrée sur le premier écran.

· un temps de chargement prohibitif car la tentation sera grande pour un site inconnu de cliquez le bouton "Précédent" et de retourner aux sites concurrents proposés par le moteur de recherche.

· une page d'accueil avec des frames car cela en complique grandement le référencement et le classement auprès de certains moteurs de recherche.

La page d’accueil est la page la plus importante de votre site. C’est elle, et elle seule, qui par son attrait déclenchera le clic "gagnant" du visiteur hésitant vers votre œuvre. Faites votre expérience personnelle sur la toile, comparez, cogitez et laissez parler votre créativité. Sans perdre de vue que votre stratégie pour sa conception retiendra toutes les lignes de force de votre réflexion préalable et rejoindra autant en contenu, visuel et fonctionnalité les objectifs et le public visé de votre site.

3. Règles de l'art

Créer un site Web est une technique jeune qui n’existe que depuis quelques années. Toujours en plein développement, il n'existe pas encore de véritables "règles de l'art" mais je n'ai pas pu résister à la tentation de rassembler ci-après quelques règles ou normes qui, à défaut d'être toujours explicables, sont généralement respectées en matière de publication sur le Web.

La règle des trois clics. Toute information dans un site doit être accessible en 3 clics de souris maximum à partir de la page d'accueil.

La règle des trois écrans. La longueur d'une page ne doit pas dépasser 3 à 5 écrans (grand maximum) pour limiter le défilement vertical.

Le premier écran d'un page doit rassembler le maximum de l'information et inviter à en poursuivre la découverte. Un pourcentage important des internautes n'utilisent pas ou peu le défilement vertical.

Le défilement horizontal de la page est à éviter (sinon à proscrire) quelle que soit la résolution d'écran de votre visiteur. Débrouillez-vous...

Un écran ne doit être rempli qu'à 50% de texte et de graphiques. Le reste est consacré au fond d'écran.

Quels que soient vos goûts en matière artistique, le texte doit toujours rester lisible par rapport au fond d'écran. Comme dans la vie de tous les jours, le Web comporte son lot de mal voyants. Pensez-y.

Prévoir une possibilité de retour à la page d'accueil à chaque page du site. Un visiteur perdu est un visiteur déçu.

Ecrire des phrases courtes à la construction simple. N'oubliez pas de communiquer...

La lecture de texte sur écran se révèle vite fatiguante. Des lignes de texte de 60 à 90 caractères maximum semblent être un bon compromis surtout si on sait que la tendance est aux résolution d'écran de 800 x 600 et 1024 x 768 ...

Si après les 10 secondes (*) suivant un clic, il ne se passe rien, l'internaute s’inquiète, s'ennuie, s'impatiente ou quitte la page. [* à adapter selon votre capital de patience].

Tous les liens seront dûment vérifiés et valides. A ce stade de développement de la publication Internet, un lien non valide devient (presque) inadmissible.

Sans oublier tout de ceci, soyez toujours vous-même et si possible créatif.

4. En particulier

4.1 La résolution d'écran

Les concepteurs débutants posent souvent la (mauvaise) question : "Pour quelle résolution d'écran doit-on concevoir un site ?". C'est une mauvaise question car vous ne connaîtrez jamais la résolution d'écran de votre visiteur. Et une annotation du genre "site optimisé en 800 x 600" est assez illusoire car les internautes qui changeront leur résolution uniquement pour voir votre site sont rarissimes. Il existe cependant certaines solutions pour rendre votre site esthétiquement compatible avec n'importe quelle résolution d'écran.

4.1.1. Présentation

Beaucoup de gens pensent que la résolution d'écran (ou "espace du bureau" selon Microsoft) dépend de la taille de l'écran. Ce qui est faux. On peut avoir un écran de 14 pouces et avoir une haute résolution ou avoir un écran de 21 pouces et n'avoir qu'une résolution d'écran de seulement 640 x 480. 640 signifie 640 pixels de façon horizontale et 480 pour 480 pixels de façon verticale.

La plupart des moniteurs peuvent afficher différentes résolutions d'écran. C'est la carte graphique qui détermine les différentes résolutions d'écran possibles pour un ordinateur donné. Ainsi, il y a quelques années, avec les cartes graphiques de 1 méga, la norme était en 640 x 480, ce qui était confortable pour les applications bureautiques. Avec l'évolution de ces cartes, le 800 x 600 est apparu. Et avec l'introduction sinon la généralisation des cartes graphiques à 4 mégas de mémoire, les résolutions 1024 x 768 ou même 1280 x 1024 sont possibles à défaut d'être fréquentes. Les internautes suivent bien entendu cette évolution technologique et la résolution 640 x 480 qui était la norme il y a encore quelques années, est en voie de disparition au profit de résolutions plus hautes.

Avec toutes les précautions d'usage quant à la précision des chiffres suivants et après recoupement de plusieurs sources, on peut (à fin 1999) se référer au tableau suivant qui donne une idée de la répartition des différentes résolutions utilisées pour le Web.

Résolution | Pourcentage
640x480 | 15 %
800x600 | 55 %
1024x768 | 24 %
1280x1024 | 2 %
autres | 4 %

Comme vous voyez, la moyenne des utilisateurs du Web utilisent une résolution d'écran de 800x600 [et en 65.536 couleurs]. Mais écrire pour la moyenne n'est pas tout... Il reste les 45 % autres internautes pour qui votre site risque d'être une véritable catastrophe.

4.1.2. Illustration du problème

Le premier exemple montre une page avec un image reprenant les lettres de l’alphabet. Avec une résolution 800x600, cette image s’adapte parfaitement à l’écran. Par contre, cette même page, vue en 640x480 est déjà beaucoup moins sympathique.

L’utilisateur devra non seulement faire appel au défilement vertical pour voir l’entièreté des lettres mais également au défilement horizontal car les lettres K et L ont disparue de l’écran. Si le défilement vertical est acceptable car finalement indispensable dès qu’une page est d’une certaine consistance (et encore méfiez vous des novices du Web qui ne l’utilisent que très peu), le défilement horizontal est à bannir car trop inconfortable pour votre visiteur.

Résolution 800x600 | Résolution 640x480

Le second exemple tente d'illustrer les différences de mise en page et surtout la longueur des lignes de texte d’une résolution à l’autre.

Si une page reprend principalement du texte, plus la résolution est haute, plus la ligne de texte sera longue et donc plus la lecture de ce texte à l’écran sera fastidieuse. Lire du texte sur un écran en 1280x1024 reviendrait à lire un journal où le texte serait imprimé d’un bord à l’autre - sans colonnes -. Pas pratique du tout et il faut avoir de bons yeux !

Résolution 800x600 | Résolution 640x480

4.1.3. Quelques solutions

Il faut bien admettre qu’en 640, le composition de la page est un peu étriquée. Avec des résolutions plus hautes, on peut concevoir des pages plus aérées et aux proportions plus équilibrées. En outre, cette largeur supplémentaire permet généralement de prévoir des menus de navigation omniprésents sur chaque page du site.

Passons en revue quelques solutions pour garder une certaine compatibilité par rapport aux différentes résolutions possibles.

On limitera la largeur des images à environ 600 pixels même pour les sites idéalement conçus en 800x600 ou en résolution plus grande encore afin d’éviter de devoir utiliser les barres de défilement horizontales, sous des résolutions inférieures. Cette limitation vaut aussi pour les tableaux et les frames élaborés avec une largeur fixée en pixels.

On pensera à inclure les longs passages de texte dans des tableaux (à bordure invisible) d’environ 600 pixels maximum. On obtiendra ainsi des lignes de texte de 60 à 90 caractères, ce qui semble être une norme acceptable pour un confort de lecture à l’écran.

On se méfiera des arrière-plans sous forme d’une fine bande horizontale. Il faut les prévoir d’entrée avec une largeur de 1280 pixels afin qu’ils s’adaptent à toutes les résolutions possibles sans devoir se répéter horizontalement, ce qui entraîne généralement des effets non désirés et désastreux (raccord).

Comme toujours pour la création de sites Web, testez, testez encore et testez toujours.

Finalement (voir les remarques sur les images et le texte), on rencontre de plus en plus de sites qui sont conçus en 600 pixels de large pour être vus en 800x600 ou plus. Le reste de la largeur étant un arrière-plan neutre. La page reste alors toujours bien lisible quelque soit la résolution.

Résolution 640x480 | Résolution 800x600

4.1.4 Remarque finale

Avec le Javascript 1.2, on peut maintenant détecter (sans pouvoir la modifier cependant) la résolution d'écran de l’internaute et le rediriger automatiquement vers une page spécialement conçue pour cette résolution [screen width et screen.height]. Intéressant sûrement mais cela équivaut alors à écrire quasiment un site pour chaque résolution. Mais quel boulot !

4.2. La zone de sécurité

En fonction de ces différentes résolutions d’écran possibles et des modifications qu’ils apporteront à votre site, est né dans la pratique de la publication Web, le concept de la zone de sécurité.

Celle-ci est une zone qui, quelle que soit la résolution d’écran, le système d’exploitation ou le navigateur utilisé, sera vue parfaitement par l’internaute.

C’est aussi la partie de la page Web qui apparaîtra en premier à l’œil de votre visiteur et dans laquelle on regroupera le maximum d’informations littéraires ou graphiques (véritable synthèse de la page) qui l’inciteront à utiliser le défilement vertical pour poursuivre l’exploration de la page.

Pour une résolution d’écran toujours possible de 640x480, la largeur est d’environ 600 pixels car il faut tenir compte des marges et de la barre de défilement. La hauteur, compte tenu des différentes barres d’outils et barres d’état du navigateur, sera quant à elle d’environ 350 pixels.

Zone de sécurité du navigateur

On souhaite parfois que le visiteur puisse imprimer une page. Fort de votre expérience d’internaute, vous n’êtes pas sans ignorer que l’impression d’une page Web n’est pas sans surprises, spécialement lorsque la page comporte des images.

Notons tout d’abord que le langage Html n’a pas été conçu pour l’impression. C’est le navigateur qui recompose la page Web de la largeur de l’écran à la largeur (plus petite) d’une feuille A4. Si la page a été conçue avec du texte avec retour automatique du chariot ou avec des tableaux exprimés en pourcentage de la fenêtre, cette recomposition s’effectue sans problèmes. Par contre, si la page comporte des images qui dépassent une largeur de 530 pixels ou si des tableaux avec une largeur exprimée qui excède les 530 pixels, le risque est grand que certains éléments de l’image ou du tableau n’apparaissent pas à l’impression.

Surtout si la page destinée à être imprimée comporte des images, la zone sûre d’impression devient 530 pixels de largeur pour 710 pixels de hauteur. Selon l’importance attachée au document, il n’est pas inutile de tester cette impression avec différents types d’imprimante. Il est dans certains cas plus sûr de recourir à un document à télécharger du type PDF (Adobe Acrobat) qui est universel et vraiment conçu pour l’impression.

Zone de sécurité pour l’impression

4.3. La mise en page

Classique ou "délire" ? Livresque ou audiovisuel ?

Comment allez vous présenter votre information sur ce médium particulier qu’est l’écran de votre visiteur relié à la toile ? D’un façon classique, quasiment livresque ou, profitant des dernières technologies en matière de publication sur le Web, puiserez-vous votre inspiration dans les créations audiovisuelles comme la télévision et spécialement ses bandes annonces ou ses spots publicitaires ?

Le point de vue du classique

La transmission d’un savoir se fait, autant pour l’auteur que pour le lecteur, d’une façon structurée et claire. On ne peut passer outre à l’héritage culturel de siècles d’édition au risque de décontenancer le visiteur. Titres, chapitres, sous-chapitres, éventuellement en-tête et pieds de page apportent une hiérarchie du contenu qui permettra tout au long de l’exposé d’aller du principal au particulier et qui induira ainsi une structuration de la connaissance. Clarté et netteté de la mise en page restent et resteront le maître mot de votre expression. Les animations et autres effets visuels ou dynamiques ne font que distraire le lecteur du véritable contenu et créer à la longue un sentiment d'inconsistance pour finalement le lasser de votre site. Le Web restera avant tout un formidable réservoir d’informations même si certains veulent en faire un parc de loisirs. Il importera devant cette profusion d’informations, qui ira à n’en pas douter de façon croissante, d’apporter une information pertinente, détaillée, actualisée et surtout facilement accessible. La véritable dynamique du Web ne réside pas dans ces animations que l’on dit révolutionnaires, mais dans la démarche active de l’internaute vers l’information qu’il souhaite trouver. C’est cette information qu’il faut lui donner, pas des "mots qui bougent"... Au royaume du Web, plus que jamais le contenu sera roi.

Le point de vue du "délire"

Avec les derniers développements du Javascript, du Dhtml voire de Flash, la mise en page des sites Web sera profondément bouleversée. Les diverses animations sur le texte ou les images, pour autant qu'elles ne soient pas inutilement gratuites, viennent renforcer la transmission de l'information. Le livre n'est pas le seul moyen de communication. Il y a aussi l'audiovisuel et les présentations multimédia. Les publicitaires l'ont bien compris et leurs spots à la télévision ne font plus que raconter leur histoire de la façon la plus convaincante possible mais par des effets dynamiques attirent le regard et l'esprit pour tantôt faire ressortir un mot ou un logo ou tantôt synthétiser un message. Il est évident que le contenu ne suffit plus et que c'est le message qui sera transmis de la façon la plus performante qui l'emportera. Les gens ne lisent plus ou très peu... par contre ils passent des heures à regarder de façon consciente ou non leur poste de télévision. Consciemment ou non, ils s'attendent à retrouver lors de leur exploration du Web, la même forme d'expression et le même environnement visuel. Le langage Html et ses développements annexes possèdent maintenant tous les outils pour mettre en place son propre mode d'expression, créatif et dynamique.

En conclusion

Bien au-delà d'un exercice de style, ces deux points de vue ne sont pourtant pas inconciliables. La mise en page sera dictée par la densité du contenu et surtout par le public visé. N'oubliez cependant jamais que cette mise en page doit être au service de la transmission de l'information et rester claire, nette et efficace. Et si on se posait la question de savoir à quoi ressemblera la mise en page d'un site Web d'ici 5 ou 10 ans...

4.4. Frames ou tableaux

Les frames [cadres] permettent de diviser l'écran en 2 ou plusieurs fenêtres et d'afficher dans chacune de celle-ci des documents Html distincts. Ce système offre une alternative puissante pour la conception visuelle et l'organisation de la navigation d'une publication Web.

Les frames, introduits sous Netscape 3, n'était alors (1996) pas reconnus par les autres navigateurs et donc d'un emploi limité pour peu que l'on souhaitait que le site soit visible par le plus grand nombre. Adoptés par Microsoft à partir d'Internet Explorer 3 et ses déclinaisons suivantes ainsi que par d'autres navigateurs récents, on peut affirmer qu'à l'aube de l'an 2000, il n'existe quasiment plus de raisons de compatibilité à l'utilisation des frames dans un site. En outre la migration vers une résolution d'écran plus grande (800x600 au lieu de 640x480) arrange visuellement bien les choses. Pourtant les frames gardent leur part de détracteurs qui préfèrent garder les présentations sous forme de tableaux.

AVANTAGES FRAMES

Simplicité du code.

Menu toujours présent à l'écran.

Riches possibilités en Javascript.

Code moins visible pour les débutants.

Bien que les frames ne soient pas implantés directement dans certains éditeurs Html, leur écriture est simple. Cette simplicité du code se paie par une grande rigueur au niveau des attributs des balises. Les frames restent, pour les concepteurs débutants, un des meilleurs moyens pour "s’emmêler les pinceaux".

Avec la division de l'écran en fenêtres, la tentation est grande d'en réserver une pour y mettre le menu (complet) des points abordés dans le site et offrir ainsi un outil de navigation qui sera toujours présent sous les yeux de l'internaute. Ce genre de frame spécialement apprécié pour les sites dont le contenu est appelé à se développer fréquemment car il suffira alors de modifier le seul fichier qui apparaît dans cette frame.

Pour les concepteurs experts, les frames et surtout les frames invisibles, présentent de multiples possibilités

- pour passer des valeurs d'une page à l'autre (en Javascript).

- pour masquer des données jugées confidentielles (compteurs, statistiques).

- pour précharger des images dans le cache.

- etc.

Bien que l’astuce ne fera pas long feu, l’accès au code des pages incluses dans les frames est un peu moins aisé pour les internautes débutants.

INCONVENIENTS FRAMES

Référencement délicat sur certains moteurs de recherche (Hotbot).

Barre de défilement pas très esthétique.

Manipulations plus difficiles pour les débutants.

Non compatible avec certains (rares) navigateurs texte.

Le référencement auprès de certains moteurs de recherche, spécialement ceux qui scannent le texte de la page, se révèle une opération périlleuse voire impossible car la page initiale de frames ne comporte que quelques lignes de code Html. On ne se lancera dans une page d'accueil avec des frames qu'avec une connaissance pointue des balises "Meta" et des trucs et astuces de référencement.

La barre de défilement introduites par défaut, et par ailleurs bien pratique, est souvent d'une esthétique douteuse dans l'ensemble visuel de votre page. Bien entendu, il est possible de la faire disparaître [border=0 frameborder=no framespacing=0] mais si cela fonctionne visuellement très bien sous une résolution d'écran déterminée (exemple 800x600), il est quasi certain qu'une partie de votre menu, par exemple, sera inaccessible et donc impossible à consulter, sous une résolution inférieure (640x480).

L'impression et l'enregistrement de la page sont rendus plus délicats voire impossibles pour les internautes débutants.

Quelques rares navigateurs ne reconnaissent pas encore les frames mais avec Netscape, Internet Explorer et Opéra qui reconnaissent les frames, on doit quand même couvrir 95% des navigateurs utilisés sur le Web.

AVANTAGES TABLEAUX

Présentation excellente.

Compatible avec tous navigateurs.

Véritable BABA du langage Html, les tableaux sont bien repris par les différents éditeurs du marché. Et c’est tant mieux car ils sont très utiles pour la mise en page, pour "dessiner" une page Web au millimètre près. J’ai l’habitude de dire "En publication Html, tout est tableaux". Que ce soit pour créer un alignement, une composition de page ou un menu de navigation, les tableaux offrent toujours une présentation impeccable et compatible avec (vraiment) tous les navigateurs.

INCONVENIENTS TABLEAUX

Code entier à répéter pour chaque page à créer.

Lourdeur du code à télécharger avec certains navigateurs.

Encore quelques différences entre Netscape et Internet Explorer.

Construire un menu de navigation qui se retrouve sur chacune des pages d'un site peut se révéler fastidieux car il faudra répéter pour chaque page le code entier. Heureusement qu'il y a le copier/coller. Plus embêtant cependant, c'est lorsque le site connaît de fréquentes mises à jour ou ajoutes. Il vous faudra alors modifier ce menu de navigation dans toutes les pages du site alors qu'avec un menu de navigation dans une frame, il suffit d'ajouter quelques lignes dans le fichier en question.

Le navigateur compose les tableaux de la page à partir des balises du langage Html. Si votre page comporte un grand tableau avec de nombreuses lignes et colonnes, si ce tableau initial comporte de nombreux autres tableaux imbriqués, l'opération de composition de la page peut prendre un certain temps et allonger le temps de chargement. On évitera donc les très grands tableaux bien compliqués.

La solution consiste à diviser ces grands tableaux en plusieurs tableaux plus petits.

Il subsiste encore quelques différences d’interprétation des balises des tableaux entre les navigateurs Netscape et Internet Explorer. Mais c’est une (triste) habitude.

4.5. Typographie

Il faut bien admettre qu’en publication Web, ce n’est pas évident de composer avec les polices de caractères... Et c’est peut-être finalement très bien ainsi !

En langage Html, on peut utiliser n’importe quelle police de caractère mais à la condition que celle-ci soit installée sur l’ordinateur de votre visiteur. Ainsi, si vous écrivez tout votre site avec la police Amelia et si cette police n’est pas installée sur le poste de votre visiteur, celui-ci verra votre site dans la police par défaut de son navigateur soit généralement en Times New Roman.

La solution la plus utilisée à ce jour consiste à mettre certains mots comme les titres dans une police différente et de les capturer sous forme d’image. Mais ce n’est pas la solution miracle spécialement en ce qui concerne le référencement par les moteurs de recherche et pour le temps de chargement.

Une solution consiste à employer les polices par défaut du système d’exploitation, polices que tout utilisateur est sensé avoir sur sa machine. Mais on ne peut pas dire qu’elles apportent grand chose de plus que les classique Times New Roman ou Arial.

Polices par défaut pour Windows 95 et Macintosh

source : Web Style Guide http://info.med.yale.edu/caim/manual/

Dans ce chapitre consacré aux polices, il me semble intéressant de relever que le rendu des polices est différent selon le système d’exploitation. En effet, avec les navigateurs sous Windows, les caractères (d’une même police) apparaissent un peu plus grand que sous Macintosh. Quand je vous disais qu’en langage Html, on n’a jamais le contrôle absolu du document !

Taille de certaines polices sous Windows et Macintosh

source : Web Style Guide http://info.med.yale.edu/caim/manual/

La véritable solution pour que votre site dispose de polices un peu originales existe mais est à ce jour [fin 1999] encore d’un emploi rare et réservé aux sites Hi-Tech. Cette solution s’appelle PFR (Portable Font Resource) ou encore Dynamic Fonts. La police que vous souhaitez utiliser pour votre page ou votre site est d’abord traitée par un programme spécifique pour en faire un fichier téléchargeable, compact, qui prendra l’extension pfr. Lors du chargement de la page par votre visiteur, ce fichier est appelé tout comme un fichier d’image gif ou jpeg. C’est la solution d’avenir mais encore au stade expérimental. Elle est pour l’instant freinée par leur implémentation différente sous Netscape et Internet Explorer [comme par hasard...] et le fait que les programmes pour créer ces fichiers pfr sont des programmes propriétaires et donc payants (ex : HexWeb Typograph de HexMac Software Systems). Mais on sort un peu du cadre de cette partie consacrée à l’architecture d’un site Web.

Finalement, la seule solution réaliste et compatible consiste à utiliser les polices par défaut. En outre, le langage Html ne vous propose que 7 tailles de police. On ne peut pas dire que les possibilités soient pléthoriques. Cette limitation (qui rappelle bien l’essence textuelle du Web) s’adapte finalement bien à un contenu de qualité et une mise en page sobre. Les nuances ou les effets de la communication sont à chercher ailleurs.

Architecture d'un site Web

www.ccim.be/ccim328/archi/index.htm

© copyright 1999

Vanlancker.Luc@ccim.be

Un mot d'encouragement ou un compliment fait toujours plaisir.

Critiques et suggestions seront aussi examinées avec attention.


France

Vu dans ... https://www.lehtml.com/index.htm

Architecture d'un site Web

1. Lignes de force

1.1. Publication papier

Avant de se lancer dans une publication Web, il est difficile d'éviter la comparaison avec la publication papier.

La plupart des concepts pour structurer l'information s'appuient sur l'organisation de livres, brochures, périodiques ou catalogues qui sont développés autour de la publication imprimée. Culturellement, il est impossible (voire dangereux car vous risquez de décontenancer votre interlocuteur) de passer outre à des siècles de règles et de conventions. Mais force est de constater que la publication sur Internet comporte ses propres spécificités.

Sans vouloir être exhaustif, soulignons en quelques-unes.

· L'internaute n'a pas la sensation physique du livre et risque d'être rapidement perdu dans le dédale d'écrans qui se présentent à lui. Il faut plus que jamais structurer l'exposé et offrir des outils de navigation pour lui permettre de se mouvoir ou même de le guider dans le site.

· Autant pour les yeux que pour l'esprit, l'auteur devra communiquer en terme d'écran et non plus en terme de feuille de papier d'un format déterminé.

· En Html, le langage informatique utilisé pour écrire les publications Web, vous n'avez pas la maîtrise de votre document comme dans une feuille de traitement de texte qui sort de votre imprimante. Un visiteur visionnera peut-être votre site avec une police de caractères plus grande, une grandeur d'écran différente ou une qualité d'image moindre...

· L'internaute a une démarche active vers l'information qu'il recherche. Sauf quelques "contemplatifs" du Web, l'internaute moyen lira vos pages en diagonales, dans un ordre dispersé, qui sera tout sauf celui souhaité par l'auteur, jusqu'à l'information recherchée. Une fois "son" information trouvée, votre site sera alors génial. Mais se souviendra-t-il de vos mises en pages et autres graphiques travaillés, retravaillés, bichonnées pendant de heures voire des semaines ?...

· La publication Web offre un rapport "prix / audience / délai" défiant toute concurrence vis à vis de l’édition traditionnelle. Le coût des moyens techniques est accessoire sinon dérisoire au vu de ceux de la production d'un livre ou d'une revue. La barre des 100 000 lecteurs est quelque chose d'accessible sur le Web, même pour un site personnel. Le délai des corrections, actualisations et autres mises à jour sera celui de votre propre créativité. Par contre, la publication Web est exigeante en travail et donc en temps à y consacrer.

· La différence essentielle est cependant l'interactivité qu'apporte la publication Web. Prenons simplement les e-mails de vos visiteurs [1 à 2% en moyenne], qui vous communiquent en temps réel, encouragements, critiques ou suggestions. Quelle mine d'or incomparable pour vos mises à jour ou les développements ultérieurs de votre œuvre !

1.2. Schéma global

Avant de se lancer dans la réalisation d'un site Web, il faut prendre le temps d'une réflexion préalable dont voici les lignes de force.

Le pourquoi de votre démarche (objectifs) engendrera le public que vous visez. La connaissance de votre public déterminera alors trois composantes : le contenu rédactionnel et la présentation visuelle de votre publication qui devront, l'un et l'autre, tenir compte des particularités de fonctionnement de ce nouvel outil de communication qu'est Internet.

En outre, votre site une fois sur le réseau, l'interactivité et précisément les e-mails de vos visiteurs vous permettront de mieux connaître "votre" public et d'affiner, lors de vos mises à jour, le précieux schéma de réflexion de votre site : objectifs à public à contenu, visuel et fonctionnel.

"Un site Web est donc trois composantes qui s'adressent chacune à une fraction de votre public. Ceux qui n'ont jamais visité votre site, les passants, apprécieront sa clarté et sa présentation visuelle harmonieuse. Ceux qui y reviennent une ou deux fois, les curieux, seront convaincus par la qualité du contenu. Enfin les habitués des lieux, les fidèles, vous témoigneront une infinie gratitude si, en plus, le téléchargement de vos pages est rapide." (Philippe Monteiro da Rocha)

1.3. Objectifs

Sans objectifs, pas de cohérence. Sans cohérence, pas de public non plus !

La première étape dans la conception d'un site Web est la définition des objectifs que vous poursuivez dans la création d'un site. Ces objectifs formeront la "colonne vertébrale" de votre communication qui apportera la cohérence indispensable à votre site.

Ces objectifs fourniront également un outil d'évaluation de votre site, au combien utile pour éventuellement corriger le tir ou vous guider dans ses développements ultérieurs.

Ces objectifs peuvent prendre des formes multiples :

· être présent sur le Web. Objectif minimaliste, il faudra dans ce cas veiller à la densité du contenu.

· faire des visiteurs ou du trafic. Ici le visuel risque d'être prépondérant mais n'espérez pas forcément une clientèle fidélisée.

· faire un site de liens. Le fonctionnel vous invitera à vérifier régulièrement la validité de ces mêmes liens.

· faire un site de promotion d'une association ou d'une marque commerciale. Un mariage harmonieux du contenu et du visuel sera votre priorité absolue et fera alors votre succès.

· faire un site commercial. Remplacez dans ce qui suit les mots "contenu pertinent" par "service probant".

· faire un site académique. Il faudra penser à alléger le poids du contenu par un visuel adapté et une facilité de navigation quasi intuitive.

· informer ou distraire. En deux mots, voilà deux programmes bien différents.

· etc.

1.4. Public visé

Connaître son public pour communiquer avec lui.

L'étape suivante dans le processus d'élaboration d'un site sera d'identifier les utilisateurs potentiels de votre site afin d’adapter votre communication à leurs besoins et leurs attentes.

Outre la densité du contenu et la sophistication du visuel, cette connaissance du public influencera également la structure ou l'aspect fonctionnel de votre site. Les internautes novices souhaitent une structure claire voire dirigiste tandis que les internautes expérimentés ont plutôt horreur d'une structure trop lourde qui leur donne l'impression d'être chapeauté et de freiner leur accès à l'information.

Les internautes novices et visiteurs occasionnels. Ces internautes novices sont demandeurs d'une structure claire et d'un aperçu qui illustre comment l'information est arrangée dans le site. Un menu textuel trop détaillé les décontenancera. Ainsi préféreront-ils un menu, idéalement agrémenté d'une touche graphique, de 4 à 6 sujets. Pour ces internautes novices, une page d'accueil au visuel attractif et à la mise en page soignée sera souvent décisive [attention, ils n'utilisent que très peu le défilement vertical]. Les visiteurs occasionnels apprécieront un plan du site, des pages d'aperçu et des petites icônes qui leur rappellent où se situe l'information dans le site. Un dictionnaire des termes techniques, acronymes et abréviations ainsi qu'une FAQ ["Frequently Asked Questions" ou Foire Aux Questions] peuvent être très utiles à ces visiteurs d'un jour.

Les internautes experts et visiteurs fidèles. Ces internautes expérimentés utiliseront votre site pour obtenir rapidement une information précise et pertinente. Ils se révèlent assez impatients lorsqu'ils sont confrontés à des petits menus en cascade de 4 à 6 choix et les fioritures graphiques leur importent peu. Ils ont généralement un but spécifique en tête et ils apprécieront les menus textuels détaillés, les outils de navigation clairs à la symbolique légère qui permettent une recherche rapide jusqu’à l'information souhaitée. En fait, ils ne feront que traverser votre site jusqu'à la bride du contenu qui les intéresse.

Le fin du fin en terme de structure d'un site étant celle qui est capable de s’adapter à plusieurs profils d'utilisateurs.

1.5. Contenu rédactionnel

Le Web est par essence textuel.

Le Web est une formidable source d'informations. Mais à la différence de la télévision par exemple, l'internaute doit adopter une démarche active car il doit aller chercher cette information. Dans cette recherche, il s'attend à trouver de l'information utile et un contenu pertinent et actualisé. Dans le cas contraire, l'internaute s'en ira frustré et on peut parier qu'il ne remettra jamais les pieds dans votre site.

N'oubliez pas non plus que le Web est un marché très concurrencé et que la plupart des sujets d’informations sont ou seront traités à de multiples reprises. La différence se fera sur la qualité et le détail du contenu.

L'internaute moyen après avoir longuement vagabondé dans tous les sens sur la toile, se limite très souvent, après quelques mois, à une vingtaine de sites qui correspondent à ses centres d'intérêt et qu'il revisite à intervalle régulier. Ces sites ainsi "élus" le sont non pas pour le graphisme puisqu'il le connaît par cœur et ne le regarde même plus, non pas pour la facilité de navigation puisqu'il l’oublie tellement il y est à l'aise, mais pour le contenu et surtout son actualisation régulière. Le contenu est le meilleur moyen pour fidéliser votre public. Faire venir le visiteur sur votre site, c'est bien, le faire revenir c’est assurément la plus belle réussite.

Par expérience, on remarque que ce n'est pas tant ceux qui n'ont rien à dire qui n'hésitent pas à publier sur le Web mais ceux qui, compétent dans une sphère d'activité, veulent à tout prix viser l'excellence. Le Web est large et les publics variés. De la vulgarisation à l'expertise, chaque niveau a sa place pourvu que le sujet soit traité de façon cohérente. Il est parfois plaisant d'avoir une explication claire et simple sur un sujet déterminé sans devoir entrer dans des développements pointus mais compliqués. Rien n'empêche alors de préciser d’entrée les limites de votre site.

Bien que l'auteur ne soit pas un champion en la matière, des fautes d'orthographe "énaurmes et trop nombreuse" non seulement agacent votre lecteur mais surtout déprécient la crédibilité de votre contenu et l'image de votre site. De grâce, il existe des correcteurs d'orthographe et des bons samaritains de la langue française pour vous relire ! [promis, je ferai des efforts...]

1.6. Présentation visuelle

Sans le graphisme, le Web ne serait pas ce qu'il est.

A n'en pas douter le Web a véritablement décollé grâce à son côté visuel. Par visuel, nous entendons non seulement les images et autres éléments graphiques mais également les animations que permettent les développements technologiques récents comme le Java, le Javascript et le Dhtml.

Dans les 30 secondes qui vous sont accordées pour convaincre un internaute à entrer dans votre site, le visuel prend toute son importance. Un aperçu du contenu éveillera assurément son intérêt mais c'est le visuel qui entraînera le clic "gagnant" vers l'intérieur de votre site.

Il ne faut cependant pas en conclure qu'il est indispensable d'être un infographiste de génie pour faire un site. L'important est bien que le visuel soit adapté à votre public...Et puis n'oubliez pas qu'un visuel sobre, net et attrayant suffit dans la plupart des cas.

Soulignons aussi que le visuel doit garder le visiteur sur le contenu et non le distraire de celui-ci. Le visuel est aussi (ou surtout ?) une autre façon de communiquer le contenu à votre visiteur. En aucun cas, il ne sera une occasion pour vous faire plaisir ou étaler gratuitement vos talents graphiques.

Enfin, n’oubliez pas que les internautes comportent, comme dans la vie de tous les jours, leur lot de myopes, presbytes et autres daltoniens. Pensez à eux avec des couleurs nettes et des images vraiment informatives.

Le visuel est aussi fort utile pour structurer votre propos et agrémenter votre mise en page. On veillera à créer tout au long des pages d'un site une identité et/ou une cohérence visuelle qui guidera l'internaute tout au long de sa visite. On prêtera une attention particulière à cette identité visuelle lorsque plusieurs personnes participent à l'élaboration du site.

Cet aspect visuel doit impérativement tenir compte de l'aspect fonctionnel de la publication sur Internet et tout spécialement du temps de chargement des images et du temps de réponse des animations (Java et dans une mesure moindre le Dhtml). Mis à part les sites à caractère pornographique, le délai de péremption de la patience de l'internaute moyen est vite épuisé... A ce stade de développement d'Internet et des télécommunications, le visuel et spécialement la taille des images sont encore toujours une question de compromis. On oublie trop vite qu’un site se juge en ligne à partir du réseau et non à partir de son disque dur !

Notons pour terminer que le visuel d'un site vieillira bien plus vite que le contenu. La Web a ses modes (mais oui, mais oui...) et il faudra penser à rafraîchir régulièrement le visuel de votre site.

1.7. Aspect fonctionnel

Comprendre le fonctionnement du Web et le comportement des internautes.

L'écran de votre visiteur et surtout le Web sera le support de votre publication. Ce nouveau moyen de communication a non seulement ses spécificités techniques mais aussi déjà ses "us et coutumes".

Si dans la publication papier, il suffit de tourner la feuille, sur le Web il faudra composer avec le temps de chargement de la page. Commençons par le texte. Une page de 15 à 30 K ne posera pas de problèmes c-à-d l'équivalent d'une feuille A4 maximum. Au-delà, le temps de chargement devient pénalisant surtout si en plus cette page comporte de nombreux tableaux imbriqués qui ralentissent le chargement. Mais n'oubliez pas qu'en Html, toutes les images sont des fichiers séparés qu'il faudra charger ensuite. Un total d'images de 30 à 50 K semble être dans la norme. Au delà des 80 K pour une image, le délai d'attente devient pour le capital patience de certains quelque chose de prohibitif surtout pour une page d'accueil. N'oubliez pas qu'une image qui a déjà été chargée, reste dans le "cache" de votre navigateur et qu'il ne la rechargera plus à partir du réseau mais de votre disque dur ce qui entraîne un chargement immédiat. Ce qui permet d'user et d'abuser des boutons, puces, tirets de séparations et autres bannières qui se retrouvent de pages en pages et qui agrémentent votre mise en page et forment l'identité visuelle d'un site.

Ces différentes (petites) pages doivent être structurées de façon logique afin que l'internaute puisse naviguer efficacement dans votre site. Nous consacrons plus loin dans le site un chapitre particulier sur les différentes structures d'un site Web. Il faudra aussi prévoir de petites icônes pour que l'internaute puisse utiliser aisément cette structure et se retrouver à tout moment dans l'exploration de votre site. Les maîtres du Web conseillent de prévoir pour chaque page une possibilité de retour à la page d'accueil. Ces petites icônes de navigation devront être d'un graphique simple et à d'une symbolique intuitive.

L'essence du Web est la notion d'interactivité. Interactivité entre les pages de votre site, interactivité entre votre site et les autres sites présents sur le Web, interactivité entre le Web et les autres outils disponibles sur Internet (qu'il s'agisse des moteurs de recherche, des e-mails, des listes de diffusion, des forums, des fichiers à télécharger, etc.). Interactivité, enfin, entre vos visiteurs et l'auteur. Tout concepteur d'un site Web doit toujours veiller à créer cette interactivité que ce soit simplement par de adresses e-mail cliquables, des formulaires (livres d'or) à caractère plus "officiels",

Pour ma part, je n'ai jamais, pour visiter un site, téléchargé un plugin, changé de browser, modifié la résolution d'écran ou le nombre de couleurs de mon ordinateur. Et je ne crois pas être le seul ! Un site s'il peut être optimisé pour une configuration déterminée, doit rester compatible quel que soit le visiteur. Juste retour aux sources de l'esprit d'universalité du Html et du Web.


France

2. Architecture d'un site

2.1. Découpe de l'information

Au royaume de l'hypertexte, la page est reine.

2.1.1. Raisons

La raison essentielle de la découpe du contenu en petites pages de dimension réduite réside dans un temps de chargement raisonnable pour le confort de l’internaute. Et n'oubliez pas que ce fameux temps de chargement comprend non seulement le texte de la page mais aussi les images voire autres animations du style Java, Javascript ou Dhtml. Avec un total de 45 ko, vous serez dans une zone idéale tandis qu’une page de 70 à 80 ko est à considérer comme un maximum pour un temps de chargement acceptable.

Des petits morceaux d'information sont plus adaptés à la lecture sur un écran d'ordinateur que la vision partielle d'un long document. La mémoire immédiate et la synthèse instantanée de l'esprit humain étant ce qu'elles sont, des pages Web très longues sont déstabilisantes car elles nécessitent le défilement vertical et l'obligation de se rappeler les informations ainsi disparues de l'écran. Selon certaines études psychologiques, la mémoire à court terme comprend entre 4 ou 7 petits éléments d'information.

En outre, cette découpe de l'information en petites unités logiques, associée à une structure rationnelle, facilite grandement la navigation et la recherche de l'information souhaitée.

Pour fixer un ordre de grandeur, cette découpe de l'information correspondra à 2 ou 3 écrans soit environ 1/2 à 1 feuille A4 sans mise en forme ou alors 2 à 3 feuilles A4 d'une mise en page particulièrement aérée.

2.1.2. Utilité

Le découpage de l'information en petits morceaux, organisés de façon uniforme est particulièrement adapté aux présentations Web car :

· peu d'utilisateurs passeront leur temps à lire de longs passages de texte sur l'écran. A la lecture en ligne, on préférera souvent enregistrer les longs documents ou même les imprimer.

· le découpage de l'information en petites unités et le système hypertexte font bon ménage. En effet, en cliquant sur un lien, l’internaute s'attend généralement à trouver un autre morceau d'information liée et complémentaire à la précédente et non un livre complet. Mais ne subdivisez pas trop votre information. Cliquer un lien pour ne trouver que quelques mots ou un petit paragraphe peut se révéler frustrant pour l’utilisateur et le distraire du véritable contenu. On utilisera alors plutôt (mais sans en abuser) les petites fenêtres pop-up du Javascript.

· une forme uniformisée du découpage et de la présentation crée une identité à votre site. Cette cohérence permettra très vite à vos visiteurs d'acquérir une certaines expérience pour leurs recherches et autres explorations, voire même de prévoir comment une nouvelle section de votre site sera organisée. Vous aurez alors créé "un site où on se sent à l'aise", ce qui est une des clés essentielles d'un bon site.

· l'essence de la navigation sur le World Wide Web n'est-elle pas l'acquisition d'un savoir à partir de multiples morceaux d'information acquis de façon non séquentielle ?

Ce concept de découpage de l'information doit cependant être flexible et adapté au sujet traité ainsi qu’à la logique d'organisation de votre site et au confort de votre visiteur. C'est la nature du contenu qui suggérera le meilleur moyen de subdiviser et d'organiser l'information. Ainsi, dans certains cas, des pages plus longues seront néanmoins nécessaires pour traiter complètement un sujet sans distraire le visiteur par une découpe intempestive de celui-ci. C'est particulièrement vrai lorsque l'on souhaite que l'utilisateur puisse imprimer ou enregistrer un sujet déterminé en une seule étape.

2.2. Structure

Sans une structure fonctionnelle, votre site sera un échec même si le contenu en est pertinent et bien rédigé.

"La chose la plus importante à considérer lorsqu'on prépare le design d'un site Web, c'est la satisfaction des utilisateurs. La facilité avec laquelle ils trouveront ce qu’ils recherchent déterminera la fréquence avec laquelle ils reviendront sur le site. Eviter de frustrer les internautes est l'objectif principal du design. Et au bout du compte, savoir structurer l'information qu'on présente est la base fondamentale d'une expérience réussie sur le Web." (Valérie Casey, professeur de Web Design à l'Université de San Francisco)

Le but est de fournir à l'usager l'information qu'il souhaite en un minimum d'étapes et donc un minimum de temps. Pour autant que des normes strictes existent en la matière, on parle de la "règle des 3 clics" selon laquelle toute information de votre site doit être disponible en maximum 3 clics de souris. Il faut donc hiérarchiser l'information selon une structure efficiente pour minimiser la navigation vers l'information.

2.2.1. Structure séquentielle

Le moyen le plus simple d'organiser l'information est la façon séquentielle C'est en quelque sorte le retour au livre avec sa narration linéaire : chapitre 1, chapitre 2, chapitre 3...

Les narrations, les lignes du temps ou autres exposés nécessitant un ordre logique se prêtent à ce genre de structure ainsi que les thèmes progressant du général au particulier. La structure séquentielle est aussi particulièrement adaptée aux sites d'apprentissage ou tutoriaux où le passage à une page suivante requiert des pré-requis exposés à la page précédente.

Cependant, cette structure séquentielle ne sera utilisée que pour des petits sites (ou des parties de sites plus grands) car de longues séquences narratives ou explicatives nécessiteront souvent une structure plus sophistiquée pour rester compréhensives.

2.2.2. Structure hiérarchisée

La structure hiérarchisée est une des meilleures façons d'organiser des blocs d'information complexes. Ce schéma d'organisation s'adapte particulièrement bien au site Web car les différents thèmes dépendent ainsi d'une seule et unique page soit la page d'index ou page d'accueil [homepage]. En outre les utilisateurs sont souvent familiarisés avec les diagrammes hiérarchisés comme les organigrammes et trouveront la métaphore facilement compréhensible pour les aider dans leur navigation.

Cette organisation hiérarchisée en blocs d'information indépendants nécessite cependant un gros travail d'analyse préalable de votre contenu (notions pré-requises, doublons d'information...) car cette structure hiérarchisée ne sera efficiente que si vous avez soigneusement organisé l'information disponible.

2.2.3. Structure en réseau

Ces mini Webs fonctionnent bien pour des petits sites destinés à des utilisateurs hautement qualifiés en quête d’enrichissement ou de perfectionnement plutôt qu'à la compréhension basique d'un sujet. On travaillera ici les associations d’idées et le libre cours de la pensée. Chaque visiteur parcourra votre site de façon unique selon ses propres intérêts et sa propre démarche vers l’information sans avoir l’impression d’être dirigé.

Ce type de structure exploite la pleine puissance des liens vers des informations à l’intérieur du site et vers des informations située dans d’autres sites de la toile.

Cette structure en réseau se révèle cependant ardue à mettre en place et finalement peu pratique surtout pour les internautes novices dans le sujet traité. Ceux-ci auront alors l’idée d’un site confus, difficilement exploitable.

2.2.4. En pratique

Rares sont cependant les visiteurs qui suivront à la lettre le schéma de votre structure et ils retrouveront bien vite leurs habitudes de navigation propres au Web soit de façon libre et non-linéaire. Paradoxalement, ce "surf" sur les différentes informations ne se révèle efficace qu'avec une structure bien organisée qui complète les lignes de force de la conception de votre site.

2.2.5. Structure en évolution

Pour les sites qui connaissent une croissance rapide et de nombreux développements, l'objectif sera de garder un équilibre entre les différents blocs d'informations. Et ce n'est pas toujours une chose aisée... Le feedback de vos utilisateurs et une analyse personnelle critique de votre site vous aideront à déterminer si certains passages ne sont que pauvrement structurés ou même si votre structure initiale est devenue, avec les différentes ajoutes, complètement obsolète.

L'objectif sera de maintenir une hiérarchisation équilibrée qui aidera l'accès rapide à l'information et une compréhension intuitive de la façon dont les éléments sont organisés.

Exemple d’une structure équilibrée

2.2.6. Sources

Le contenu de cette page consacrée à la structure d’un site Web est fortement inspiré de l’excellent site Web Style Guide qui fait référence en la matière. Les graphiques de cette page sont issus de la même source. Copyright Lynch & Horton, 1997. Yale University. http://info.med.yale.edu/caim/manual/

2.3. Outils de navigation

Un visiteur qui se perd est un visiteur qui ne reviendra plus.

Votre structure en place, il faut encore fournir à vos visiteurs, les outils de navigation indispensables pour une exploration aisée de votre site. Ces outils de navigations sont aussi indispensables à la circulation dans votre site que les panneaux de circulation du réseau routier.

Ces outils de navigation se présentent par des liens sous forme de texte ou seront plus agréablement conçus sous forme de petites images, boutons, icônes ou barres d’information. On veillera alors à un graphique simple et à la symbolique intuitive car ils se doivent d’être efficaces mais aussi de rester discrets par rapport au contenu et au visuel proprement dit. Ces outils de navigation qui se retrouvent de pages en pages contribuent aussi à créer l’identité graphique de site.

Quelques principes généralement adoptés par tous les concepteurs de site semblent se dégager. Les utilisateurs d’un site doivent toujours être capables de revenir à tout moment vers la page d’accueil [Home ou Index] ou vers les principaux points de navigation. Chaque page d’un site comporte donc un lien vers cette page d’accueil ou la page servant de dispatching. De plus, si le sens du contenu global y invite, on prévoira des possibilités de retour à la page précédente ou d’avancement à la page suivante.

Les barres qui proposent de multiples choix dans un espace réduit ont de nombreux adeptes car elles peuvent ainsi servir d’en-tête de page et donner une forte cohérence visuelle au site. Mais d’autres préféreront l’usage de frames ou de tableaux (voir plus loin dans le site).

La tendance actuelle sur le Web est de proposer plusieurs outils de navigation. Le premier sera celui qui vous guidera l’utilisateur dans la navigation du site selon les directives de l'auteur. Les autres donnent pleine liberté d’exploration au visiteur.

2.4. Page d'accueil

Pas une couverture mais plutôt un sommaire visuel et informatif.

Lorsque l'internaute clique sur votre site à partir d'un moteur de recherche ou encode directement votre adresse au clavier, c'est sur cette page qu'il aboutit. Il vous reste alors 30 secondes pour le convaincre de parcourir les pages de votre œuvre et vous récompenser ainsi de toutes vos heures de travail. C'est dire toute l'importance que l'on accordera à la conception et à réalisation de cette première page.

Cette page d'entrée de votre site prend le nom de page d'index (en référence à l'adresse index.htm), de "homepage" ou de page d'accueil. Pour les sites à structure hiérarchisée, cette page est tout naturellement celle qui est au sommet de la hiérarchie et vers laquelle on pourra revenir à partir de toutes les pages du site.

Les usages (ou le bon sens) dictent les éléments constitutifs de celle-ci :

· le nom ou le titre de votre site qui en reprendra l'objet.

· un sommaire (détaillé ou synthétique) qui donnera une vue d'ensemble du contenu et amorcera les outils de navigation.

· un élément visuel (logo, image, icône symbolique) pour l'aspect attractif.

· un court texte qui reprend le descriptif fourni aux moteurs de recherche (excellent pour le référencement et le classement).

· le nom de l'auteur et un lien vers l'adresse électronique de celui-ci.

· la date de réalisation ou de la dernière mise à jour.

· etc.

On évitera dans la page d'accueil :

· toute forme de publicité mensongère quant au contenu. Il m'arrive de remercier par e-mail des auteurs de site qui ont l'amabilité (ou l'honnêteté) de dire en termes élégants "Ce site n'est pas ..." et épargner ainsi aux internautes toute navigation et perte de temps inutile.

· des liens externes vers d'autres sites. C'est assurément sympa de votre part mais pourquoi risquer de perdre un visiteur potentiel avant même qu'il ait découvert vos pages.

· de devoir utiliser les barres de défilement vertical. Au-delà de 2 écrans, votre page d'accueil risque d'être beaucoup trop détaillée et donc pas assez attractive. A la limite, toute l'information importante devrait être concentrée sur le premier écran.

· un temps de chargement prohibitif car la tentation sera grande pour un site inconnu de cliquez le bouton "Précédent" et de retourner aux sites concurrents proposés par le moteur de recherche.

· une page d'accueil avec des frames car cela en complique grandement le référencement et le classement auprès de certains moteurs de recherche.

La page d’accueil est la page la plus importante de votre site. C’est elle, et elle seule, qui par son attrait déclenchera le clic "gagnant" du visiteur hésitant vers votre œuvre. Faites votre expérience personnelle sur la toile, comparez, cogitez et laissez parler votre créativité. Sans perdre de vue que votre stratégie pour sa conception retiendra toutes les lignes de force de votre réflexion préalable et rejoindra autant en contenu, visuel et fonctionnalité les objectifs et le public visé de votre site.


France

3. Règles de l'art

Créer un site Web est une technique jeune qui n’existe que depuis quelques années. Toujours en plein développement, il n'existe pas encore de véritables "règles de l'art" mais je n'ai pas pu résister à la tentation de rassembler ci-après quelques règles ou normes qui, à défaut d'être toujours explicables, sont généralement respectées en matière de publication sur le Web.

La règle des trois clics. Toute information dans un site doit être accessible en 3 clics de souris maximum à partir de la page d'accueil.

La règle des trois écrans. La longueur d'une page ne doit pas dépasser 3 à 5 écrans (grand maximum) pour limiter le défilement vertical.

Le premier écran d'un page doit rassembler le maximum de l'information et inviter à en poursuivre la découverte. Un pourcentage important des internautes n'utilisent pas ou peu le défilement vertical.

Le défilement horizontal de la page est à éviter (sinon à proscrire) quelle que soit la résolution d'écran de votre visiteur. Débrouillez-vous...

Un écran ne doit être rempli qu'à 50% de texte et de graphiques. Le reste est consacré au fond d'écran.

Quels que soient vos goûts en matière artistique, le texte doit toujours rester lisible par rapport au fond d'écran. Comme dans la vie de tous les jours, le Web comporte son lot de mal voyants. Pensez-y.

Prévoir une possibilité de retour à la page d'accueil à chaque page du site. Un visiteur perdu est un visiteur déçu.

Ecrire des phrases courtes à la construction simple. N'oubliez pas de communiquer...

La lecture de texte sur écran se révèle vite fatiguante. Des lignes de texte de 60 à 90 caractères maximum semblent être un bon compromis surtout si on sait que la tendance est aux résolution d'écran de 800 x 600 et 1024 x 768 ...

Si après les 10 secondes (*) suivant un clic, il ne se passe rien, l'internaute s’inquiète, s'ennuie, s'impatiente ou quitte la page. [* à adapter selon votre capital de patience].

Tous les liens seront dûment vérifiés et valides. A ce stade de développement de la publication Internet, un lien non valide devient (presque) inadmissible.

Sans oublier tout de ceci, soyez toujours vous-même et si possible créatif.


France

4. En particulier

4.1 La résolution d'écran

Les concepteurs débutants posent souvent la (mauvaise) question : "Pour quelle résolution d'écran doit-on concevoir un site ?". C'est une mauvaise question car vous ne connaîtrez jamais la résolution d'écran de votre visiteur. Et une annotation du genre "site optimisé en 800 x 600" est assez illusoire car les internautes qui changeront leur résolution uniquement pour voir votre site sont rarissimes. Il existe cependant certaines solutions pour rendre votre site esthétiquement compatible avec n'importe quelle résolution d'écran.

4.1.1. Présentation

Beaucoup de gens pensent que la résolution d'écran (ou "espace du bureau" selon Microsoft) dépend de la taille de l'écran. Ce qui est faux. On peut avoir un écran de 14 pouces et avoir une haute résolution ou avoir un écran de 21 pouces et n'avoir qu'une résolution d'écran de seulement 640 x 480. 640 signifie 640 pixels de façon horizontale et 480 pour 480 pixels de façon verticale.

La plupart des moniteurs peuvent afficher différentes résolutions d'écran. C'est la carte graphique qui détermine les différentes résolutions d'écran possibles pour un ordinateur donné. Ainsi, il y a quelques années, avec les cartes graphiques de 1 méga, la norme était en 640 x 480, ce qui était confortable pour les applications bureautiques. Avec l'évolution de ces cartes, le 800 x 600 est apparu. Et avec l'introduction sinon la généralisation des cartes graphiques à 4 mégas de mémoire, les résolutions 1024 x 768 ou même 1280 x 1024 sont possibles à défaut d'être fréquentes. Les internautes suivent bien entendu cette évolution technologique et la résolution 640 x 480 qui était la norme il y a encore quelques années, est en voie de disparition au profit de résolutions plus hautes.

Avec toutes les précautions d'usage quant à la précision des chiffres suivants et après recoupement de plusieurs sources, on peut (à fin 1999) se référer au tableau suivant qui donne une idée de la répartition des différentes résolutions utilisées pour le Web.

Résolution | Pourcentage
640x480 | 15 %
800x600 | 55 %
1024x768 | 24 %
1280x1024 | 2 %
autres | 4 %

Comme vous voyez, la moyenne des utilisateurs du Web utilisent une résolution d'écran de 800x600 [et en 65.536 couleurs]. Mais écrire pour la moyenne n'est pas tout... Il reste les 45 % autres internautes pour qui votre site risque d'être une véritable catastrophe.

4.1.2. Illustration du problème

Le premier exemple montre une page avec un image reprenant les lettres de l’alphabet. Avec une résolution 800x600, cette image s’adapte parfaitement à l’écran. Par contre, cette même page, vue en 640x480 est déjà beaucoup moins sympathique.

L’utilisateur devra non seulement faire appel au défilement vertical pour voir l’entièreté des lettres mais également au défilement horizontal car les lettres K et L ont disparue de l’écran. Si le défilement vertical est acceptable car finalement indispensable dès qu’une page est d’une certaine consistance (et encore méfiez vous des novices du Web qui ne l’utilisent que très peu), le défilement horizontal est à bannir car trop inconfortable pour votre visiteur.

Résolution 800x600 | Résolution 640x480

Le second exemple tente d'illustrer les différences de mise en page et surtout la longueur des lignes de texte d’une résolution à l’autre.

Si une page reprend principalement du texte, plus la résolution est haute, plus la ligne de texte sera longue et donc plus la lecture de ce texte à l’écran sera fastidieuse. Lire du texte sur un écran en 1280x1024 reviendrait à lire un journal où le texte serait imprimé d’un bord à l’autre - sans colonnes -. Pas pratique du tout et il faut avoir de bons yeux !

Résolution 800x600 | Résolution 640x480

4.1.3. Quelques solutions

Il faut bien admettre qu’en 640, le composition de la page est un peu étriquée. Avec des résolutions plus hautes, on peut concevoir des pages plus aérées et aux proportions plus équilibrées. En outre, cette largeur supplémentaire permet généralement de prévoir des menus de navigation omniprésents sur chaque page du site.

Passons en revue quelques solutions pour garder une certaine compatibilité par rapport aux différentes résolutions possibles.

On limitera la largeur des images à environ 600 pixels même pour les sites idéalement conçus en 800x600 ou en résolution plus grande encore afin d’éviter de devoir utiliser les barres de défilement horizontales, sous des résolutions inférieures. Cette limitation vaut aussi pour les tableaux et les frames élaborés avec une largeur fixée en pixels.

On pensera à inclure les longs passages de texte dans des tableaux (à bordure invisible) d’environ 600 pixels maximum. On obtiendra ainsi des lignes de texte de 60 à 90 caractères, ce qui semble être une norme acceptable pour un confort de lecture à l’écran.

On se méfiera des arrière-plans sous forme d’une fine bande horizontale. Il faut les prévoir d’entrée avec une largeur de 1280 pixels afin qu’ils s’adaptent à toutes les résolutions possibles sans devoir se répéter horizontalement, ce qui entraîne généralement des effets non désirés et désastreux (raccord).

Comme toujours pour la création de sites Web, testez, testez encore et testez toujours.

Finalement (voir les remarques sur les images et le texte), on rencontre de plus en plus de sites qui sont conçus en 600 pixels de large pour être vus en 800x600 ou plus. Le reste de la largeur étant un arrière-plan neutre. La page reste alors toujours bien lisible quelque soit la résolution.

Résolution 640x480 | Résolution 800x600

4.1.4 Remarque finale

Avec le Javascript 1.2, on peut maintenant détecter (sans pouvoir la modifier cependant) la résolution d'écran de l’internaute et le rediriger automatiquement vers une page spécialement conçue pour cette résolution [screen width et screen.height]. Intéressant sûrement mais cela équivaut alors à écrire quasiment un site pour chaque résolution. Mais quel boulot !

4.2. La zone de sécurité

En fonction de ces différentes résolutions d’écran possibles et des modifications qu’ils apporteront à votre site, est né dans la pratique de la publication Web, le concept de la zone de sécurité.

Celle-ci est une zone qui, quelle que soit la résolution d’écran, le système d’exploitation ou le navigateur utilisé, sera vue parfaitement par l’internaute.

C’est aussi la partie de la page Web qui apparaîtra en premier à l’œil de votre visiteur et dans laquelle on regroupera le maximum d’informations littéraires ou graphiques (véritable synthèse de la page) qui l’inciteront à utiliser le défilement vertical pour poursuivre l’exploration de la page.

Pour une résolution d’écran toujours possible de 640x480, la largeur est d’environ 600 pixels car il faut tenir compte des marges et de la barre de défilement. La hauteur, compte tenu des différentes barres d’outils et barres d’état du navigateur, sera quant à elle d’environ 350 pixels.

Zone de sécurité du navigateur

On souhaite parfois que le visiteur puisse imprimer une page. Fort de votre expérience d’internaute, vous n’êtes pas sans ignorer que l’impression d’une page Web n’est pas sans surprises, spécialement lorsque la page comporte des images.

Notons tout d’abord que le langage Html n’a pas été conçu pour l’impression. C’est le navigateur qui recompose la page Web de la largeur de l’écran à la largeur (plus petite) d’une feuille A4. Si la page a été conçue avec du texte avec retour automatique du chariot ou avec des tableaux exprimés en pourcentage de la fenêtre, cette recomposition s’effectue sans problèmes. Par contre, si la page comporte des images qui dépassent une largeur de 530 pixels ou si des tableaux avec une largeur exprimée qui excède les 530 pixels, le risque est grand que certains éléments de l’image ou du tableau n’apparaissent pas à l’impression.

Surtout si la page destinée à être imprimée comporte des images, la zone sûre d’impression devient 530 pixels de largeur pour 710 pixels de hauteur. Selon l’importance attachée au document, il n’est pas inutile de tester cette impression avec différents types d’imprimante. Il est dans certains cas plus sûr de recourir à un document à télécharger du type PDF (Adobe Acrobat) qui est universel et vraiment conçu pour l’impression.

Zone de sécurité pour l’impression

4.3. La mise en page

Classique ou "délire" ? Livresque ou audiovisuel ?

Comment allez vous présenter votre information sur ce médium particulier qu’est l’écran de votre visiteur relié à la toile ? D’un façon classique, quasiment livresque ou, profitant des dernières technologies en matière de publication sur le Web, puiserez-vous votre inspiration dans les créations audiovisuelles comme la télévision et spécialement ses bandes annonces ou ses spots publicitaires ?

Le point de vue du classique

La transmission d’un savoir se fait, autant pour l’auteur que pour le lecteur, d’une façon structurée et claire. On ne peut passer outre à l’héritage culturel de siècles d’édition au risque de décontenancer le visiteur. Titres, chapitres, sous-chapitres, éventuellement en-tête et pieds de page apportent une hiérarchie du contenu qui permettra tout au long de l’exposé d’aller du principal au particulier et qui induira ainsi une structuration de la connaissance. Clarté et netteté de la mise en page restent et resteront le maître mot de votre expression. Les animations et autres effets visuels ou dynamiques ne font que distraire le lecteur du véritable contenu et créer à la longue un sentiment d'inconsistance pour finalement le lasser de votre site. Le Web restera avant tout un formidable réservoir d’informations même si certains veulent en faire un parc de loisirs. Il importera devant cette profusion d’informations, qui ira à n’en pas douter de façon croissante, d’apporter une information pertinente, détaillée, actualisée et surtout facilement accessible. La véritable dynamique du Web ne réside pas dans ces animations que l’on dit révolutionnaires, mais dans la démarche active de l’internaute vers l’information qu’il souhaite trouver. C’est cette information qu’il faut lui donner, pas des "mots qui bougent"... Au royaume du Web, plus que jamais le contenu sera roi.

Le point de vue du "délire"

Avec les derniers développements du Javascript, du Dhtml voire de Flash, la mise en page des sites Web sera profondément bouleversée. Les diverses animations sur le texte ou les images, pour autant qu'elles ne soient pas inutilement gratuites, viennent renforcer la transmission de l'information. Le livre n'est pas le seul moyen de communication. Il y a aussi l'audiovisuel et les présentations multimédia. Les publicitaires l'ont bien compris et leurs spots à la télévision ne font plus que raconter leur histoire de la façon la plus convaincante possible mais par des effets dynamiques attirent le regard et l'esprit pour tantôt faire ressortir un mot ou un logo ou tantôt synthétiser un message. Il est évident que le contenu ne suffit plus et que c'est le message qui sera transmis de la façon la plus performante qui l'emportera. Les gens ne lisent plus ou très peu... par contre ils passent des heures à regarder de façon consciente ou non leur poste de télévision. Consciemment ou non, ils s'attendent à retrouver lors de leur exploration du Web, la même forme d'expression et le même environnement visuel. Le langage Html et ses développements annexes possèdent maintenant tous les outils pour mettre en place son propre mode d'expression, créatif et dynamique.

En conclusion

Bien au-delà d'un exercice de style, ces deux points de vue ne sont pourtant pas inconciliables. La mise en page sera dictée par la densité du contenu et surtout par le public visé. N'oubliez cependant jamais que cette mise en page doit être au service de la transmission de l'information et rester claire, nette et efficace. Et si on se posait la question de savoir à quoi ressemblera la mise en page d'un site Web d'ici 5 ou 10 ans...

4.4. Frames ou tableaux

Les frames [cadres] permettent de diviser l'écran en 2 ou plusieurs fenêtres et d'afficher dans chacune de celle-ci des documents Html distincts. Ce système offre une alternative puissante pour la conception visuelle et l'organisation de la navigation d'une publication Web.

Les frames, introduits sous Netscape 3, n'était alors (1996) pas reconnus par les autres navigateurs et donc d'un emploi limité pour peu que l'on souhaitait que le site soit visible par le plus grand nombre. Adoptés par Microsoft à partir d'Internet Explorer 3 et ses déclinaisons suivantes ainsi que par d'autres navigateurs récents, on peut affirmer qu'à l'aube de l'an 2000, il n'existe quasiment plus de raisons de compatibilité à l'utilisation des frames dans un site. En outre la migration vers une résolution d'écran plus grande (800x600 au lieu de 640x480) arrange visuellement bien les choses. Pourtant les frames gardent leur part de détracteurs qui préfèrent garder les présentations sous forme de tableaux.

AVANTAGES FRAMES

Simplicité du code.

Menu toujours présent à l'écran.

Riches possibilités en Javascript.

Code moins visible pour les débutants.

Bien que les frames ne soient pas implantés directement dans certains éditeurs Html, leur écriture est simple. Cette simplicité du code se paie par une grande rigueur au niveau des attributs des balises. Les frames restent, pour les concepteurs débutants, un des meilleurs moyens pour "s’emmêler les pinceaux".

Avec la division de l'écran en fenêtres, la tentation est grande d'en réserver une pour y mettre le menu (complet) des points abordés dans le site et offrir ainsi un outil de navigation qui sera toujours présent sous les yeux de l'internaute. Ce genre de frame spécialement apprécié pour les sites dont le contenu est appelé à se développer fréquemment car il suffira alors de modifier le seul fichier qui apparaît dans cette frame.

Pour les concepteurs experts, les frames et surtout les frames invisibles, présentent de multiples possibilités

- pour passer des valeurs d'une page à l'autre (en Javascript).

- pour masquer des données jugées confidentielles (compteurs, statistiques).

- pour précharger des images dans le cache.

- etc.

Bien que l’astuce ne fera pas long feu, l’accès au code des pages incluses dans les frames est un peu moins aisé pour les internautes débutants.

INCONVENIENTS FRAMES

Référencement délicat sur certains moteurs de recherche (Hotbot).

Barre de défilement pas très esthétique.

Manipulations plus difficiles pour les débutants.

Non compatible avec certains (rares) navigateurs texte.

Le référencement auprès de certains moteurs de recherche, spécialement ceux qui scannent le texte de la page, se révèle une opération périlleuse voire impossible car la page initiale de frames ne comporte que quelques lignes de code Html. On ne se lancera dans une page d'accueil avec des frames qu'avec une connaissance pointue des balises "Meta" et des trucs et astuces de référencement.

La barre de défilement introduites par défaut, et par ailleurs bien pratique, est souvent d'une esthétique douteuse dans l'ensemble visuel de votre page. Bien entendu, il est possible de la faire disparaître [border=0 frameborder=no framespacing=0] mais si cela fonctionne visuellement très bien sous une résolution d'écran déterminée (exemple 800x600), il est quasi certain qu'une partie de votre menu, par exemple, sera inaccessible et donc impossible à consulter, sous une résolution inférieure (640x480).

L'impression et l'enregistrement de la page sont rendus plus délicats voire impossibles pour les internautes débutants.

Quelques rares navigateurs ne reconnaissent pas encore les frames mais avec Netscape, Internet Explorer et Opéra qui reconnaissent les frames, on doit quand même couvrir 95% des navigateurs utilisés sur le Web.

AVANTAGES TABLEAUX

Présentation excellente.

Compatible avec tous navigateurs.

Véritable BABA du langage Html, les tableaux sont bien repris par les différents éditeurs du marché. Et c’est tant mieux car ils sont très utiles pour la mise en page, pour "dessiner" une page Web au millimètre près. J’ai l’habitude de dire "En publication Html, tout est tableaux". Que ce soit pour créer un alignement, une composition de page ou un menu de navigation, les tableaux offrent toujours une présentation impeccable et compatible avec (vraiment) tous les navigateurs.

INCONVENIENTS TABLEAUX

Code entier à répéter pour chaque page à créer.

Lourdeur du code à télécharger avec certains navigateurs.

Encore quelques différences entre Netscape et Internet Explorer.

Construire un menu de navigation qui se retrouve sur chacune des pages d'un site peut se révéler fastidieux car il faudra répéter pour chaque page le code entier. Heureusement qu'il y a le copier/coller. Plus embêtant cependant, c'est lorsque le site connaît de fréquentes mises à jour ou ajoutes. Il vous faudra alors modifier ce menu de navigation dans toutes les pages du site alors qu'avec un menu de navigation dans une frame, il suffit d'ajouter quelques lignes dans le fichier en question.

Le navigateur compose les tableaux de la page à partir des balises du langage Html. Si votre page comporte un grand tableau avec de nombreuses lignes et colonnes, si ce tableau initial comporte de nombreux autres tableaux imbriqués, l'opération de composition de la page peut prendre un certain temps et allonger le temps de chargement. On évitera donc les très grands tableaux bien compliqués.

La solution consiste à diviser ces grands tableaux en plusieurs tableaux plus petits.

Il subsiste encore quelques différences d’interprétation des balises des tableaux entre les navigateurs Netscape et Internet Explorer. Mais c’est une (triste) habitude.

4.5. Typographie

Il faut bien admettre qu’en publication Web, ce n’est pas évident de composer avec les polices de caractères... Et c’est peut-être finalement très bien ainsi !

En langage Html, on peut utiliser n’importe quelle police de caractère mais à la condition que celle-ci soit installée sur l’ordinateur de votre visiteur. Ainsi, si vous écrivez tout votre site avec la police Amelia et si cette police n’est pas installée sur le poste de votre visiteur, celui-ci verra votre site dans la police par défaut de son navigateur soit généralement en Times New Roman.

La solution la plus utilisée à ce jour consiste à mettre certains mots comme les titres dans une police différente et de les capturer sous forme d’image. Mais ce n’est pas la solution miracle spécialement en ce qui concerne le référencement par les moteurs de recherche et pour le temps de chargement.

Une solution consiste à employer les polices par défaut du système d’exploitation, polices que tout utilisateur est sensé avoir sur sa machine. Mais on ne peut pas dire qu’elles apportent grand chose de plus que les classique Times New Roman ou Arial.

Polices par défaut pour Windows 95 et Macintosh

source : Web Style Guide http://info.med.yale.edu/caim/manual/

Dans ce chapitre consacré aux polices, il me semble intéressant de relever que le rendu des polices est différent selon le système d’exploitation. En effet, avec les navigateurs sous Windows, les caractères (d’une même police) apparaissent un peu plus grand que sous Macintosh. Quand je vous disais qu’en langage Html, on n’a jamais le contrôle absolu du document !

Taille de certaines polices sous Windows et Macintosh

source : Web Style Guide http://info.med.yale.edu/caim/manual/

La véritable solution pour que votre site dispose de polices un peu originales existe mais est à ce jour [fin 1999] encore d’un emploi rare et réservé aux sites Hi-Tech. Cette solution s’appelle PFR (Portable Font Resource) ou encore Dynamic Fonts. La police que vous souhaitez utiliser pour votre page ou votre site est d’abord traitée par un programme spécifique pour en faire un fichier téléchargeable, compact, qui prendra l’extension pfr. Lors du chargement de la page par votre visiteur, ce fichier est appelé tout comme un fichier d’image gif ou jpeg. C’est la solution d’avenir mais encore au stade expérimental. Elle est pour l’instant freinée par leur implémentation différente sous Netscape et Internet Explorer [comme par hasard...] et le fait que les programmes pour créer ces fichiers pfr sont des programmes propriétaires et donc payants (ex : HexWeb Typograph de HexMac Software Systems). Mais on sort un peu du cadre de cette partie consacrée à l’architecture d’un site Web.

Finalement, la seule solution réaliste et compatible consiste à utiliser les polices par défaut. En outre, le langage Html ne vous propose que 7 tailles de police. On ne peut pas dire que les possibilités soient pléthoriques. Cette limitation (qui rappelle bien l’essence textuelle du Web) s’adapte finalement bien à un contenu de qualité et une mise en page sobre. Les nuances ou les effets de la communication sont à chercher ailleurs.

Architecture d'un site Web

www.ccim.be/ccim328/archi/index.htm

© copyright 1999

Vanlancker.Luc@ccim.be

Un mot d'encouragement ou un compliment fait toujours plaisir.

Critiques et suggestions seront aussi examinées avec attention.


À quoi servent les balises META ? - Alsacreations

Question éternelle des forums de discussion sur la conception web et le référencement: les balises META, ça sert à quelque chose? C’est pris en compte par les moteurs de recherche? Est-ce que ça permet d’allonger les péniches?

Les balises META c’est utile quand c’est utile; et quand c’est pas utile… eh bien c’est inutile. Vous l’aurez compris: ça dépend. Mais pour ne pas vous laisser avec cette simple vérité — et jolie tautologie —, nous vous proposons un petit point sur les balises META. On y parlera de tapage de tête contre les murs, du meilleur moyen pour conserver sa santé, et de subtilités qui vont bien.

Sommaire

  1. C’est quoi une balise META?
  2. Anatomie d’une balise META
  3. Est-ce que c’est vraiment utile?
  4. Les incontournables
  5. Informations de classement
  6. Les équivalents d’en-têtes HTTP (http-equiv)
  7. Les indications données aux robots d’indexation
  8. Balises META liées à un outil précis, et cas particuliers
  9. Références

C’est quoi une balise META?

Les balises META servent à placer des métadonnées (metadata) dans une page HTML. On placera ces informations dans l’élément head, et elles ne seront pas affichées sur la page.

À qui sont destinées ces informations? Eh bien, à tous les outils susceptibles de les exploiter. Et notamment:

  • aux navigateurs web
  • aux moteurs de recherche;
  • plus largement, à tous les outils d’indexation, c’est-à-dire tous les outils qui analysent vos pages pour y identifier diverses informations.

Anatomie d’une balise META

Lorsque l’on parle de «balises META», on parle en réalité de l’élément meta en HTML (voir ce que dit la spécification HTML 4.01 pour cet élément et la spécification HTML5). Si on tient à parler de balises, on devrait plutôt parler de «balise <meta>».

Lorsqu’on parle d’une balise META, on pense en général à un élément meta qui utiliserait des attributs et valeurs précises. On parle par exemple de «META Description» pour la balise suivante:

<meta name="description" content="Une description de la page..." />

Voici un deuxième exemple avec une META Content-Type et une META Keywords:

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="keywords" content="péniche, écluses, paquebot, crise, décroissance" />

Vous l’aurez peut-être remarqué, le nom que l’on place juste après le mot «META» correspond au mot-clé utilisé dans un attribut précis: suivant les cas, il s’agit de l’attribut name ou de l’attribut http-equiv. On trouvera toujours dans la balise un deuxième attribut, l’attribut content, qui contiendra la valeur associée au mot-clé.

Une balise META est donc une paire mot-clé–valeur, transcrite en HTML de la manière suivante:

<meta name|http-equiv="Mot-clé" content="Valeur" />

(Attention: la notation ci-dessus indique qu’il faut utiliser soit l’attribut name, soit l’attribut http-equiv, mais pas de manière arbitraire. Chaque «balise META» utilisera l’un ou l’autre attribut.)

La grande question: est-ce que c’est vraiment utile?

On peut lire ici ou là que les balises META sont «obsolètes». Juste à côté, dans un forum consacré au référencement, on pourra lire des messages qui conseillent de «renseigner les balises META». Et si on a le malheur de demander si c’est vraiment utile, on aura droit à des réponses laconiques du genre: «Ça ne sert pas à grand chose, mais autant le faire.» La réponse la plus juste que l’on vous fera peut-être est la suivante: «ça dépend».

En effet, les balises META sont un mécanisme qui permet d’associer des métadonnées à un document (une page web). Dans l’absolu, ce mécanisme est utile. La vraie question, c’est celle de l’utilité de chaque balise META.

Nous disions que les métadonnées insérées grâce aux balises META sont destinées à divers outils capables de les exploiter. Cela a deux conséquences:

  1. Si aucun outil n’utilise une information précise, alors donner cette information est inutile.
  2. S’il existe des outils qui exploitent une information précise mais que cette exploitation ne nous intéresse pas, ou que l’information n’est pas pertinente pour le site sur lequel on travaille, on passera également son chemin.

(Le premier point peut éventuellement être discuté, et certains préconisent le principe de précaution: «on ne sait jamais, ça pourrait être exploité à l’avenir par tel ou tel type d’outil». Pourquoi pas, mais attention à ne pas perdre trop de temps sur du «on ne sait jamais» alors qu’il y aurait énormément de problèmes avérés sur lesquels travailler.)

Ce qui est certain, c’est que dans l’ensemble les balises META ont peu d’importance pour le référencement. N’en faites donc pas une obsession ou une maladie! ;) Voilà pour le principe. Mais puisque c’est du cas par cas, qu’en est-il des cas particuliers? Nous vous proposons de passer en revue les balises META courantes, en indiquant à chaque fois leur utilité.

Les incontournables

Élément title (utile et obligatoire, mais pas une balise META)

De nombreux sites parlent de «META Title» pour désigner cet élément, bien qu’il ne s’agisse absolument pas d’une balise META. Il s’agit d’un élément HTML différent de meta, qui s’écrit généralement ainsi:

<title>Titre de la page</title>

Le contenu de cet élément n’apparait pas directement dans la page, mais est utilisé de diverses manières:

  • par le navigateur web, dans le titre de la fenêtre, les onglets, comme titre des marque-pages (favoris), etc.;
  • par les moteurs de recherche et divers outils, comme titre d’un résultat de recherche par exemple.

Cet élément est par ailleurs obligatoire en HTML.

Enfin, notez que son importance pour le référencement des pages est primordiale. Un élément title bien rédigé devrait, dans l’idéal:

  • être lisible pour un lecteur humain,
  • être informatif ou attrayant pour un lecteur humain,
  • refléter le contenu de la page,
  • contenir des mots-clé pertinents,
  • faire moins de 70 caractères (pas une règle absolue, mais Google par exemple coupe les titres trop longs entre 65 et 70 caractères dans les pages de résultat, et les titres trop longs diluent le poids des différents mots-clé).

Le sujet est vaste mais nous en resterons ici. Revenons à nos balises META…

META Content-Type (très utile)

Si vous n’en utilisez qu’une, ce sera sans doute celle-là. Elle se présente ainsi...

En HTML 4 et XHTML 1.x :
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Il s’agit d’un équivalent, placé dans le code HTML, de l’en-tête HTTP Content-Type, qui permet d’indiquer le type de document et son encodage.

Utiliser cette balise META n’est pas indispensable. En effet, les informations qu’elle donne devraient logiquement être envoyées par le serveur web, au moment où il envoie la page HTML au navigateur. Mais redoubler cette information dans la page HTML elle-même permet d’avoir une information sur l’encodage des caractères utilisé (UTF-8 ou ISO-8859-1 ou d’autres encore), ce qui s’avèrera très utile dans les cas suivants:

  • Le serveur web, mal configuré, n’envoie pas les informations sur l’encodage. Le navigateur web va alors tenter de les trouver dans le code HTML de la page.
  • Dans tous les cas où la page HTML est un fichier local, ouvert directement par l’utilisateur et pas consulté depuis un serveur web. Par exemple pour la documentation en HTML fournie avec un logiciel, pour une page d’information sur un CD ou DVD, lorsque l’utilisateur enregistre une page web dans ses documents, etc.

Nous reviendrons sur les différentes META utilisant l’attribut http-equiv un peu plus loin.

E​n HTML 5 :
<meta charset="utf-8">

Comme vous pouvez le constater, elle a été considérablement simplifiée avec la venue de HTML5. Il est recommandé de la placer au tout début de la section <head>, surtout avant <title>, car ce dernier peut déjà être concerné par l'encodage des caractères.

META Description (utile)

Cette META permet de fournir une description courte (deux à trois phrases courtes) de la page web. Cette description est notamment utilisée (dans certains cas) par les principaux moteurs de recherche, pour fournir le court texte d’aperçu des pages de résultats, ou bien par les réseaux sociaux (Facebook, Google+) pour définir le paragraphe de texte associé au lien partagé.

Pour rappel, voici un exemple de balise META Description:

<meta name="description" content="Tout sur les apparitions muettes de
la Banane Masquée dans le cinéma colombien des années 20 et 30." />

On conseille généralement de ne pas utiliser la même description pour les différentes pages d’un site. Dans l’idéal, chaque page aura sa propre description habilement composée. Voici quelques conseils pour la rédaction de cette description:

  • elle doit être unique, et pas dupliquée sur d’autres pages du site;
  • elle doit refléter fidèlement le contenu de la page;
  • elle doit être attractive pour l’utilisateur dont le regard «scanne» une page de résultats de moteur de recherche;
  • elle doit reprendre les principaux mots-clé de la page et être plutôt brève (on recommande de ne pas dépasser 200 caractères, bien qu’il ne s’agisse pas d’une règle stricte).

On ne dispose pas toujours d’un contenu spécifique pour la META Description de chaque page. Dans ce cas, trois stratégies possibles:

  1. ne pas utiliser la balise META Description du tout;
  2. utiliser une META Description seulement pour certaines pages clé, ou uniquement pour la page d’accueil;
  3. extraire un contenu des contenus disponibles en base de données, par exemple le texte d’accroche pour une page d’article ou le début de la description du produit pour une page produit.

Notez qu’une page ne sera pas «pénalisée» par un moteur de recherche parce qu’elle n’utilise pas de META Description. Mais si vous n’en utilisez pas, faites attention à ne pas utiliser la balise du tout, et évitez les balises sans contenu:

<meta name="description" content="" /> <!-- À éviter -->

Dernière chose: fournir une META Description ne garantit pas qu’elle sera effectivement utilisée par les moteurs de recherche dans leurs pages de résultats!

Informations de classement

META Keywords (obsolète)

Utilisée par les premiers moteurs de recherche, cette balise META permettait d’indiquer un certain nombre de mots-clé à associer à la page. Petit problème: cette possibilité d’associer des mots-clé à une page sans afficher ce contenu dans la page permet de «spammer» les moteurs en utilisant des mots-clé qui ne reflètent pas le contenu de la page. C’est pourquoi la plupart des moteurs de recherche:

  • soit ne l’ont jamais prise en compte;
  • soit ont arrêté de la prendre en compte;
  • soit la prennent toujours en compte mais lui donnent un poids très faible.

Il est difficile de dire ce que fait chaque moteur car ils communiquent peu ou pas du tout sur leurs choix en la matière. Fin 2007, cependant, Google annonçait déjà ne pas l’utiliser. Pour ce qui est du format, on utilisera une seule balise META Keywords par page, avec pour contenu une série de termes (avec un ou plusieurs mots) séparés par des virgules:

<meta name="keywords" content="tartiflette, saucisson, maroilles, …" />

Si vous souhaitez l’utiliser malgré sa probable inutilité, voici quelques conseils que l’on retrouve souvent:

  • ne pas utiliser «trop» de mots-clé (le critère est nécessairement vague…);
  • ne pas utiliser de mots-clé sans rapport avec la page, voire ne pas utiliser de mot-clé que l’on ne retrouverait pas dans le contenu de la page.

Attention également: si vous avez consciencieusement étudié votre stratégie de positionnement et défini un corpus de mots-clé, il n’est pas forcément très intelligent de les lister dans vos pages, en les exposant ainsi aux regards de vos concurrents.

META Generator (utile dans certains cas)

Certains éditeurs de code et logiciels de gestion de contenu (CMS) placent automatiquement une META Generator dans vos pages. Elle peut ressembler à ceci:

<meta name="generator" content="Nom de l’outil (version)" />

Cela permet aux éditeurs du logiciel de faire des statistiques: combien de pages sont construites avec leur outil? combien de sites utilisent leur CMS? les sites qui utilisent leur CMS sont-ils rapidement passés à la dernière version majeure? etc.

En tant qu’éditeur ou créateur de site, cette information ne vous sert à rien. Mais si vous utilisez un CMS libre fourni gracieusement par des bénévoles, ça ne vous coûtera pas grand chose de garder cette ligne de code dans vos pages HTML et ça leur fournira quelques informations utiles.

META Author, META Copyright (utilité faible)

Ces balises permettent de fournir le nom de l’auteur d’une page et une information sur les droits d’auteurs (auteur, année, mention de licence ou mention de type «tous droits réservés»). Utile surtout si vous voulez rappeler aux curieux qui lisent le code source des pages que le site a un auteur (personne ou organisation), et que tout n’est pas permis.

Pas exploité par les principaux moteurs de recherche. Peut-être exploité par certains outils très spécifiques. On se passera de ces informations finalement peu utiles si on souhaite garder un code HTML plus compact.

<meta name="author" content="Mary Poppins" />
<meta name="copyright" content="© Supercalifragilisticexpialidocious Inc." />

On trouve également, citées dans certains articles, des META Designer, META Publisher, etc. Il est peu probable que ces informations soient exploitées par le moindre outil. Et ces informations ont plus leur place sur des pages «À propos» et «Mentions légales» de vos sites. Bien entendu, dans beaucoup de cas on pourrait faire la même remarque pour les META Author et Copyright.

Les META Dublin Core (utilité faible)

Cette série de balises META reprend les types de métadonnées proposées par la Dublin Core Initiative. Elles sont décrites dans l’article Expressing Dublin Core in HTML/XHTML meta and link elements.

En français on pourra lire l’article publié sur Openweb: Métadonnées et Dublin Core. Voici un exemple de code issu de cet article:

<meta name="DC.Title" lang="fr" content="Un document en HTML" />
<meta name="DC.Date.created" scheme="W3CDTF" content="2003-04-03" />
<meta name="DC.Date.modified" scheme="W3CDTF" content="2003-04-27" />

Aux dernières nouvelles, les moteurs de recherche majeurs ignorent les métadonnées Dublin Core. Elles n’ont donc pas d’application concrète pour le référencement, mais peuvent servir de base standardisée à utiliser (en HTML, XML ou autre format) pour associer des métadonnées à des documents, selon les besoins. Elles trouvent des applications dans les domaines de l’archivage et de la gestion documentaire.

Les équivalents d’en-têtes HTTP (http-equiv)

Les en-têtes HTTP (HTTP headers) font partie d’un des standards fondamentaux du Web: l’HyperText Transfer Protocol. Ce sont des métadonnées ou indications qu’un serveur web envoie à chaque fois qu’il envoie un fichier (page web, feuille de styles, image, etc.) à un navigateur web.

Voici à quoi peuvent ressembler les en-têtes HTTP envoyées avec un fichier HTML:

Date: Wed, 30 Feb 2009 16:50:59 GMT
Server: Apache
Last-Modified: Mon, 11 Jan 2009 12:28:37 GMT
Etag: "6407f-459e-f44f3740"
Accept-Ranges: bytes
Cache-Control: max-age=600
Expires: Wed, 30 Feb 2009 17:00:59 GMT
Vary: Accept-Encoding
Content-Encoding: gzip
Content-Length: 4516
Content-Type: text/html; charset=UTF-8
Content-Language: fr-CA

200 OK

Cela fait pas mal d’informations. Vous reconnaissez peut-être la dernière: 200 OK (tout va bien). Si le fichier n’avait pas été disponible, le serveur aurait pu renvoyer un 404 Not Found par exemple. Vous pouvez retrouver toutes ces informations dans les consoles de développement (équivalentes à Firebug), souvent dans l'onglet Réseau ou Network.

Parmi les autres informations, on retrouve l’en-tête Content-Type qui informe le navigateur sur le type de fichier (ici text/html, mais pour d’autres fichiers on pourrait avoir text/plain, text/css, image/png, etc.); et qui donne également une information sur l’encodage des caractères. Attention: ces informations sont prioritaires sur la META Content-Type, qui devrait normalement les reprendre à l’identique lorsqu’elle est utilisée. On retrouve aussi l’en-tête Content-Language, qui précise la langue principale du document; dans l’exemple ci-dessus, il indique que le public visé lit le français du Canada (québécois).

Si on voulait reprendre à l’identique quelques-uns de ces en-têtes HTTP, on pourrait par exemple écrire:

<meta http-equiv="Content-Language" content="fr-CA" />
<meta http-equiv="Cache-Control" content="max-age=600" />
<meta http-equiv="Expires" content="Wed, 30 Feb 2009 17:00:59 GMT" />

Faut-il utiliser les META http-equiv?

En dehors de l’information sur l’encodage de caractères donnée par l’en-tête HTTP Content-Type, il n’est pas utile de dupliquer les informations de vos en-têtes HTTP en utilisant la balise META équivalente.

Il ne s’agit cependant pas d’une règle stricte, et il peut y avoir des exceptions.

Enfin, même s’il est préférable de s’assurer que les bonnes informations sont présentes dans les en-têtes HTTP, dans certains cas il sera peut-être nécessaire d’utiliser les balises META à la place des en-têtes HTTP, par exemple si vous n’avez pas accès à la configuration du serveur et que vous souhaitez tout de même envoyer certaines informations aux navigateurs web.

Rappel: évitez les META Refresh!

Trop de sites encore utilisent une balise META Refresh pour forcer un rechargement de la page par le navigateur. Suivant les cas, il s’agit de faire ainsi une redirection de page au bout d’un laps de temps, ou bien de forcer le rafraichissement de page pour renouveler les publicités affichées.

Lorsque le rafraichissement n’est pas logique, attendu par l’utilisateur, il est ressenti comme une perturbation: le site ou le navigateur agissent sans son aval. Lorsque vous êtes en train de lire un article sur un site d’actualité et que vous perdez le fil de votre lecture à cause d’un rafraichissement, c’est pénible. Si en plus vous utilisez un lecteur d’écran, ça devient très problématique car récupérer le fil de votre lecture devient sensiblement plus compliqué.

Les différentes normes et méthodes d’application pour l’accessibilité des sites web proscrivent l’usage des META Refresh.

Les indications données aux robots d’indexation

Vous pouvez utiliser les balises META pour donner des indications aux robots d’indexation des moteurs de recherche (indications qu’ils seront libres de suivre ou pas, mais les principales sont bien appliquées). On utilisera pour cela la META Robots:

<meta name="robots" content="commande1, commande2, commande3" />

Les commandes sont des mots prédéfinis, séparés par des virgules. On peut aussi utiliser plusieurs balises META à la suite pour les différentes commandes:

<meta name="robots" content="commande1" />
<meta name="robots" content="commande2" />
<meta name="robots" content="commande3" />

Demander aux robots d’indexer vos pages

Inutile de demander aux robots d’indexation d’indexer vos pages: c’est leur comportement par défaut! Ainsi les deux lignes suivantes, en plus d’être équivalentes, sont tout à fait inutiles:

<meta name="robots" content="index, follow, archive" />
<meta name="robots" content="all" />

Elles illustrent toutefois le principe de fonctionnement de cette balise META: on utilise une balise META, et on y liste un certain nombre d’options prédéfinies, séparées par des virgules.

Restreindre l’indexation et les données affichées en page de résultat

Voici un ensemble de commandes pour restreindre l’indexation:

  • noindex: pas d’indexation de la page;
  • nofollow: ne pas transmettre le potentiel de positionnement de la page;
  • noarchive: ne pas afficher de lien «En cache» dans les pages de résultat;
  • none: raccourci pour noindex, nofollow, noarchive.

À cela se rajoutent quelques directives, souvent propres à un moteur donné, telles que:

  • noodp: ne pas utiliser les descriptions de l’Open Directory Project dans les pages de résultat (MSN, Google, Yahoo!);
  • noydir: ne pas reprendre les descriptions de l’annuaire Yahoo! dans les pages de résultat (Yahoo!).
  • nosnippet: ne pas utiliser de description ou d’extrait dans les pages de résultats, donc utiliser le titre de page (et dans certains cas les sitelinks) uniquement (Google, Yahoo!);

Il est aussi possible d’adresser les différentes directives à un moteur de recherche donné, plutôt qu’à tous les moteurs de recherche. Pour cela, on remplace le mot-clé robots par le nom du robot d’indexation du moteur visé. Par exemple:

<meta name="Googlebot" content="directives pour Google Search" />
<meta name="Slurp" content="directives pour Yahoo! Search" />
<meta name="MSNbot" content="directives pour Live Search" />

Alternatives à la META Robots

Pour adresser des directives aux moteurs de recherche, il existe deux autres solutions: le fichier robots.txt et l’en-tête HTTP X-Robots-Tag.

Le fichier robots.txt permet d’«interdire» l’accès à certaines pages ou certains dossiers aux robots d’indexation qui en respectent les directives (c’est le cas des moteurs de recherche majeurs). Il se place à la racine du domaine ou sous-domaine. Les fonctionnalités disponibles sont plus limitées qu’avec une balise META Robots, mais les directives d’un robots.txt ont l’avantage de s’appliquer de manière globale à un sous-domaine complet. Utiliser ce fichier est bien souvent suffisant pour gérer l’indexation ou la non-indexation des différentes pages d’un site.

L’en-tête HTTP X-Robots-Tag a été proposé par Google en 2006, et Yahoo! a annoncé son support en 2007. Il permet d’appliquer les mêmes directives que la balise META Robots.

Pour en savoir plus, consulter les références données à la fin de cet article.

Balises META liées à un outil précis, et cas particuliers

Il n’existe pas de liste exhaustive des balises META car tout un chacun est libre de créer un couple clé–valeur, pour peu qu’il en ait l’usage.

Ainsi, certains outils vous proposent de placer des balises META très spécifiques dans vos pages pour répondre à leurs besoins. C’est la documentation de chaque outil, ou les instructions qu’il vous donne, qui vous apprendront à quoi sert la balise en question.

META verify-v1 (usage particulier)

Voici un exemple courant, que vous verrez peut-être sur certains sites (ou plutôt dans leur code source):

<meta name="verify-v1" content="chaine aléatoire" />

Cette balise META est utilisée par Google pour ses outils Google Webmaster Tools. Elle permet de vérifier qu’un utilisateur est bien le propriétaire d’un site.

META Revisit ou Revisit-After (inutile, mythe du Web)

La META Revisit, inventée par un petit moteur de recherche régional désormais tombé dans l’oubli (searchBC, canadien), n’a jamais été utilisée par d’autres outils. Malgré son inutilité flagrante, de nombreux webmasters s’évertuent à l’utiliser, pensant à tort que les moteurs de recherche l’utilisent dans une certaine mesure. En cherchant "meta revisit-after" sur le Web, vous pourrez lire nombre d’articles qui perpétuent le mythe de cette balise META.

Faut-il vraiment donner un exemple de code? Peut-être, oui, juste pour vous aider à reconnaitre les avatars du mythe lorsque vous le rencontrerez sur d’autres sites.

La forme la plus connue et la plus reprise utilise le mot-clé «Revisit-After», mais on trouve aussi simplement «Revisit»:

<meta name="revisit-after" content="14 days" />
<meta name="revisit" content="7 days" />

Pour préciser (de manière purement indicative) la fréquence de mise à jour de vos contenus, vous pouvez utiliser une Sitemap XML.

META MS Smart Tags (inutile)

La technologie «Smart Tags» a été intégrée par Microsoft dans une version beta d’Internet Explorer. Le principe était que Microsoft pouvait vendre à des annonceurs un mot-clé ou une expression (comme le font de nombreuses régies publicitaires, dont celles de Google et Microsoft), et lorsqu’un utilisateur visitait une page web contenant cette expression, l’expression devenait un lien spécial vers le site de l’annonceur.

Cette très mauvaise idée, largement critiquée, a été abandonnée et n’a jamais fait partie d’une version finale d’Internet Explorer. Microsoft ne propose plus ce service. Malgré cela, on trouve encore de nombreux sites (même récents) avec la balise META censée désactiver ce comportement:

<meta name="MSSmartTagsPreventParsing" content="true" />

À oublier.

Références

  • Élément meta dans la spécification HTML 4.01
  • Comment optimiser ses meta tags? (indeXweb.info)
  • Answering more popular picks: meta tags and web search (Google Webmaster Central Blog)
  • Documentation en français pour les Sitemaps XML
  • Site sur l’usage des fichiers robots.txt
  • X-Robots-Tag : directive pour bloquer les robots dans l’entête HTTP : explications (WebRankInfo)

Quiz

Testez vos connaissances avec un Quiz HTML

Encore un problème de padding ! (Starsky)
T'es nul, c'est padding de toi ça ! (Hutch)

  • plan du site
  • contact
  • boutique
  • formations
  • agence web
  • Retourner en haut de page

Alsacréations est une communauté dédiée à la conception de sites et applications web de qualité, grâce aux standards W3C, aux feuilles de styles CSS, aux langages HTML et JavaScript, et à l'accessibilité. Réalisé par l'agence web Alsacreations.fr · Hébergement Syazen · À propos et mentions légales · Données personnelles

https://www.alsacreations.com/


HTML5 - Les métadonnées (Metatags) - Trucsweb.com

HTML

Le HEADER

HTML5 - Les métadonnées (Metatags)

La carte qui décrit le territoire, l’information qui décrit le contenu aux moteurs de recherches. balises, métadonnée, metatags, head, facebook, twitter, HTML5, SVG, robots d’exploration
Django (Oznog) Blais 3 août 2000

Carte inversée du monde par Fra Mauro en 1459
Carte inversée du monde par Fra Mauro en 1459 (Auteur : Fra Mauro en 1459)
  • · Niveau : DÉBUTANT
  • · Compatibilité : Tous les navigateurs

Les métadonnées s’accorde parfaitement avec l’aphorisme d’Alfred Korzybski « Une carte, ce n’est pas le territoire » (A map is not the territory). Les métadonnées, c’est la carte! Le territoire, l’information. Et pourtant on commence à peine à les utiliser. Il n’est pas rare de tomber encore en 2014 sur une page sans métadonnées, à peine un titre. Il est vrais que Google les ignores depuis 15 ans!

Google n’a jamais été un grand amateur de balises et de métadonnées. Il s’en fou un peu, il crée ça propre carte et captures des bouts de pages! Si ça lui tente, il peut se fier tout simplement au résultat du répertoire DMOZ! Aujourd’hui on déclare à Google des zones d’en-tête, on précise au scalpel près où se trouve le nom de l’auteur etc... Le tout saisie gracieusement et bénévolement par le Webmestre (signe des limites de la machine). C’est d’ailleurs pourquoi je me suis toujours demandé pourquoi Google n’utilisait pas les métadonnées. Simple! Google ne fait pas confiance à personne, surtout pas à un webmestre! C’est aussi ça le progrès! Enfin Googlebot, le moteur de Google, semble lui respecter la balise universelle « robot » mais a tout de même créé ça propre balise pour indiquer essentiellement la même chose « Googlebot »! D’ailleurs Google précise qu’il ne considère pas la balise « keywords ».

Mise-à-jour 2016 : news_keywords et l’infatué Google!

Google, encore Google, lui qui ne respecte pas les standards et réinvente le Web pour ne pas dire la roue à sa guise. Ajoutez à cela l’ère des médias sociaux et l’arrivée de Open Graph et on patauge dans le marasque! Par chance Google utilise le schéma des microdonnéesmais on est rendu avec une dizaine de balises « description »! Et là je viens de tomber sur le comble du ridicule! Google qui refuse de supporté la balise « keyword » depuis ses débuts, sous prétexte d’abus, sort maintenant la balise news_keywords ! Après avoir lu un peu sur son nouveau projet « AMP » comme si le web abruti attendait après son sauveur (Google), la déception est de mise avec Google! À peu près tout ce qui sort de nouveau à ce chapitre est une copie conforme de ce qui existe déjà. Google détruit le travail des bâtisseurs du Web! En plus tout plante chez Google depuis quelques temps, ...une réorganisation! Et que dire du moteur bloqué à tout bout de champ, parce que Google confond ses utilisateurs avec des moteurs! Ajouter y ça capacité de vous pister et on se retrouve en 2016 avec un Google (qui n’a pas créé le Web) qui dégrade petit à petit le Web. Keep it simple Google!

<meta name="news_keywords" content="Pour les caprices de Google!" />

Les métadonnées ne servent pas seulement aux moteurs de recherche. Si Google capture la page entière, un navigateur ouvre l’en-tête (head) avant le contenu (body). Par exemple, l’ensemble des données de l’en-tête sont accessible avant le chargement du contenu. Il offre déjà une information lisible, à partir du code source. Mais c’est avant tout des initiatives, des recommandations et des standards pour cartographier l’information dans une sémantique universelle. Parce qu’il est toujours possible de créer des métadonnées maison, en fait c’est eXtensible. En CSS3 on peut même créer des balises HTML5! Mais le standard lui est non seulement « informatif », il est portable et prévisible! Personnellement je les utilises davantage en XML, que je récupère volontiers dans mon HTML.

Parlant d’initiatives, les « Metatags Dublin core » sont quant à eux utilisés depuis 15 ans. Visiblement pas par les Wordpress et compagnies qui réinvente la roue, voir plus bas! On se ramasse aujourd’hui avec des centaines de balise d’en-tête. Cette liste et un petit exemple, classée davantage par rôle que par typer de balises des plus pratiques. Mais il en existes des centaines plus ou moins spécialisées pour toutes sorte d’application. Voir cette liste plutôt exhaustive des « MetaExtensions Wiki » qui sert de modèle au validateur de la W3C.

Quelques règles :
  1. Toujours commencer par le « DOCTYPE » si les navigateurs les ont toujours ignoré, le « DOCTYPE » permet aujourd’hui au navigateur de distinguer le type d’interprétation, XHTML ou HTML5 par exemple. Pour un document de type XHTML lire le tutoriel « votre première page XHTML 1.0 »
  2. Spécifier la langue à la racine du document, soit dans la balise HTML. Il n’est plus nécessaire d’indiquer au navigateur le « content-language ».
  3. Les balises d’en-tête doivent être entre les balises <head> et </head>
  4. Suivit par le type d’encodage, et je m’adresse aux francophones, UTF-8 systématique! Notez qu’un débat fait rage dans le monde anglophone, a savoir si on continu d’utiliser le « charset » ou on ne revient pas à la vielle et horrible façon de faire... Avec un beau gros « Byte order mark » amicalement appelé le BOM!
  5. L’ordre importe peu ensuite, il faut toute fois absolument, enfin idéalement y placer l’ensemble de ses feuilles de styles CSS.
  6. Google recommande d’y placer son code Analytic. Je vous rappelle que vous pouvez accélérer l’affichage de la page, qui attendra que l’en-tête soit chargé au complet avant de s’afficher! Et d’ailleurs je ne veut pas savoir si Google à capturer la visite, je veux savoir si l’internaute à réussis à ouvrir la page au complet!
  7. Tout comme le javascript, tout en bas de la page. De toute façon il doit interagir avec le « DOM » qui n’est pas disponible tant et aussi longtemps que la page entière n’est pas chargée et affichée.
  8. Enfin, Google nous met en garde cotre la « contre façon de mots clés »! S’il y a quelques chose d’emmerdant sur le web, c’est bien d’avoir maille à partir avec Google! La netiquette c’est sérieux!
  9. Derniers conseil, il existe des centaines de balise d’en-tête. Très subjectif, certaines on fait parures plus qu’autre chose pendant des années, par exemple « revisit-after ». à quoi sert elle si les moteurs l’ignore! Et quand on parle de HTML5, on sort des limite de la recommandation. Si le XHTML était l’ONU,m le HTML5 est l’OTAN ;-)
Métadonnées de base HTML5

Beaucoup plus simple et moins strict que le XHTML, le HTML 5 a tout de même trois balises d’en-tête obligatoire :

<!DOCTYPE html>
<html lang="fr-CA">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>Titre de la page</title>
<meta name=" description " content="Description" />
<!-- La balise keywords n’est pas supporté par Google -->
<meta name=" keywords " content="tutoriel" />
<!-- Utilisez plutôt la création de Google -->
<meta name=" news_keywords " content="tutoriel" />
<link title="Galerie" rel=" canonical " type="text/html" href="/galerie/?id=10670" />
<meta name=" viewport " content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name=" mobile-web-app-capable " content="yes" />
<meta name=" googlebot " content="indexing" />
<meta name=" author " content="Auteur" />
<meta name=" designer " content="Designer" />
<meta name=" generator " content="" />
<meta name=" rating " content="" />
<meta name=" application-name " content="Nom de la page ou de l’application" />
<meta name=" contact " content="+1-555-555-5555 abc@xyz.com ’[adresse]’" />
<meta name=" mobile-agent " content="format=html5; url=mobile.htm" />
<meta name=" web_author " content="Oznog" />
<meta name=" designer " content="MetaExtensions" />
<meta name=" collection " content="MetaExtensions" />
<meta name=" generator " content="Neural 4.3" />
<meta name=" version " content="4.3" />
</head>

HTML4.01 transitional

Déclaration « DOCTYPE » et du « charset » en HTML4.01

<!-- HTML4 ->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

XHTML1.0 transitional

Déclaration « DOCTYPE » et du « charset » en XHTML1.0

<!-- XHTML1 ->
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-ca" lang="fr-ca">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

La balise « X-UA-Compatible » n’est pas valide HTML5 et le validateur de la W3C retourne une erreur mais elle permet aux vieux Internet Explorer d’être plus compatible. Notez que la balise « keywords », bien que tout à fait valide, n’est pas prise en compte par Google.

Mobile

La balise application-name permet à ma grande surprise d’être affichée, avec le pictogramme du site, dans la page de départ (starup) de plusieurs mobiles. theme-color , la couleur de la barre d’adresse. Etc.

<meta name=" application-name " content="Nom de la page ou de l’application" />
<meta name=" theme-color " content="#ffffff" />

<link rel=" apple-touch-icon "/>
<meta name=" HandheldFriendly "/>
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-touch-fullscreen" content="yes" />
<link rel="apple-touch-startup-image" href="startup.png" />
<!-- Convertir les numéros de téléphone en liens pour mobiles -->
<meta name=" format-detection "/>
<!-- Évitement de la convertir les numéros de téléphone en liens pour mobiles -->
<meta name=" format-detection " content=" telephone=no " />
<meta name=" mobile-agent " content="format=html5; url=http://3g.sina.com.cn/">

Utiliser « viewport » pour contrôler le zoom sur un mobile. Il contient une liste séparée par des virgules de propriétés sous la forme nom = valeur :

<meta name="viewport" content="width=device-width, initial-scale=1">

width
width=device-width ou un nombre entre 200 et 10000 pixels (par défaut width=980)
height
height=device-height ou un nombre entre 223 et 10000 pixels
minimum-scale
Un réel entre 0.0 et 10.0 (par défaut minimum-scale=0.25)
maximum-scale
Un réel entre 0.0 et 10.0 (par défaut maximum-scale=1.6)
initial-scale
Un réel entre « minimum-scale » et « maximum-scale »
user-scalable
« yes » (defaut) pour permettre à l’utilisateur de zoomer avant et arrière sur la page Web. Ou « no » pour empêcher l’utilisateur de zommer.

Exemple:
<meta name="viewport" content="width=device-width; height=device-height; maximum-scale=1.4; initial-scale=1.0; user-scalable=yes"/>

Navigation

<link title="Home" rel="alternate" type="text/html" href="/"/>
<link title="Catalogue" rel=" index " type="text/html" href="/galerie/" />
<link title="Catalogue" rel=" canonical " type="text/html" href="/galerie/?id=10670" />
<link title="Catalogue" rel=" prev " href="/galerie/?id=10669" />
<link title="Catalogue" rel=" next " href="/galerie/?id=10671" />
<!-- Force un rafraichissement de la page -->
<meta http-equiv="refresh" content="30"/>

Référent (referrer)

Empêcher le site suivant de connaitre et de référencer votre URL.

<meta name="referrer" content="no-referrer" />
<meta name="referrer" content="unsafe-url" />
<meta name="referrer" content="origin" />
<meta name="referrer" content="no-referrer-when-downgrade" />
<meta name="referrer" content="origin-when-cross-origin" />
Dans un hyperlien :
<a href="#" rel="noreferrer">Lien sans référent</a>
Pictogrammes (icon)

Associé à des ressources .ico, .png et même SVG. Les choses ont bien changé depuis l’austère « L’icône de votre site dans les favoris de IE5». La plupart des balises suivantes sont même optionnelles. Il suffit de déposer les images dans le répertoire « racine » du site. En respectant les dimensions et une nomenclature spécifique, par exemple le préfixe apple-touch-icon et apple-touch-icon-precomposed qui permet d’indiquer au système de ne pas appliquer le filtre (ombrage, arrondie...).

<!-- Microsoft -->
<meta name="msapplication-TileColor" content="#6c3716" />
<meta name="msapplication-TileImage" content="/mstile-310x310.png" />
<meta name="msapplication-TileImage" content="/mstile-310x150.png" />
<meta name="msapplication-TileImage" content="/mstile-150x150.png" />
<meta name="msapplication-TileImage" content="/mstile-144x144.png" />
<meta name="msapplication-TileImage" content="/mstile-70x70.png" />
<meta name="theme-color" content="#ffffff" />
// Microsoft utilise aussi le fichier browserconfig.xml
<!-- Apple / Android -->

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="/apple-touch-icon-180x180-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/apple-touch-icon-152x152-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="/apple-touch-icon-120x120-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="/apple-touch-icon-76x76-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="/apple-touch-icon-60x60-precomposed.png" />
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
// ...
<!-- Android -->
<!-- * Android ne suporte plus apple-touch-icon -->
<link rel="icon" type="image/png" href="/android-icon-192x192.png" sizes="192x192" /><!-- Recommendé -->
<link rel="icon" type="image/png" sizes="192x192" href="/nice-highres.png" /><!-- Recommendé -->
<link rel="icon" type="image/png" sizes="128x128" href="/niceicon.png" />
<!-- Icons du navigateur -->
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<link rel="Shortcut Icon"  type="image/png" href="/favicon.png" />
// et plus...

On a ici des pictos pour Microsoft, d’autre pour Apple et Androïd et enfin les .ico pour le navigateur. Plus difficile à créer et à convertir, le format .ico se replace aujourd’hui sans problème avec un simple PNG, et même transparent! Mais enfin des balises utilisées par les internautes. Faut dire que l’effet est vraiment cool sur une tablette!

Dublin Core (2010)

Les métadonnées Dublin Coreon considérablement évolué ces dernières années. Personnellement je suis très déçu de la perte de la balise « collection » que j’utilisais partout, discontinuée! Pendant que Wordpress introduit son « Article.tag ». Vive la sémantique! La dernière recommandation remplace essentiellement des balise dc. dorénavant invalide par dcterms..

<meta name=" dcterms.subject " content="Webmesterie">
<meta name=" dcterms.rights " content="Copyright 1997-2014 Trucsweb">
<meta name=" dcterms.collection " content="MetaExtensions" />
<meta name=" dcterms.contributor " content="MetaExtensions" />
<meta name=" dcterms.coverage " content="MetaExtensions" />
<meta name=" dcterms.creator " content="MetaExtensions" />
<meta name=" dcterms.publisher " content="Conception Oznogco Multimédia (http://oznogco.com)">
<meta name=" dcterms.language " content="fr-CA">
<meta name=" dcterms.created " content="2010-12-30T11:52:00-05:00">
<meta name=" dcterms.modified " content="2014-11-20T13:02:23-05:00">
<meta name=" dcterms.identifier " content="http://www.trucsweb.com/tutoriels/webmestre/a_la_une">
<meta name=" dcterms.source " content="http://www.trucsweb.com/tutoriels/webmestre/a_la_une/default.rdf">
<meta name=" dcterms.isPartOf " content="/tutoriels/Webmestre/">
<meta name=" dc.creator " content="..." />
<meta name=" dc.publisher " content="..."/>
<meta name=" dc.type " content="Homepage"/>
<meta name=" dc.modified " content="2014-11-22 21:18:46"/>
<meta name=" dc.date.issued " content="2014-11-22 21:18:46" />
<meta name=" dc.language " content="fc-CA" />

Géographique

<meta name=" geo.position " content="40.006;-60.347">
<meta name=" geo.region " content="CA-QC">
<meta name=" geo.placenam e" content="Québec">
<meta name=" geo.country " content="Canada">

Alternatives

Texte de remplacement, traduction, le balise de type « alternate » offre un contenu alternatif.

<link title="Métadonnées" rel="alternate" type="application/rdf+xml" href="/sitemap.xml" />
<link title="Traduction" rel="alternate" type="text/html" href="/en/" hreflang="en" lang="en" />
<link title="Recherche" rel="
      search
      " type="application/opensearchdescription+xml" href="/recherche.xml">
<link title="Métadonnées externes" rel="
      meta
      " type="application/rdf+xml" href="/index.rdf">
<link title="Syndication (RDF 1.0)" rel="alternate" type="application/rdf+xml" href="/documents/syndication/rss.rdf">
<link title="Syndication (RSS 2.0)" rel="alternate" type="application/rss+xml" href="/documents/syndication/rss.xml">
<link title="Syndication (Atom 1.0)" rel="alternate" type="application/atom+xml" href="/documents/syndication/atom.xml">
<link title="Image pour Facebook" rel="image_src" type="image/png" href="http://www.trucsweb.com/documents/images/logos/l_tw-tr.png">

Autrefois négligées, les métadonnées sont non seulement utilisées en masse aujourd’hui mais on peut trouver plusieurs fois la même information. Les « initiatives » de Dublin Core permettait déjà tout ça depuis un bon 15 ans mais fallait que le Web 2 le réinvente. Alors en double, en triple :

Balises pour Facebook

Facebook utilise les balises du protocole OGP ( Open Graph protocol). (Il faut toutefois un ID d’usager ou d’application Facebook pour fonctionner).

<meta property=" fb:app_id " content="6666666666666"/>
<meta property=" og:title " content="Titre de la page"/>
<meta property=" og:url " content="http://www.trucsweb.com/tutoriels/html/"/>
<meta property=" og:image " content="http://www.trucsweb.com/documents/images/logos/l_tw-tr.png"/>
<meta property=" og:site_name " content="Oznog"/>
<meta property=" og:type " content="HTML"/>
<meta property=" og:locale " content="fr_CA"/>
<meta property=" og:updated_time " content="2013-08-14T15:28:57+00:00" />
<meta property=" og:description " content="Courte description"/>

Wordpress

<meta property=" article:tag " content="HTML5" />
<meta property=" article:published_time " content="2013-01-08T12:20:26+00:00" />
<meta property=" article:modified_time " content="2013-08-14T15:28:57+00:00" />
<meta property=" article:section " content="/image/" />
<meta property=" article:tag " content="image" />
<meta property=" article:tag " content="xmp" />
<meta property=" article:tag " content="Exifs" />
<meta name=" article:subsection " content="" />
<meta name=" article:author " content="Oznog" />

Et Twitter

<meta name=" twitter:card " content="[summary_large_image|summary_image|app]"/>
<meta name=" twitter:site " content="@trucsweb"/>
<meta name=" twitter:domain " content="Trucsweb.com"/>
<meta name=" twitter:title " content="Trucsweb.com"/>
<meta name=" twitter:creator " content="@Oznog"/>
<meta name=" twitter:image " content="Url de l’image"/>
<meta name=" twitter:image:alt " content="Texte de l’image"/>
<meta name=" twitter:description " content="...">
<meta name=" twitter:app:country " content="CA">
<meta name=" twitter:app:name:iphone " content="Trucsweb">
<meta name=" twitter:app:id:iphone " content="555555555">
<meta name=" twitter:app:url:iphone " content="Trucsweb://...">
<meta name=" twitter:app:name:ipad " content="Trucsweb">
<meta name=" twitter:app:id:ipad " content="929750075">
<meta name=" twitter:app:url:ipad " content="Trucsweb://...">
<meta name=" twitter:app:name:googleplay " content="Trucsweb">
<meta name=" twitter:app:id:googleplay " content="...">
<meta name=" twitter:app:url:googleplay " content="...">

Microsoft

<meta http-equiv="imagetoolbar" content="no"/>
<meta http-equiv="MSThemeCompatible" content="true" />
<meta name="MSSmartTagsPreventParsing" content="true"/>
<meta name="msapplication-TileImage" content="/documents/images/logos/l_tw-tr.png">
<meta name="msapplication-TileColor" content="#5d625c">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

Googlebot

Le nom de la balise est en fait le nom du robots d’exploration ou plutôt son « user-agents ». Le premier exemple bien connu utilise noodp pour indiquer à Google de ne pas utiliser une description de remplacement tirée des sites ODP ou DMOZ. La dernière balise (google-site-verification) est simplement un exemple de code de vérification Google. Elle n’a aucun autre rôle.

<meta name="googlebot" content="noodp">
<meta name="googlebot-news" content="noindex" />
<meta name="googlebot-image" content="noindex" />
<meta name="googlebot-video" content="noindex" />
<meta name="googlebot-mobile" content="noindex" />
<meta name="mediapartners-google" content="noindex" /> (AdSense)
<meta name="google-site-verification" content="eV51KzKfuiY5fx8...lzv2mqjtyZAsiEA" />

Instruction | Signification
all | Il n’existe pas de restrictions pour l’indexation ou l’affichage. Remarque : Cette instruction est la valeur par défaut, et il est inutile de l’indiquer explicitement.
noindex | Ne pas afficher cette page dans les résultats de recherche et ne pas afficher de lien "En cache" dans les résultats de recherche.
nofollow | Ne pas suivre les liens de cette page.
none | Équivaut à noindex, nofollow.
noarchive | Ne pas afficher de lien "En cache" dans les résultats de recherche.
nosnippet | Ne pas afficher d’extrait de cette page dans les résultats de recherche.
noodp | Ne pas utiliser les métadonnées de l’ Open Directory project pour les titres ou les extraits de cette page.
notranslate | Ne pas proposer la traduction de cette page dans les résultats de recherche.
noimageindex | Ne pas indexer les images de cette page.
unavailable_after: [RFC-850 date/time] | Ne pas afficher cette page dans les résultats de recherche après la date et l’heure indiquées. La date et l’heure doivent être spécifiées au format RFC 850.
Bing

<meta name=" msnbot " content="index,follow" />

Les autres moteurs de recherche

<meta name="dmoz.id" content="World/Français/Régional/Amérique/Canada/Québec/Régions/Bas-Saint-Laurent/Rivière-du-Loup" />
<meta name="robots" content="index,follow"/>
<meta name="expires" content="never"/>
<meta http-equiv="last-modified" content="2014-11-20T13:02:23-05:00">
<meta http-equiv="Expires" content="Day, dd Mon yyyy hh:mm:ss GMT"/>
<meta http-equiv="Cache-Control" content="no-cache"/>
<meta http-equiv="Cache-Control" content="max-age=120"/>

Microdata ( microformats.org)

Les microdonnées sont généralement imbriquées directement dans le code avec par exemple l’attribut itemprop . C’est d’ailleurs son essence même, par rapport aux métadonnées. Par contre il existe plusieurs exemples où cela ne convient pas, notamment lorsque les données ne sont pas directement liées au contenu. Et donc ont utilisé des métadonnées (dénaturées) et ironiquement directement dans le code (pas fort!)! D’ailleurs certain navigateur déplace automatiquement la balise dans l’entête (header).

<meta itemprop="genre" content="Webmasterie"/>
<meta itemprop="inLanguage" content="fr-FR"/>
...
// Exemple de HTML5 Doctor : Extending HTML5 - Microdata
<p itemscope><span itemprop="name" itemscope itemref="meta-likes">
  Jessica Spengler<meta id="meta-likes" itemprop="likes" content="Mameshiba">
  </span>’s fans are always really raucous.</p>
Équivalent

On utilise les requêtes équivalentes (pragma directive) pour simuler une réponse d’en-tête HTTP. Une redirection par exemple.

<meta http-equiv="Refresh" content="20; URL=page4.html">
<meta http-equiv="last-modified" content="2014-11-20T13:02:23-05:00">
<meta http-equiv="Expires" content="Day, dd Mon yyyy hh:mm:ss GMT"/>
<meta http-equiv="Cache-Control" content="no-cache"/>
<meta http-equiv="Cache-Control" content="max-age=120"/>
<meta http-equiv="default-style" content="css.css" />

Vos balises

« Authors must not use elements, attributes, or attribute values that are not permitted by this specification ». La création de balises n’est pas compatible avec la recommandation HTML5. Mais à part un message d’erreur du validateur de la W3C, il n’y a aucune limite en principe. On peut même proposer son propre jeu de balises sur WHATWG wiki.

// Il suffit de la déclarer en CSS maBalise { display:block; } // Ou encore en l’ajoutant au DOM, pour les plus vieux navigateurs <script> document.createElement("maBalise"); </script>

Graphique vectoriel adaptable (SVG)

Les images SVG, 100% autonome, vient avec son jeu de <metadata> , on pourrait même l’ouvrir directement dans le navigateur avec le type MIME « image/svg+xml ».

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 512 512"> <metadata id="metadonnees"> <rdf:RDF> <cc:Work rdf:about=""> <dc:format>image/svg+xml</dc:format> <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> <cc:license rdf:resource="http://creativecommons.org/licenses/by-nc-nd/2.5/" /> <dc:title>Trucsweb.com</dc:title> <dc:date>15 décembre 2013</dc:date> <dc:creator> <cc:Agent> <dc:title>Oznog</dc:title> </cc:Agent> </dc:creator> <dc:description>Logo des Trucsweb.com</dc:description> <dc:contributor> <cc:Agent> <dc:title>Généré par Neural 4.3.</dc:title> </cc:Agent> </dc:contributor> <dc:subject> <rdf:Bag> <rdf:li>SVG</rdf:li> <rdf:li>Image</rdf:li> <rdf:li>Animation</rdf:li> </rdf:Bag> </dc:subject> </cc:Work> <cc:License rdf:about="http://creativecommons.org/licenses/by-nc-nd/2.5/"> </cc:License> </rdf:RDF> </metadata> [...] </svg>

À éviter

Balises qui ne sont plus supportées en HTML5

<meta name="
      verify
      " content="">
<meta name="
      classification
      " content="">
<meta name="
      copyright
      " content="">
<meta name="
      formatter
      " content="">
<meta name="distribution" content="Global"/>
<!-- La liste des Dublin Core -->
<meta name="DC.Creator.Corporatename" content="..." />
<!-- La balise Collection n’est même plus supporté par Dublin Core -->
<meta name="DC.Collection" content="..." />
<meta name="DC.Coverage" content="..." />
<meta name="DC.Date.Created" content="2010-11-05T22:05:31" />
<meta name="DC.Date.Modified" content="2010-11-05T22:05:35" />
<meta name="DC.Identifier" content="..." />
<meta name="DC.Rights" content="..."/>
<meta name="DC.Language" content="fr-ca" scheme="ISO639"/>

Références
  • HTML5 - 4.2.5 The meta element
  • The Open Graph protocol
  • Dublin Core® Metadata Initiative (DCMI)
  • WHATWG wiki - MetaExtensions
  • Apple Icon and Image Sizes
  • Everything you always wanted to know about touch icons
  • Moteurs de recherches : Sécurité et vie privée par Django Blais
  • Favicon Generator. For real
Django (Oznog) Blais
Dernière mise à jour : 2018-02-28

Commentaires

  • Merci beaucoup pour ton article :) . Une question qui me trotte sur les meta name, débutante que je suis : quand tu dis «il est toujours possible de créer des métadonnées maison, en fait c'est eXtensible », est-ce que le W3C ou WhatWG le dit quelque part, Ã§a ? J'ai essayé de chercher des infos sur ce point dans la doc du W3C mais je ne l'ai pas trouvé très claire. Du coup je comprends deux discours qui me paraissent contradictoires sur les meta name : - d'un côté que leur contenu est libre, non fixé par la DTD, que tout un chacun peut créer une paire de mot-clé-valeur, - de l'autre que seules les meta standards spécifiés par W3C et celles listées (et acceptées) dans le wiki WhatWG sont valides/autorisées. Je m'y perds, d'autant qu'en testant toute sorte de meta name improvisées sur le validateur W3C en xHTML 1.0 et HTML 5 (du type meta name="pifpouf" content="turlututu"), tout passe au vert (c'est validé..) - mais pourtant si elles ne sont pas standards ou 'autorisées', ça ne devrait pas...non ? Je m'y perds. Merci pour tes lumières !
    sapristi

    Date (GMT) : 2015-12-16 15:07:20 (UTC +0000)
    • Salut, Ça reste des informations destinées à d'autre machine qui ne sont pas nécessairement le Web. À vrai dire c'est effectivement pour se prendre la tête à deux mains. Il y a deux raisons : 1. Outre « robots » Google n'ont jamais utilisé les balises méta. Il ne fait pas confiance aux webmestres en définissant lui-même la page. Et note qu'il s'est créé ses propres balises, par exemple « google-site-verification ». Bon c'est la planète Google, ça ne prouve rien... 2. Il n'y a plus de standard ou de norme iso à proprement parler depuis que la WATGWG a sorti le HTML5. C'est dommage mais ce n'est pas la fin du monde. Les balises méta sont principalement destinées aux moteurs de recherches. Alors il suffit de demander à Google! https://support.google.com/webmasters/answer/79812?hl=fr Comme on peut voir c'est assez limité! Il y a les balises officielles utilisées par le navigateur, comme le rafraîchissement, le titre... Et il y a tous les services qui utilisent les balises métas, comme Facebook ou Twitter. Et à part Facebook, qui a eu la décence d’utiliser le l'Open Graph (http:/ogp.me/), la plupart réinventent la roue que Dublin Core (http:/dublincore.org/) avait fait rouler au siècle dernier! Les balises IE, par exemple <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/> Et que dire de celle là?? <meta content='https://xri.net/=!9B72.7DD1.50A9.5CCD?_xrd_r=application/xrds%2Bxml;sep=false' http-equiv='X-XRDS-Location'/> Ou des inutiles « openid.server » qu'on retrouve souvent. Certainement destiné à un gestionnaire de contenu... <link href='https://www.myopenid.com/server' rel='openid.server'/> Et la balises geo... ça prouve qu'on peut créer ses balises pour usages personnels. La plupart des gestionnaires de contenu créent leurs propres balises méta d'ailleurs. La seule différence c'est que le validateur de la W3C ne les reconnaitraient pas et affichera une erreur! La W3C propose d'ailleurs un forum pour soumettre ses propres balises à l'évaluation. Notez que j'ai tenté l’expérience sans succès. Les Trucsweb n'étant pas le MIT je suppose! C'est effectivement frustrant! Je ne retrouve malheureusement plus cette page. D'ailleurs les nouvelles balises Twitter du « card » pour indiquer ces images (!) n'était pas supportée par le validateur de la W3C la dernière fois que je l'ai testé... C'est aussi un secteur très dynamique, il suffit de jeter un œil pour découvrir de nouvelles balises. Aujourd'hui je tombe sur la meta <meta name="referrer" content="always"> (!). C'est pour cette raison que cette page existe. Recenser les balises méta, et je n'ai qu'une liste partielle. Et d'ailleurs elle n'est pas à jour, l'ère du mobile change rapidement et les pictogramme et favicon par exemple n'ont plus à être spécifié via les métadonnées J'espère que ça répond à ta question. Date (GMT) : 2015-12-16 15:36:46 (UTC +0000)

  • Merci pour ta longue réponse très fournie ! J'ai de quoi faire ^^ Ma question concernait les standards, c'est là que je me cassais les dents. Du coup c'est quand même bizarre, parce que chez moi justement les meta (name, pas http-equiv, ni les link) que tu indiques passent au validateur depuis 3 jours que j'essaie : balises geo, twitter, autre farfelues de mon invention....bien que mes meta name imaginaires ne soient pas 'standards' en HTML 5 (j'ai vu que geo, twitter, les og de fb sont enregistrées dans le wiki WhatWg, et comme le validateur W3C se cale dessus, cela me semble logique que ça passe maintenant au validateur, sauf erreur de ma part). Donc quand tu dis "Il n'y a plus de standard ou de norme iso à proprement parler depuis que la WATGWG a sorti le HTML5", j'imagine que la réponse se trouve ici, bien que ce point reste un peu confus pour moi. Dans la mesure où HTML 5 est le successeur de HTML 4, qui lui permettait de placer n'importe quel type d'information dans une meta name, la réponse est aussi peut-être ici. D'autant que finalement, W3C dit dans sa recommandation (HTML5) "Extensions to the predefined set of metadata names may be registered in the WHATWG Wiki MetaExtensions page. [WHATWGWIKI]" : may n'est pas must, donc euh..bon bref je m'embrouille encore un peu mais ta réponse m'aide quand même.
    sapristi

    Date (GMT) : 2015-12-18 13:59:40 (UTC +0000)


 Balise META ~ Optimiser ses Balises HTML de Métadonnées

Balises META

Métadonnées HTML

Annonces

Qu'est ce qu'une Balise META ?

La présentation et l'attractivité d'un site Internet ne sont rien s'il n'est pas « visible » par le plus grand nombre.

Vous avez choisi le meilleur hébergement mutualisé pour votre site web, en faisant l'impasse ou non sur un serveur dédié ? Vous avez choisi votre CMS et vous avez votre thème Wordpress tout prêt avec la palette de couleur de vos rêves ?! Place maintenant à l'optimisation du code source de votre site web et plus particulièrement des balises META.

► Les balises META sont des balises HTML qui se trouvent dans l'entête des fichiers HTML, entre les balises <HEAD> et </HEAD>.

Les balises META offrent la possibilité d'optimiser des pages WEB avec des informations essentielles pour la classification et l'identification du site, à l'inverse des balises HTML classiques (p, span, strong...) qui elles servent à structurer le site visuellement (Voir dossier sur les balises HTML5 pour le plugin Notepad++ WebEdit)

Ces informations sont invisibles pour le visiteur mais bien utiles pour le référencement et l'optimisation du site.

A quoi servent les balises META ?

Ces balises permettent aux navigateurs et aux moteurs de recherche de mieux identifier un site web, facilitant sa classification et son référencement. On les utilise généralement pour donner un titre aux pages du site, pour décrire le contenu qui y est présenté, pour notifier l'outil qui a permis de générer les pages ou pour indiquer l'encodage de caractères utilisé.

Une balise META permet également de donner des renseignements sur les visiteurs (moteur de recherche, navigateur et éventuellement système d'exploitation) ainsi que la langue utilisé sur la page (français, anglais...).

Enfin, elles peuvent être utilisées pour effectuer une redirection vers une autre page ou vers un autre site (technique peu recommandée), interdire la mise en cache de la page ou tout simplement pour éviter que les moteurs de recherche ne crawlent et n'indexent la page (technique utilisée notamment par les particuliers qui hébergent leurs sites sur un serveur personnel peu puissant).

Description des Balises Meta et utilité pour un site web

Les balises META possèdent plusieurs attributs tels que property, name, content ou charset. Ces attributs permettent d'identifier ces balises et ont un rôle particulier tant pour la description du site que pour son indexation ou ses fonctionnalités.

Parmi les différents types de balise, nous pouvons classer les balises par rapport à leur utilité : les balises indispensables, les balises facultatives et les balises obsolètes.

A celà il nous faudra rajouter les nouvelles balises Open-Graph qui sont indispensables pour optimiser le partage de vos contenus sur les réseaux sociaux.

Mais si certains plugins Wordpress vous permettent de plus ou moins automatiser tout cela, nous vous conseillons de bien lire ce qui suit pour devenir un vrai expert en matière de balisage !

Les balises META indispensables

Les balises dites indispensables pour l'optimisation et le référencement sont les suivantes :

  • Balise Title
  • Balise Description
  • Balise Canonical
  • Balise Langage
  • Balise Content-Type
  • Balise Charset
  • Balise Robots

Balise META Title

<title>TITRE DE MA PAGE</title> balise title en HTML

La balise title permet de donner un titre à une page web et permet aux moteurs de recherche de faciliter son indexation. La valeur du titre est reprise dans les résultats du moteur de recherche, dont la justesse facilitera l'optimisation du référencement naturel.

► Cette balise est la plus importantes de toutes pour les moteurs de recherche.

💡 Astuce SEO : Votre titre ne doit pas dépasser 500 pixels soit plus ou moins 62 caractères, et doit correspondre au contenu de la page du site pour éviter à celle-ci d'être considérée comme du spam ou du contenu malveillant.

🔖 Remarque : Cette balise META a la particularité d'avoir une syntaxe différente des autres. C'est à dire qu'ici on « en-capsulera » le contenu du titre entre la balise <Title> et </Title>, alors que les autres balises meta seront du type <meta name="" content="" >.

📌 Outils utiles : Outil pour optimiser sa balise title pour Google

Balise META Description

<meta name="description" content="Description de ma page" /> balise meta description

La balise description est utilisée par les moteurs de recherche pour donner une description à une page d'un site. La balise meta description vient généralement juste après la balise title, et doit contenir une ou plusieurs phrases suffisamment explicites et structurées pour décrire la page du site afin d'augmenter votre CTR.

💡 Astuce SEO : Pour optimiser votre CTR, chaque page de votre site doit avoir une description unique incitant l'utilisateur à cliquer et reprenant les mots clés importants du sujet que vous traitez. Attention cependant à ne pas mentir sur le contenu de votre page si vous ne voulez pas augmenter inexorablement votre taux de rebond (bounce rate) à cause d'utilisateurs mécontents de ne pas trouver le contenu promis. Sachant que le taux de rebond est pris en compte dans l'algorithme de classement de Google, ce n'est pas le moment de se rater si vous ne voulez pas plonger dans les SERP.

Jusqu'à Novembre 2017 votre description ou snippet ne devait pas excéder les 160 caractères, mais aujourd'hui, c'est la valeur de 930 pixels de largeur qui est retenue plutôt que le nombre de caractères.

💡 Astuce Marketing : Gardez en tête que cette description sera affichée en clair dans le résultat des moteurs de recherche. Essayez de faire en sorte d'inciter au clic dans votre description en la rédigeant comme s'il s'agissait d'une Annonce Adwords (mais sans mentir sur le contenu) !

🔦 Dossier : Comment augmenter son trafic et son CTR avec une balise meta description bien optimisée

📌 Outils utiles : Outil pour optimiser sa balise description pour Google

Balise META Canonical

<link rel="canonical" href="http://www.tonsite.fr/page1.html" />

La balise canonical sert à définir une URL canonique pour les moteurs de recherche l'URL. Il s'agit en fait de définir une URL unique pour un ensemble de pages dont le contenu est identique ou similaire.

Elle favorise l'optimisation d'un site en aidant les moteurs de recherche à sélectionner quelles pages indexer et évite les pénalités SEO (référencement naturel) qui déclassent un site en cas de contenu dupliqué.

Dans certains cas, elle favorise l'augmentation de la popularité d'un contenu en regroupant plusieurs backlinks (liens pointant vers une page du site)

🌐 Exemple : Admettons que le même contenu est accessible depuis l'URL http://www.tonsite.fr/page1.html et depuis l'URL http://www.tonsite.fr/page1bis.html ► On indiquera ici par exemple, sur ces deux pages, que l'URL canonique est http://www.tonsite.fr/page1.html afin d'éviter le duplicate content.

💡 Astuce SEO : Pensez à mettre cette balise sur toutes vos pages. Ainsi si quelqu'un venait à copier votre contenu, notamment via le parsage de votre flux RSS, vous indiquez à Google que c'est sur votre page que se situe la version originale.

Balise META Langage

<meta name="Language" CONTENT="fr" />

La balise langage permet d'identifier la ou les langues utilisées sur le site ou sur la page. Pour déterminer une langue, on utilise abréviation «fr» pour français, «de» pour allemand...

💡 Astuce SEO : Si vous êtes débutant, il est conseillé de n'utiliser qu'une seule langue pour des raisons d'optimisation de référencement.

Balise META Content-Type

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

La balise Content-Type est utilisée pour déclarer le type de document qui est réceptionné par le visiteur et parfois l'encodage utilisé. Le type le plus couramment utilisé pour une page en HTML est "text/html".

Cette balise est importante car elle permet d'identifier le contenu et permettra donc au navigateur de s'adapter. Outre "text/html", elle peut également prendre comme valeur "application/json" ou encore "multipart/form-data"

🔖 Remarque : En HTML4, cette balise inclut également le charset. En HTML5 par contre, la balise Charset est une balise différente. Vous trouverez plus d'explications sur ce point ci-dessous.

Balise META Charset

En HTML 4
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
En HTML 5
<meta charset="utf-8" />

La balise charset permet d'identifier le jeu de caractères utilisé sur la page ou le site.

Il est indispensable pour déterminer le bon rendu de la page et éviter les problèmes de transcodage.

Le jeu de caractère le plus couramment utilisé en occident est UTF-8, mais on peut trouver le jeu ISO-8859-1 (défini par défaut, pas d'accent) ou ISO-8859-15

Balise META Robots

<meta name="robots" content="index,follow" />

La balise robots (index, noindex, nofollow, follow ...) permettent d'indiquer aux robots d'indexation des moteurs de recherche comment se comporter.

► Si la balise a pour valeur "index", cela indique aux robots que la page peut être indexée.
► A l'inverse, si la valeur est "noindex", cela informe aux robots que la page ne doit pas être indexée.
► La valeur "nofollow" indique aux moteurs de ne pas suivre les liens sur la page.
► A l'inverse, "follow" va inciter les moteurs à parcourir et suivre l'ensemble des liens présents sur la page HTML contenant cette instruction (sauf si rel="nofollow" est ajouté dans le lien)

🔖 Remarque : Le robot de Google part du principe que votre site est paramétré en "index" et en "follow". Autrement dit, si ce paramétrage vous convient, cette balise meta ne vous servira rien. Concrètement, elle est surtout utilisé pour mettre des pages dupliqués en "noindex" et en "nofollow" pour éviter des pénalités.

Nouveauté 2019 : Google ajoute de nouveaux paramètres à cette balise de sorte à vous permettre de mieux gérer le snippet et ainsi de pouvoir contrôler au mieux l'affichage de votre page dans les SERP.

  • nosnippet : permet d'empêcher l'affichage d'un extrait de votre texte ou d'un aperçu de vidéo dans les SERP.
  • max-snippet:[nombre] : permet de définir la limite de longueur autorisée pour l'extrait de la page au [nombre] de caractères spécifié.
  • max-video-preview:[nombre] : permet de définir la longueur maximum que pourra avoir l'aperçu vidéo associé à votre page au [nombre] exprimé en secondes.
  • max-image-preview:[type] : permet de limiter la dimension des différentes images associées à votre page. La variable [type] pourra avoir les valeurs suivantes : none, standard ou large.

Les balises META facultatives

Les balises dites «facultatives» peuvent favoriser à mieux identifier le contenu d'une page ou d'un site et dans certains cas améliorer sensiblement l'optimisation et le référencement. Les voici :

  • Balises de Pagination
  • Balise Copyright
  • Balise Publisher
  • Balise Google
  • Balise GoogleBot
  • Balise Reply-To
  • Balise Verify V-1
  • Balise Syndication-source
  • Balise Original-source
  • Balise Pragma
  • Balise Cache-Controle
  • Balise Expires

Balises de Pagination

<link rel='prev' href='https://www.balisemeta.com/page-1' /> <link rel='next' href='https://www.balisemeta.com/page-3' />

Les balises link rel prev/next permettent d'indiquer comment est conçu votre site en terme de pagination. Très utilisés sur les blogs ayant des catégorie étalées sur plusieurs pages (Page 1, Page 2, Page [...], Page 8...) ces balises sont incluses d'office dans le core de certains CMS comme Wordpress. Cependant, ce n'est pas une façon optimale de mailler l'arborescence de son site, et il faudra privilégier par exemple un maillage interne sous forme de cocon sémantique pour pouvoir faire ranker vos pages profondes.

🔖 Remarque : Depuis le 21/03/2019 Google a affirmé ne plus prendre en compte les balises link rel=next/prev

Balise META Copyright

<meta name="copyright" content="© BALISEMETA.COM 2019" />

La balise copyright permet d'indiquer que le contenu de la page est protégé ou sous droits réservés. Encore faudrait-il que le «copieur» parcoure votre code source et le cas échéant tienne compte de cette balise...

Facultative, cette balise meta indique à qui appartient la page (auteur, société, organisme...) et si le contenu peut ou non être réutilisé, et sous quelles conditions.

🔖 Remarque : dans le champ "content" vous pouvez préciser les ayant-droits mais aussi toutes vos conditions.

Outils utiles :
- Copyright France pour déposer réellement votre Copyright ©.
- Déposez votre marque à l'INPI sur le site officiel.

Balise META Publisher

<meta name="publisher" content="KAPSULE CORP" />

La balise Publisher, qui est compatible avec la plupart des moteurs de recherche, permet d'indiquer qui est l'éditeur du contenu. Il est possible d'indiquer plusieurs éditeurs dans l'attribut "content" en séparant les noms par une virgule. Elle n'est pas à rapprocher avec la balise meta "Author", dépréciée, et qui permet d'indiquer l'auteur du contenu.

Balise META Googlebot

<meta name="googlebot" content="index,follow,nosnippet" />

La balise meta Googlebot est propre au moteur de recherche Google, qui domine le marché. En plus des fonctions identiques à celles de la balise meta robot, elle permet également entre autre d'indiquer à Google si la page doit être mise en cache ou non.

Ex: Si la valeur est à "noarchive", cela indiquera au moteur d'éviter cette opération...

Plus de fonctions : Découvrez toutes les fonctions possibles pour cette balise avec cette FAQ Google.

Balise META Google

<meta name="google" content="notranslate,nositelinkssearchbox" />

La balise Google permet d'indiquer au moteur du même nom si la page ne doit pas être automatiquement traduite.

Google arrive en effet via son algorithme à identifier automatiquement la langue de chaque page d'un site internet. Le moteur de recherche propose alors au visiteur dont le pays utilise une langue différente (détection via le navigateur ou la localisation du visiteur) de traduire automatiquement la page. Cela peut s'avérer frustrant notamment pour les documents officiels..

► La valeur "notranslate" permet de désactiver cette fonctionnalité

Depuis peu, une nouvelle fonction de Google affiche pour certains sites, directement depuis la page des résultats un moteur de recherche interne. ► Pour le désactiver, saisissez la valeur "nositelinkssearchbox"

Balise META Reply-To

<meta name="reply-to" content="[email protected]" />

La balise Reply-To permet d'identifier l'adresse email de l'éditeur ou du webmaster. Cette balise est généralement mise de côté du fait que des robots utilisés par des spammeurs en profitent pour récupérer votre email afin d'enrichir un annuaire d'emails pour de la publicité non sollicitée.

L'adresse email peut cependant être codée afin de n'être lisible par les être humains.
Exemple : monemail[at]monhebergeur[point]com)

Balise META Verify-v1

<meta name="google-site-verification" content="..." />

La balise Verify-v1 n'est utilisée que par Google et permet de s'assurer que vous êtes bien l'auteur d'un site. Uniquement accessible via Google Webmaster Tools, sa valeur est sensible à la casse.

💡 Astuce SEO : La validation de votre site sur GWT peut se faire par d'autres biais qui laisseront moins de trace et notamment via Google Analytics.

Balise META syndication-source

<meta name="syndication-source" content="http://site.com/original" />

La balise Syndication-source a pour rôle d'indiquer qu'il s'agit d'une syndication de contenus.
► Sa valeur permet d'indiquer aux moteurs de recherche l'URL de l'article original.

📌 Outils utiles : Plus de détails sur les balises de syndication

Balise META original-source

<meta name="original-source" content="http://site.com/source.htm" />

La balise original-source, mise en place par Google, permet d'indiquer aux moteurs de recherche la ou les sources qui ont permis de créer le contenu. Sa valeur permet de pointer vers la ou les URLs des articles sources.

📌 Outils utiles : Plus de détails sur les balises de syndication

Balise META Pragma

<meta http-equiv="pragma" content="no-cache" />

La balise Pragma a pour vocation d'interdire l'enregistrement du contenu ou de la page dans le cache des moteurs de recherche et des navigateurs Web. Pour cela, la valeur associée doit être "no-cache".

Balise META Cache-control

<meta http-equiv="Cache-control" content="public" />

La balise Cache-control a pour objectif d'indiquer comment la page doit être mise en cache par le navigateur et les autres systèmes de mise en cache.

Elle peut avoir plusieurs valeur :
► "public" pour l'autorisation de mise en cache (paramètre par défaut)
► "private" pour bloquer la mise en cache via serveur tout en autorisant la mise en cache via navigateur
► "no-cache" pour bloquer totalement la mise en cache
► "no-store" pour autoriser la mise en cache tout en interdisant l'archivage (stockage longue durée).

En désactivant la mise en cache, le serveur qui héberge le site sera beaucoup plus sollicité et utilisera plus de ressources système (la mise en cache permet d'éviter aux serveurs de génération de contenu de régénérer la page)

Balise META Expires

<meta name="expires" content="2019-12-18" />

La balise Expires indique qu'elle est la date de fin de validité du contenu ou de la page. Une fois expiré, le contenu est alors considéré comme n'étant plus valide.

Cette balise n'est pas souvent utilisée car la plupart des robots des moteurs de recherche aspirent de nouveau des pages indexées il y a plusieurs mois. La date est souvent indiquée au format AAAA-MM-JJ.

Les balises META obsolètes

Enfin, découvrez les balises que plusieurs experts du référencement naturel indiquent comme obsolètes, en tout cas pour les moteurs de recherche les plus utilisés :

  • Balise Keywords
  • Balise Author
  • Balise Refresh
  • Balise Generator
  • Balise Identifier-URL
  • Balise Distribution
  • Balise Revisit-After
  • Balise Category

Balise META Keywords

<meta name="keywords" content="balise, balise meta, webmasters" />

La balise keywords était autrefois très importante pour les moteurs. Elle servait à stocker mots-clés les plus significatifs de la page. Cependant, elle a été peu à peu supplantée par la balise description.

Elle peut cependant être renseignée en indiquant tous les mots clé importants séparés par une virgule. Certains annuaires utilisent encore cette balise pour l'indexation.

🔖 Remarque : Seuls les mots clés trouvés dans le contenu seront indexés.

💡 Astuce SEO : A éviter car vos fournissez à tous vos concurrents les mots clés sur lesquels vous cherchez à vous positionner sur Google, et en contrepartie : rien...

🔦 Dossier : Comment la balise Meta Keywords est devenue obsolète ?

Balise META Author

<meta name="Author" content="Jacques Voltz, Simon Monceau" />

La balise Author permet d'identifier qui est l'auteur ou les auteurs de la page ou du site en question. S'il y a plusieurs auteurs, leur identité doit être séparée par une virgule dans l'attribut "content".

Balise META Refresh

<meta http-equiv="Refresh" content="7;URL=http://balisemeta.com" />

La balise refresh permet de recharger automatiquement une page toutes les n secondes (valeur) ou de provoquer une redirection au bout de n secondes. Cette balise est aujourd'hui dépréciée par le W3C (consortium qui définit les spécifications des pages WEB) et Google tend à pénaliser les sites qui l'utilisent encore.

🔖 Explications : Dans l'exemple ci-dessus "7" est le nombre de secondes après laquelle il faudra recharger la page et "URL=https://www.balisemeta.com" est l'URL de la page que l'on veut re-charger.

💡 Astuce SEO : Si vous voulez faire une redirection, effectuez impérativement une redirection HTTP ou une redirection 301 pour éviter toute pénalité Google.

📌 Outils utiles : Tuto pour mettre en place une redirection 301

Balise META Generator

<meta name="Generator" content="Notepad" />

La balise Generator permet d'identifier quel a été le logiciel ou Système de Gestion de Contenu utilisé pour générer la page (Wordpress, Joomla, Drupal...). Elle n'est pas d'une importance capitale pour l'indexation.

Balise META Identifier-URL

<meta name="Identifier-URL" content="https://www.balisemeta.com" />

La balise Identifier-URL permet d'indiquer l'adresse URL du site global qui contient cette page.

Balise META Distribution

<meta name="Distribution" content="global" />

La balise Distribution permet de qualifier la destination des documents présentés.
Les valeurs possibles sont « global », « local » et « iu » pour tout ce qui est intranet.

Balise META Revisit-After

<meta name="Revisit-After" content="15 days" />

La balise Revisit-After permettait autrefois aux robots de savoir quand est-ce qu'il fallait ré-indexer la page. Cette balise est aujourd'hui ignorée, les robots ayant leur propre algorithme pour savoir quand est-ce qu'il faut revisiter la page.

Balise META Category

<meta name="Category" content="Webmaster, Referencement" />

La balise category permettait aux annuaires d'indexation de catégoriser un site ou une page.
Aujourd'hui elle n'a plus aucun intérêt.

Les nouvelles balises Open Graph

Pour terminer, un nouveau jeu de balises Meta a émergé suite à la démocratisation des réseaux sociaux : le protocole Open Graph.

Les balises Open Graph sont principalement utilisées par les réseaux sociaux tels que Facebook, Twitter ou Google+. Elles permettent selon sa définition de transformer une page Web en un container "riche", au sein d'un réseau social.

balise open graph

Le protocole Open Graph est constitué d'un ensemble de balises qui permet à un webmaster d'indiquer des informations sur ses pages pour les principaux réseaux sociaux. Ces informations faciliteront aux réseaux sociaux l'affichage d'un lien alors placé par un utilisateur d'un de ces réseaux sociaux.

Créé à l'origine par Facebook, le protocole Open Graph est désormais maintenu par l'Open Web Fondation et est devenu de facto un standard.

Les Balises META Open Graph

  • Balise META OG:Title
  • Balise META OG:Type
  • Balise META OG:Url
  • Balise META OG:Image
  • Balise META OG:Description
  • Balise META OG:Video
  • Balise META OG:Locale
  • Balise META OG:SiteName

Outils utiles : Testez comment sera affiché votre article lors d'un partage avec Facebook Debug

Balise META property="og:title"

<meta property="og:title" content="Clic ICI pour découvrir ce TOP 3">

La balise meta property="og:title" est obligatoire.
► Elle permet de définir le titre de votre page dans l'Open Graph.
Remarque : Le titre ne doit pas excéder en général les 65 caractères pour éviter que celui ne soit tronqué.

Balise META property="og:type"

<meta property="og:type" content="website">

La balise meta property="og:type" est obligatoire.
► Elle permet d'indiquer le type de la page (website, vidéo, article...). Ces types sont prédéfinis.

Balise META property="og:url"

<meta property="og:url" content="http://www.tonsite.fr/page1.html">

La balise meta property="og:url" est obligatoire.
► Elle permet d'indiquer l'URL canonique ou de référence de la page.
Indispensable lorsque le site possède plusieurs URLs dynamiques qui pointent sur la même page.

Balise META property="og:image"

<meta property="og:image" content="http://www.tonsite.fr/image1.jpg">

La balise meta property="og:image" est obligatoire.
► Il s'agit ici d'indiquer l'URL de l'image qui représente la page dans l'Open Graph.

Balise META property="og:description"

<meta property="og:description" content="Description de votre page">

La balise meta og:description permet d'ajouter une description courte de la page.
Une ou deux phrases maximum recommandé, ou moins de 300 mots

Balise META property="og:video"

<meta property="og:video" content="http://www.tonsite.fr/video.mpeg">

La balise meta og:video permet d'indiquer l'URL d'une vidéo dans la page

Balise META property="og:locale"

<meta property="og:locale" content="fr_FR">

La balise meta og:locale permet d'indiquer la langue de la page (format de type fr_FR, en_US ou de_DE...)

Balise META property="og:site_name"

<meta property="og:site_name" content="Balise META">

La balise meta og:site_name permet de donner un nom global au site Web utilisant Open Graph


Plan du site : Publication Html

Vu dans ... https://www.lehtml.com/plan/index.htm

Apprendre le langage Html
Un bref préambule
Le Web parle Html
Les premiers outils
Le document minimum
Le texte
Du texte encore...
Les titres et listes
Les liens
Les images
Les séparateurs
Les arrière-plans
Les tableaux
Les cellules des tableaux
Les frames
Le choix d'un éditeur
Des conseils en vrac
Html avancé en bref
Créer votre site Internet
Des éditeurs expliqués
Dreamweaver
FrontPage 2000
Namo WebEditor
Adobe GoLive
WebExpert 2000
-----Microsoft FrontPage Express
-----Netscape Composer
Annexes
-----Références Html en bref
-----Caractères spéciaux
---- Liste des couleurs #
-----Les couleurs par nom
Faq sur le Html
Lien vers SelfHtml

Architecture d'un site Web
Lignes de forces

    Publication papier
    Schéma global
    Objectifs
    Public visé
    Contenu rédactionnel
    Présentation visuelle
    Aspect fonctionnel

Architecture d'un site

    Découpe en pages
    Structure
    Outils de navigation
    Page d'accueil

Règles de l'art

    Quelques règles

En particulier...

    Résolution d'écran
    Zone de sécurité
    Mise en page
    Frames ou tableaux
    Typographie

Apprendre le Javascript
Bref préambule
Javascript, c'est quoi ?
Javascript n'est pas Java !
Un peu de théorie objet...
Outils pour le Javascript

Le script minimum
Afficher du texte
Les variables
Les opérateurs
Les fonctions
Les événements
Les conditions
Les formulaires
Un peu de tout
Les messages d'erreurs
Mini FAQ

L'objet Window
L'objet String
L'objet Math
L'objet Date
L'objet Navigator
L'objet Array
Les frames

Apprendre le VBscript
Bref préambule
Le VBscript
VBscript ou Javascript
VBscript et ActiveX
Les outils pour VBscript
Un peu de théorie objet

Le VBscript minimum
Les boites de message
Afficher du texte
Les variables
Les opérateurs
Les procédures
Les conditions
Les événements
Les contrôles de formulaire
A propos des tableaux
Incorporation des ActiveX
Les messages d'erreurs

Maîtriser le Html
Les formulaires

    L'interactivité : ( cgi/mailto/javascript )
    Définition
    Ligne de texte
    Zone de saisie
    Liste déroulante
    Bouton d'option
    Case à cocher
    Bouton de commande
    Submit et reset
    Un livre d'or

Les feuilles de style

    Concept et utilité
    Définition d'un style
    Styles internes
    Styles externes
    Les classes et les ID
    <SPAN> et <DIV>
    Effets spéciaux
    Positionner avec CSS
    Faq sur les styles
    Liste des propriétés

Le DHTML ou le Html dynamique

    Définition
    Avec Netscape (layer)
    Avec Explorer (css)
    Document Objet Model
    Exemple

Les images mapées ...

    Concept
    Les balises expliquées
    Avec MapThis
    En final

Les balises META et le référencement

    Utilité
    Les indispensables
    Les utiles
    Les éventuelles
    Trucs et astuces
    Tableau comparatif

De la compatibilité ...

    Notre démarche
    Exemples
    Tableau comparatif
    Statistiques
    Compatibilité d'un site
    Conseils

FAQ sur le langage Html
Tableaux
Images
Frames
Formulaires
Divers Html

Scripts DHTML
Effets et animations de texte
Effets et animations d'images
Transitions de pages
Scrollers ou textes défilants
Liens, boutons et formulaires
Infobulles explicatives
Détection du browser et de la résolution
Dates et heures dynamiques
Pour le plaisir des yeux...
Divers

Wap @ Wml - Créer son site Wap
Le protocole Wap
Le langage WML
L'héritage du XML
Réalités et perspectives
Les outils nécessaires
La structure d'un document
Le document Wap type
La carte en Wml
Les balises de texte
Les liens entre les cartes
Les tableaux
Les images
Les événements
Les actions
Les templates
Les zones de saisie
Les listes de sélection
La publication du site

Le langage XHTML
Le XHTML - présentation
Le Html est mort
Le XHTML et le XML
L'héritage du XML
Le Document Type Declaration - DTD
Le document XHTML
Des astuces de compatibilité
La validation du document
Les spécifications du W3C (traduction)

Le langage XML et XSL
XML

Avant de débuter...
Le langage XML
Le XML et le HTML
La syntaxe du XML
Un premier document XML
Le Document Type - DTD
Afficher le XML avec CSS
Afficher le XML avec XSL
Afficher le XML dans le Html
Des éditeurs XML expliqués
La recommandation W3C
Faq en français sur le XML

XSL

Avant de débuter...
Le langage XSL
Un premier document XSL
Un premier exemple XSL
Trier avec le XSL
Filtrer avec le XSL
Choisir avec le XSL
Conditions et le XSL
Javascript et XSL
Un exemple complet


Apprendre le VBscript

Vu dans ... https://www.lehtml.com/index.htm

Apprendre le VBscript

Bref préambule

Après le Html (www.ccim.be/ccim328/html/index.htm) et le Javascript (www.ccim.be/ccim328/js/index.htm), il était logique de s'intéresser à cet autre langage de script qu'est le VBscript. Plutôt qu'un long tutorial, ce chapitre consacré au VBscript est surtout à considérer comme un tour d'horizon des possibilités de Vbscript. Bien que la tentation fut grande, j'ai évité de faire de ce qui suit, un match Javascript contre VBscript ou même Netscape contre Microsoft. D'autres s'en chargent...

1. Le VBscript

VBscript est un langage de script

qui incorporé aux balises Html

permet d'augmenter la présentation

et l'interactivité des pages Web.

· VBscript est donc une extension du code Html des pages Web. Les scripts sont en quelque sorte des ajoutes (ou ajouts) au code Html.

· Ces scripts vont être interprétés et exécutés par le navigateur (donc côté client) sans devoir faire appel aux ressources du serveur.

· VBscript (pour Microsoft Visual Basic Scripting Edition) a été développé par Microsoft qui a repris la logique et la syntaxe de son Visual Basic (d'où le VB). Bien que quelques fonctions lui soient propres, on peut considérer VBscript comme un sous-ensemble de Visual Basic.

· Pour l'instant, les seuls browsers qui reconnaissent le VBscript sont les navigateurs de la firme Microsoft, soit Internet Explorer 3 et Internet Explorer 4.

· VBscript ouvre la porte aux différents produits de Microsoft dédiés au Web et principalement aux ActiveX. Ce qui peut être particulièrement adapté dans le cas d'un réseau Intranet.

· Dans l'inévitable compétition avec cet autre langage de script qu'est Javascript, l'avenir de VBscript dépendra en grande partie des autres navigateurs qui adopteront les routines VBscript. Vous pensez du côté de Netscape ? Moi aussi !

2. VBscript ou Javascript

Pour le moins qu'on puisse dire, VBscript et Javascript sont très semblables quant à leur philosophie et leur mode de fonctionnement. Heureusement quelques différences, et non des moindres, en font deux outils totalement différents.

--- VBscript et Javascript ---
 | Code intégré aux balises Html
 | Code directement interprété par le browser à l'exécution
 | Permet d'accéder aux objets de la page et du browser
 | Confidentialité des scripts nulle car le code source est visible
 | Codes de programmation simples mais pour des applications limitées (sauf appel aux ActiveX pour VBscript)

VBscript | Javascript
Code d'inspiration Visual Basic | Code d'inspiration C et C++
Explorer 3 et 4 seulement ! | Famille Netscape et Explorer
Sans appel aux ActiveX, Vbscript semble moins élaboré que Javascript | Apparaît plus autonome que VBscript

Même sans comprendre (à ce stade de cette introduction) les scripts, il peut être intéressant de comparer deux scripts identiques en VBscript et Javascript.

VBscript

Javascript

<HTML>

<HEAD>

<SCRIPT language="VBscript">

<!--

Sub ok_OnClick

MsgBox "Le bouton est cliqué."

End Sub

-->

</SCRIPT>

</HEAD>

<BODY>

<FORM name="commande">
<INPUT name="ok" type="button"

value="Cliquez ici">

</FORM>

</BODY>

</HTML>

<HTML>

<HEAD>

<SCRIPT language="Javascript">

<!--

function clickbut(){

alert("Le bouton est cliqué.")

}

//-->

</SCRIPT>

</HEAD>

<BODY>

<FORM name="commande">

<INPUT name="ok" type="button"

value="Cliquez ici" onClick="clickbut()">

</FORM>

</BODY>

</HTML>

VBscript et Javascript sont donc assez semblables. Ils diffèrent surtout par le langage dont ils sont dérivés, soit Visual Basic pour le VBscript et le langage C et C++ pour le Javascript.

Pour terminer, je voudrais ajouter qui si VBscript ressemble à du Javascript, il n'est en rien comparable à du Java. Cette confusion entre Javascript et Java est assez classique. En deux mots, Java est un langage du programmation à part entière, il forme un module (applet) distinct de la page Html et son code source est compilé avant son exécution.

3. VBscript et ActiveX

· Comme pour l'utilisateur le résultat final est identique, on serait tenté de dire que ActiveX est à VBscript ce que les applets Java sont à Javascript. Mais ceci est une approche trop simpliste car le concept d'ActiveX est une technologie sensiblement différente.

· "ActiveX est une plate-forme d'intégration ouverte qui fournit aux développeurs, aux utilisateurs et aux réalisateurs de Web le moyen le plus rapide et le plus facile de créer de nouvelles applications et de nouveaux contenus pour Internet et pour les Intranets."

Microsoft présente donc son produit ActiveX comme un outil d'intégration de technologies permettant de créer des pages interactives sur le Web. L'idée de départ à été de profiter de l'expérience de Microsoft en matière de partage entre diverses applications (la technologie des Dll, Ole et autres VBX) pour la transposer sur le Web en recréant un tout un environnement dédié (au départ) à Windows.

· Les contrôles ActiveX peuvent être écrits dans différents langages de programmation comme le C, le C++, Pascal (Delphi), Visual Basic 5 ou Microsoft Visual J++. Ainsi, au contraire d'un langage de script comme VBscript, on évolue ici dans le monde de la programmation ce qui ne rend pas les choses particulièrement simples.

· L'appel à ses composants ActiveX est inséré dans une page Web par une combinaison de Html et de VBscript et spécialement par la balise <OBJECT> ... </OBJET> qui comprend de nombreux attributs. Nous y reviendrons plus loin dans cette introduction à VBscript sur l'incorporation des contrôles ActiveX dans vos pages Html.

· Lorsque Internet Explorer rencontre un appel à un contrôle ActiveX, celui-ci, situé initialement sur un serveur, explore votre machine [je n'aime pas trop ...] pour voir si le contrôle n'est pas déjà présent. Si le contrôle est absent ou d'une version plus ancienne, tous les fichiers nécessaires seront téléchargés et copiés sur votre disque dur [je n'aime pas trop ...]. Et à la différence des applets Java, les composants ActiveX resteront sur le disque dur de l'utilisateur et feront partie intégrante de son environnement Windows [je n'aime pas trop ...].

· Vous aurez deviné que ce fonctionnement peut poser des problèmes de sécurité. Microsoft utilise un système de source "sûre" ou "d'autorité certifiée" (Certificate Authority). Chaque composant est en quelque manière "signé" de manière à garantir son origine. De toute façon, Internet Explorer vous demande si vous acceptez les composants provenant de cette source.

· Dans la pratique, l'utilisateur moyen ou tout simplement prudent d'Internet rechignera à laisser librement installer des composants sur sa machine. En reprenant mot à mot un extrait d'une documentation de Microsoft "Avec Internet, en revanche, les utilisateurs reçoivent généralement votre composant comme un effet de l'exploration et ne feront fonctionner aucun programme d'installation". Tout ceci rejoint notre opinion que le tandem VBscript et ActiveX est, pour l'instant du moins, plutôt une solution pour Intranet que pour Internet.

· Terminons en signalant que si VBscript n'est pas accepté par Netscape, les contrôles ActiveX par contre peuvent être lus par Netscape par l'entremise d'un plug-in fourni par Microsoft.

4. Les outils pour VBscript

Pour apprendre et utiliser le VBscript, il vous faut :

1. un browser qui reconnaît le Vbscript
2. une solide connaissance du Html
3. un simple éditeur de texte

4.1 Un browser compatible VBscript

Le choix est limité aux seuls browsers de la firme Microsoft. Ce sera soit Microsoft Internet Explorer 3, soit Microsoft Internet Explorer 4 et aucun autre !

Pour les accros des versions :

- Microsoft Explorer 3.0 utilise VBscript Version 1.0

- Microsoft Explorer 4.0 utilise VBscript Version 3.0

4.2 Une solide connaissance du Html

VBscript ne remplace pas le langage Html. Au contraire, comme VBscript vient s'ajouter aux codes Html, une connaissance approfondie des balises et tags Html est souhaitable sinon indispensable. Les utilisateurs assidus des éditeurs Html "whsiwyg" risquent de devoir retourner à leurs chères études.

Je ne peux que vous recommander un tutorial du même auteur : "Apprendre le langage Html" à l'adresse :
www.ccim.be/ccim328/html/index.htm

4.3 Un simple éditeur de texte

Une page Html n'est que du texte. Le code VBscript n'est lui aussi que du texte. Quoi de plus simple que d'utiliser un éditeur de ... texte. Le bloc-notes de Windows, fera parfaitement l'affaire (vous resterez ainsi dans la famille Microsoft).

Un éditeur Html de la première génération (un bon vieil éditeur qui n'est pas whsiwyg et qui fait apparaître les balises) fait également bien l'affaire.

5. Un peu de théorie objet

Les objets et leur hiérarchie

En bon internaute, vous voyez sur votre écran une page Web. VBscript va diviser cette page en objets et surtout va vous permettre d'accéder à ces objets, d'en retirer des informations et de les manipuler.

Voyons d'abord une illustration des différents objets qu'une page peut contenir.

Vous avez chargé la page suivante :

Dans votre browser, il y a une page Web qui n'est rien d'autre qu'un document Html. C'est l'objet document.

Dans ce document, on trouve un formulaire au sens Html du terme. C'est l'objet formulaire. Autrement dit (et c'est là que l'on voit apparaître la notion de la hiérarchie des objets VBscript), l'objet document contient un objet formulaire.

Dans ce document, on trouve deux objets. Des boutons checkbox et une zone de texte. Ce sont respectivement l'objet checkbox et l'objet texte. Autrement dit l'objet document contient l'objet formulaire qui contient à son tour l'objet radio et l'objet document contient aussi l'objet formulaire qui contient à son tour l'objet texte.

La hiérarchie des objets de cet exemple est donc :

document document

formulaire formulaire

Checkbox
Texte

Pour accéder à un objet (vous l'avez peut-être déjà deviné), il faudra donner le chemin complet de l'objet (ou la généalogie complète de l'objet) en allant du contenant le plus extérieur à l'objet à l'objet référencé.

Soit par exemple pour le bouton checkbox : document.formulaire.checkbox

ou pour la zone de texte document.formulaire.texte.

6. Le VBscript minimum

6.1 La balise <SCRIPT>

Le langage Html utilise des balises pour "dire" au navigateur d'afficher du texte en gras, des images, des liens, etc. Dans la logique du Html, il faut donc signaler au browser par un tag que ce qui suit est un script et que c'est du VBscript (et non du Javascript).

C'est la balise <SCRIPT language="VBscript">.

De même, il faudra informer le browser de la fin du script.

C'est la balise </SCRIPT>.

6.2 Les commentaires

Il vous sera peut-être utile d'inclure de commentaires personnels dans vos codes VBscript.

VBscript utilise les conventions de Visual Basic, soit :

' commentaires

ou

Rem commentaires

Tout ce qui est écrit après l'apostrophe ou le mot clé Rem sera ignoré.

6.3 Masquer le script pour les autres browsers

Les browsers qui ignorent la balise <script>, vont afficher le code VBscript comme du texte. Pour éviter l'affichage de ce charabia, on utilise les balises de commentaire du Html soit <!-- et -->.

Votre premier VBscript ressemblera à ceci :

<SCRIPT language="VBscript">

<!--

...

code VBscript

...

-->

</SCRIPT>

6.4 Où inclure la balise de script

Le browser traite votre page Html, y compris vos ajoutes en VBscript de haut en bas. Toute instruction ne pourra être exécutée que si le browser possède à ce moment précis tous les éléments nécessaire à son exécution.

· Au moment de l'exécution. La balise de script apparaît alors à l'intérieur des tags <BODY> </BODY>.

· Pour s'assurer que le programme VBscript est bien chargé et prêt à fonctionner à toute intervention de votre visiteur, on prendra l'habitude de déclarer systématiquement (lorsque cela sera possible) un maximum d'éléments dans les balises d'en-tête soit entre <HEAD> et </HEAD> et avant la balise <BODY>.
Ce sera le cas par exemple pour les procédures ou fonctions.

· Dans certains cas, la balise de script ne devra même pas être utilisée. Ce sera le cas pour les ajouts de script dans les contrôles de formulaire. Nous y reviendrons plus tard.

Rien n'interdit d'inclure plusieurs scripts dans la même page Html.

6.5 Attention

VBscript est case sensitive. Ainsi il faudra écrire write et non Write. Pour l'écriture des instructions VBscript, on utilisera l'alphabet ASCII classique (à 128 caractères) comme en Html. Les caractères accentués comme é ou à ne peuvent être employés que dans les chaînes de caractères c.-à-d. dans votre texte de notre exemple.

6.6 Votre première page Html avec du VBscript

<HTML>

<HEAD>

</HEAD>

<BODY>

... Html normal ...

<SCRIPT language="VBscript">

<!--

MsgBox "Mon premier VBscript!"

-->

</SCRIPT>

... Suite en Html ...

</BODY>

</HTML>

7. Les boites de message

7.1 La boite de message - MsgBox -

Petite boite d'un usage simple mais au combien utile. Cette boite affiche votre message et reste à l'écran aussi longtemps que le lecteur ne clique sur le bouton OK pour confirmer la bonne réception du message.

La syntaxe est de plus simple :

MsgBox "votre texte"

Voici un exemple :

MsgBox "Message reçu ?"

Cette boite de message sera souvent utilisée pour corriger les scripts présentant des erreurs. Ainsi, MsgBox variable, affichera le contenu de la variable à cet endroit du script ou MsgBox "jusqu'ici", vous permettra de voir jusqu'où se déroule le script erroné. Nous y reviendrons dans le chapitre intitulé "Les messages d'erreurs".

Vous pouvez aussi afficher du texte sur plusieurs lignes. Pour se faire, il suffit d'employer le mot-clé vbCrLf ou Chr (13) ou Chr (13) & Chr (10).

Ainsi MsgBox "Ligne 1" & vbCrLf & "Ligne 2" & Chr(13) & "Ligne 3", affichera dans la boite de message :

Ligne 1

Ligne 2

Ligne 3

7.2 La boite de message - Alert -

Assurément un emprunt au Javascript, la fonction Alert permet également d'afficher un boite de message. Tout comme MsgBox, Alert ouvre une petite fenêtre avec votre texte et un bouton OK. Aussi longtemps que le lecteur n'aura pas confirmé par un clic sur ce bouton, le processus sera bloqué.

La syntaxe est :

Alert "votre texte"

Un exemple ?

Alert "Message reçu ?

Votre oeil perspicace aura remarqué que la fenêtre s'intitule "Microsoft Internet Explorer" ou lieu de Visual Basic. A mon sens, plus joli.

7.3 La boite de saisie - InputBox -

Avec la boite de saisie, vous pouvez accroître l'interactivité avec votre lecteur et obtenir de sa part d'autres réponses que oui, non, etc.

La syntaxe est simple :

InputBox "votre texte" , "le titre de la boite" , "la valeur par défaut"

Voici un exemple :

InputBox "Quel est votre prénom?", "Demande d'information", "Luc"

La boite de saisie ne comporte pas d'icônes et les seuls boutons sont OK et Cancel.

La valeur ainsi entrée par le lecteur pourra être récupérée dans une variable qui sera traitée dans d'autres lignes de code VBscript.

7.4 La boite de message - MsgBox - évoluée

On peut utiliser la boite MsgBox pour une plus grande interactivité qu'un simple (stupide?) bouton de confirmation. C'est le premier attribut (attribut-bouton), celui du choix des boutons.

Constante | Bouton(s) affiché(s)
vbOk | OK seulement (par défaut)
vbOkCancel | OK et Cancel
vbAbortRetryIgnore | Abort, Retry et Ignore
vbYesNoCancel | Yes, No et Cancel
vbYesNo | Yes et No
vbRetryCancel | Retry et Cancel

On peut modifier la petite icône qui accompagne la boite de message. C'est l'attribut-icône.

Constante | Icône affichée
vbCritical | un X (pour erreur fatale)
vbQuestion | un point d'interrogation (pour une question)
vbExclamation | un point d'exclamation (pour une remarque)
vbInformation | un I (pour une information)

Et si la mention "Visual Basic" de la fenêtre par défaut ne vous enchante guère, le titre de cette fenêtre peut aussi être modifié.

La syntaxe bien entendu, évolue :

MsgBox "votre texte" , attribut-bouton + attribut-icône, "titre de la fenêtre"

MsgBox renvoie une valeur de retour qui indique que le lecteur a cliqué sur tel ou tel bouton. Selon l'évaluation de ce code retour (voir Chapitre "Les conditions") telle ou telle action pourra être programmée. Ces codes sont 1 pour le bouton OK, 2 pour le bouton Cancel, 3 pour le bouton Abort, 4 pour le bouton Retry, 5 pour le bouton Ignore, 6 pour le bouton Yes et enfin 7 pour le bouton No.

On mettra ce code retour dans une variable (ici code). L'écriture prendra la forme :

Dim code

code = MsgBox("texte" , attribut-bouton )

8. Afficher du texte

8.1 Méthode de l'objet document

Rappelez-vous... Nous avions montré que ce qui apparaît sur votre écran, peut être "découpé" en objets et que VBscript allait vous donner la possibilité d'accéder à ces objets (Un peu de théorie objet).

La page Html qui s'affiche dans la fenêtre du browser est un objet de type document. A chaque objet VBscript, le concepteur du langage a prévu un ensemble de méthodes (ou fonctions dédiées à cet objet) qui lui sont propres. A l'objet document, VBscript a dédié la méthode "écrire dans le document", c'est la méthode write.

Pour appeler la méthode write du document, on notera

document.write

8.2 La méthode write

La syntaxe est assez simple soit

document.write "votre texte"

On peut aussi écrire une variable, soit la variable resultat,

document.write resultat

Pour associer du texte (chaînes de caractères) et des variables, on utilise l'instruction

document.write ''Le résultat est " & resultat

On peut utiliser les balises Html pour agrémenter ce texte

document.write ''<B>Le résultat est</B>" & resultat ou

document.write ''<B>" & "Le résultat est "& "</B>" & resultat

où & est un opérateur de concaténation qui relie les "wagons" de ce que vous voulez écrire. Nous y reviendrons au chapitre consacré aux opérateurs.

8.3 Exemple (classique !)

On va écrire du texte en Html et en VBscript.

<HTML>

<BODY>

<H1>Ceci est du Html</H1>

<SCRIPT language="VBscript">

<!--

document.write "<H1>Et ceci du VBscript</H1>"

-->

</SCRIPT>

</BODY>

</HTML>

Ce qui donnera comme résultat :

Ceci est du Html
Et ceci du VBscript

9. Les variables

9.1 Les variables en VBscript

Les variables contiennent des données qui peuvent être modifiées lors de l'exécution d'un programme. On y fait référence par le nom de cette variable.

Les noms de variables :

· ne doivent pas dépasser 255 caractères.

· doivent commencer par une lettre (caractère alphabétique).

· ne peuvent contenir une virgule, un point ou un espace.

· ne peuvent reprendre des mots clés de VBscript.

· doivent être uniques à l'intérieur de leur portée (voir variables globales et locales).

Ajoutons pour nous les francophones, qu'il faut employer l'alphabet ASCII donc les lettres sans accents.

Pour rappel VBscript est sensible à la case. Attention donc aux majuscules et minuscules!

9.2 La déclaration de variable

Les variables peuvent se déclarer de deux façons :

· soit de façon explicite.
On dit à VBscript que ceci est une variable.
La commande qui permet de déclarer une variable est le mot clé Dim suivi du nom de la variable (et ce généralement en début de script). Par exemple :
Dim Numero
Dim x, y, z

· soit de façon implicite. On écrit directement dans le code VBscript, le nom de la variable suivi de la valeur que l'on lui attribue et VBscript s'en accommode. Par exemple :
Numero = 1
Prenom = "Luc"

Si ce mélange possible de variables implicites et explicites vous ennuie, vous pouvez exiger la méthode de déclaration explicite et empêcher les déclarations implicites. Cela se réalise par la commande :

Option Explicit

Cette commande se place dans la première ligne de code de votre VBscript :

<SCRIPT language="VBscript>

<!--

Option Explicit

... la suite du code ...

-->

</SCRIPT>

9.3 Le types de données sous VBscript

VBscript utilise un seul type de données nommée Variant (rappel du Visual Basic). Ce type Variant est véritablement un fourre-tout de différents types d'information. En voici quelques-uns :

Type | Description
Des nombres | Tout nombre entier ou avec virgule tel que 22 ou 3.1416
Des chaînes de caractères | Toute suite de caractères alphanumérique comprise entre guillemets telle que "suite de caractères". On emploiera aussi le terme "strings".
Des Booléens | Contient True (vrai) ou False (faux).
Empty | La variable n'a pas encore été initialisée. Sa valeur est égale à 0 pour les variables numériques et " " pour les strings.
Null | Contient (intentionnellement) des données incorrectes.
Error | Contient un numéro d'erreur. Utile pour corriger un script (voir chapitre les messages d'erreur).

9.4 Variables locales et variables globales

Les variables déclarées dans les procédures (voir plus loin) ont une portée dite locale c-à-d qu'elle ne sera valable que dans le cadre de cette seule procédure.

Une variable est dite globale lorsqu'elle pourra être partagée partout dans le code du script. Pour qu'une variable soit globale, elle doit être déclarée en dehors de toutes procédures. Pour ce faire, on les déclare tout au début du script.

Ainsi, la variable compteur définie comme suit sera globale :

<SCRIPT language="VBscript">

<!--

Dim compteur

Sub ....

compteur = 0

End Sub

Sub ...

compteur = compteur + 1

End Sub

-->

</SCRIPT>

10. Les opérateurs

Après les variables, abordons le chapitre, toujours follement passionnant (sic), des opérateurs.

10.1 Les opérateurs arithmétiques

Dans tous les exemples, y est égal à 11.

0pérateur | Signification | Exemple | Résultat
+ | Addition | x = y + 5 | x = 16
- | Soustraction | x = y - 5 | x = 6
* | Multiplication | x = y * 5 | x = 55
/ | Division à virgule flottante | x = y / 5 | x = 2.2
\ | Division sans décimale | x = y \ 5 | x = 2
^ | Exposant | x = y ^2 | x = 121
Mod | Modulo | x = y Mod 5 | x = 1
- | Négation | x = -y | x = -11

Il faut noter que la division sans décimale renvoie la partie entière de la division et ne fonctionne en aucun cas comme un arrondi du nombre.

10.2 Opérateurs de comparaison

Ces opérateurs de comparaison seront surtout utilisés dans les tests de conditionnels. Nous y reviendrons dans le chapitre intitulé "Les conditions".

0pérateur | Signification | Exemple | Résultat
= | Egalité | a = b | a est égal à b
<> | Inégalité | a <> b | a différent à b
> | Plus grand | a > b | a supérieur à b
< | Plus petit | a < b | a inférieur à b
>= | Plus grand ou égal | a >= b | a plus grand ou égal à b
<= | Plus petit ou égal | a <= b | a inférieur à b
Is | Equivalence d'objets | objet.ref1 Is objet.ref2 |

En VBscript, il n'y a pas de signe différent pour = valeur d'attribution et = comparaison. C'est le sens du script qui l'indique. Ce qui peut poser certains problèmes.

En Javascript, on a = pour la valeur d'attribution et == comparaison.

10.3 Opérateurs logiques

0pérateur | Signification | Exemple
And | Conjonction (et) | condition1 And condition2
Or | Disjonction (ou) | condition1 Or condition2
Not | Négation | Not expression
Xor | Exclusion | condition1 Xor condition2
Eqv | Equivalence logique | condition1 Eqv condition2
Imp | Implication | condition1 Imp condition2

10.4 Opérateur de concaténation

0pérateur | Signification | Exemple | Résultat
& | Concaténation de strings | "nom" & " " & "prénom" | nom prénom
+ | Concaténation de strings" | "nom" + " " + "prénom" | nom prénom

Préférez cependant & à + car ce dernier est fait pour les valeurs numériques et l'interpréteur être troublé par la concaténation de nombres et de strings. La concaténation avec l'opérateur +, ne fournit pas toujours un résultat garanti.

11. Les procédures

11.1 Les procédures (généralités)

Une procédure (ou fonction) est un groupe de ligne(s) de code de programmation destiné à exécuter une tâche bien spécifique et que l'on pourra, si besoin est, utiliser à plusieurs reprises. De plus, l'usage des procédures améliorera grandement la lisibilité et la maintenance de votre script.

En VBscript, il existe trois types de fonctions ou de procédures :

· les fonctions propres à Javascript. On les appelle des "méthodes". Elles sont associées à un objet bien particulier comme c'était le cas de la méthode MsgBox avec l'objet document.

· les sous-programmes (Subroutine) écrits par vous-même pour les besoins de votre script et qui ne retournent pas de valeur.

· les fonctions (Function) proprement dites qui sont aussi écrites par vous-même mais qui peuvent retourner une valeur.

11.2 Déclaration d'un sous-programme

Pour déclarer ou définir un sous-programme (Subroutine), on utilise le mot (réservé) Sub. La syntaxe d'une déclaration de sous-routine est la suivante :

Sub nom-du-sous-programme(arguments)

... code des instructions ...

End Sub

Le nom du sous-programme suit les mêmes règles que celles qui régissent le nom de variables (nombre de caractères 255, commencer par une lettre, peuvent inclure des chiffres...). Pour rappel, VBscript est sensible à la case. Ainsi Calcul() ne sera pas égal à calcul(). En outre, Tous les noms des fonctions dans un script doivent être uniques.

La mention des arguments est facultative mais dans ce cas les parenthèses doivent rester. C'est d'ailleurs grâce à ces parenthèses que l'interpréteur VBscript distingue les variables des fonctions. Nous reviendrons plus en détail sur les arguments et autres paramètres.

Lorsqu'un sous-programme a été ouvert par un Sub, il doit impérativement, sous peine de message d'erreur, être refermé par un End Sub. Prenez la bonne habitude de fermer directement vos sous-routines et d'écrire votre code entre elles.

Le fait de définir une fonction n'entraîne pas l'exécution des commandes qui la composent. Ce n'est que lors de l'appel de la fonction que le code de programme est exécuté.

11.3 L'appel d'un sous-programme

L'appel d'un sous-programme se fait le plus simplement du monde par le nom du sous-programme (sans les parenthèses même s'il y a des arguments).

Soit par exemple :

nom-du-sous-programme

nom-du-sous-programme argument1, argument2

Vous pouvez aussi (mais ce n'est pas obligatoire) utiliser l'instruction call

Call nom-du_sous-programme

Call nom-du-sous-programme(argument1, argument2)

Si le sous-programme a des arguments, il faut ici mettre des parenthèses.

Il faudra veuillez en toute logique (car l'interpréteur lit votre script de haut vers le bas) que votre fonction soit bien définie avant d'être appelée.

11.4 Déclaration d'une fonction

Pour rappel, la fonction retourne une valeur. Pour le reste, les règles sont assez proche de celles vues pour les sous-programmes.

Pour déclarer ou définir une fonction, on utilise le mot clé Function . La syntaxe d'une déclaration de fonction est la suivante :

Function nom-de-la-fonction(arguments)

... code des instructions ...

End Function

Ce qui été dit pour les sous-programmes concernant le nom, l'usage des parenthèses, L'emploi de End Function reste valable pour les fonctions.

Le fait de définir une fonction n'entraîne pas l'exécution des commandes qui la composent. Ce n'est que lors de l'appel de la fonction que le code de programme est exécuté.

11.5 Retour de la valeur dans une fonction

Pour retourner une valeur, la fonction utilise un petit artifice. On affectera la valeur à une variable dans une des lignes de code de la fonction et cette variable portera le même nom que la fonction. Ainsi, la syntaxe serait :

Function nom-de-la-fonction(arguments)

... code des instructions ...

nom-de-la-fonction = expression

... code des instructions ...

End Function

Vbscript sait alors automatiquement que vous voulez renvoyer la valeur de la "variable" nom-de-la-fonction au programme qui l'a appelé. Cette façon de faire remplace le return d'autres langages de programmation ou de scripts.

Voici un exemple :

Dim cube

Function cube(nombre)

cube = nombre*nombre*nombre

End Function

La valeur retournée sera celle de "cube" soit nombre au cube.

11.6 Appel d'une fonction

Pour appeler une fonction, on fait apparaître le nom de la fonction à droite d'une affectation de variable souvent appelée variable de retour. La syntaxe est :

variable-retour = nom-de-la-fonction(arguments)

Dans le cadre de notre exemple, cela pourrait être :

resultat = cube(nombre)

Les parenthèses sont optionnelles même si on transmet des arguments à la fonction.

12. Les conditions

12.1 L'expression If

A un moment ou à un autre de la programmation, on aura besoin de tester une condition. Ce qui permettra d'exécuter ou non une série d'instructions.

Dans sa formulation la plus simple, l'expression if se présente comme suit

If condition=vraie Then

... suite d'instructions ...

End If

Ainsi, si la condition est vérifiée, les instructions s'exécutent. Si elle ne l'est pas, les instructions ne s'exécutent pas et le programme passe à la commande suivant le End If de fermeture.

De façon un peu plus évoluée, il y a l'expression If...Else

If condition=vraie Then

... instructions1 ...

Else

... instructions2 ...

End If

Si la condition est vérifiée (true), le bloc d'instructions 1 s'exécute. Si elle n'est pas vérifiée (false), le bloc d'instructions 2 s'exécute.

12.2 L'expression For ... Next

L'expression For ... Next permet d'exécuter un bloc d'instructions un certain nombre de fois.

Sa syntaxe est :

For compteur = début to fin

... instructions répétées ...

Next

où compteur est une simple variable

Prenons un exemple concret

For i = 0 to10

document.write i & "<BR>"

Next

Au premier passage, la variable i, étant initialisée à 0, vaut bien entendu 0. Le script affiche 0. Elle est alors incrémentée (par défaut) d'une unité. La variable vaut alors 1 et le script affiche 1. On incrémente de 1, la variable vaut alors 2 et le script affiche 2. Ainsi de suite jusqu'à 10 et le script affichera 10 (donc valeur de fin comprise). Ensuite la boucle est interrompue et le script passe à l'instruction suivant le Next.

On peut aussi déterminer la valeur d'incrémentation ou de décrémentation. For... Next devient :

For compteur = début to fin Step incrément

... instructions répétées ...

Next

Ainsi pour afficher que les nombres pairs dans notre petit exemple, celui-ci devient :

For i = 0 to10 Step 2

document.write i & "<BR>"

Next

Au premier passage, la variable i, étant initialisée à 0, vaut bien entendu 0. Le script affiche 0. Elle est alors incrémentée de la valeur de Step soit 2. La variable vaut alors 2 et le script affiche 2. On incrémente de 2 (valeur de Step), la variable vaut alors 4 et le script affiche 4. Ainsi de suite jusqu'à 10 et le script affichera 10 (donc valeur de fin comprise). Ensuite la boucle est interrompue et le script passe à l'instruction suivant le Next.

Les boucles sont toujours à manier avec précautions car elles risquent de boucler très (trop) longtemps ou indéfiniment. Un conseil est d'éviter Step 0.

12.3 Autres tests conditionnels

Il existe d'autres tests de condition, par exemple Do ... Loop et ses variantes avec While et Until, mais cela dépasse le cadre fixé d'un simple tour d'horizon.

13. Les événements

13.1 Généralités

Avec les événements et surtout leur gestion, nous abordons le côté "magique" des langages de scripts comme VBscript et Javascript. En Html classique, il y a un événement que vous connaissez bien. C'est le clic de la souris sur un lien pour vous transporter sur une autre page Web. Les langages de scripts vont vous permettre d'appliquer et de gérer ces événements sur les objets de votre choix.

Les événements des langages de script et leur gestion, associés aux fonctions, aux méthodes et aux formulaires, ouvrent grand la porte pour une réelle interactivité de vos pages Web.

13.2 Les événements

Passons en revue quelques événements implémentés en VBscript.

Description | Evénement
Lorsque l'utilisateur clique sur un bouton, un lien ou tout autre élément. | Clik
Lorsqu'un élément de formulaire a le focus c-à-d devient la zone d'entrée active. | Focus
Lorsqu'un élément de formulaire perd le focus c-à-d que l'utilisateur clique hors du champs et que la zone d'entrée n'est plus active. | Blur
Lorsque l'utilisateur sélectionne un champ dans un élément de formulaire. | Select

13.3 Les procédures événementielles

Pour être efficace, il faut qu'à ces événements soient associés les actions prévues par vous. C'est le rôle des procédures événementielles.

La syntaxe est :

nom-de-l'objet_On-Evénement()

Ainsi pour une action déclenchée par le clic de l'utilisateur sur un bouton nommé "test", la procédure événementielle à créer par vous sera :

test_OnClick()

Comme il s'agit d'une procédure, on utilisera Sub et End :

Sub test_OnClick()

... action ...

End Sub

Comme ses procédures événementielles doivent être définies avant qu'elles soient appelées, il est recommandé de toujours les incorporer dans les balises <HEAD></HEAD>.

13.4 Exemple complet

Soit un bouton nommé test qui au click de l'utilisateur, provoque l'affichage d'une boite de message (Internet Explorer seulement)

<HTML>

<HEAD>

<SCRIPT language="VBscript">

Sub test_OnClick()

MsgBox "Test réussi!"

End Sub

</SCRIPT>

</HEAD>

<BODY>

<FORM>

<INPUT TYPE="button" NAME="test" VALUE="Pour un test">

</FORM>

</BODY>

</HTML>

13.5 Remarque finale

On verra dans le chapitre suivant que dans le cas particulier des formulaires (au sens Html du terme) cette déclaration des procédures événementielles peut être allégée.

14. Les contrôles de formulaire

14.1 Généralités

Avec les langages de script, les formulaires Html prennent une toute autre dimension. N'oublions pas qu'en VBscript (comme en Javascript), on peut accéder à chaque élément d'un formulaire pour, par exemple, y aller lire ou écrire une valeur, noter un choix auquel on pourra associer un gestionnaire d'événement... Tous ces éléments renforceront grandement les capacités interactives de vos pages.

Mettons au point le vocabulaire que nous utiliserons. Un formulaire est l'élément Html (à ne pas confondre avec le sens Visual Basic du terme) déclaré par les balises <FORM></FORM>. Un formulaire contient un ou plusieurs éléments que nous appellerons des contrôles (widgets). Ces contrôles sont notés par exemple par la balise <INPUT TYPE= ...>.

14.2 Procédure événementielle simplifiée (ou explicite)

Plutôt que de créer une procédure événementielle comme décrit dans le chapitre précédent (procédure d'événement implicite), on peut inclure l'événement comme un attribut de la balise <INPUT...> du formulaire. Cet attribut prendra la forme :

<INPUT ... On-Evénement="instruction">

Soit dans le cas de notre bouton "test" qui affiche une boite de message au clic de l'utilisateur :

<INPUT type="button" name="test" value="Pour un test" OnClick="MsgBox 'Test réussi!'">

Mais cette déclaration de procédure n'est pas encore complète. Il faut encore spécifier au browser à quel langage de script vous faites référence. Dans le cas présent du VBscript et non du Javascript (assumé par défaut).

<INPUT type="button"
name="test" value="Pour un test"
language="VBscript" OnClick="MsgBox 'Test réussi!'">

Ce genre de notation, assurément empruntée à Javascript, est fort pratique mais son usage intensif compliquera la relecture de vos scripts.

14.3 Le contrôle ligne de texte

Nous passons en ci-dessous quelques contrôles de formulaire avec une application en VBscript.

La ligne de texte est l'élément d'entrée/sortie par excellence de langage de script. La syntaxe Html est <INPUT TYPE="text" NAME="nom" SIZE=x MAXLENGTH=y> pour un champ de saisie d'une seule ligne, de longueur x et de longueur maximale de y.

L'objet text possède trois propriétés : name, defaultvalue, value.

Prenons un exemple tout simple. Entrez une valeur quelconque dans la zone de texte d'entrée. Appuyer sur le bouton pour afficher cette valeur dans la zone de texte de sortie.

Le code est :

<HTML>

<HEAD>

<SCRIPT language="VBscript">

Function afficher(form2)

test =document. form2.input.value

document.form2.output.value=test

End Function

</SCRIPT>

</HEAD>

<BODY>

<FORM NAME="form2">

<INPUT TYPE="text" NAME="input" VALUE=""> Zone de texte d'entrée <BR>

<INPUT TYPE="button"
NAME="bouton" VALUE="Afficher"
onClick="afficher(form2)"><BR>

<INPUT TYPE="text" NAME="output" VALUE=""> Zone de texte de sortie

</FORM>

</BODY>

</HTML>

Lorsqu'on clique le bouton "Afficher" (onClick), VBscript appelle la fonction afficher() à laquelle on passe comme argument le formulaire dont le nom est form2 .

Cette fonction afficher() définie dans les balises <HEAD> prend sous la variable test, la valeur de la zone de texte d'entrée. Pour accéder à cette valeur, on note le chemin complet de celle-ci (voir le chapitre "Un peu de théorie objet"). Soit dans le document présent, il y a l'objet formulaire appelé form2 qui contient le contrôle de texte nommé input et qui a comme propriété l'élément de valeur value. Ce qui donne document.form2.input.value.A l'instruction suivante, on dit à VBscript que la valeur de la zone de texte output comprise dans le document.formulaire nommé form2 est celle de la variable test. A nouveau, on a utilisé le chemin complet pour arriver à la propriété valeur de l'objet souhaité soit en VBscript form2.output.value.

14.4 Les boutons radio

Les boutons radio sont utilisés pour noter un choix, et seulement un seul, parmi un ensemble de propositions. L'objet radio possède plusieurs propriétés : name, value, item(pour le rang du bouton en commençant par 0, checked et defaultchecked.

Prenons un exemple :

<HTML>

<HEAD>

<SCRIPT language="VBscript">

Function choix(form3)

If (form3.choix.item(0).checked) Then

alert("Choix " + form3.choix.item(0).value)

End If

If (form3.choix.item(1).checked) Then

alert("Choix " + form3.choix.item(1).value)

End If

If (form3.choix.item(2).checked) Then

alert("Choix " + form3.choix.item(2).value)

End If

End Function

</SCRIPT>

</HEAD>

<BODY> Entrez votre choix :

<FORM NAME="form3">

<INPUT TYPE="radio" NAME="choix" VALUE="1">Choix numéro 1<BR>

<INPUT TYPE="radio" NAME="choix" VALUE="2">Choix numéro 2<BR>

<INPUT TYPE="radio" NAME="choix" VALUE="3">Choix numéro 3<BR>

<INPUT TYPE="button"NAME="but" VALUE="Quel et votre choix ?" onClick="choix(form3)">

</FORM>

</BODY>

</HTML>

PS: Ce programme a été écrit avec un souci didactique. On pourrait l'écrire avec des codes plus compacts.

Dans le formulaire nommé form3, on déclare trois boutons radio. Notez que l'on utilise le même nom pour les trois boutons. Vient ensuite un bouton qui déclenche la fonction choix().

Cette fonction teste quel bouton radio est coché. On accède aux boutons sous forme d'indice par rapport à la propriété item du bouton radio nommé "choix" soit choix.item(0), choix.item(1) et choix.item(2). On teste la propriété checked du bouton par if(form3.choix.item(x).checked). Dans l'affirmative, une boite d'alerte s'affiche. Ce message reprend la valeur attachée à chaque bouton par le chemin form3.choix.item(x).value.

14.5 Liste de sélection

Le contrôle liste de sélection vous permet de proposer diverses options sous la forme d'une liste déroulante dans laquelle l'utilisateur peut cliquer pour faire son choix. Ce choix reste alors affiché.

La boite de la liste est crée par la balise <SELECT> et les éléments de la liste par un ou plusieurs tags <OPTION>. La balise </SELECT> termine la liste. Comme propriétés, on a name, length, selectedIndex (à partir de 0), defaultselected,

Un petit exemple comme d'habitude :

Entrez votre choix : Image

<HTML>

<HEAD>

<SCRIPT language="VBscript">

Function liste(form5)

MsgBox "Elément " & (form5.list.selectedIndex + 1)

End Function

</SCRIPT>

</HEAD>

<BODY> Entrez votre choix :

<FORM NAME="form5">

<SELECT NAME="list">

<OPTION VALUE="1">Elément 1

<OPTION VALUE="2">Elément 2

<OPTION VALUE="3">Elément 3

</SELECT>

<INPUT type="button"
name="b" value="Quel est l'élément retenu?"
onClick="liste(form5)">

</FORM>

</BODY>

</HTML>

Dans le formulaire nommé form5, on déclare une liste de sélection par la balise <SELECT> </SELECT>. Entre ses deux balises, on déclare les différents éléments de la liste par autant de tags <OPTION>. Vient ensuite un bouton qui déclenche la fonction liste().

Cette fonction teste quelle option a été sélectionnée. Le chemin complet de l'élément sélectionné est form5.nomdelaliste.selectedIndex. Comme l'index commence à 0, il ne faut pas oublier d'ajouter 1 pour retrouver le juste rang de l'élément.

Le même exemple avec la procédure événementielle simplifiée décrite plus haut, donnerait :

</SCRIPT>

</HEAD>

<BODY> Entrez votre choix :

<FORM NAME="form5">

<SELECT NAME="list">

<OPTION VALUE="1">Elément 1

<OPTION VALUE="2">Elément 2

<OPTION VALUE="3">Elément 3

</SELECT>

<INPUT TYPE="button"NAME="b" VALUE="Quel est l'élément retenu?"

language="VBscript"

onClick="MsgBox 'Elément ' & (form5.list.selectedIndex + 1)">

</FORM>

</BODY>

</HTML>

14.6 Pour terminer

Il existe d'autres contrôles de formulaires (textarea, submit, bouton checkbox...) que nous vous laissons découvrir lors de vos études ultérieures de VBscript.

15. A propos des tableaux

15.1 Les tableaux de longueur fixe à une dimension

Pour créer des tableaux en VBscript, on utilise la notion de variable (donc avec le mot clé Dim) mais qui sera indexée.

Pour faire un tableau, il faut procéder en deux étapes :

· d'abord construire la structure du tableau. A ce stade, les éléments du tableau sont vides.

· ensuite affecter des valeurs dans les cases ainsi définies.

On commence par définir le tableau :

Dim nom-du-tableau (x)

où x est le nombre d'éléments du tableau moins 1.

Ensuite, on va alimenter la structure ainsi définie :

nom-du-tableau(i) = "élément"

où i est un nombre compris entre 0 et x moins 1.

Exemple : un carnet d'adresse avec 3 personnes

construction du tableau :

Dim carnet(2)

ajout des données :

carnet(0)="Dupont"

carnet(1)="Médard"

carnet(2)="Van Lancker"

pour accéder un élément, on emploie :

document.write carnet(2)

On notera ici que les données sont bien visibles au lecteur un peu initié (view source).

Remarque :

Quand on en aura l'occasion, il sera pratique de charger le tableau avec une boucle. Supposons que l'on ait à charger 50 images. Soit on le fait manuellement, il faut charger 0.gif, 1.gif, 2.gif... Soit on utilise une boucle du style :

Dim gif(49)

For i = 0 to 49

gif(i) = i + ".gif"

Next

15.2 Tableau dynamique à une dimension

L'avantage des tableaux dynamiques est, bien entendu, qu'il ne faut pas connaître à l'avance le nombre d'éléments du tableau.

On peut utiliser à tout moment dans le script ReDim pour redimensionner le tableau. La syntaxe est :

ReDim nom-du-tableau (x)

où x est le nombre d'éléments du tableau moins 1 ou une variable.

Voici un exemple de tableau dont le nombre d'éléments est déterminé par une variable i :

Dim carnet()

Dim i

i = 3

ReDim carnet(i - 1)

et plus loin dans le script

ReDim carnet (i + 9)

Attention ! A chaque appel de ReDim, le contenu du tableau précédent est effacé.

Si cette option ne vous convient pas et que vous voulez "préserver" vos données, heureusement pour vous il existe le mot clé Preserve qui vous permet de conserver les données initiales.

ReDim Preserve carnet (i + 9)

15.3 Pour connaître la taille d'un tableau

Ce renseignement vous est accessible par la fonction VBscript UBound. La syntaxe n'a rien de fort compliqué :

variable = UBound(nom-du-tableau)

Appliqué à notre exemple, on peut imaginer :

MsgBox "Le nombre d'éléments est " & UBound(carnet)

Le résultat est bien entendu - Le nombre d'éléments est 2 -

15.4 Les tableaux à plusieurs dimensions

VBscript vous permet de construire aisément des tableaux à plusieurs dimensions (jusqu'à 60 dimensions).

La syntaxe de construction du tableau est :

Dim Grid(x, y)

où x est le nombre de lignes moins 1 et y le nombre de colonnes moins 1.

Pour alimenter la structure ainsi définie :

Grid(i,j) = "élément"

où i est un nombre compris entre 0 et x moins 1 et j un nombre compris entre 0 et y moins 1.

A titre d'exemple :

Dim Grid(3,3)

Grid(0,0)="Dupont"

Grid(1,0)="Médard"

Grid(2,0)="Van Lancker"

document.write Grid(2,0)

16. Incorporation des ActiveX

16.1 Généralités

Votre page Web se compose de balises Html et éventuellement du code VBscript. Vous pouvez "greffer" sur cette page des objets, extérieurs à celle-ci, qui vous permettront de réaliser des applications graphiques et/ou de programmation que le tandem Html/Script ne peut réaliser.

Les contrôles ActiveX (comme les objets Java) font partie de ses objets que l'on peut "greffer" sur une page Web.

16.2 La balise <OBJECT>

Pour incorporer un objet, on utilise la balise <OBJECT></OBJECT>

Cette balise nécessite une série d'attributs :

classid référence l'emplacement où le browser peut trouver le contrôle ActiveX d'abord sur le système de l'utilisateur et ensuite où il pourra être éventuellement téléchargé sur le Web. Ainsi, classid sera l'identificateur unique du composant. Celui-ci s'indique sur 128 bits sous forme d'un charabia illisible.

id désigne l'identificateur ou le nom de l'élément. C'est le nom que vous utiliserez chaque fois que vous ferez appel à l'ActiveX.

ensuite toute une série d'attributs (width, height, vspace, hspace, align) qui ont trait à la taille qu'occupera l'objet sur la page Web et à la représentation visuelle de celui-ci.

Ainsi une balise d'incorporation d'objet peut prendre la forme suivante :

<OBJECT

classid="clsid:99B42120-6EC7-11CF-A6C7-00AA00A47DD2"

id=lb1ActiveLb1

width=250

height=250

align=left

hspace=20

vspace=0 >

16.3 La balise <PARAM>

Avec la balise <OBJECT>, vous avez importé dans votre page un petit objet. Ce petit programme doit maintenant fonctionner selon vos spécifications. Dans le cadre d'une présentation graphique de texte plus évoluée que celle permise en Html, on peut imaginer que ces paramètres soient votre texte, la police, la taille de la police, l'angle du texte, etc.

Ces balises <PARAM> pourraient prendre la forme suivante :

<PARAM NAME="Caption" VALUE="Mon texte">

<PARAM NAME="Fontname" VALUE="Arial, Helvetia">

<PARAM NAME="Fontsize" VALUE="20">

<PARAM NAME="Angle" VALUE="90">

</OBJECT>

Ces différents paramètres vous sont généralement fournis avec la documentation accompagnant le contrôle ActiveX.

16.4 ActiveX Control Pad

Microsoft met à votre disposition ActiveX Control Pad pour insérer aisément (?) des contrôles ActiveX dans vos pages Web en Html.

17. Les messages d'erreurs

On ne peut pas dire que les outils de débuggage offerts par VBscript soient des plus évolués. Pour un peu, on se croirait revenu aux temps préhistoriques du Basic. Ainsi, corriger vos erreurs en VBscript ressemble souvent au jeu des sept erreurs.

Pour ceux qui connaissent le Javascript, la gestion des erreurs de VBscript est du même niveau que celle de Javascript, donc faible et peu évoluée.

17.1 Les types d'erreurs.

Il y a 3 grandes catégories d'erreurs dans l'utilisation d'un programme VBscript :

· les erreurs au chargement.

· les erreurs à l'exécution

· les erreurs de logique.

17.2 Les erreurs au chargement

Au chargement du script par le browser, l'interpréteur VBscript passe en revue les différentes erreurs qui peuvent empêcher le bon déroulement de celui-ci.

Les erreurs au chargement, nombreuses lors de l'apprentissage de VBscript, sont souvent dues à des fautes de frappe et/ou des erreurs de syntaxe.

Pour vous aider à déterminer l'erreur, VBscript affiche sa fameuse boite de message d'erreur, vous indique le problème et le texte de l'erreur. Des exemples classiques d'erreurs au chargement sont des strings absents, des minuscules au lieu de majuscules, des variables mal orthographiées.

Le gestionnaire d'erreur de VBscript bloque le script et il ne vous reste plus qu'à corriger votre erreur. Voici un exemple de script avec une erreur :

<HTML>

<HEAD>

<SCRIPT LANGUAGE="vbscript">

<!--

Sub Bouton1_OnClick

MsgBox "Ceci est du VBscript.

End Sub

-->

</SCRIPT>

</HEAD>

<BODY> etc.

Vous aurez remarqué qu'il manque les guillemets de fin au string "Ceci est du VBscript".

VBscript affichera le message d'erreur suivant :

Le message d'erreur vous signale qu'à la ligne 6, il y a un string qui n'est pas terminé par des guillemets. Notez cependant que le message n'est pas toujours aussi précis et qu'il faut parfois remonter de plusieurs lignes pour trouver l'erreur effective.

17.3 Les erreurs à l'exécution

Ici votre script se charge sans problème, mais cette satanée boite de message d'erreurs apparaît lorsque l'exécution du script est demandée. Alors que les erreurs au chargement étaient surtout dues au mauvais usage de la syntaxe, les erreurs à l'exécution (runtime error) proviennent d'un mauvais usage des commandes ou des objets VBscript.

Un exemple d'erreur à l'exécution est un appel erroné à une variable ou une fonction inexistante (car il y a, par exemple, une erreur dans le nom de la variable ou de la fonction).

17.4 Les erreurs de logique

Ce sont les plus vicieuses car le "débuggeur" de VBscript ne signale bien entendu aucune erreur et votre script se déroule correctement. Hélas, à l'arrivée, le résultat ne correspond pas à celui espéré.

Il n'y a plus qu'à revoir la construction logique de votre script. Cent fois sur le métier remettez votre ouvrage...

De nombreuses erreurs de logique sont dues à des valeurs de variables incorrectes.

Voici quelques conseils :

· Dans le cas où l'utilisateur doit entrer une valeur, celle-ci était-t-elle au bon format? N'est-il pas utile de prévoir un petit script pour vérifier le format d'entrée ?

· On peut ajouter des points de contrôle de valeur de variable ou de passage avec l'instruction MsgBox variable ou MsgBox "Point de passage1"

17.5 Les grands classiques des erreurs.

On peut dresser une liste d'erreurs que tous les débutants (et même certains programmeurs confirmés) font ou feront tôt ou tard.

· Soyez vigilant au nom des variables (case sensitive). Mavariable et mavariable sont deux variables distinctes. Eviter d'utiliser des noms de variables trop rapprochants.

· Le nom de la fonction a-t-il bien la même orthographe dans la déclaration et dans l'appel. Le nom des fonctions est-il bien unique dans le script?

· N'oubliez pas les guillemets avant et après les chaînes de caractères.

· Avez-vous bien mis des virgules entre vos différents paramètres ou arguments?

· Avez-vous placé votre déclaration de fin (End ...)? Avez-vous placé la déclaration de fin au bon endroit dans le cas de blocs de commandes imbriquées?

· Assurez-vous que les noms des objets VBscript sont corrects. Le piège est que les objets ou fonctions VBscript commencent par une majuscule (MsgBox, Day, Isdate...) mais que les propriétés commencent par une minuscule (write).

· La confusion entre = opérateur d'affectation et = opérateur de comparaison.

17.6 On Error Resume Next

L'expression On Error Resume Next, propre à VBscript, permet de poursuivre l'exécution d'un programme après une erreur à l'exécution (runtime uniquement) et empêcher ainsi qu'il soit bloqué par une fenêtre de message d'erreur. VBscript ignore l'erreur et passe à la ligne suivante.

Exemple :

<HTML> <BODY> <SCRIPT language="VBS"> a = 100 / 0 MsgBox a </SCRIPT> </BODY> </HTML> | <HTML> <BODY> <SCRIPT language="VBS"> On Error Resume Next a = 100 / 0 MsgBox a </SCRIPT> </BODY> </HTML>
VBscript affiche une fenêtre d'erreur (runtime error division par 0). | VBscript ignore l'erreur et affiche une boite de message vide (car a n'a pas été calculé).

Soulignons que cette astuce ne résout en rien l'erreur. Elle l'ignore simplement, ce qui désactive les messages d'erreur.

17.7 L'objet err

Avec l'objet err (objet interne de VBscript) et surtout ses propriétés, il est possible de se fabriquer un mini outil de déboggage.

err.number | Contient le code d'erreur numérique lorsqu'une erreur se produit. S'il n'y a pas d'erreur, la valeur est 0. Chaque type d'erreur a son propre code.
err.description | Contient une description de l'erreur correspondant au numéro d'erreur.

L'exemple précédent devient :

<HTML>

<BODY>

<SCRIPT language="VBS">

On Error Resume Next

a = 100 / 0

If err.number <> 0 then

MsgBox "Erreur : " & err.number & " " & err.description

End if

</SCRIPT>

</BODY>

</HTML>

On teste s'il y a une erreur (err.number différent de 0). Avec une boite de message, on affiche le numéro de code de l'erreur (err.number) et sa description (err.description).

La boite de message affiche dans le cas présent Erreur : 11 Division by zero

-------------------------------------------------------------------------------------------------------------------------------------

Apprendre le VBscript

www.ccim.be/ccim328/vb/index.htm

Ó copyright 1998

L'auteur :

Van Lancker Luc

Rue des Brasseurs, 22

7700 Mouscron

Belgium

Vanlancker.Luc@ccim.be

Un mot d'encouragement ou un compliment fait toujours plaisir.

Critiques et suggestions seront aussi examinées avec attention.

Du même auteur :

Apprendre le langage Html

Maîtriser le langage Html

Apprendre le Javascript

Apprendre à créer un site

www.ccim.be/ccim328/html/index.htm

www.ccim.be/ccim328/htmlplus/index.htm

www.ccim.be/ccim328/js/index.htm
www.ccim.be/ccim328/site/index.htm


Les feuilles de style

Vu dans ... https://www.lehtml.com/index.htm

Les feuilles de style

Chapitre 1: Concept et utilité

1.1 Présentation

Le concept des feuilles de style n'est pas à proprement parler une nouveauté dans le domaine de la publication Html. Introduit en 1997 par Microsoft avec son Internet Explorer 3.0 (mais elles existaient déjà avec Arena sous Unix), ces feuilles de style n'ont connu qu'un intérêt limité du fait que celles-ci n'étaient pas reconnues par Netscape Navigator 3.0.

Depuis les choses ont bien changé. D'abord les browsers 4.0 de Microsoft et de Netscape reconnaissent tous deux les feuilles de style et surtout, la norme Html 4.0 en a repris le concept (CSS version 1) et le recommande d'ailleurs vivement aux "Web designers".

1.2 Concept

Dans un document d'une certaine importance, il arrive fréquemment que l'on attribue à certains éléments des caractéristiques de mise en forme identiques. Par exemple, les noms de chapitres seront mis en police Arial, en gras et en couleur bleue.

On peut imaginer que l'on puisse donner à cette définition de mise en forme un nom soit "titre" et qu'à chaque nouveau chapitre, plutôt que d'écrire chaque fois le nom du titre et puis de devoir le mettre en Arial, gras, bleu, l'on puisse dire à l'ordinateur, nom du chapitre mais dans la mise en forme que j'ai défini sous le nom de "titre". Cette définition de mise en forme particulière, on va l'appeler feuille de style.

Le concept de feuilles de style [Style Sheets] est né. Il existait déjà dans les traitements de texte comme dans Word de Microsoft (comme par hasard...). Allez dans le menu Format de Word, vous y trouvez Style ! Il ne restait plus qu'à coupler le concept au langage Html par des propriétés spécifiques.

<H1><B><FONT COLOR=blue>Titre1</FONT></B></H1>

<H2><B><FONT COLOR="green">- A -</FONT></B></H2>

<H3><B><FONT COLOR="red">...a....</FONT></B></H3>

<H1><B><FONT COLOR=blue>Titre2</FONT></B></H1>

<H2><B><FONT COLOR="green">- B-</FONT></B></H2>

<H3><B><FONT COLOR="red">...b....</FONT></B></H3>

STYLE des titres STYLE des sous-titres STYLE du texte STYLE des titres STYLE des sous-titres STYLE du texte

Vous remarquez que l'on parle de feuilles de style [ style sheets ] car le but du jeu est d'en définir plusieurs. On parle aussi de feuilles de style en cascade [ Cascading Style Sheets ou CSS ] car en cas de styles identiques, un ordre de priorité sera déterminé par le browser (voir FAQ).

Précisons pour terminer que les feuilles de style ne sont pas une composante directe du langage Html mais un développement à part dans la publication de pages Web.

1.3 Utilité et avantages

· Séparation du contenu et de la mise en forme.

· Cohésion de la présentation tout au long du site avec les feuilles de style externes.

· Modifier l'aspect d'un page ou d'un site sans en modifier le contenu et cela en quelques lignes plutôt que de devoir changer un grand nombre de balises.

· Un "langage" neuf, compréhensible, simple et logique par rapport au Html et à ses différentes versions.

· Une façon d'écriture concise et nette par rapport au Html qui devient vite fouillis.

· Réduire le temps de chargement des pages.

· Palier certaines insuffisances du langage Html (contrôle des polices, contrôle de la distance entre les lignes, contrôle des marges et des indentations (sans devoir utiliser de tableaux ou de balise <DD>...) et ainsi augmenter la créativité des écrivains du Web.

· Permettre le positionnement au pixel près du texte et/ou des images sans passer par les "layers" exclusifs à Netscape 4.0.

1.4 Compatibilité

Les feuilles de style fonctionnent sous :

Explorer 3.0 mais de façon incomplète

Explorer 4.0

Netscape 4.0

Attention !!! Les feuilles de style ne sont pas reprises par Netscape 3.0.

Chapitre 2 : Définition d'un style

La définition de base d'un style est simple :

balise { propriété de style: valeur; propriété de style: valeur }

Exemple :

H3 { font-family: Arial; font-style: italic }

Donc ici, la balise H3 sera en Arial et en italique. Et dans votre document, toutes les balises <H3> auront comme style Arial et italique.

Simple! Mais de nombreux commentaires s'imposent :

· Les feuilles de style portent sur des balises principalement et quelques autres éléments comme par exemple A:link pour un lien non-visité et A:visited pour un lien visité. Comme balises souvent utilisées avec des feuilles de style, on peut citer les en-têtes Hn, P, BODY...

· Les propriétés de style sont entourées par des "{" et pas des [ ou des parenthèses.

· Le couple "propriété de style/valeur" est séparé par un double-point (:).

· Chaque couple "propriété de style/valeur" est séparé par un point-virgule (;).

· Il n'y a pas de limite pour le nombre de couples "propriétés de style/valeur".

· L'espace entre propriétés de style et valeur n'est pas obligatoire mais aide fortement à la lisibilité du code source.

· Pour la lisibilité toujours, vous pouvez écrire vos styles sur plusieurs lignes :

H3 {font-family: Arial;

font-style: italic;

font-color: green}

· On peut attribuer plusieurs valeurs à une même propriété. Dans ce cas, on séparera les différentes valeurs par des virgules.

H3 {font-family: Arial, Helvetica, sans-serif}

· On peut attribuer un même style à plusieurs balises (séparées par des virgules).

H1, H2, H3 {font-family: Arial; font-style: italic}

Chapitre 3 : Styles internes

Il faut maintenant incorporer les styles dans le document Html. Commençons par le plus simple, soit l'incorporation à l'intérieur d'une page. D'où le titre "Styles internes".

3.1 A l'intérieur des balises <HEAD></HEAD>

Cette façon de procéder est de loin la plus commune et la plus logique. D'abord parce que les balises HEAD contiennent des informations pour le browser et les feuilles de style appartiennent à celles-ci. Ensuite parce que l'on rejoint ainsi l'essence même des feuilles de style qui est de séparer les éléments de mise en forme du contenu.

<HTML>

<HEAD>

<STYLE type="text/css">

<!--

La ou les feuille(s) de style

-->

</STYLE>

</HEAD>

<BODY>

· La balise <STYLE> avertit le navigateur que l'on va utiliser des feuilles de style.

· L'attribut type="text/css" informe que ce qui suit est du texte et qu'il s'agit de cascading style sheets (css). Pour l'instant, il s'agit de la seule possibilité mais on peut prévoir à l'avenir d'autres versions de ce "langage".

· La balise Html de commentaires <!-- ... --> empêche que les browsers qui ne connaissent pas les feuilles de style, tentent d'interpréter ces instructions. Les informations à l'intérieur des tags de commentaires seront ignorées par ces browsers.

· Pour vos propres commentaires à propos des feuilles de style, on utilisera la convention désormais classique (C, C++, Javascript...) de /* commentaires */.

3.2 A l'intérieur des balises <BODY></BODY>

On peut aussi utiliser, au coup par coup, les feuilles de style dans le corps (BODY) du document. Cette façon de faire nous paraît illogique et peu conforme à l'esprit des feuilles de style qui est de définir un style déterminé valable pour la globalité du document. Mais elle existe pour quelques utilisations spécifiques...

<HTML>

<BODY>

<H1 style="font-family: Arial; font-style: italic"> blabla </H1>

</BODY>

</HTML>

Signalons :

· que le style Arial, italique n'affectera que cette seule balise H1.

· que la syntaxe est légèrement différente de la précédente.

· que l'écriture : <STYLE type="text/css">H1 { "font-family: Arial; font-style: italic" }</STYLE> fonctionne aussi.

Chapitre 4 : Styles externes

C'est déjà bien de pouvoir définir une présentation de style valable pour une page (styles internes). Mais CSS nous propose mieux. Définir une présentation de style valable pour plusieurs pages et même pour toutes les pages d'un site. Ce qui est possible, en créant une page externe qui regroupera toutes les feuilles de style, et en reliant chaque page à cette page de style.

On crée d'abord, dans le répertoire du site, un fichier avec l'extension .css soit styles.css qui contiendra toutes les feuilles de style.

<HTML>

<HEAD>

--- Les différentes feuilles de style ---

</HEAD>

<BODY>

</BODY>

</HTML>

Ensuite, on crée une page normale soit page1.htm (bien entendu dans le même répertoire que le fichier styles.css).

<HTML>

<HEAD>

<LINK rel=stylesheet type="text/css" href="styles.css">

<HEAD>

· La balise <LINK> avertit le browser qu'il faudra réaliser un lien.

· L'attribut rel=stylesheet (sans s et sans guillemets) précise qu'il y trouvera une feuille de style externe.

· L'attribut type="text/css" précise que l'information est du texte et du genre cascading style sheets (css).

· L'attribut classique de lien href=" ... " donne le chemin d'accès et le nom du fichier à lier.

Chapitre 5 : Les classes et les ID

5.1 Notion de classes

Mais on désire parfois affecter des styles différents à une même balise. Pas de problèmes, les feuilles de style vous proposent la solution des classes [class].

La syntaxe est ici aussi des plus simple.

La définition d'un style était :

balise { propriété de style: valeur }

Elle devient :

balise.nom_de_classe { propriété de style: valeur }

remarquez le point entre balise et nom_de_classe

Ou, comme la mention de la balise est facultative,

.nom_de_classe { propriété de style: valeur }

Attention! L'emploi du point (.) devant le nom de classe est indispensable.

Pour appeler l'effet de style dans le document, on ajoute le nom de la classe à la balise.

<balise class="nom_de-classe"> .... </balise>

Un exemple ?

Je souhaite mettre ce qui est important dans le texte en gras et en bleu. Je crée la classe .essentiel :

.essentiel { font-weight: bold; font-color: #000080 }

Et dans le document Html, il suffit d'appeler la classe .important quand cela se révèle nécessaire :

<P class=".essentiel"> ... blabla ... </P>

<H1 class=".essentiel">Titre 1</H1>

<TABLE><TR><TD class=".essentiel">cellule</TD></TD>...

5.2 Notion des ID

Comme le convention nom/point/nom est utilisée aussi en Javascript (voir Apprendre le Javascript du même auteur : www.ccim.be/ccim328/js/index.htm) , il a fallu trouver une autre convention d'écriture lorsqu'on désire utiliser les feuilles de style avec du Javascript. Ce sont les ID, aussi appelés les identifiants.

Les ID fonctionnent exactement comme les classes. Pas mieux, pas plus. C'est la même chose!

La syntaxe est :

#nom_de_ID { propriété de style: valeur }

Et pour l'appeler :

<balise id="nom_de_ID"> .... </balise>

Notons qu'on ne pourra effectuer qu'un seul appel à #nom_de_ID par page. Ainsi,

Pour #essentiel{ ... }

<P id=essentiel> est correct.

Mais si on rencontre dans la même page

<H1 id=essentiel> ce n'est plus correct !

Si vous pensez utiliser des feuilles de style, mais sans vous compliquer la vie avec des scripts, oubliez au plus vite ID et utilisez exclusivement les classes.

Si par contre vous souhaitez utiliser des scripts avec les feuilles de style pour faire du DHTML par exemple (voir plus loin dans le site), la notion de ID vous sera alors indispensable.

Chapitre 6 : <SPAN> et <DIV>

6.1 Utilité

Dernier point, il fallait penser à un système pour "déconnecter" certains morceaux de paragraphe ou plusieurs paragraphes de cette logique d'écriture avec des feuilles de style. Ce sont respectivement les balises SPAN et DIV qui créaient ainsi des petits blocs particuliers dans le document sans devoir repasser par les éléments structurels du Html classique.

Notons que SPAN et DIV s'utilisent toujours avec les classes et les ID.

6.2 SPAN

La balise <SPAN> ... </SPAN> permet d'appliquer des styles à des éléments de texte d'un paragraphe ou si vous préférez à un morceau de paragraphe. Ainsi je voudrais écrire :

Un monde de géants.

<HTML>

<HEAD>

<STYLE type="text/css">

.element{font-size: x-large; color: navy}

</STYLE>

</HEAD>

<BODY>

<P>Un monde de <SPAN class=element>géants</SPAN>.</P>

</BODY>

</HTML>

6.3 DIV

La balise <DIV> ... </DIV> permet de regrouper plusieurs paragraphes ou si vous préférez, de délimiter une zone comportant plusieurs paragraphes.

<HTML>

<HEAD>

<STYLE type="text/css">

.zone{font-size: x-small}

</STYLE>

</HEAD>

<BODY>

La balise <DIV>

<DIV class=zone>

<P>Commentaire :</P>

<P>N'oubliez pas l'attribut class!</P>

</DIV>

</BODY>

</HTML>

Donne comme résultat :

La balise <DIV>

Commentaire :

N'oubliez pas l'attribut class!

Chapitre 7 : Positionner avec CSS

Quel concepteur de pages Web n'a pas laissé échapper quelques jurons bien sentis en essayant, à grand renfort de tableaux, de placer précisément du texte ou une image là où il le désirait ?

Le miracle est arrivé ! Outre le balise <LAYER> (mais qui n'est comprise que par Netscape 4.0), il est désormais possible de positionner, au pixel près, du texte ou une image avec les feuilles de style.

Notons que ce positionnement n'est possible que sous les versions 4 de Netscape et d'Explorer. Et que cette technique est encore un peu hasardeuse à ce jour, surtout sur le plan de la compatibilité avec les deux browsers susnommés.

Le positionnement des éléments par les feuilles de style est repris sous la spécification CSS-P.

7.1 Position absolue ou relative

La position absolue {position: absolute} se détermine par rapport au coin supérieur gauche de la fenêtre du browser. Les coordonnées de ce point sont top = 0 et left = 0. Les coordonnées d'un point s'expriment en pixels, de haut en bas pour top et de gauche à droite pour left.

La position relative {position: relative} se détermine par rapport à d'autres éléments de la page, par exemple un élément du code Html.

Précisons que l'on utilisera presque toujours le positionnement absolu car plus facile et plus sûr.

7.2 Positionner du texte

Plaçons en position absolue le texte "Publication Html" à 50 pixels du haut de la fenêtre (top) et à 150 pixels à gauche (left).

<HTML>

<HEAD>

<STYLE type="text/css">

.pub{position: absolute; top: 100px; left: 25px;

color: yellow; font-size: x-large; font-weight: bold;}

</STYLE>

</HEAD>

<BODY>

<DIV class=pub> Publication Html </DIV>

</BODY>

</HTML>

Ajoutons que plusieurs encodages sont possibles.

7.3 Positionner une image

Plaçons l'image htmlplus.gif en position absolue à 50 pixels de haut de la fenêtre (top) et à 100 pixels à gauche (left). Les dimensions de l'image sont width=242 et height=84.

<HTML>

<BODY>

<span style="position: absolute; top: 50px; left: 100px; width: 242px;

heigth: 84px;">

<IMG src="htmlplus.gif">

</span>

</BODY>

</HTML>

Spécifiez toujours les propriétés width et heigth avec les feuilles de style car par défaut, Netscape 4.0 et Explorer 4.0 ne réagissent pas de la même façon.

Ajoutons que plusieurs encodages sont possibles.

7.4 Superposer du texte sur une image

Reprenons l'image htmlplus.gif et on y superposera le nom de l'auteur de ce tutorial, au pixel près dans la barre qui souligne le terme Html.

<HTML>

<BODY>

<span style="position: absolute; top: 50px; left: 100px; width: 242px; heigth: 84px;">

<IMG src="htmlplus.gif">

</span>

<span style="position: absolute; top: 96px; left: 145px;

color: yellow; font-size: x-small; font-weight: bold;">

Van Lancker Luc

</span>

</BODY>

</HTML>

Ajoutons que plusieurs encodages sont possibles.

Chapitre 8 : Mini FAQ sur les styles

8.1 Les feuilles de style sont-elles "case sensitive" ?

Non, les feuilles de style ne sont pas sensibles à la case [case insensitive]. Ecrire CLASS ou class ou Class est donc équivalent. Cependant les éléments qui ne sont pas sous le contrôle des feuilles de style comme les noms de police ou les URLs peuvent être case sensitive. Pour le système d'exploitation (et je pense à Unix), Arial n'est peut-être pas égal à arial, de même IMAGE.gif n'est pas forcément égal à image.gif.

8.2 Quels caractères peut-on utiliser en CSS ?

Les noms des feuilles de style, des sélecteurs, des classes et ID peuvent contenir les lettres de a-z ou de A-Z, les chiffres de 0-9, le trait d'union et le caractère _. Les noms ne peuvent commencer par un chiffre ou un tiret. La documentation officielle affirme que les caractères spéciaux ASCII 160-255 peuvent être utilisés. Mais cela ne fonctionne pas chez moi. On prendra vite l'habitude (voir les langages de programmation) de les éviter.

8.3 Peut-on utiliser dans la même page, à la fois des éléments de style CSS et Html ?

Oui. Les feuilles de style seront ignorées par les browsers qui ne supportent pas les feuilles de style. Et c'est tant mieux pour la compatibilité de votre site sous les différents navigateurs.

8.4 Qui l'emportent : les attributs Html ou les propriétés CSS ?

Les propriétés des feuilles de style l'emportent sur les attributs Html. Si les deux sont spécifiés, les attributs Html seront affichés avec les browsers qui ne supportent pas les CSS et n'auront aucun effet avec les browsers qui supportent les feuilles de style.

Ainsi, <H3 style="color: red"><B><FONT COLOR="navy">Cascading Style Sheets</FONT></B></H3>

apparaîtra en rouge sous un browser compatible CSS (par exemple Microsoft Explorer).

et en bleu sous un browser qui ne reconnaît pas les feuilles de style (par exemple Netscape 3.0).

Ce qui est très bien pour la compatibilité mais qui ne simplifie pas la clarté de l'écriture.

8.5 Et s'il y a concurrence entre plusieurs éléments de style ?

En cas de concurrence entre plusieurs éléments de style, intervient alors la notion de "cascade" ou d'ordre de priorité.

La concurrence entre plusieurs éléments de style peut provenir des différentes possibilités de localisation de feuilles de style :

dans un fichier externe avec l'extension css.

dans la balise HEAD du document.

dans le BODY du document.

La règle de priorité appliquée par le browser sera d'appliquer pour la présentation du document la feuille de style la plus proche de l'élément. Ainsi, un style spécifié dans le BODY sera retenu par rapport à un style déclaré dans un fichier externe.

Il y a cependant moyen de contourner ces règles de priorité par la déclaration ! important;. Du genre BODY {background: white ! important; color: black}. Nous en resterons là dans le cadre de ce tutorial.

Chapitre 9 Liste des propriétés

La liste complète (et officielle) des propriétés et recommandations concernant les feuilles de style version 1, peut être trouvée à l'adresse http://www.w3.org/pub/WWW/TR/REC-CSS1 . En voici une sélection :

9.1. Les styles de police

font-family

définit un nom de police ou une famille de police

<nom> ou <famille>

police précise (Arial, Times, Helvetica...) ou
famille (serif, sans-serif, cursive, fantasy, monospace)

H3 {font-family: Arial}

font-style

définit le style de l'écriture

normal ou italique ou oblique

H3 {font-style: italic}

font-weight

définit l'épaisseur de la police

normal ou bold ou bolder ou lighter ou valeur numérique soit

(100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900)

P {font-weight: bold}

font-size

définit la taille de la police

xx-small ou x-small ou small ou médium ou large ou x-large ou xx-large

ou larger ou smaller

ou taille précise en points (pt), inches (in), centimètres (cm), pixels (px)

ou pourcentage (%)

P {font-size: 12pt}

font-variant

définit une variante par rapport à la normale

normal ou small-caps

P {font-variant: small-caps}

font

raccourci pour les différentes propriétés de police

P {font: bold italic}

9.2. Les styles du texte

text-align

définit l'alignement du texte

left ou center ou right

H1 {text-align: center}

text-indent

définit un retrait dans la première ligne d'un bloc de texte

souvent utilisé avec <P>, n'oubliez pas dans ce cas </P>.

spécifié en inches (in) ou en centimètres (cm) ou en pixels (px)

P {text-indent: 1cm}

text-decoration

définit une décoration (?) du texte, soit barré, clignotant, etc.

blink ou underline ou line-through ou overline ou none

A:visited {text-decoration: blink}

text-transform

définit la casse du texte (majuscule, minuscule)

uppercase (met les caractères en majuscules) ou

lowercase (met les caractères en minuscules) ou

capitalize (met le premier caractère en majuscule)

P {text-transform: uppercase}

color

définit la couleur du texte

par exemple en hexadécimal

H3 {color: #000080}

word-spacing

définit l'espace entre les mots

en points (pt), inches (in), centimètres (cm), pixels (px)

ou pourcentage (%)

P {word-spacing: 5pt}

letter-spacing

définit l'espace entre les lettres

spécifié en points (pt), inches (in), centimètres (cm), pixels (px)

ou pourcentage (%)

P {letter-spacing: 2pt}

line-height

définit l'interligne soit l'espace entre les lignes du texte

en points (pt), inches (in), centimètres (cm), pixels (px)

ou pourcentage (%)

P {line-height: 10pt}

width

détermine la longueur d'un élément de texte ou d'une image

en points (pt), inches (in), centimètres (cm), pixels (px)

ou pourcentage (%)

H1 {width: 200px}

height

détermine la hauteur d'un élément de texte ou d'une image

en points (pt), inches (in), centimètres (cm), pixels (px)

ou pourcentage (%)

H1 {heigh: 100px}

white-space

espace ou blanc

normal ou pre ou nowrap

PRE {white-space: pre}

9.3. Les arrière-plans

background-color

définit la couleur de l'arrière-plan

couleur (par exemple en hexadécimal) ou transparent

H1 {background-color: #000000}

background-image

définit l'image de l'arrière-plan

URL de l'image

BODY {background-image: image.gif}

background-repeat

définit la façon de répéter l'image d'arrière-plan

repeat ou no-repeat ou repeat-x (x = nombre de répétitions horizontales) ou

repeat-y (y = nombre de répétitions verticales

P {background-image: image.gif; background-repeat: repeat-4}

background-attachment

spécifie si l'image d'arrière-plan reste fixe avec les déplacements de l'écran

scroll ou fixed

BODY {background-image: image.gif; background-attachement: fixed}

background-position

spécifie la position de l'image d'arrière-plan par rapport au coin

supérieur gauche de la fenêtre

{1, 2}

{top ou center ou bottom , left ou center ou right}

ou en points (pt), inches (in), centimètres (cm), pixels (px)

ou pourcentage (%)

BODY {background-image: img.gif; background-position: right top}

background

raccourci pour les différentes propriétés d'arrière-plan

P {background: image.gif fixed repeat}

9.4. Les marges

margin-top

détermine la valeur de la marge supérieure

en unité de longueur ou auto

{ margin-top: 5px }

margin-right

détermine la valeur de la marge droite

en unité de longueur ou auto

{ margin-right: 5px }

margin-bottom

détermine la valeur de la marge inférieure

en unité de longueur ou auto

{ margin-bottom: 5px }

margin-left

détermine la valeur de la marge gauche

en unité de longueur ou auto

{ margin-left: 5px }

margin

regroupe les différentes propriétés de la marge

9.5. Les bords et les "enrobages"

border-top-width

donne l'épaisseur du bord supérieur

thin ou medium ou thick ou spécifié par l'auteur

H3 {border-top-width: thin}

border-right-width

donne l'épaisseur du bord droit

thin ou medium ou thick ou spécifié par l'auteur

H3 {border-right-width: medium}

border-bottom-width

donne l'épaisseur du bord inférieur

thin ou medium ou thick ou spécifié par l'auteur

H3 {border-bottom-width: thick}

border-left-width

donne l'épaisseur du bord gauche

thin ou medium ou thick ou spécifié par l'auteur

H3 {border-left-width: 0.5cm}

border-width

regroupe les différentes propriétés de border-width

border-color

détermine la couleur de la bordure

H3 {border-color: yellow}

border-style

détermine le style du trait de la bordure

none ou solid ou dotted ou dashed ou double

ou groove ou ridge ou inset ou outset

{border-style: solid dashed}

border

regroupe toutes les propriétés des bords

padding-top

valeur de remplissage haut entre l'élément et le bord

en points (pt), inches (in), centimètres (cm), pixels (px)

ou pourcentage (%)

H3 {padding-top: 3px}

padding-right

valeur de remplissage droite entre l'élément et le bord

en points (pt), inches (in), centimètres (cm), pixels (px)

ou pourcentage (%)

H3 {padding-right: 3px}

padding-bottom

valeur de remplissage bas entre l'élément et le bord

en points (pt), inches (in), centimètres (cm), pixels (px)

ou pourcentage (%)

H3 {padding-bottom: 3px}

padding-left

valeur de remplissage gauche entre l'élément et le bord

en points (pt), inches (in), centimètres (cm), pixels (px)

ou pourcentage (%)

H3 {padding-left: 3px}

padding

regroupe les différentes propriétés de remplissage

9.6. Les listes

list-style-type

détermine le type de puces ou de numérotation

disc ou circle ou square

decimal ou lower-roman ou upper-roman ou lower-alpha ou upper-alpha

OL {list-style-type: square}

list-style-image

permet de remplacer les puces par une image

url ou none

OL {list-style-image: image.gif}

list-style-position

spécifie si les puces sont à l'intérieur ou à l'extérieur du texte

inside ou outside

UL {list-style-position: inside}

list-style

regroupe toutes les propriétés de liste

Les feuilles de style

www.ccim.be/ccim328/htmlplus/idxstyle.htm

© copyright 1998

Van Lancker Luc
Rue des Brasseurs, 22
7700 Mouscron
Belgium

Vanlancker.Luc@ccim.be


Transitions

Vu dans ... http://www.gaudry.be/html-transitions.html

Les transitions de pages Web

Table des matières

De la méme manière que nous pouvons déterminer des transitions entre une présentation 1 , nous pouvons réaliser différents effets de transition de pages avec les balises meta.

Information (14/02/2010)

J'avais réalisé cette page le 19/03/2002, dans la fougue de la découverte des possibilités du Web. Je laisse donc ces pages à titre d'information, mais avec le recul je ne suis pas du tout convaincu, car les différents effets présentés ici ne sont valables que pour le navigateur Internet Explorer.

Exemple de syntaxe

  1. < meta http-equiv = "Page-Enter" content = "blendTrans(Duration=1.0)" >
  2. < meta http-equiv = "Page-Exit" content = "blendTrans(Duration=1.0)" >

Paramètres communs

Nous pouvons utiliser différents paramètres qui vont déterminer le type de transition que nous désirons, par exemple à l'aide de blendTrans ou revealTrans. Certains paramètres sont communs aux deux types d'effets de transistions, comme le moment de l'effet :

  • Page-enter : pour une transition à l'ouverture de la page.
  • Page-exit : pour une transition à la fermeture de la page.

blendTrans

blendTrans permet une transition d'un élément vers un autre. Le plus souvent associé à un script.

Par exemple, un script qui produit un effet lors d'un click sur un élément de la page.

blendTrans s'applique aux éléments suivants :

  • body
  • div
  • span
  • input
  • button
  • textarea
  • marquee

revealTrans

  1. < meta http-equiv = "Page-Enter" content = "revealtrans(duration=4.0, transition=0)" >
  2. < meta http-equiv = "Page-Exit" content = "revealtrans(duration=4.0, transition=0)" >

revealTrans s'applique aux éléments suivants :

  • body
  • div
  • span
  • input
  • button
  • textarea
  • marquee

Paramètres :

  • Duration : indique que la durée de la transition en secondes.
  • Transition : désigne l'effet de transition.

Transitions possibles avec revealTrans

Showing 1 to 24 of 24 entries
# | Effet | Nom anglais | Implémentation alternative
0 | Carré de l'intérieur vers l'extérieur | Box in | DXImageTransform.Microsoft.Iris( irisstyle='SQUARE', motion='in')
1 | Carré de l'intérieur vers l'extérieur | Box out | DXImageTransform.Microsoft.Iris( irisstyle='SQUARE', motion='out')
2 | Cercle de l'intérieur vers l'extérieur | Circle in | DXImageTransform.Microsoft.Iris( irisstyle='CIRCLE', motion='in')
3 | Cercle de l'intérieur vers l'extérieur | Circle out | DXImageTransform.Microsoft.Iris( irisstyle='CIRCLE', motion='out')
4 | Linéaire du bas vers le haut | Wipe up | DXImageTransform.Microsoft.Blinds( direction='up', bands=1)
5 | Linéaire du haut vers le bas | Wipe down | DXImageTransform.Microsoft.Blinds( direction='down', bands=1)
6 | Linéaire de gauche vers la droite | Wipe right | DXImageTransform.Microsoft.Blinds( direction='right', bands=1)
7 | Linéaire de la droite vers la gauche | Wipe left | DXImageTransform.Microsoft.Blinds( direction='left', bands=1)
8 | Lames de gauche vers la droite | Vertical blinds | DXImageTransform.Microsoft.Blinds( direction='right')
9 | Lames du haut vers le bas | Horizontal blinds | DXImageTransform.Microsoft.Blinds( direction='down')
10 | Damier de gauche vers la droite) | Checkerboard across | DXImageTransform.Microsoft.CheckerBoard( direction='right')
11 | Damier du haut vers le bas | Checkerboard down | DXImageTransform.Microsoft.CheckerBoard( direction='down')
12 | Pixellisation | Random dissolve | DXImageTransform.Microsoft.RandomDissolve
13 | Linéaire des extémités latérales vers le centre | Split vertical in | DXImageTransform.Microsoft.Barn( orientation='vertical', motion='in')
14 | Linéaire du centre vers les extémités latérales | Split vertical out | DXImageTransform.Microsoft.Barn( orientation='vertical', motion='out')
15 | Linéaire du haut et du bas vers le centre | Split horizontal in | DXImageTransform.Microsoft.Barn( orientation='horizontal', motion='in')
16 | Linéaire du centre vers le haut et le bas | Split horizontal out | DXImageTransform.Microsoft.Barn( orientation='horizontal', motion='out')
17 | Ligne diagonale du point supérieur droit vers le point inférieur gauche | Strips left down | DXImageTransform.Microsoft.Strips( motion='leftdown')
18 | Ligne diagonale du point inférieur droit vers le point supérieur gauche | Strips left up | DXImageTransform.Microsoft.Strips( motion='leftup')
19 | Ligne diagonale du point supérieur gauche vers le point inférieur droit | Strips right down | DXImageTransform.Microsoft.Strips( motion='rightdown')
20 | Ligne diagonale du point inférieur gauche vers le point supérieur droit | Strips right up | DXImageTransform.Microsoft.Strips( motion='rightup')
21 | Bande horizontale | Random bars horizontal | DXImageTransform.Microsoft.RandomBars( orientation='horizontal')
22 | Bande verticale | Random bars vertical | DXImageTransform.Microsoft.RandomBars( orientation='vertical')
23 | Aléatoire | Random |
# | Effet | Nom anglais | Implémentation alternative
  • Colonne 1 ( # ) : Numéro de transition (#) à utiliser dans transition=

L'infobrol sous son ancienne version 2 vous permettait de tester les effets de balises meta si vous naviquez avec internet explorer. Pour cela, sélectionnez sur une des anciennes pages le style "transition" dans le menu latéral.

Table des matières Haut

Document créé le 19/03/2002, dernière modification le 29/10/2019
Source du document imprimé : https://www.gaudry.be/html-transitions.html

L'infobrol est un site personnel dont le contenu n'engage que moi. Le texte est mis à disposition sous licence CreativeCommons(BY-NC-SA). Plus d'info sur les conditions d'utilisation et sur l'auteur.

Notes

  1. ↑ Présentation : Par exemple un diaporama réalisé avec Open Office Présentation ou Microsoft PowerPoint.

  2. ↑ Version Infobrol : Comme c'est le brol sur le site, certaines pages sont encore sous l'ancienne version. A terme ces pages disparaîtront peu à peu.


MorphoGenesis dynamique : Transition entre page web (revealTrans et blendTrans) [Forum - Règles et savoir-vivre sur FrXoops] - Communauté Francophone des Utilisateurs de Xoops

MorphoGenesis dynamique : Transition entre page web (revealTrans et blendTrans) [Forum - Règles et savoir-vivre sur FrXoops]

MorphoGenesis dynamique : Transition entre page web (revealTrans et blendTrans)

Utilisant le thème Morphogenesis depuis peu (merci kris et autres concepteurs de ce gabarit), j'ai voulu me pencher sur les transitions d'entrée et de sortie de page, car le choix des transitions utilisé par le modèle ne me plaisait pas entièrement (transition aléatoire).

Après quelques recherches sur le web voici ce que j'ai trouvé :

Ces transitions sont gérées par des filtres dynamiques (IE, Avant Browser, Crazy Browser, MyIE, Maxton ... mais pas Netscape saus erreur de ma part).

Elles sont déclarées dans le header cntenu dans le fichier theme.html de votre thème (morphoGenesis dynamique) :
<!--  Pour la transition des pages  -->
< meta http - equiv = "Page-Enter"  content = "revealtrans(duration=1, transition=23)"  />
< meta http - equiv = "Page-Exit"  content = "revealtrans(duration=1, transition=23)"  />

Dans le modèle à dispo, c'est le type '23' qui a été retenu (transitions aléatoire). Il en existe en fait exactement 23, et peuvent être choisie, si l'un ou l'autre vous plait mieux. Il suffit pour cela de remplacer la valeur 23, par une autre valeur selon cette liste

http://fr.selfhtml.org/dhtml/modeles/ ... namiques.htm#reveal_trans

Et comme vous l'aurez deviné, la valeur correspondant assignée à la variable 'duration' peut aussi être modifié pour agir sur la durée de l'effet.

Un autre filtre existe, il permet de passer d'une page à l'autre en 'fondu-enchainé'. Il s'agit de la commande blendTrans qui doit aussi être déclarée, comme le filtre précédent :

<!--  Pour la transition des pages  -->
< meta http - equiv = "Page-Enter"  content = "blendtrans(duration=1)"  />
< meta http - equiv = "Page-Exit"  content = "blendtrans(duration=1)"  />

C'est cette possibilité que j'ai choisi pour mon site ici

A noter encore que ces transition peuvent aussi être utilisées pour l'entrée ou la sortie de votre votre site, comme ceci :
- Pour utiliser l'effet en entrée de page, mettez Page-Enter
- Pour utiliser l'effet en sortie de page, mettez Page-Exit
- Pour utiliser l'effet en entrée de site, mettez Site-Enter
- Pour utiliser l'effet en sortie de site, mettez Site-Exit

Voilà, en espérant avoir publié la résolution de mon problème au bon endroit et que cela puisse aider l'un ou l'autre...


Les effets de transition en HTML - Formation Ville de Bruxelles - Initiation au langage HTML

 Guy Cuvelier - Professeur et Responsable Informatique - Formateur Ville de Bruxelles
Initiation au langage HTML

Les effets de transition des pages HTML

Depuis les dernières évolutions des navigateurs et du langage HTML, il est maintenant très facile de créer des effets de transition spectaculaires entre les pages de votre site. Il existe 24 effets de transitions préprogrammés dans les derniers navigateurs.

Les balises sont à placer entre les balises <HEAD> de votre page HTML.

CODE SOURCE :
<meta HTTP-EQUIV="Page-Enter" CONTENT="revealtrans(duration= 4.0 , transition= 0 )">
<meta HTTP-EQUIV="Page-Exit" CONTENT="revealtrans(duration= 4.0 , transition= 0 )">

EXPLICATION DE LA SYNTAXE :
<meta HTTP-EQUIV="Page-Enter" = définit l'effet de transition à l'entrée de la page
<meta HTTP-EQUIV="Page-Exit" = définit l'effet de transition à la sortie de la page
CONTENT="revealtrans = balise qui lance l'effet de transition
Duration= 4.0 = durée de l'animation en seconde
transition= 0 à 23 numéro spécifique à la transition choisie -> 0 = Effet "Box in"

Les 24 effets de transition sont :
  1. Effet "Box out"
  2. Effet "Circle in"
  3. Effet "Circle out"
  4. Effet "Wipe up"
  5. Effet "Wipe down"
  6. Effet "Wipe right"
  7. Effet "Wipe left"
  8. Effet "Vertical blinds"
  9. Effet "Horizontal blinds"
  10. Effet "Checkerboard across"
  11. Effet "Checkerboard down"
  12. Effet "Random dissolve"
  13. Effet "Split vertical in"
  14. Effet "Split vertical out"
  15. Effet "Split horizontal in"
  16. Effet "Split horizontal out"
  17. Effet "Strips left down"
  18. Effet "Strips left up"
  19. Effet "Strips right down"
  20. Effet "Strips right up"
  21. Effet "Random bars horizontal"
  22. Effet "Random bars vertical"
  23. Effet "Random all transition effects"

Testez-les !...


Attribut de Style filter

L'Attribut de Style filter

I Effets Statiques et Effets Dynamiques par l'attribut de style "filter"

Selon les plateformes et les versions, "filter" permet des effets faciles et séduisants de présentation :

  • Des présentations statiques :
    • ombre,
    • effet miroir,
    • opacité , . . .
  • Des effets dynamiques :
    • mouvement,
    • transition

II Tous les éléments ne supportent cet attribut :

Seuls les éléments suivant réagissent à son emploi (ces éléments définissent un espace rectangulaire sur lequel le navigateur peut agir):

  • BODY
  • BUTTON
  • DIV (impérativement ses attributs de style height et width doivent être renseignés ou bien être déclaré en position 'absolute')
  • IMG
  • INPUT
  • MARQUEE
  • SPAN (impérativement ses attributs de style height et width doivent être renseignés ou bien être déclaré en position 'absolute')
  • TABLE
  • TD
  • TEXTAREA
  • TH

Des éléments comme Applets, IFRAME, SELECT, INPUT , P , Hn, EM, STRONG ne réagissent pas à l'emploi de 'filter'.

II Les effets possibles et leurs méthodes sont :

alpha() | degré d'opacité (0 : transparent , 100 : opaque) | Statique
blur() | donne du mouvement (paramètres à ajouter) | Dynamique
chroma() | couleur transparente | Statique
dropSchadow() | une ombre paramètrable (exemple :Pulsation) | Statique
flipH() | effet miroir horizontal | Statique
flipV() | effet miroir vertical | Statique
glow() | éclat (1-255) | Statique
grayscale() | enlève la couleur sans la luminosité | Statique
invert() | inversion | Statique
light() |  | Statique
mask() | masque transparent en paramètre la couleur (triplet hexa) | Statique
shadow() | crée une silouhette, en paramètre sa position | Statique
wave() | effet de distorsion selon les paramètres | Statique
xRay() | ne garde que les bords | Statique
blendTrans() | effacement selon le paramètre | Statique
realTrans() | 24 effets de transition d'affichage (voir exemples) | Dynamique

III Tous les effets de la transition 'revealTrans' d'image ou de texte

Les paramètres du filtre revealTrans sont le type de transition et le délai d'exécution , par exemple

<IMG ID="mon_image" width=200 height=200 src="freedge.bmp" style="filter:revealTrans(Duration=3.3, Transition=8);">

On les manipule dynamiquement par :

mon_image.style.filter='revealTrans(Transition=5)'

IV Syntaxe

Un filtre est un objet, il est défini par le style ou dynamiquement par le modèle objet. Il peut être mis en action par des méthodes.

1) La syntaxe des feuilles de style CSS

filterType1(paramNam1 = value1, paramNam2 = value2, . . .)    filterType2(paramNam3 = value3, . . .)

Par exemple :

<div align="center" id="ombre" style="FILTER: DropShadow(Color=#C0C0C0, OffX=0, OffY=0); FONT: bold 0pt Arial; HEIGHT: 100px; WIDTH: 600px ; LEFT: 100px; TOP: 200px" >

2) La collection "filters"

les filtres d'un élément donné forme une collection : objet.filters.item(index) ou objet.filters[index] ou ,
exemple : mon_Img.filters.item(0) représente le premier filtre de l'élément mon_Img

3) Modèle Objet

Les filtres d'un élément sont susceptibles d'être manipulées par des méthodes par les syntaxes suivantes :

document.all.element_id.style.filter.methode ou par objet.filters[index].methode

par exemple mon_Img.filters[0].Play() ;

V Script de mise en oeuvre des effets dynamiques

Pour que la transition est lieu entre 2 images, 2 textes, etc. . il faut :

  • Appeler la méthode 'apply' sur le 'filter' de la collection 'filters' de l'élément : mon_element.filters[1].apply()
  • Charger la nouvelle image ou le nouveau texte : IMG SRC='ma_nouvelle_image.gif'
  • Appeler la méthode 'play' pour exécuter la transition mon_element.filters[1].play()

VI Les transitions inter-pages : la balise META du HEAD

Les effets de transitions exposés peuvent affecter toute la page.En plaçant la balise META dans le HEAD on peut choisir un effet de transition et son délai d'exécution.Par exemple

<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=1)">

<META http-equiv="Page-Exit" CONTENT="RevealTrans(Duration=2.500,Transition=6)">


Html - Les balises META et le référencement - Utilité

Vu dans ... https://www.lehtml.com/htmlplus/metapres.htm

Les balises META et le référencement
Utilité

Présentation

Véritable "sac à malice" du concepteur de sites Web, ces mystérieuses balises META feront de votre site une gentille oeuvre d'amateur ou lui donneront la signature d'un site de "pro".

Conformément à la philosophie du Html, les éléments relatifs au document sont dissociés du corps du document lui-même et repris dans la zone d'en-tête (c-à-d entre les balises <HEAD> et </HEAD>). Les balises META apportent une série d'informations relatives à la teneur de votre page Web et sont donc toujours comprises entre les balises <HEAD>.

Les informations ainsi apportées intéressent :

    • principalement le référencement de votre site et les moteurs de recherche.
    • un peu vos lecteurs (avertis bien entendu).
    • et accessoirement le browser ou le navigateur.
Les moteurs de recherche

Quand on apprend que plus de la moitié des utilisateurs du Web passent par des moteurs de recherche, il importe de soigner le référencement de son site pour y apparaître de façon correcte et si possible en rang utile.

Au fil de vos "joggings" sur le Web, vous ne pouvez pas ne pas avoir rencontré des sites référencés de cette façon sibylline et peu informative :

No title
<FRAMESET><FRAME ...><FRAME ...></FRAMESET><NOFRAMES>Ce site comporte des frames</NOFRAMES>

ou si vous souhaitez une variante :

Untitled
<SCRIPT LANGUAGE="JAVASCRIPT"><!--function animate(form){if (!var). etc..//--></SCRIPT>
Les lecteurs

Ne vous est-il jamais arrivé, surfeur pressé, d'avoir enregistré un page jugée intéressante et d'avoir, par la suite, voulu désespérément retrouver l'adresse de la page d'accueil du site ou l'adresse e-mail de l'auteur ?

De judicieuses balises META peuvent, entre autres choses, offrir ce petit plus à vos lecteurs.
Le navigateur

Rares mais au combien spectaculaires, certaines balises META sont directement interprétées par le navigateur pour, par exemple, charger automatiquement une page Html après x secondes, effectuer une transition style PowerPoint ou forcer le rechargement d'une page sur le réseau bien que déjà présente dans le cache.

Mais on entre ici dans le déplaisant domaine du "Cela fonctionne sous le browser Machin version x mais pas sous le browser Chose version y"... Sans commentaires !


Html - Les balises META et le référencement - Les META utiles

Vu dans ... https://www.lehtml.com/htmlplus/metautil.htm

Les balises META et le référencement
Les utiles

<META NAME="author" CONTENT="nom de l'auteur">

Cette balise est d'une utilité discutable car rares sont les moteurs de recherche en tiennent compte. A ma connaissance, seul Nomade fournit l'URL du site après avoir introduit le nom de l'auteur.

Il n'empêche qu'il est d'une légitime fierté de signer son oeuvre. N'est-il pas ?
<META NAME="Copyright" CONTENT="Copyright © date nom">

Il ne m'importe pas de discuter ici de la valeur juridique et pratique d'une mention de copyright sur le Web. D'autres sites s'en chargent.

Il me plaît cependant de noter que dans les e-mails reçus, il n'est pas rare que des étudiants ou des formateurs me demandent de pouvoir reproduire tout ou partie de mon site. Une règle élémentaire de la Netiquette est de respecter le copyright. "Le gratuit n'est pas forcément sans valeur".
<META NAME="Distribution" CONTENT="global, iu ou local">

Cette balise indique la destination de l'information de la page. Soit qu'elle est "globale" et donc destinée à être largement diffusée, d'un usage interne (iu pour Internal Use) ou qu'elle est "locale" et donc à diffusion restreinte.
<META NAME="Generator" CONTENT="nom de l'éditeur Html utilisé">

Aucune influence, ni pour les moteurs de recherche, ni pour le navigateur utilisé. Cette information intéresse cependant au plus au point les responsables marketing des sociétés proposant des éditeurs Html pour calculer la part de marché de leur produit. Alors, pourquoi pas si cela les amuse...
<META NAME="Rating" CONTENT="Destination de votre audience">

Permet de définir le contenu de votre site. Les appréciations sont General, Mature, Restricted ou 14 years pour respectivement tout public, adulte, accès restreint ou 14 ans.

Cet indice d'audience n'a aucune influence directe.
<META NAME="Robots" CONTENT="instructions pour les robots">

Par cette balise vous pouvez indiquez aux robots de recherche automatique si vous souhaitez que votre site soit ou ne soit pas indexé par eux.

Les instructions sont :

    • All (défaut) permet aux robots d'indexer vos pages et de suivre les liens hypertextes d'une page à l'autre.
    • None dira aux robots de ne pas indexer vos pages et de ne pas suivre les liens.
    • Index indique que vos pages peuvent être indexées par les robots.
    • NoIndex pour que les robots ne procèdent à aucune d' indexation.
    • Follow donne la permission aux robots de suivre les liens hypertextes des pages
    • NoFollow pour le contraire.

Exemples :
<META NAME="Robots" CONTENT="None">
<META NAME="Robots" CONTENT="Index,Nofollow">

Cette balise est reconnue par tous les robots de recherche automatique.
<META HTTP-EQUIV="Content-language" CONTENT="fr">

Cette balise déclare la langue utilisée dans le document Html. De plus en plus utile, maintenant que des monteurs de recherche anglo-saxons (et non des moindres comme Altavista et Hotbot) ont inclus la langue dans leurs critères de recherche.
<META HTTP-EQUIV="Reply-to" CONTENT="votre adresse e-mail">

Cette balise permet au lecteur averti de connaître votre adresse e-mail si elle n'apparaît pas sur la page qu'il consulte (peut-être hors connexion si elle a été préalablement enregistrée). Finalement, il est peut-être plus utile de donner son adresse électronique que son nom.
<META HTTP-EQUIV="Reply-to" CONTENT="URL de votre page d'accueil">

Variante de la balise précédente. Il est parfois utile de rappeler l'adresse de la page d'accueil de votre site pour ceux qui y sont entrés par une des pages de celui-ci.


Html - Les balises META et le référencement - Les META indispensables

Vu dans ... https://www.lehtml.com/htmlplus/metaindi.htm

Les balises META et le référencement
Les indispensables

<META NAME="keywords" CONTENT="mot-clé1,mot-clé2,mot-clé3,...">

S'il n'en fallait qu'une, ce serait assurément celle-là ! Tous les moteurs de recherche l'utilisent.

Quelques commentaires s'imposent cependant :

Les mots-clés doivent être séparés par une virgule. L'auteur préconise de ne pas mettre d'espaces (bien que cela se rencontre chez des webmestres confirmés) afin d'éviter toute confusion lors des recherches par mot-clé.
On parle dans la littérature d'une limitation à 1000 mots-clés. Plus qu'il n'en faut.
On conseille aussi de mettre tous les mots-clés en minuscules pour éviter les problèmes selon que le moteur de recherche tient compte de la " casse ", c'est-à-dire de la différence entre majuscules et minuscules (en anglais " case sensitive " ou non).
Tout l'art consiste à trouver les bons mots-clés relatifs au contenu de votre site. Mettez-vous à la place de vos lecteurs potentiels. Quels mots, quels synonymes, quelles alternatives peuvent être utilisés pour décrire votre site ?
De grâce, éviter de mettre des mots-clés "bidon" qui sont bien entendu très attirants mais sans rapport avec votre site.
La tentation est grande de répéter un certain nombre de fois un même mot-clé pour espérer un meilleur classement. Par exemple, <META NAME="keywords" CONTENT="html,html, html,html,html>. Désolé pour vous mais ce truc a vécu et est maintenant pénalisé [spam] par les moteurs de recherche.

<META NAME="description" CONTENT="une brève description de la page">

Cette description sera pertinente, attirante et brève. En effet, selon les moteurs de recherche seuls les 150 à 240 premiers mots seront repris. Bavards s'abstenir.
<TITLE> ... </TITLE>

Les moteurs de recherche tiennent fortement compte des titres des documents. Il faut impérativement en mettre sur toutes les pages d'un site. Même pour les pages qui n'apparaissent pas directement comme les sous-pages d'une page de frames !

On dit également que le fait de reprendre un ou des mot(s)-clé(s) dans le titre de toutes les pages d'un site est très favorable pour un meilleur classement.
Et c'est tout pour les "indispensables"

Cela peut paraître léger mais si vous tenez compte de ces trois éléments, 90% d'un bon référencement seront ainsi réalisés. Les autres conseils font partie des "trucs et astuces" dont on ne peut assurer l'efficacité. En effet, dès qu'on tente de pousser plus avant une étude sur le réel fonctionnement d'un robot de recherche par rapport à un autre, on entre dans une zone de brouillard plus ou mois épais...

Nous reviendrons sur ces trucs et astuces du référencement plus loin dans ce chapitre.


Html - Les balises META et le référencement - Les META éventuelles

Vu dans ... https://www.lehtml.com/htmlplus/metaeven.htm

Les balises META et le référencement
Les éventuelles

A côté des balises META indispensables à un bon référencement auprès de moteurs de recherche, à côté des balises META qu'il est bon d'ajouter pour la bonne information du lecteur, il y a encore celles que vous utiliserez de temps en temps lors de l'élaboration de sites. Parcourons en quelques uns.

Refresh

Un grand classique du Html (2.0 ?) même si cette balise META n'est que rarement utilisé et alimente les trucs et astuces depuis des années. Cette balise META charge automatiquement la page spécifiée à l'attribut URL après un délai de x secondes.

<META HTTP-EQUIV="Refresh" CONTENT="x;URL=adresse">

Cette balise est fréquemment utilisée pour rediriger automatiquement un visiteur dans le cas où l'adresse de votre site à été modifiée.
Transition

De très jolis effets de transition style PowerPoint sont possibles avec simplement une ligne de code. Mais autant vous le dire tout de suite, cela ne fonctionne que sous Explorer 4 et plus.

Le code est :

<META HTTP-EQUIV="Page-Enter" content="revealTrans(Duration=1.0,Transition=23)">
<META HTTP-EQUIV="Page-Exit" content="revealTrans(Duration=1.0,Transition=23)">

Quelques explications :

Page-Enter et Page-Exit signifie que l'effet de transition se produira à l'entrée de la page ou à la sortie de celle-ci.
Duration détermine la durée de la transition en secondes. Elle est dans l'exemple de 1 seconde. A l'usage, cette durée n'est pas d'une précision absolue.
Transition est un nombre de 1 à 23 pour l'effet de transition choisi. Le chiffre 23 donne une transition aléatoire (au hasard). Les autres transitions se répartissent de 1 à 22. Ainsi, 7 ouvre la page de droite à gauche, 17 a le même effet mais en diagonale, 22 découvre la page avec un effet de lignes horizontales aléatoires, etc.
Pour plus de détails, ces transitions sont illustrées sur notre site "Scripts DHTML".
Précisons que si ces transitions ressemblent furieusement aux transitions de PowerPoint, elles fonctionneront très bien même si PowerPoint n'est pas installé sur la machine de votre visiteur.
Et pour terminer, vous ne verrez les effets de cette transition que lorsque vous entrez dans la page à partir d'une autre page.

Expires

Cette balise META "dit" au navigateur la date à laquelle la page Html doit être considérée comme périmée. Avec Netscape, une requête pour un document dont la date est expirée initialisera une recherche sur le réseau au lieu de prendre la page éventuellement présente dans le cache. Ceci est très utile pour les pages fréquemment mises à jour.

Exemple :
<META HTTP-EQUIV="expires" CONTENT="Wed, 23 Feb 1999 10:49:02 GMT">
<META HTTP-EQUIV="expires" CONTENT="0">

Il faut noter que les robots de recherche peuvent retirer ces pages dites périmées de leur base de donnée.
Pragma

C'est une autre façon de contrôler le cache du navigateur. Avec ce META, vous pouvez demander au browser de ne pas tenir la page dans le cache.

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">

On rapporte que cela fonctionne sous Netscape mais pas par Explorer...


Les entêtes et les META informations en HTML - Doc Alex

par Alexandre Alapetite le 2003-04-11 ; mise à jour 2005-07-04

Les entêtes et les META informations en HTML

Je vais faire ici une brève présentation des entêtes, des META informations et d’autres points techniques qui me semblent importants dans des pages HTML.
Cette documentation est faite pour du XHTML 1.0 mais peu être utilisée avec peu de changements avec les autres versions de HTML.

  • Introduction
  • Sommaire
  • Les entêtes HTML
  • Le codage et le type de document
  • La langue
    • Norme stricte
    • Langues secondaires et alpha-3
  • Une description
  • Les mots clefs
  • Les robots
  • LINK, une META vers un autre fichier
  • Autres META informations
  • Déclaration du type de document, et validation
  • Licence
  • Commentaires

Les entêtes HTML

Une page HTML commence par une zone <head> destinée à contenir entre autres les META informations.
Voici ci-dessous un exemple (fictif, inspiré de cette page) :

test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-FR">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-language" content="fr-FR" />
<title>META informations HTML - Doc Alex</title>
<meta name="language" content="fr-FR" />
<meta name="robots" content="all" />
<meta name="description" content="Les META informations importantes en HTML" />
<meta name="keywords" content="HTML,META,codage,langue,ISO" />
<link rel="author" class="mailto:alex@france.fr" xml:lang="fr-FR" title="Alexandre Alapetite" />
<link rel="start" class="../../index.html" />
<link rel="up" class="../index.html" />
<link rel="contents" class="#sommaire" />
<link rel="help" class="../../divers/apropos/index.fr.html" />
<link rel="search" class="../../divers/recherche/index.fr.html" />
<link rel="alternate" class="index.en.html" hreflang="en-GB" xml:lang="en-GB" title="Documentation about META in English" />
<link rel="alternate" type="application/pdf" media="print" class="alx_meta.pdf" />
</head>

<body>
...
</body>
</html>

NB : Les balises META de type "http-equiv" sont plutôt destinées à simuler ou modifier les entêtes HTTP, alors que les autres sont plutôt destinées aux navigateurs et aux autres clients comme les moteurs de recherche.

Le codage et le type de document

L’information concernant le codage de la page est certainement une des plus importantes, surtout dans le contexte actuel d’internationalisation. Le codage est le nom du jeu de caractères utilisé dans le document.
Si vous êtes en Europe de l’ouest, (avec votre bloc-notes Windows par exemple) il y a de fortes chances que vos documents textes soient en ISO-8859-1.
Spécifier le codage permet au navigateur d’utiliser la bonne police, d’afficher les bons caractères, et non pas ceux d’un autre alphabet (comme grec, russe, chinois, ...), (voir Microsoft MSDN), ou des codages Unicode comme UTF-8.
Vous pouvez de plus conserver les caractères comme [é,è,à,å,ø,æ...] sans avoir à les remplacer par leur équivalents codés [&eacute;,&egrave;,&agrave;,&aring;,&aelig;,...]. Puisque l’on parle ici de pages web HTML, le type de document sera toujours text/html.
Le codage Unicode UTF-8 devrait être préféré autant que possible. Le type de document et le codage sont spécifiés par la ligne :

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

Cette ligne est à placer le plus haut possible dans les entêtes (en particulier avant <title>) car les navigateurs recalculent la page dès qu’ils rencontrent cette information.
Vous pouvez trouver plus d’information sur les différents codages chez MauveCloud, et pour Unicode chez Alan Wood.

La langue

Cette information est aussi essentielle. Cela permet de faire des recherches dans des pages en spécifiant la langue, d’appeler sans erreur des traducteurs automatiques, des synthétiseurs vocaux, d’être correctement indexé par les moteurs de recherches, etc...
La langue est spécifiée par les lignes :

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-FR">
<meta http-equiv="content-language" content="fr-FR" />
<meta name="language" content="fr-FR" />

C’est assez dommage, mais les outils travaillant plutôt sur le protocole HTTP ou sur le format de fichier utiliseront la première ligne, alors que les outils travaillant plutôt sur le contenu auront tendance à utiliser la seconde. La ligne avec xml:lang correspond, elle, au nouveau standard de définition des langues pour les documents XML.
Il est à noter qu’il est possible, pour les documents comportant plusieurs langues, de spécifier ces différentes langues par ordre d’importance en les séparant par une virgule ",".

Norme stricte

Il est préférable d’utiliser pour le code de la langue la norme la plus stricte (voir RFC-3066), qui est de la forme xx-XX :
2 caractères minuscules pour la langue "-" 2 caractères majuscules pour le pays.
Les deux premiers caractères sont pour la langue générale, par exemple français, selon la norme ISO-639-1, et les deux derniers caractères, facultatifs, pour préciser le pays selon la norme ISO-3166. Cela permet de faire la différence entre le français de France, et celui de Suisse ou du Canada par exemple. Le code pays doit être un pays qui utilise comme langue officielle la langue précédemment déclarée. Pour les quelques langues qui n’ont pas de pays officiel, il ne sera précisé aucun sous-code.

Quelques exemples :

  • français de France : fr-FR
  • français du Canada : fr-CA
  • français de Suisse : fr-CH
  • anglais du Royaume-uni : en-GB
  • anglais des USA : en-US
  • anglais du Canada : en-CA
  • danois du Danemark : da-DK
  • italien d’Italie : it-IT
  • italien de Suisse : it-CH
  • espagnol d’Espagne : es-ES
  • allemand d’Allemagne : de-DE
  • allemand de Suisse : de-CH
  • suèdois de Suède : sv-SE
  • espéranto : eo

Langues secondaires et alpha-3

Il existe une quantité de langues secondaires, moins utilisées, dont les codes sont répertoriés dans la norme ISO-639-2 et sont de la forme xxx.

Exemple :

  • provençal : pro

NB : Il n’est pas recommandé d’utiliser la norme ISO-639-2 en alpha-3 (i.e. : 3 caractères alphabétiques) pour coder les langues déjà définies par un code alpha-2 dans la norme ISO-639-1, pour des raisons de compatibilité.
De même pour les pays, il n’est pas recommandé, s’il existe un code en alpha-2, d’utiliser les codes pays alpha-3. (autre lien : Nations Unies).

Une description

Il est possible de mettre une courte description de la page. Cette description est souvent utilisée par les moteurs de recherche (comme Lycos) comme commentaires en dessous des liens vers les pages résultant de la recherche.
La ligne à insérer est :

<meta name="description" xml:lang="fr-FR" content="Les META informations importantes en HTML" />

Il est intéressant de repréciser la langue dans cette balise si vous proposez une description dans plusieurs langues.

Les mots clefs

Une META information précisant les mots clefs de la page HTML est destinée aux moteurs de recherche. Cependant, il apparaît que ces derniers ne l’utilisent guère, cette META information n’étant en effet pas souvent présente, ni correcte dans les pages Web. Quelques petits moteurs l’utilisent néanmoins, comme le moteur de recherche dans les pages hébergées chez Free.
Elle se déclare de cette manière :

<meta name="keywords" xml:lang="fr-FR" content="HTML,META,codage,langue,ISO" />

Là encore, il peut être intéressant de repréciser la langue.

Les robots

Une META information est réservée pour préciser si on souhaite que la page soit indexée par les moteurs de recherche, et si on souhaite que les liens qu’elle contient soient analysés.
Il est logique de placer cette ligne avant les META description et keywords.

<meta name="robots" content="all" />

Les valeurs de "content" sont des combinaisons de "index" ou "noindex" avec "follow" ou "nofollow", avec deux raccourcis : "all" (par défaut) et "none" :
La valeur peut donc être "all", synonyme de "index,follow" pour une indexation complète, "noindex,follow" pour ne pas être indexé mais analyser les liens que la page contient, "index,nofollow" pour être indexé mais ne pas analyser les liens, et enfin "none", synonyme de "noindex,nofollow" pour aucune indexation ni suivi de liens. Il y a de plus quelques tags propriétaires, comme ceux de Google.

LINK, une META vers un autre fichier

Il est recommandé d’utiliser la balise presque synonyme LINK lorsqu’il s’agit de META faisant intervenir un fichier externe. Cette balise est très utilisée et bien reconnue.
Parmi les comportements à encourager, il y a l’utilisation de LINK pour préciser des traductions dans d’autres langues de la page en cours, ou des versions alternatives de la page dans un autre format (PDF, Word, ...) en précisant le type de média visé (imprimante, synthétiseur vocal, PDA, ...). On pourra aussi spécifier un fichier contenant le glossaire, la table des matières, etc... pour faciliter la navigation.
On s’attachera à préciser le type de document, au format MIME, au moins pour les liens qui ne sont pas en HTML. Les autres renseignements comme hreflang (la langue du document pointé), charset (le type de codage), ou media (écran, imprimante, voix, ...) sont facultatifs et même peu souhaitables s’ils sont identiques au document courant.

Quelques exemples :

<link rel="stylesheet" type="text/css" class="monstyle.css" />
Pour lier une feuille de style CSS.
<link rel="shortcut icon" type="image/x-icon" class="favicon.ico" />
Affecte l’icône associée à l’adresse de cette page. Elle est aussi censée s’appeler favicon.ico et être à la racine du site.
<link rel="alternate" hreflang="en-GB" class="page.en.html" />
Propose une version dans une autre langue. (alternate associé à hreflang)
<link rel="alternate" type="application/msword" media="print" class="page.doc" />
Propose une version dans un autre format de fichier et/ou pour un autre média (ici l’imprimante). (alternate associé à media) Bien utilisé par Internet Explorer avec un document Word.
<link rel="next" class="page2.html" />
Page suivante dans une collection. Voir aussi les autres déplacements standards comme start,up,first,prev,next,last,... Bien utilisés par Mozilla, Opera, ...
<link rel="glossary" class="page_glossaire.html" />
Propose un glossaire en relation avec cette page.
<link rel="author" class="mailto:alex@france.fr" xml:lang="fr-FR" title="Alexandre Alapetite" />
Lien vers l’auteur de la page.

L’utilisation de LINK est de plus en plus indispensable dans un contexte où la navigation devient difficile, les médias se diversifient et les personnes handicapées sensorielles doivent pouvoir accéder à l’information.
Notons que l’utilisation de next, prev par exemple permet à des navigateurs comme Mozilla d’avoir une option de préchargement des pages voisines.

Barre de navigation de Mozilla 1.4a, utilisant LINK
Barre navigation Mozilla
Barre navigation Mozilla Barre navigation Mozilla

Quelques liens : (anglais)

  • Captures d’écrans
  • LINK, Microsoft MSDN

Autres META informations

D’autres META informations sont très utiles, et très utilisées, comme celles permettant de contrôler la redirection ou rafraîchissement automatique, ou la durée de validité d’une page. Ces META informations ne sont bien sûr à utiliser que lorsque cela est nécessaire.

<meta http-equiv="refresh" content="5; url=https://alexandre.alapetite.fr" />
Une redirection automatique vers une autre URL, après le nombre de secondes spécifié. Plus d’informations dans ma documentation sur les redirections.
<meta http-equiv="expires" content="Mon, 24 Nov 1980 09:20:00 GMT" />
Date (RFC 850) à partir de laquelle la page n’est plus valide, et devrait être rechargée.

Beaucoup d’autres META informations ont été proposées mais malheureusement, il n’y a pas encore vraiment de standardisation, malgré quelques projets, comme celui du Dublin Core. De plus, les navigateurs utilisent assez peu ces autres META informations.
Une liste des différentes META informations possibles peut être consultée ici. En voici quelques-unes, en vrac :

<meta name="author" content="Alexandre Alapetite" />
Le nom de l’auteur de la page.
<meta name="generator" content="Notepad" />
L’éditeur ou le logiciel utilisé pour créer la page.
<meta name="geo.position" content="43.923;4.828" />
Latitude et longitude terrestre du sujet traité, pour indexation par GeoURL ou GeoTags
<meta http-equiv="Page-Enter" content="RevealTrans(Duration=1,Transition=23)" />
Pour déclencher une transition graphique sous Internet Explorer.

Déclaration du type de document, et validation

La déclaration du type de document est de plus en plus importante dans la tendance actuelle à la formalisation.
Plusieurs versions de HTML coexistent, HTML3.2, HTML4.01, XHTML2.0 pour les 3 dernières plus récentes, sans parler des autres documents XML. Aussi faut-il éviter les conflits de versions, qui entraînent des erreurs et des écarts importants d’affichage entre les navigateurs.

De plus, cette déclaration permet la validation, voire la correction automatique de la page par des outils, comme celui du W3C en ligne.
Cette validation est indispensable.

Je conseille de se conformer à la norme XHTML1.0 Transitional en tendant autant que possible vers XHTML1.0 Strict (XHTML 1.1). Cela se déclare comme ci-dessous :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-FR">

Le XHTML étant plus formel, il permet une vérification précise, par des validateurs très simple, comme celui que je développe.
Il faut noter que cette déclaration est un peu différente, car la norme n’est pas tout à fait identique, pour les documents XHTML 1.0 mettant en place un FRAMESET :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-FR">


Html - Titres et listes

Vu dans ... https://www.lehtml.com/html/listes.htm

Le langage Html
Les titres et listes

Tout document d'une certaine consistance se doit de présenter, par exemple dans la table des matières, les différents niveaux de son exposé. Html a disposé dès son origine d'outils spécialement conçus à cet effet.

En-têtes | [Heading] | <Hn></Hn> avec n=1 à 6 | Afficher une en-tête de niveau n et sauter une ligne
Liste non-ordonnée | [Bullet list] | <UL></UL> | Afficher le texte sous forme d'une liste non-ordonnée.
Liste ordonnée | [Numbered list] | <OL></OL> | Afficher le texte sous forme d'une liste ordonnée.
Elément de liste | [List items] | <LI> | Voici un élément de la liste
Paragraphe | [Paragraph] | <P></P> | Saut de ligne, insérer une ligne vierge et commencer un paragraphe

Comme d'habitude...

On ouvre son petit éditeur de texte

<H1>Les mois du printemps</H1>
<UL><LI>avril
<LI>mai
<LI>juin</UL>
<P>
<H3>Les mois d'automne</H3>
<OL><LI>octobre
<LI>novembre
<LI>d&eacute;cembre</OL>

Et on ouvre son petit browser

Quelques commentaires s'imposent;

  1. &eacute; est l'un de ces caractères spéciaux utilisés pour représenter le é. Les éditeurs Html vous déchargeront de cette corvée.
  2. Les paragraphes et les en-têtes peuvent s'aligner à gauche, au centre ou à droite.
    <H1 align=left></H1>
    <P align=left></P>
    <H1 align=center></H1>
    <P align=center></P>
    <H1 align=right></H1>
    <P align=right></P>
  3. Les listes peuvent s'imbriquer:
<H4>Les 12 mois</H4>
<UL><LI>Les mois du printemps
<OL><LI>avril
</OL></UL>


Html - Les tableaux

Vu dans ... https://www.lehtml.com/html/tableaux.htm

Le langage Html
Les tableaux

En Html, les tableaux servent non seulement à aligner des chiffres mais surtout à placer des éléments à l'emplacement que vous souhaitez. L'usage des tableaux est donc TRES fréquent.

Un tableau est composé de lignes et de colonnes qui forment les cellules du tableau. Les balises de base sont donc

Définition du tableau | [Table] | <TABLE></TABLE> | Début et fin de tableau
Définition d'une ligne | [Table Row] | <TR></TR> | Début et fin de ligne
Définition d'une cellule | [Table Data] | <TD></TD> | Début et fin de cellule

Un tableau à deux lignes et deux colonnes, et donc à quatre cellules se représente comme suit :

<TABLE>
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>

Si vous souhaitez y adjoindre des bordures :

Bordure de cadre [Border] <TABLE border=?></TABLE>

<TABLE border=2>
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>

Il y a encore trois éléments (définis par défaut mais modifiables) :

L'espace entre les cellules ou l'épaisseur des lignes du quadrillage | <TABLE cellspacing=?>
L'enrobage des cellules ou l'espace entre le bord et le contenu | <TABLE cellpadding=?>
La largeur de la table | <TABLE width=?> <TABLE width=%>

Construisons un exemple :

<TABLE border=2 cellspacing=10>
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>

<TABLE border=2 cellpadding=10>
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>


Html - Les cellules des tableaux

Vu dans ... https://www.lehtml.com/html/cellules.htm

Le langage Html
Les cellules de tableaux

Nous n'en avons pas fini avec les tableaux. Allons plus loin dans notre étude en nous penchant sur les cellules de ces tableaux.

Avant toutes choses, les cellules peuvent contenir tous les éléments Html déjà passés en revue soit :
      • du texte
      • des images
      • des liens
      • des arrière-plans
      • et même des tableaux (eh oui!)

Bien que l'allure de votre tableau soit déjà déterminée, chaque cellule est en quelque sorte un petit univers à part qui a ses propres spécifications. Découvrons les balises.

Largeur d'une cellule | <TD width=?> en pixels <TD width=%> en pourcentage
Fusion de lignes | <TD rowspan=?>
Fusion de colonnes | <TD colspan=?>

Découvrons ceci par des exemples.

Je veux un tableau centré qui occupe 60% de la fenêtre avec sur une ligne, trois colonnes égales. Essayons ceci :

<CENTER><TABLE width=60% border=1>
<TR>
<TD>cellule1</TD>
<TD>cel. 2</TD>
<TD>3</TD>
</TR>
</TABLE></CENTER>

Pas brillant! Et avec la balise de largeur de la cellule?

<CENTER><TABLE width=60% border=1>
<TR>
<TD width=33%>cellule1</TD>
<TD width=33%>cel. 2</TD>
<TD width=34%>3</TD>
</TR>
</TABLE></CENTER>

Impeccable! Prenons le même tableau mais avec 2 lignes.

<CENTER><TABLE width=60% border=1>
<TR><TD width=33%>cellule1</TD><TD width=33%>cel. 2</TD>
<TD width=34%>3</TD></TR>
<TR><TD width=33%>cellule1</TD><TD width=33%>cel. 2</TD>
<TD width=34%>3</TD></TR>
</TABLE></CENTER>

Je souhaite que la première ligne prenne toute la largeur de la ligne. La première cellule doit donc déborder sur 3 cellules horizontales.

<CENTER><TABLE width=60% border=1>
<TR>
<TD colspan=3>cellule 1</TD>
</TR>
<TR> <TD width=33%>cellule 1</TD> <TD width=33%>cel 2</TD>
<TD width=34%>3</TD> </TR>
</TABLE></CENTER>

Dans le même style, je souhaite que la première colonne prenne toute la hauteur de la colonne. La première cellule doit donc déborder sur 2 cellules verticales.

<CENTER><TABLE width=60% border=1>
<TR>
<TD width=33% rowspan=2>cellule 1</TD>
<TD width=33%>cel 2</TD>
<TD width=34%>3</TD>
</TR>
<TR>
<TD width=33%>cel 2</TD>
<TD width=34%>3</TD>
</TR>
</TABLE></CENTER>

Maintenant, il est temps de mettre de l'ordre dans les cellules.

Ligne de tableau | <TR align=left/center/right> <TR valign=top/middle/bottom> | horizontalement verticalement
Cellule de tableau | <TD align=left/center/right> <TD valign=top/middle/bottom> | horizontalement verticalement

A titre d'exemple, reprenons le tableau suivant :

avec quelques aménagements, il devient...

<CENTER><TABLE width=60% border=1>
<TR>
<TD colspan=3 align=center>Tarif au ../../..</TD>
</TR>
<TR>
<TD width=33% >Article 1</TD><TD width=33%>Ref 002 </TD>
<TD width=34% align=right>30fr</TD>
</TR>
</TABLE></CENTER>

Pour terminer cette leçon, il est aussi possible de changer la couleur de la cellule.

Couleur de la cellule <TD BGCOLOR="#$$$$$$">

notre dernier exemple pourrait devenir :
<TD colspan=3 align=center bgcolor="#0000FF">


Html - Les séparateurs

Vu dans ... https://www.lehtml.com/html/horizon.htm

Le langage Html
Les séparateurs

Barre de séparation

Les browsers intègrent un outil de mise en forme intéressant pour clarifier la présentation de votre texte. C'est la ligne horizontale.

La syntaxe en est fort simple:

Ligne horizontale [Horizontal Rule] <HR> Insérer une ligne horizontale

Ce tag fort simple, nous permettra de comprendre un peu mieux le fonctionnement du navigateur. D'abord, vous avez déjà découvert au fil de vos erreurs qu'il est plutôt gentil car il s'efforce toujours d'afficher quelque chose. Ensuite, il vous ménage le travail en prenant à sa charge des valeurs par défaut d'un certain nombre d'attributs. Dans le cas présent, les valeurs par défaut de la balise <HR> sont : une épaisseur de trait de 2 pixels, un alignement centré et une largeur de 100% de la fenêtre. Vous pouvez très bien modifier au gré de votre fantaisie les valeurs de ces différents attributs.

Epaisseur | <HR size=?> | en pixels
Largeur | <HR width=?> <HR width="%"> | en pixels en % de la fenêtre
Alignement | <HR align=left> <HR align=right> <HR align=center> | gauche droite centré

Il est donc tout à fait équivalent d'écrire:

  • <HR> ou
  • <HR size=2 align=center width="100%"

Je vous propose un petit exercice:

Avec l'éditeur de texte

<H3 align=center>Van Lancker Luc</H3>
<HR align=center size=8 width="50%">

Avec le browser

Commentaires

    • On préférera spécifier la largeur en % de la fenêtre plutôt qu'en pixels car l'affichage s'adaptera ainsi à toutes les tailles et résolutions d'écran.
    • On peut préférer l'usage d'images comme séparateur (comme c'est la cas ici) pour personnaliser son ouvrage.


Html - Les liens

Vu dans ... https://www.lehtml.com/html/liens.htm

Le langage Html
Les liens

Barre de séparation

Enfin!

Html (Hyper Text Markup Language) est un langage hypertexte (et hypergraphique) qui vous permet en cliquant sur un mot, généralement souligné (ou une image) de vous transporter;

    • vers un autre endroit du document.
    • vers un autre fichier Html situé sur votre ordinateur.
    • vers un autre ordinateur situé sur le Web.

Ce système d'hypertexte vous est familier car se sont ces liens qui vous permettent de surfer de page en page et qui constituent l'essence du Web et des documents Html.

La syntaxe de ces liens entre plusieurs pages, est simple mais entraînera de nombreux commentaires :

<A HREF="URL ou Adresse">...</A>

Lien externe

Tout ordinateur situé sur le réseau Internet possède une adresse ou une URL [Universal Ressource Locator]. Le langage Html permet d'accéder à toutes les machines et toutes les ressources du Net. Pour peu qu'Internet vous soit familier, ce sont les adresses du type :

http://serveur/chemin.../fichier pour le Web
ftp://serveur/chemin.../fichier pour le téléchargement
mailto:utilisateur@hôte pour le courrier électronique

Lien local

L'organisation classique et plus que conseillée d'un site Web consiste à regrouper l'ensemble des éléments de celui-ci (fichiers htm, images, ...) dans un même répertoire. Vous pourrez ainsi "transporter" aisément votre site pour le présenter sur un autre ordinateur et surtout pour le charger sur un serveur. Cette façon de procéder est la plus aisée et vous évitera pas mal de problèmes. L'adresse du lien sera alors tout simplement

fichier.htm

Lien mixte

Nous entendons par là un lien vers un fichier situé à un autre endroit de votre ordinateur (et donc non situé dans le répertoire de votre site). Attention Danger ! En effet, il est peu probable que le serveur Web qui hébergera votre site, possède la même arborescence que votre disque local. L'adresse prendra la forme

file:///lecteur:/répertoire/fichier.htm (en adressage absolu).
../../../fichier.htm (en adressage relatif).

Cette matière d'adressage absolu et relatif dépasse le cadre de cet exposé et je vous invite en cas d'utilisation à vous plonger dans la documentation relative à ce sujet.

Expérimentons tout ceci.

Dans l'éditeur de texte,
nous allons créer deux fichiers Htlm.

le fichier 1.htm:
<A HREF="2.HTM">Aller vers le document 2</A>

le fichier 2.htm:
<A HREF="1.HTM">Retour au document 1</A>

On sauve ces deux fichiers dans un même répertoire.

Le browser vous affichera:

Des liens peuvent aussi pointer vers un endroit précis du même document ou d'un autre fichier. C'est ce qu'on appelle les ancres, ancrages, signets ou pointeurs [Anchor].

Point d'ancrage | <A NAME="***">...</A> | Ceci est une cible
Lien vers une ancre dans la même page | <A HREF="#***">...</A> | Lien vers la cible *** dans la même page
Lien vers une ancre dans une autre page | <A HREF="URL#***">...</A> | Lien vers la cible *** dans une autre page

A titre d'illustration, le mot Enfin du début de page a été défini comme un point d'ancrage.

<A NAME="Ancre1">... Enfin! ...</A>

Le code du lien sera :

<A HREF="#Ancre1">Rappel de la notion d'hypertexte</A>

Que vous pouvez tester ici.

Rappel de la notion d'hypertexte

Plusieurs liens à l'intérieur d'un même document supposent que ce document présente une certaine longueur sinon une longueur certaine (et donc un temps de chargement assez long). Ainsi, on préférera généralement à cette technique le découpage d'une longue page en un ensemble de plusieurs pages de dimension plus réduite.


Html - Les images

Vu dans ... https://www.lehtml.com/html/images.htm

Le langage Html
Les images

Barre de séparation

Image de la Maison de la Culture de Mouscron, ville de l'auteur

GIF ou JPEG?

Avant de passer aux balises, il faut savoir ce qui suit.

Les deux formats d'image reconnus sur le Web, sont le format GIF (version 89a) et le format JPEG. Pour le format GIF (maximum 256 couleurs), on retiendra la caractéristique de transparence possible pour une couleur. Ces deux formats donnent des résultats assez équivalents bien que JPG soit plutôt recommandé pour des images du style photographique avec des tons nuancés ou dégradés.

L'ennemi sur le Web, c'est la taille des images ! Plus l'image sera grande, plus le temps de chargement sera long... au risque de décourager vos visiteurs. Si cela est possible, une image en 16 ou 256 couleurs peut très bien faire l'affaire. Présentez une petite image indiquant un lien vers l'image complète est également un bon conseil.

Il n'est pas inutile de prévoir dans votre panoplie de compositeur Web, un logiciel de retouche d'images. A ce propos "Paint Shop Pro" a la triple qualité d'être disponible en shareware, d'être très intuitif et d'être performant. En outre, un tel logiciel vous permettra de composer vos propres images et ainsi de personnaliser vos pages.

Dois-je rappeler qu'il est très facile de se faire une bibliothèque d'images tout en surfant sur le Web? Il suffit de se positionner sur l'image, de cliquer avec le bouton droit de la souris et de suivre les instructions du menu déroulant (Enregistrer l'image sous...).

Le code Html est :

<IMG SRC="Adresse de l'image"> Afficher l'image qui se trouve à l'adresse...

La balise image possède de nombreux attributs.

Texte alternatif | alt="****" | Pour les browser n'ayant pas l'option "image" activée
Dimensions | width=? height=? | Hauteur et largeur (en pixels)
Bordure | border=? | (en pixels)
Alignement | align=top align=middle align=botton align=left align=right |

Commentaires :

En Html, l'image ne fait pas partie de votre document. Le browser va la chercher à l'adresse indiquée. Généralement, on place les images dans le même répertoire que les pages Html.
Presque en conséquence logique de ceci, le fait d'utiliser la même image à plusieurs reprises dans un fichier Html ne modifie en rien la taille de celui-ci.
Prévoir un texte pour les browsers n'ayant pas l'option image activée, permet au lecteur de ne pas perdre le fil de l'exposé et peut-être d'activer cette option pour découvrir votre oeuvre.
Il est important pour la fluidité de l'affichage de préciser la taille en hauteur et largeur de l'image car le browser peut ainsi, connaissant l'emplacement à réserver pour celle-ci, continuer à afficher le texte. Cette information vous est donnée par Paint Shop Pro par exemple.

L'attribut Align

L'attribut align positionne l'image par rapport au texte :

<IMG SRC="HELP.gif" align=TOP>Fichier d'aide
<IMG SRC="HELP.gif" align=CENTER>Fichier d'aide
<IMG SRC="HELP.gif" align=BOTTOM>Fichier d'aide

Lien sur image

    En cliquant sur l'image, vous ouvrirez un fichier nommé "MaVille".

    Les balises sont :

    <A HREF="MaVille.htm"><IMG SRC="STAQUET.gif"></A>

    Remarquons que les images cliquables sont par défaut entourées d'une bordure. Pour enlever cette bordure, il suffit d'ajouter l'attribut border=0.


Html - Les frames

Vu dans ... https://www.lehtml.com/html/frames.htm

Le langage Html
Les frames ou les cadres

Quoi de plus simple que les frames? Mais aussi quoi de plus délicat et dangereux (risque de plantage) que les frames? En outre, tous les browsers n'ont pas la possibilité de les afficher.

Pour diviser l'écran en plusieurs fenêtres, les balises sont peu nombreuses :

Zone avec des fenêtres <FRAMESET>
</FRAMESET> 		Début de zone avec des fenêtres
Fin de zone avec des fenêtres
Agencement des
fenêtres 		<FRAMESET ROWS="...">
<FRAMESET COLS="...">
 Fenêtres horizontales
Fenêtres verticales

Il est impératif de travailler avec des exemples. Pour obtenir un agencement ainsi :

Il faut employer les balises suivantes :

<HTML>
<HEAD></HEAD>
<FRAMESET ROWS="30%,70%">
<FRAME>
<FRAME>
</FRAMESET>
</HTML>

Attention!

<FRAMESET></FRAMESET>
remplace
<BODY></BODY>
L'attribut ROWS="hauteur1,hauteur2,...,hauteurN" définit la hauteur des différentes fenêtres en cas de division horizontale.
La hauteur s'exprime en pixels ou en %. Dans ce cas, on veillera à ce que le total soit égal à100%;

Le même pour un agencement vertical

<FRAMESET COLS="30%,70%">
<FRAME>
<FRAME>
</FRAMESET>

L'attribut COLS="largeur1,largeur2,...,largeurN" définit la largeur des différentes fenêtres en cas de division verticale
La hauteur s'exprime en pixels ou en %. Dans ce cas, on veillera à ce que le total soit égal à100%;

On peut mélanger les deux :

<FRAMESET ROWS="30%,70%">
<FRAME>
<FRAMESET COLS="30%,70%">
<FRAME>
<FRAME>
</FRAMESET>
</FRAMESET>

Pour l'instant, nos frames sont vides. On va donc leur donner à manger par des attributs de la balise <FRAME>.
SRC="URL" adresse du document à afficher dans la fenêtre
On construit 3 fichiers Html élémentaires que l'on place dans le même répertoire que le fichier de frames.
A.htm | B.htm | C.htm
<HTML><BODY> <H4>A</H4> </BODY></HTML> | <HTML><BODY> <H1>B</H1> </BODY></HTML> | <HTML><BODY> <H1>C</H1> </BODY></HTML>

On reprend le fichier de frame précédent que l'on complète.

<FRAMESET ROWS="30%,70%">
<FRAME SRC="A.htm">
<FRAMEST COLS="30%,70%">
<FRAME SRC="B.htm">
<FRAME SRC="C.htm">
</FRAMESET>
</FRAMESET>

Les ascenseurs, comme à la fenêtre A, apparaissent automatiquement. Par l'attribut de la balise <FRAME>

SCROLLING="yes/no/auto"

vous pouvez indiquer si la fenêtre doit ou non posséder une barre de défilement.

Un autre attribut de cette balise <FRAME> est NAME="NOM". Name indique le nom de la fenêtre de telle sorte que cette frame puisse être utilisée comme cible d'un lien hypertexte.

Ainsi, je voudrais faire un lien sur B pour afficher le contenu de ce lien (prenons le fichier a.htm pour éviter de l'encodage) dans C.

Le fichier de frames devient :

<FRAMESET ROWS="30%,70%">
<FRAME SRC="A.htm">
<FRAMESET COLS="30%,70%">
<FRAME SRC="B.htm">
<FRAME SRC="C.htm" NAME="fenetreC">
</FRAMESET>
</FRAMESET>

Et on met un lien vers A.htm dans le fichier B.htm en désignant comme cible [target] la frame C.

<HTML><BODY>
<A HREF="A.htm" TARGET="fenetreC"><H1>B</H1></A>
</BODY></HTML>

L'attribut TARGET peut aussi prendre certaines valeurs prédéfinies :

  • _blank qui indique au browser qu'il doit créer une nouvelle fenêtre afin d'y afficher le fichier. Dans ce cas, vous ouvrer en fait un nouveau browser.
  • _self qui indique que le fichier sera chargé dans la même fenêtre que celle dans laquelle se trouve le lien.
  • _top qui implique l'affichage du fichier sur toute la surface de la fenêtre du browser.

VERIFIEZ TOUJOURS VOS DIFFERENTS LIENS AVEC DES FRAMES. Vous éviterez ainsi que votre beau site ne devienne rapidement une "soupe".

Par défaut, les cadres sont séparés par des bordures. Il est possible de supprimer ces bordures mais les attributs à utiliser diffèrent selon Netscape ou Internet Explorer.
Netscape utilise l'attribut "border=0" et Explorer, les attributs "frameborder=no" et "framespacing=0" (pour enlever l'espace entre les cadres). Le tout cohabite sans problème. La balise devient alors par exemple :
<FRAMESET COLS="30%,70%" border=0 frameborder=no framespacing=0>

Il y a pour terminer la balise <NOFRAMES>...</NOFRAMES> qui est utilisée pour indiquer le texte que doivent afficher les browsers incapables de gérer les frames. Il est même indiqué de prévoir une page sans fenêtres pour que ces visiteurs puissent profiter quand-même de votre site.


Les formulaires

Vu dans ... https://www.lehtml.com/index.htm

Les formulaires

1. L'interactivité ( cgi / mailto / Javascript )

1.1 L'interactivité, mais comment ?

Avec les formulaires, Html vous ouvre les portes de l'interactivité et vous permet de recevoir des informations provenant directement de votre lecteur et éventuellement de lui répondre directement.

Mais encore fallait-il trouver le moyen de renvoyer cette information! En effet, lorsque vous surfez, vous demandez à votre provider (serveur connecté au Web) de vous envoyer la page se trouvant à l'adresse (URL) indiquée. Et vous consultez la page, sur votre ordinateur, en mode read only soit en lecture seule.

Pour sortir de la page ou de votre ordinateur, les moyens disponibles sont :

· permettre à certains utilisateurs triés sur le volet, généralement des professionnels, d'écrire sur le serveur et d'en exploiter les ressources. Tout ceci dans les meilleures conditions de sécurité pour le provider. C'est la procédure des CGI.

· utiliser une autre ressource d'Internet disponible pour l'utilisateur, c'est le courrier électronique ou l'e-mail. C'est la procédure mailto.

· une dernière procédure (à laquelle je tiens) qui permet de transférer les informations en interne, à l'intérieur d'une page ou d'un site Web, C'est le Javascript.

1.2. CGI

La procédure de CGI [Common Gateway Interface] est quelque chose de complexe. Nous y consacrons un chapitre, plus loin dans ce site.

Citons quand même ici qu'une CGI est écrite dans un langage de programmation (C, C++, Perl...). Ce programme est alors chargé sur le disque dur du serveur dans un répertoire bien déterminé et qui, généralement, s'appelle

cgi-bin. L'accès à ce répertoire est limité par l'administrateur du serveur, pour d'évidentes raisons de sécurité, aux seuls utilisateurs habilités.

Une fois chargée sur le serveur, on peut y accéder de façon classique par l'URL "http:// www.nom du serveur/ cgi-bin/ ma_cgi.pl". Le programme de la CGI s'effectue en utilisant les ressources de l'ordinateur du serveur, éventuellement pour vous préparer une réponse immédiate (avec si le programme est mal conçu, un risque de plantage complet du serveur lui-même).

1.3 Mailto

Netscape avec Navigator 3 a imaginé le premier ce moyen d'exploiter les formulaires et qui présente l'énorme avantage de pouvoir être utilisé par tout un chacun. Depuis, cette possibilité a été reprise par Microsoft Explorer 4 et bien entendu Netscape 4 (Communicator).

Ainsi, la procédure d'envoi de formulaires par le protocole mailto, ne fonctionne pas sous Microsoft Explorer 3.0. Permettez-moi d'insister pour vous éviter des interrogations inutiles :

Mailto ne fonctionne pas sous Microsoft Explorer 3.0 !

Les formulaires présentent l'avantage par rapport au simple courrier électronique de pouvoir prédéfinir ou de structurer l'information qui vous intéresse. Cette prédéfinition des données est très utilisée dans les applications commerciales du Web

1.4. Javascript

Avec du Javascript, on peut utiliser les formulaires pour transférer des informations à l'intérieur d'une page ou même à l'intérieur d'un site (par l'usage des frames). En outre, Javascript, propose des outils particulièrement adaptés pour la vérification des données introduites par l'utilisateur dans les formulaires avant l'envoi et le traitement de celles-ci.

Vous pouvez en savoir plus sur le Javascript ou sur les formulaires avec Javascript en consultant "Apprendre le Javascript" du même auteur (www.ccim.be/ccim328/js/index.htm).

2. Définition d'un formulaire

2.1. Définition

Avant de pouvoir utiliser les différentes sortes de formulaires (ligne de texte, liste déroulante, cases à cocher...), il faut déclarer au browser qu'il devra gérer des formulaires et ce qu'il devra en faire.

<FORM method="post" action="URL d'expédition" enctype="text/plain">

... les formulaires proprement dit ...

</FORM>

2.2. Commentaires

· L'attribut "method" vous offre le choix entre get et post. La différence entre ces deux méthodes repose sur la façon dont les données seront transmises au serveur et exploitées par celui-ci. Avec le temps, la méthode post s'est imposée car elle apparaît plus efficace et permet le traitement d'une quantité plus importante de données.

· L'attribut "action" spécifie l'adresse d'expédition des données.

Dans le cas d'un traitement des données par une CGI, on spécifie le répertoire CGI du serveur et le nom de la CGI.

<FORM method="post" action="http://www.serveur/cgi-bin/ma_cgi.pl">

Dans le cas d'un envoi vers en adresse électronique (e-mail), on utilise le protocole mailto: suivi de l'adresse électronique de destinataire (généralement votre adresse e-mail).

<FORM method="post" action="mailto:Vanlancker.Luc@ccim.be">

(sans espace entre mailto: et l'adresse e-mail !)

· L'attribut "enctype" (optionnel) spécifie l'encodage utilisé pour le contenu du formulaire. Ce paramètre ne peut être utilisé qu'accompagné par la méthode post. Ainsi enctype="text/plain" encode le contenu du formulaire en format texte lisible par le destinataire. Cette option est particulièrement adaptée à l'action du type mailto.

· Il n'est pas inutile de prévoir l'attribut name="nom" si la page comporte plusieurs formulaires.

· Attention !!! Je suis certain que, emporté par votre impatience à encoder les formulaires, vous allez oublier la balise de fin </FORM>. Dans ce cas, à la visualisation dans le navigateur, rien ne sera affiché.

· Dans le cas de l'utilisation en interne des formulaires par du Javascript, les attributs method, action et enctype sont inutiles car on ne fait pas appel au serveur.

3. Ligne de texte

3.1. Définition

INPUT type="text" indique un champ de saisie d'une seule ligne. C'est assurément le formulaire le plus simple à mettre en oeuvre :

<FORM>

<INPUT type="text" name="nom" size="50">

</FORM>

3.2. Commentaires

· L'attribut name="nom du formulaire" est quasiment obligatoire car on n'utilise que rarement un seul formulaire. Le nom va identifier la chaîne de caractères du champ de saisie. De façon schématique, nom = (ce qui est introduit dans la ligne de texte).

· L'attribut size (optionnel) définit la longueur du champ de saisie. Notons que l'on peut introduire un nombre de caractères plus élevé que celui de la longueur.

· Il existe l'attribut maxlength="x" (optionnel) qui limite le nombre réel de caractères que l'on peut introduire dans le champ de saisie. La balise <INPUT> n'a pas de balise de fin.

4. Zone de saisie

4.1. Définition

La balise <TEXTAREA></TEXTAREA> introduit une zone de texte multilignes et non plus une simple ligne de texte. La syntaxe est :

<FORM>

<TEXTAREA name="nom" rows=4 cols=40>Valeur par défaut</TEXTAREA>

</FORM>

4.2. Commentaires

· L'attribut name permet de donner un nom au formulaire.

· L'attribut rows=x détermine le nombre de lignes de la zone de texte.

· L'attribut cols=y détermine le nombre de caractères visibles sur chaque ligne ou si vous préférez le nombre de colonnes.

· L'attribut wrap (optionnel) détermine la façon dont les sauts de ligne seront traités lors d'un changement de ligne.

* Avec wrap=virtual, les changements de lignes sont effectués automatiquement dans la zone de texte mais le tout sera transmis en une seule ligne.

* Avec wrap=physical, les changements de lignes sont effectués automatiquement dans la zone de texte et ceux-ci sont également transmis.

* Avec wrap=off, il n'y a aucun changement de ligne.

· Attention !!! La balise <TEXTAREA> a une balise de fin, soit </TEXTAREA>.

5. Liste déroulante

5.1. Définition

La balise <SELECT></SELECT> indique au browser l'usage d'une liste déroulante. Les éléments de la liste sont introduits par la balise <OPTION> ... (</OPTION> facultatif).

<FORM>

<SELECT name="nom" size="1">

<OPTION>lundi

<OPTION>mardi

<OPTION>mercredi

<OPTION>jeudi

<OPTION>vendredi

</SELECT>

</FORM>

Si vous cliquez sur la petite flèche vers le bas, vous obtiendrez la liste déroulante où on retrouve les éléments de la liste (<OPTION>).

5.2. Commentaires

· L'attribut name="nom" définit le nom du formulaire.

· L'attribut size="x" détermine le nombre d'éléments de liste affiché dans la boite d'entrée. En fait, size="1" est optionnel car "1" est la valeur par défaut. Le même exemple avec size="3" donne :

· On peut présélectionner l'élément affiché dans la boite d'entrée (par défaut, le premier élément de la liste sera retenu). On utilise pour ce faire l'attribut selected de la balise <OPTION>. Pour faire afficher d'entrée mercredi au lieu de lundi notre exemple devient :

<FORM>

<SELECT name="nom" size="1">

<OPTION>lundi

<OPTION>mardi

<OPTION selected>mercredi

<OPTION>jeudi

<OPTION>vendredi

</SELECT>

</FORM>

· La balise <SELECT> a un balise de fin </SELECT> tandis que le balise de fin </OPTION> est facultative.

6. Bouton d'option

6.1. Définition

Il serait plus logique de parler de boutons d'option car ils n'ont de sens que s'ils sont plusieurs. Ainsi on parle d'un groupe de boutons d'options.

Les boutons d'option, aussi appelés boutons radio, ont comme particularité qu'une seule option à la fois peut être activée (le "ou" exclusif).

La syntaxe de base est :

<FORM>

<INPUT type="radio" name="nom du groupe" value="valeur du bouton">

</FORM>

Ainsi, si on propose un choix entre, ou le tarif de jour ou le tarif de nuit ou le tarif de week-end, l'exemple devient

<FORM>

<INPUT type= "radio" name="tarif" value="jour"> tarif de jour

<INPUT type= "radio" name="tarif" value="nuit"> tarif de nuit

<INPUT type= "radio" name="tarif" value="week-end"> tarif de week-end

</FORM>

Commentaires

· Vous avez compris que l'attribut name="nom" doit avoir le même nom pour tout le groupe de boutons d'option.

· L'attribut "checked" (optionnel) permet de présélectionner un bouton radio. Ainsi

<INPUT type= "radio" name="tarif" value="jour" checked> tarif de jour

présenterait le bouton radio "tarif de jour" en position présélectionnée.

· Le contenu de l'attribut "value" du bouton retenu sera renvoyé par mailto ou utilisé par le Javascript.

· La balise <INPUT> n'a pas de balise de fin.

· Pour la petite histoire le terme radio ferait référence aux anciens postes de radio sur lesquels le fait d'appuyer sur un bouton désactivait le bouton précédemment enfoncé.

7. Case à cocher

7.1. Définition

La philosophie des cases à cocher [checkbox] est assez similaire aux boites d'option. Ici, cependant, plusieurs choix simultanés peuvent être réalisés.

La syntaxe de base est :

<FORM>

<INPUT type="checkbox" name="nom" value="valeur attachée au bouton">

</FORM>

Comme exemple :

<FORM>

<INPUT type="checkbox" name="choix1" value="1"> glace vanille

<INPUT type="checkbox" name="choix2" value="2"> chantilly

<INPUT type="checkbox" name="choix3" value="3"> chocolat chaud

<INPUT type="checkbox" name="choix4" value="4"> biscuit

</FORM>

7.2. Commentaires

· Les règles pour l'attribut name="nom" sont moins précises que pour les boutons d'option. Vous pouvez employer des noms identiques ou des noms différents pour chaque case à cocher. Cependant des noms différents sont nécessaires pour l'utilisation d'un script.

· L'attribut checked (optionnel) permet de présélectionner une case à cocher. Ainsi

<INPUT type="checkbox" name="choix1" value="1" checked > glace vanille

présenterait la case à cocher "glace vanille" en position présélectionnée.

· Le contenu de l'attribut "value" du ou des boutons retenus seront renvoyés par mailto ou utilisé par le Javascript.

· La balise <INPUT> n'a pas de balise de fin.

8. Bouton de commande

8.1. Définition

Avec l'introduction des langages de scripts (Javascript et VBscript) l'usage du bouton de commande présente un intérêt certain. Simplement à titre d'illustration ou pour vous donner envie d'en savoir plus sur le Javascript, je vous propose d'en découvrir la syntaxe :

<FORM>

<INPUT type="button" name="nom" value="texte du bouton" onclick="fonction Javascript">

</FORM>

Voyons un petit exemple.

<FORM>

<INPUT type="button" name="nom" value= "Bouton de test" onclick="alert('Test réussi !')">

</FORM>

En cliquant sur le bouton "Bouton de test", on va déclencher une fonction Javascript élémentaire [mon cher Watson] qui consiste à afficher une petite boite (dite d'alerte) avec le texte "Test réussi!".

8.2. Commentaires

· L'attribut "value" permet d'adapter le texte du bouton à vos souhaits.

· Avec le bouton de commande, il n'est pas nécessaire d'avertir le browser qu'on utilisera du Javascript par une balise du genre <SCRIPT language="javascript">. En effet, le navigateur (compatible Javascript) reconnaît par défaut les fonctions en Javascript. Par contre, si vous utilisez du VBscript, il faudra utiliser l'encodage <INPUT type="button" name="test" value="Pour un test" language="VBscript" OnClick="MsgBox 'Test réussi!'"> (Pour rappel, Javascript par défaut). Mais je m'emporte et je m'éloigne ainsi des objectifs de ce chapitre...

9. Submit et Reset

9.1. Submit

Le bouton Submit a la tâche spécifique de transmettre toutes les informations contenues dans le formulaire à l'URL désignée dans les attributs ACTION et METHOD du tag <FORM>.

la syntaxe Html est :

<FORM>

<INPUT TYPE="submit" NAME="nom" VALUE="texte du bouton">

</FORM>

Soit par exemple :

<FORM>

<INPUT TYPE="submit" NAME="nom" VALUE=" Envoyer ">

</FORM>

Commentaires

· Les modifications seront peu nombreuses car le bouton Submit a une fonction Html très spécifique. Seul le texte du bouton pourra être modifié (par défaut Submit).

· La balise <INPUT> n'a pas de balise de fin.

9.2. Reset

Le bouton Reset permet d'annuler les modifications apportées aux contrôles d'un formulaire et de restaurer les valeurs par défaut.

la syntaxe Html est :

<FORM>

<INPUT TYPE="reset" NAME="nom" VALUE="texte du bouton">

</FORM>

Soit par exemple :

<FORM>

<INPUT TYPE="reset" NAME="nom" VALUE=" Annuler ">

</FORM>

Commentaires

· Les modifications seront peu nombreuses car le bouton Reset a une fonction Html très spécifique. Seul le texte du bouton pourra être modifié (par défaut Reset).

· La balise <INPUT> n'a pas de balise de fin.

10. Un livre d'or

Une des premières applications des formulaires est celle d'un livre d'or [guestbook]. Vous trouverez ci-après un exemple complet de l'utilisation des formulaires par mailto et qui peut être adapté par chacun pour en faire "son" livre d'or.

N'oubliez pas que mailto ne fonctionne pas sous Microsoft Explorer 3.0 mais seulement sous Explorer 4.0 et Netscape 3.0 et plus. Pour être précis, mailto sous Explorer 3.0 n'entraîne pas de message d'erreur mais ouvre simplement une fenêtre de courrier électronique sans tenir compte du formulaire.

Pour ma part, j'ai retiré la page de livre d'or de mon site car à mon avis, pour un site d'amateur ou d'hobbyiste, une prédéfinition de l'information n'était pas forcément adaptée. Il me semble qu'une libre expression du lecteur (concise ou plus étendue) était de loin plus enrichissante. En outre, certains ne tiennent pas à transmettre leur nom ou leur domicile et souhaitent ne s'en tenir qu'à leur adresse émail.

Voici donc un exemple de livre d'or que vous pouvez adapter :

<FORM method="post" action="mailto:votre_adresse_E-mail">

Votre nom :<BR>

<INPUT type="text" name="nom"><BR>

Votre adresse :<BR>

<TEXTAREA name="adresse" ROWS=2 COLS=35>

</TEXTAREA><BR>

<INPUT type="submit" value="Envoyer">

<INPUT type="reset" value="Annuler">

</FORM>

Vous recevrez dans notre boite de réception, un truc bizarre du genre :

nom=Van+Lancker+Luc&adresse=Rue+des+Brasseurs+2217OD%OA7700+Mouscron.

• où on retrouve les champs nom= et adresse=, •où les champs sont séparés par le signe &,

• où les espaces sont remplacés par le signe +

• et 17%OD%OA correspond à un passage à la ligne.

Il existe heureusement des programmes comme "mailto: Formatter" pour vous aider à décoder tout ceci.

Les formulaires

www.ccim.be/ccim328/htmlplus/idxform/index.htm

© copyright 1998

Van Lancker Luc
Rue des Brasseurs, 22

7700 Mouscron

Vanlancker.Luc@ccim.be


DHTML ou le Html dynamique

1. Définition du DHTML

1.1 Introduction ou ... au risque de vous décevoir

Ne cherchez pas de syntaxe ou de références DHTML, vous n'en trouverez pas. Le DHTML n'est pas un langage de balises, de scripts ou de programmation. Le DHTML n'est pas une quelconque spécification. Il n'est même pas réellement une technologie! Tout simplement,

le DHTML ou Html dynamique est, et reste, du Html

où le concepteur a mis l'accent sur les animations.

A l'heure de l'importance croissante de l'impact visuel des sites Internet, le Html dit dynamique est un "plus" incontestable et génial sous certains aspects. Mais il faut raison garder! Le DHTML n'est pas le "futur de l'Internet" comme le prétendent certains mais, à n'en pas douter, il y aura certainement une bonne place.

Bien que peut-être excessifs, je suis même tenté de reproduire les mots de Sally Khudairi [à vos souhaits!] du World Wide Web Consortium (W3C) : "DHTML is nothing more than a marketing term for generic animation and manipulation of multimedia events" (DHTML n'est rien d'autre qu'un terme de marketing pour des animations et des effets multimédia).

1.2. Définition

Le DHTML se définit comme un (savant) mélange de trois développements de la publication sur Internet : les feuilles de style (CSS1), les langages de script, principalement le Javascript, ainsi que les objets et leur positionnement en vue de produire des pages dynamiques et interactives.

Ajoutons car cela n'apparaît pas dans la définition :

· l'aspect dynamique réside dans le fait que la page Html peut être modifiée après le chargement de celle-ci par le navigateur.

· une volonté d'effectuer les animations et interactions côté client (c-à-d côté browser) sans faire appel aux ressources du serveur par des applets Java ou des ActiveX.

· cette technique DTML a un aspect "high-tech" et est réservée aux versions 4.0 (ou plus) de Internet Explorer et Netscape.

1.3. Les feuilles de style

Popularisée par Microsoft avec Internet Explorer 3.0 (bien qu'elles existaient déjà sous d'autres systèmes), les feuilles de style [Cascading Style Sheets] constituent un réel développement dans la conception de pages Web, en séparant la mise en forme du contenu, en proposant des possibilités jusque là inédites en Html strict , etc..

Le concept des feuilles de style est maintenant un standard depuis son officialisation par le Word Web Consortium sous la norme CSS level 1 et son intégration dans le Html 4.0. Et les versions 4.0 de Microsoft Explorer et Netscape Navigator reprennent déjà largement les feuilles de style.

Pour une étude plus poussée, les feuilles de style sont largement abordées dans ce site (www.ccim.be/ccim328/ htmlplus/idxstyle.htm).

1.4. Les langages de scripts (surtout Javascript)

Introduit par Netscape avec Navigator 2.0, Javascript a bien mûri au fil des versions 3.0 et 4.0 des browsers de la marque (Javascript 1.1, Javascript 1.2). Enfin repris efficacement par Microsoft sous Explorer 4.0, ce langage de scripts s'est définitivement imposé comme un élément incontournable dans l'élaboration de sites Internet.

Javascript permet de programmer et d'exécuter, côté client c-à-d côté browser et donc sans faire appel à des ressources extérieures, de petites applications à l'intérieur de pages Html. Sans être un véritable langage de programmation, Javascript en possède toutes les fonctionnalités ou presque).

VBscript fait également partie des langages de scripts qui peuvent être utilisés dans le DHTML. Mais propriétaire Microsoft, il n'est que peu utilisé en DHTML au détriment de Javascript.

Javascript est aussi un standard Internet depuis la norme ECMA Script. En outre, le Html 4.0 le reprend largement.

Pour vous guider dans l'apprentissage de ces deux langages de scripts, "Apprendre le Javascript" (www.ccim.be/

ccim328/js/index.htm) et "Apprendre le VBscript" (www.ccim.be/ccim328/vb/index.htm) du même auteur, sont à votre disposition.

1.5. Les objets et leur positionnement

L'héritage du Html, à l'origine conçu pour faire transiter du texte structuré, est parfois pesant. Positionner précisément, au pixel près, un texte ou une image, tourne vite au cauchemar. De là est née l'idée d'introduire une sorte de cadre, de rectangle dans lequel on pourrait "encapsuler" des "objets" comme précisément du texte, des images ou tout autre élément.

Comme s'est souvent le cas dans l'histoire de la publication sur Internet, nos deux compères Microsoft et Netscape, se sont attelés à la tâche (sans attendre un quelconque standard) et ce en suivant des modèles différents pour cette insertion d'objets dans les documents Html.

Microsoft fournit un accès aux éléments des pages Html par "ses" feuilles de style (CSS-P). Netscape a choisi un modèle d'insertion d'éléments qui lui est spécifique par le concept de "layer" et sa collection de balises. On se retrouve donc avec deux technologies distinctes pour une même approche.

Le W3C tente de réunir de réunir les deux précédentes technologies pour les faire fonctionner ensemble. C'est le DOM [ Document Objet Model ]. Cette tentative est encore à ce jour (septembre 98), un document de travail et l'on reste donc encore dans l'attente d'un véritable standard.

Cette lacune ouvre la porte aux problèmes de compatibilité pour les applications DHTML selon quelles soient traitées par Netcape 4.0 ou par Explorer 4.0.

1.6. Déceptions

Si visuellement et techniquement, le DHTML est quelque chose de tout à fait génial, on ne peut qu'être un peu déçu :

· par son manque (actuel?) de compatibilité. Un DHTML qui fonctionne pour IExplorer 4.0 ne tourne que très rarement sous Netscape 4.0. Si le Webmaster est gentil, il aura bien prévu une petite remarque du genre "Il vous faut le browser X". Mais je fais toujours partie de ceux qui n'ont pas de bol et emploient justement le browser Y.

· par sa complexité. Tout en tirant mon chapeau aux concepteurs de DHTML, le Html dynamique n'est pas du tout à la portée d'un débutant et n'est même plus à la portée d'un hobbyiste, fut-il averti. Il faut connaître sous le bout des doigts, trois techniques : le Html, le Javascript et les feuille de style. Ce qui n'est pas à la portée du premier

· Webmaster venu. A vos cours de programmation... ou à votre "copier/coller" (en respectant le copyright).

· par son temps de chargement plus important bien qu'il ne soit en rien comparable avec la vitesse d'escargot des applets Java.

· par son risque réel de faire planter le browser et même la machine si l'application DHTML est mal écrite.

1.7. Espoirs

Mais terminons par une note positive car :

· le concept DHTML (Feuilles de style - Javascript - Objets) est bien né et n'est pas remis en cause par les actuels problèmes de compatibilité.

· le DHTML est encore jeune et les développeurs ne peuvent que, dans un avenir proche, trouver de nouvelles astuces pour améliorer cette compatibilité.

· après les versions 4.0, Microsoft et Netscape sortiront leurs versions 5.0... Et celles-ci intégreront (peut-être) une gestion commune des objets.

2. Positionner avec Netscape

par la technique des couches [layer]

2.1.La balise <LAYER>

Netscape propose depuis sa version 4.0, une technique pour positionner des éléments. C'est la technique des couches ou des "layers". On peut comparer ces layers aux transparents que l'on utilise avec les rétroprojecteurs.

La syntaxe est :

<LAYER name="nom" left=x top=y> ... élément ... </LAYER>

La balise <LAYER> va demander au browser de réserver une sorte de petit rectangle - vide - ou une sorte de container dans lequel on va placer un élément, par exemple une image.

Il sera indispensable de donner un nom au "layer" lorsque plusieurs sont utilisés dans une même page ou un même document.

Les attributs "left" et "top" vont positionner cette zone par rapport au coin supérieur gauche de la fenêtre du browser. Top est la valeur en pixels du haut vers le bas et left, la valeur en pixels de la gauche vers la droite.

Le browser va afficher les layers et leur contenu quoiqu'il arrive! Idéal pour créer selon vos désirs des effets de superpositions. Idéal aussi pour avoir des superpositions inattendues...

La tag <LAYER> est un tag propriétaire de Netscape 4.0 qui n'a pas été repris par Microsoft. "LAYER" ne fonctionne donc pas sous Eplorer 4.0 et uniquement sous Netscape. Comme les feuilles de style qui permettent aussi de positionner des éléments, sont reprises et par Explorer 4.0 et par Netscape 4.0, cette dernière technique est recommandée pour des raisons de compatibilité.

2.2. Exemple

Pourquoi des couches? Tout simplement (les layers étant affichés quoiqu'il arrive), lorsque vous prévoyez plusieurs layers au même endroit, le premier qui apparaît dans le code, sera affiché directement. Le layer suivant viendra se mettre au-dessus et ainsi de suite. Le premier layer est donc celui qui sera "au fond" de l'écran par rapport autres. En jouant avec la transparence des images gif, on peut ainsi créer des effets surprenants.

Nous allons superposer les deux images suivantes :

<LAYER name="layer1" left=100 top=50>

<IMG SRC="dyna.gif" height=97 width=160>

</LAYER>

<LAYER name="layer2" left=110 top=75>

<IMG SRC="html.gif" height=41 width=83>

</LAYER>

La couleur verte a disparue car elle a la particularité gif d'être transparente. Le positionnement au pixel près ne se fait pas sans tâtonnement et il faut souvent plusieurs essais avant d'arriver au résultat souhaité.

Le mouvement quant à lui est obtenu avec une bonne dose de Javascript en faisant varier les valeurs des attributs "top" et "left".

3. Positionner avec Explorer

par la technique des feuilles de style (CSS)

3.1. L'approche par les feuilles de style

Quelques mois après la version 4.0 de Netscape, Microsoft sortait la version 4.0 de Explorer. Ce qui lui a permis d'aller plus avant dans le positionnement et la définition des objets.

Microsoft a développé "son" concept de feuilles de style (Cascading Style Sheets ou CSS] qui permettait déjà de décomposer une pages Web en blocs avec les balises SPAN et DIV. Restait à pouvoir positionner ces blocs... C'est tout le développement du CSS-P ou du positionnement avec les feuilles de style.

A l'opposé de l'approche de Netscape avec une balise (la balise <LAYER>), les feuilles de style apportent un concept plus vaste, plus complet et plus puissant mais d'un apprentissage (un peu) plus complexe.

Pour les lecteurs qui prennent le site en marche, je rappelle que les feuilles de style sont largement abordées plus avant dans le site (www.ccim.be/ccim328/ htmlplus/idxstyle.htm).

3.2. Position absolue ou relative

La position absolue {position: absolute} se détermine par rapport au coin supérieur gauche de la fenêtre du browser. Les coordonnées de ce point sont top = 0 et left = 0. Les coordonnées d'un point s'expriment en pixels, de haut en bas pour top et de gauche à droite pour left.

La position relative {position: relative} se détermine par rapport à d'autres éléments de la page, par exemple un élément du code Html.

3.3. Positionner une image

Plaçons l'image htmlplus.gif en position absolue à 50 pixels de haut de la fenêtre (top) et à 100 pixels à gauche (left). Les dimensions de l'image sont width=242 et height=84.

<HTML>

<BODY>

<span style="position: absolute; top: 50px; left: 100px; width: 242px; heigth: 84px;">

<IMG src="htmlplus.gif">

</span>

</BODY>

</HTML>

Spécifiez toujours les propriétés width et heigth avec les feuilles de style car par défaut, Netscape 4.0 et Explorer 4.0 ne réagissent pas de la même façon.

3.4. Superposer du texte sur une image

Reprenons l'image htmlplus.gif et on y superposera le nom de l'auteur de ce tutorial, au pixel près dans la barre qui souligne le terme Html.

<HTML>

<BODY>

<span style="position: absolute; top: 50px; left: 100px; width: 242px; heigth: 84px;">

<IMG src="htmlplus.gif">

</span>

<span style="position: absolute; top: 96px; left: 145px; color: yellow; font-size: x-small; font-weight: bold;">

Van Lancker Luc

</span>

</BODY>

</HTML>

4. Le "Document Objet Model"

4.1 La notion d'objet.

Conçu dans les années 1980, le Html (HyperText Markup Langage) n'est finalement qu'un long fichier de texte auquel on a ajouté des balises (Markups) - prédéfinies et statiques - afin que les navigateurs puissent afficher ce texte dans une mise en forme ou une mise en page identique sous différentes plates-formes. Html n'a par essence aucune structuration et encore moins d'hiérarchisation de ses composants.

La perception d'une page Html comme un ensemble d'éléments et qui plus est hiérarchisés, est une véritable révolution dans le domaine de la publication Html. Ces éléments sont aussi repris sous le vocable d'objets au sens des langages de programmation comme C ou C++.

A la mi-97, Netscape a entamé le sujet avec sa version 4.0 en créant une balise propriétaire <LAYER>. Explorer 4.0, qui est apparu quelques mois plus tard, a pu aller plus avant dans le concept objet en exploitant quant à lui, le concept des feuilles de style repris et développé par Microsoft.

Il devenait alors évident que ce concept d'objets devait être standardisé par le World Wide Web Consortium (W3C) avec comme objectif de dégager un modèle commun pour la définition des objets dans un document Html. Ce qui a donné naissance au Document Object Model repris sous l'abréviation de DOM.

4.2 Le Document Object Model ou DOM

Ce "Document Object Model" n'est encore à ce jour (septembre 98) qu'un document de travail et n'est donc toujours pas finalisé.

Si les principaux protagonistes, Netscape et Microsoft, sont unanimement d'accord sur la nécessité d'introduire un principe (commun) de la notion d'objets, leurs avis divergent complètement sur les techniques à mettre en oeuvre pour le réaliser.

Leurs principaux points de désaccord peuvent se résumer ainsi :

· Netscape 4.0, conçu plusieurs mois avant son concurrent, a une conception interne assurément moins élaborée et moins souple que Explorer 4.0.

· Netscape 4.0 n'a accès qu'à quelques éléments de la page alors que IExplorer 4.0 a accès à tous les éléments de la page.

· A travers cette implémentation de la notion d'objet, Netscape défend (ou tente de récupérer) le concept de Java et Microsoft prône bien sûr ses ActiveX et autres Active Channels.

· Les versions 5.0 de Microsoft et de Netscape se profilent à l'horizon 99.

Constatant que dans l'état actuel des technologies les avis étaient inconciliables, le W3C a préféré jeter des bases plus solides pour l'avenir en rattachant cette notion commune d'objets au XML (eXtensible Markup Language) qui sera compatible avec les futures évolutions 5.0 des navigateurs.

4.3. Le XML en bref

Il faut bien l'avouer, le Html avec toutes ses balises rajoutées au fil des années, fait un peu désordre. Il subit en outre une demande énorme en termes de besoins en publication sur Internet auxquels il ne peut répondre comme les signes mathématiques, les notes de musique ou le braille.

Le XML (eXtensible Markup Language) donne l'impression de repartir avec une feuille blanche. XML n'est en aucune façon, un Html++ mais un nouveau petit frère pour le Html car XML et Html ont la même mère c-à-d le langage SGML.

Pas simple tout cela...

D'abord le SGML (pour Standard Generalized Markup Language), est une norme internationale (ISO 8879), qui régit la structure et le contenu des différents types de documents électroniques. Le SGML est en quelque sorte un "language-mère" utilisé pour décrire les milliers de documents électroniques que l'on retrouve dans les multiples domaines de l'activité humaine.

Le HTML (HyperText Markup Language) n'est que un de ces types de documents avec ses balises imposées et qui est utilisé pour les documents électroniques qui circulent sur le Web.

Avec le XML, on retourne aux sources du SGML en permettant au "designer" de définir son propre type de document et, côté spectaculaire de la chose, de créer ses propres balises (voir le X de eXtensible).

Tant Microsoft que Netscape annoncent que le XML sera disponible avec les versions 5.0 de leur browser.

Nous ne manquerons pas de revenir plus en détail sur le XML, plus tard dans l'élaboration de ce site consacré à la maîtrise du Html.

4.4 En conclusion

Pour en revenir à la définition d'objets, chaque fabricant de browser pourra avec le Xml implémenter des objets, selon sa propre perception et selon sa propre technologie, définir ses propres balises relatives aux objets et le tout sera géré de façon commune par tous les browsers compatibles avec le XML. Et voilà, le tour est joué.

Le Dhtml ou le Html dynamique

www.ccim.be/ccim328/htmlplus/idxdhtml.htm

© copyright 1998

Vanlancker.Luc@ccim.be


Quelques règles typographiques

Les règles typographiques ont été établies au fil des siècles par les professionnels de l’imprimerie afin de faciliter la compréhension et de rendre plus efficace (donc plus agréable) la lecture des documents imprimés ; les aspects graphiques de l’écriture ne doivent pas gêner pas la lecture. De nos jours, la micro-informatique permet à tout un chacun d’imprimer du texte sur papier ou à l’écran. Malheureusement, les règles de typographie sont mal connues des utilisateurs et très rarement enseignées. Nous allons donc présenter quelques règles typographiques parmi les plus importantes pour la bonne lisibilité d’un document.

I - L’italique

Les caractères utilisés en typographie sont de deux types : le romain et l’italique.

Le romain, dont le dessin est vertical, est le type de caractère le plus courant.

L’italique est un caractère penché qui s’emploie pour faire contraste avec le romain : marquer l’insistance, la disjonction ou le souci d’authentification. Il permet d’attirer l’attention du lecteur sur un mot, une phrase ou un passage très court que l’auteur tient à souligner. Il est donc évident que tout abus dans l’usage en diminue l’efficacité.

À défaut de caractères italiques, il est possible d’utiliser le romain entre guillemets. On préfèrera d’ailleurs cette solution pour les citations longues, car l’italique est moins lisible que le romain.

On compose en italique :

- les titres d’œuvres littéraires, artistiques, scientifiques ;
- les titres de journaux et périodiques ;
- la préface, l’avis de l’éditeur et, d’une manière générale, tout ce qui n’est pas de la main de l’auteur ;
- les noms propres de bateaux ou de véhicules terrestres ou aériens (à l’exclusion du type ou de la marque) ;
- les citations (uniquement celles situées dans le corps du texte)
- les mots ou locutions en langue étrangère (y compris le latin) ;
- les dédicaces placées en tête d’un ouvrage ou d’un chapitre ;
- les fonctions et qualités du signataire d’un document ;
- les jeux de scène dans les œuvres théâtrales ;
- les notes de musique (car d’origine latine).

Citations

Les longues citations indépendantes seront composés en romain (et non en italique) d’un corps inférieur à celui du texte (généralement de 2 points) et seront isolés du paragraphe suivant et du paragraphe précédent par des blancs (espacements avant et après). Un chevron ouvrant ( " ) est placé à chaque début de paragraphe. Un seul chevron fermant ( " ) conclut l’ensemble.

Les citations courtes, ne présentant pas de discontinuité avec le texte, seront composées en italique.

Les coupes internes à une citation longue devront être indiquées par des points de suspension entre crochets : […].

II - Les capitales

On compose avec une capitale initiale :

- le premier mot d’une phrase ou d’une citation ;
- les noms propres, prénoms et surnoms ;
- les noms de divinités ;
- les noms de peuples ou habitants d’une région, d’une ville ;
- les noms géographiques et historiques ;
- les noms propres de bateaux ou de véhicules terrestres ou aériens ;
- les titres d’œuvres littéraires, artistiques, scientifiques ;
- les titres de journaux et périodiques.

Note : La typographie française recommande d’accentuer les lettres capitales, y compris celles commençant une phrase (voir tableau ci-dessous).

On ne met pas de capitale initiale :

- après un deux-points, à l’intérieur d’une phrase ;
- après un point virgule ;
- aux adjectifs de noms de peuples ou de pays ;
- aux noms de jours et de mois.

III - Les nombres

Travaux scientifiques et statistiques : les nombres doivent être exprimés en chiffres arabes.

Œuvres littéraires : les nombres se composent au long (i. e. en toutes lettres), à l’exception des dates.

On compose en chiffres romains :

- les numéros d’arrondissements (en petites capitales) ;
- les numéros des tomes, livres, volumes, chapitres, actes, scènes… (en petites capitales) ;
- les nombres suivant un nom de souverain (en grandes capitales) ;
- les numéros des siècles (XVIIe siècle) (en petites capitales).

Numéros de pages

Lorsque les numéros de pages sont disposés en tête, les pages commençant par un titre important ou un chapitre disposé " en belle page " (page impaire) n’en comportent pas.

Lorsque les numéros de page sont disposés en pied, on les supprime sous les fractions de pages terminant un chapitre, une partie... (fractions de pages appelées " pages creuses ").

Dans un document recto-verso, numéroter les pages impaires sur le recto (page de droite) et les pages paires sur le verso (page de gauche).

IV - Les abréviations

Les abréviations sont à éviter dans les ouvrages littéraires et poétiques.

Quelques abréviations utiles :

apr. J.-C. | après Jésus-Christ
cf. | confer (comparez avec)
c.-à-d. | c’est-à-dire
chap. | chapitre
É.-U. | États-Unis
ibid. | ibidem (au même endroit)
id. | idem (le même)
i. e. | id est (c’est-à-dire)
loc. cit. | loco citato (passage cité)
Mlle ou Mme | Mademoiselle ou Madame
M., MM. | Monsieur, Messieurs
N. B. | Nota Bene
N. D. L. R. | Note de la rédaction
n° | numéro
p. 127-138 | pages 127 à 138
op. cit. | opere citato (ouvrage cité)
s. d. ou s. l. | sans date ou sans lieu
s. l. n. d. | sans lieu, ni date
sq. | sequiturque (et suivant[e])
qq. | sequunturque (et suivant[e]s)
tél. | téléphone
1er, 1e, 2e | premier, première, deuxième
1°, 2°, 3° | primo, secundo, tertio
IIIe siècle | troisième siècle (petites capitales)

Noter les abréviations en exposant et les expressions latines en italiques.

Le point abréviatif n’exclut pas l’emploi de signes de ponctuation exigés par la phrase, mais il se confond avec le point final ou les points de suspension.

Même chose pour etc., abréviation qui ne doit jamais être renvoyée au commencement de la ligne, ni répétée, ni suivie de points de suspension (et qui doit être composé en italique, puisque d’origine latine).

Sigles

On privilégiera l’emploi de lettres capitales sans points ; outre le cas de nombreux sigles de formation syllabique (MNEF, CAPES) excluant la présence de points, ceux qui pourraient en comporter n’en sont qu’inutilement et " inesthétiquement " allongés : SNCF, USA, UNESCO.

Appel de Note

Dans le texte, l’appel de note se place immédiatement après le mot ou le groupe de mots auquel il se rapporte. Il précède donc toujours le signe de ponctuation : avant le point en fin de phrase, avant le guillemet fermant en fin de citation.

V - Les césures

La coupure des mots et des phrases en fin de lignes obéit à des règles précises : coupure syllabique ou éventuellement coupure étymologique.

On ne sépare pas :

- les lettres abréviatives du nom auquel elles se rapportent (ex. : P. BOULEZ ou 15 cm.) ;
- un nombre en chiffres du mot qu’il accompagne ;
- la ponctuation du mot qui le précède et auquel elle se rapporte.

On ne coupe pas les mots suivants :

- noms propres ou prénoms ;
- un nom propre suivi d’un prénom (ou l’inverse).

On évitera :

- plus de trois lignes consécutives se terminant par des césures ;
- moins de deux lettres en fin de ligne avant la césure ;
- moins de deux lignes commençant un paragraphe en bas de page ou de colonne (orpheline) ;
- moins de deux lignes terminant un paragraphe en début de page ou de colonne (veuve).

VI — Espaces et ponctuations

La ponctuation permet de clarifier la lecture ou d’indiquer certaines nuances propres à un auteur.

Un signe de ponctuation ne doit jamais être rejeté à la ligne (exception faite de la parenthèse et du crochet ouvrants et des tirets d’énumération).

Cette règle évidente est appliquée de façon intuitive lorsqu’on écrit à la main. Lorsqu’un logiciel de traitement de texte n’a pas la place suffisante pour placer un mot à la fin d’une ligne, il le renvoie automatiquement au début de la ligne suivante. Si l’on n’y prête pas attention, on aura vite fait de se retrouver avec une virgule en début de ligne, ou bien avec des guillemets ouverts en fin de ligne.

Pour des raisons historiques et esthétiques, les règles typographiques de la langue française veulent que l’on mette une espace avant tout signe de ponctuation constitué de deux " graphèmes " (point d’inter-rogation, point virgule, deux points...) ; pour ces signes-là le problème reste donc entier. Il a donc été nécessaire de créer, " l’espace insécable ", une espace qui, tout en ouvrant un interstice entre le mot et le signe de ponctuation, rend ce dernier solidaire de l’unité qui précède ou qui suit.

Quelques conseils

- Il faut avant tout faire preuve de bon sens et surtout de systématisme !
- En cas de doute, acheter un journal sérieux (genre Le Monde, Le Figaro...) ou consulter un ouvrage littéraire issu d’une maison d’édition sérieuse et observer les règles en usage.

Règles d'espacements et ponctuations

avant
signe de ponctuation
après
exemples
Ø
,
espace justifiante
Ø
.
espace justifiante
espace insécable
;
espace justifiante
espace insécable
!
espace justifiante
espace insécable
?
espace justifiante
espace insécable
:
espace justifiante
Ø
‘ (apostrophe)
Ø
l’appartement
Ø
- (trait d’union d’un mot composé)
Ø
arc-en-ciel
espace justifiante
– (incise = 1 cadratin)
espace insécable
idem parenthèse
Ø (si début de ligne)
— (dialogue = 1/2 cadratin)
espace insécable
Ø (si début de ligne)
- (énumération = 1/4 cadratin)
espace insécable
espace justifiante
( ou [
Ø
Ø
) ou ]
espace
espace justifiante
"
espace insécable
espace insécable
"
espace justifiante
Ø
…
espace justifiante
espace justifiante
+ - x = < > % §
espace justifiante
3 + 4 = 7
espace justifiante
" et "
espace justifiante

Obtention des caractères spéciaux sur Mac et PC

caractère
touches sur Mac
touches sur PC
html sur Internet
espace insécable
option + espace
ctrl + maj + espace
&nbsp;
É
décimal 131 ou
option + maj + &, puis maj. + e
ctrl + 4, puis maj + e
&Eacute;
È
option + k
ctrl (+ alt) + 7,
puis maj + e
&Egrave;
-
signe moins
signe moins
signe moins
—
option + maj + -
ctrl + alt + -
&#173
–
option + -
ctrl + -
&#175
Œ ou œ
option + (maj) + o
ctrl + 1, puis (maj) + o
&#140 ou &#156
" ou " (chevrons)
option + (maj) + è
utiliser "
(voir note 7)
&#171; et &#187;
&laquo; et &raquo;
’
option + maj + ‘
option + maj + ‘
…
option + .
option + ;
{ ou }
option + ( ou )
alt gr + ( ou )
idem Word
[ ou ]
option + maj + ( ou )
alt gr + ‘ ou "
idem Word
utiliser la police de caractère d’un logiciel d’écriture musicale :
Anastasia, Petrucci, Seville…

Anastasia, Petrucci, Seville, Music Symbols TTF…

utiliser des images

[ Univ. LYON 2 ] [ Dépt. Lettres ] [ Dépt. Musicologie ] [ NTE Musicologie ] [ administrateur du site ]
Cette page est aussi téléchargeable en format pdf (50 ko)
© ß. MERLIER - (Bertrand.Merlier@univ-lyon2.fr) - Sept 2000 / Maj : Déc 2000


Règles de typographie française

applicables à l'écriture d'articles, de comptes rendus de réunions, de projets, de messages électroniques ou de pages HTML

Il est toujours agréable de lire des documents bien composés, sans fautes sémantiques ou syntaxiques, sans abréviations incompréhensibles, normalement accentués et ponctués. Les logiciels et matériels que nous utilisons actuellement permettent d'atteindre une qualité honorable.

Il est très difficile dans nos diverses activités professionnelles de respecter la totalité des règles traditionnelles telles qu'elles sont exposées dans les Règles Typographiques en usage à l'Imprimerie Nationale (ISBN 2-11-081075-0) ou dans le Dictionnaire des règles typographiques de Louis Guéry, CFPJ Editions. Cependant, on peut se plier à quelques habitudes communes en matière d'abréviations, d'emploi des majuscules, d'accentuations, d'écriture des chiffres, de présentation, de ponctuation. Voici quelques règles extraites du Manuel de typographie française élémentaire d'Yves Perrousseaux (tél. 04 92 76 49 41).

Abréviations

Règles générales

  • Une abréviation qui ne se compose que des premières lettres du mot se termine par un point :
    référence = réf.
  • Une abréviation qui se termine par la dernière lettre du mot ne comporte pas ce point final :
    boulevard = bd
  • L'abréviation des groupes de mots ne comporte pas de point final : s'il vous plaît : SVP ou svp

Il y a cependant des exceptions consacrées par l'usage.

On abrège

  • après Jésus-Christ, par apr. J.-C. ou apr. J-C
  • avant Jésus-Christ, par av. J.-C. ou av. J-C
  • article, par art. (ne s'abrège pas lorsqu'il s'agit de l'article premier de statuts ou de titres de lois)
  • bas de casse (minuscules), par bdc
  • basse tension, par BT
  • bon à tirer, par BAT
  • capitale (d'un pays), par cap.
  • capitale (majuscule), par CAP
  • c'est-à-dire, par c.-à-d. ou c-à-d
  • confer, par cf.
  • département, par dép.
  • environ, par env.
  • et cetera, par etc. (pas de points de suspension ni de répétition)
  • exemple, par ex.
  • faubourg, par fg
  • féminin, par fém.
  • figure, par fig.
  • habitants, par hab.
  • haute tension, par HT
  • hauteur, par H. ou haut. (H est le symbole de l'hydrogène)
  • hors taxes, par ht
  • idem, par id.
  • introduction, par introd.
  • largeur, par l. ou larg. (l veut dire litre)
  • longueur, par L ou par long.
  • Madame, par Mme
  • Mademoiselle, par Mlle
  • masculin, par masc.
  • Mesdames, par Mmes
  • Mesdemoiselles, par Mlles
  • Messieurs, par MM.
  • Monseigneur, par Mgr
  • Monsieur, par M. (et non pas par Mr.)
  • moyenne tension, par MT
  • numéro, numéros, par no, nos
  • nota bene, par NB
  • page, par p. (ne se répète pas : p. 127 et 128)
  • paragraphe, par § (ne se répète pas : § 4 et 5)
  • par intérim, par p.i.
  • par ordre, par p.o.
  • pour cent, par p. 100 ou par %
  • pour mille, par p. 1000
  • post-scriptum, par P-S
  • président directeur-général, par pdg
  • recto, par ro, verso, par vo
  • répondez s'il vous plaît, par RSVP
  • sans garantie du gouvernement, par SGDG ou sgdg
  • sans lieu ni date, par s.l.n.d.
  • siècle, par s.
  • société, par sté ou Sté
  • société anonyme, par SA
  • société à responsabilité limitée, par SARL
  • suivant(e)(s), par suiv.
  • supplément, par suppl.
  • taxe sur la valeur ajoutée, par TVA
  • téléphone, par Tél. ou tél.
  • toutes taxes comprises, par TTC

Points cardinaux

Nord, Sud, Est, Ouest : N, S, E, O ou W
NE, NO, SE, SO ou SW, NNE, NNO, SSE, SSO ou SSW, NNE-SSE, etc.
Ex. Ces gens sont originaires de l'Ouest. Il a marché plein sud.

Mesures légales (loi du 3 mai 1961)

Ces abréviations sont invariables au pluriel. On abrège

  • ampère(s), par A
  • are(s), par a
  • centiare(s), par ca
  • centigramme(s), par cg
  • centilitre(s), par cl
  • centimètre(s), par cm
  • décalitre(s), par dal
  • décamètre(s), par dam
  • décibel(s), par dB
  • degré(s), par °
  • degré(s) Celsius, par °C (25 °C)
  • degré(s) Farenheit, par °F (80 °F)
  • franc(s), par F (1 F, 357 F, 675,24 F)
  • grade(s), par gr
  • gramme(s), par g
  • hectare(s), par ha
  • hectogramme(s), par hg
  • hectolitre(s), par hl
  • hectomètre(s), par hm
  • heure(s), par h (20 h, 20 h 30)
  • jour(s), par j ou par d
  • kilogramme(s), par kg (1 kg, 25,5 kg)
  • kilomètre(s), par km
  • kilomètre(s) par heure, par km/h
  • kilowatt(s), par kW
  • kilowatt(s)-heure, par kWh
  • litre(s), par l
  • mètre(s), par m, mètre(s) carré(s), par m2, mètre(s) cube(s), par m3
  • mètre(s) par seconde, par m/s
  • millibar(s), par mbar
  • millilitre(s), par ml
  • millimètre(s), par mm
  • minute(s), (angle) par '
  • minute(s), (temps) par min
  • quintal, quintaux, par q
  • seconde(s) (angle), par "
  • seconde(s) (temps), par s
  • stère(s), par st
  • tonne(s), par t
  • volt(s), par V
  • watt(s), par W

Nombres ordinaux

  • premier, premiers, première, premières : 1er, 1ers, 1re, 1res
  • deuxième, deuxièmes : 2e, 2es
    deuxième ou second : on emploie deuxième quand l'énumération peut aller au delà de deux et second quand l'énumération s'arrête à deux.
    ex. deuxième République, seconde mi-temps.
  • troisième, troisièmes : 3e, 3es
  • primo, secundo, tertio : 1o, 2o, 3o

Majuscules et minuscules

On compose avec une capitale initiale :

  • le mot qui commence une phrase ou une citation complète : elle lui demanda : "Avez-vous trouvé ce livre ?"
  • les patronymes, les prénoms, les surnoms.
  • les noms des peuples, les habitants des régions ou des agglomérations : les Espagnols, les Alsaciens, les Grenoblois. Par contre le nom des langues commence par une minuscule : l'espagnol, le français, le russe, l'arabe, etc.

On écrira donc : un agent de police, la commission des finances, l'état-major.

Organismes d'État

  • l'académie de Reims mais l'Académie de médecine
  • l'université René Descartes, l'université de Toulouse
  • la préfecture de Haute-Savoie
  • le Muséum d'histoire naturelle
  • le Collège de France
  • la Commission européenne
  • les Nations unies

Titres

  • le ministre de l'Éducation nationale
  • M. le professeur Morel

Sigles et acronymes

Les sigles ou acronymes ne comportent ni séparations ni points : EDF, RATP, SNCF, USA, HTML
S'ils se prononcent aisément : Assedic, Euratom, Inserm, Unesco

On met l'accent sur les capitales (si la machine qu'on utilise le permet !)

Chiffres

  • La version 48 de l'EMBL contient 700 169 610 bases, 1 046 026 séquences, 181 343 sous-séquences, 114 821 références.
  • 995,55
  • Ce village, de 1245 habitants, possède 27 km de voies communales réparties sur une surface cadastrée de 25 500 ha 450 ca.
  • 1995 : 858 inscrits, 732 votants, 729 exprimés.
  • La fête sera cette année les 5, 6 et 7 août.
  • Un colloque sur l'oeuvre de Descartes est prévu le mardi 10 décembre 1996.
  • J'ai programmé l'enregistrement à 23 h 15.
  • Un moteur de 5 ampères sous 220 volts.
  • L'étain, d'une densité 7,2, fond à 232 °C et bout vers 2 250 °C.

On compose en chiffres romains les divisions principales d'un ouvrage, les régimes politiques, dynasties, salons, conciles ...

On compose en lettres

  • les nombres inférieurs à 10 : ce document comprend trois parties. Il y a quatre ans et deux mois, avait lieu...
  • les nombre employés comme substantifs : entrer en sixième
  • les fractions d'heures suivant les mots midi et minuit : midi vingt, minuit dix-sept
  • certaines expressions : les années soixante, la guerre de Trente ans

Chiffres composés

  • dix-huit, quatre-vingt-dix-sept, vingt et un
  • cent vingt-deux, trois cent trente et un
  • mille neuf cent quatre-vingt-seize
  • quatre-vingts mais quatre-vingt-un
  • trois cents mais trois cent dix ou sept cent mille

Téléphone, fax

Téléphone 01 44 50 26 18 - Fax 01 42 96 34 97

Adresse

Pour faciliter le tri postal, les adresses s'écrivent sans abréviations, sans majuscules accentuées et sans ponctuation. CEDEX signifie Courrier d'Entreprise à Distribution EXceptionnelle.

Ponctuation

Les phrases se terminent par un point final, un point d'exclamation, un point d'interrogation ou des points de suspension.

La virgule sépare les parties d'une proposition ou d'une phrase à condition qu'elles ne soient pas déjà réunies par les conjonctions et, ou, ni. Elle sépare les énumérations. Elle isole les mots mis en apostrophe. On ne met pas de virgule avant une parenthèse, un tiret ou un crochet.

Le point virgule sépare différentes propositions de même nature.

Le deux-points introduit une explication, une citation, un discours, une énumération.

Les points de suspension sont toujours au nombre de trois.

Les guillemets "informatiques" sont si simplifiés qu'il est impossible de respecter les règles typographiques françaises traditionnelles. Le point final se met avant ou après le guillemet fermant suivant le contexte, il n'est pas doublé.

Les parenthèses intercalent une précision dans la phrase.

Les crochets indiquent une précision à l'intérieur d'une parenthèse ou une coupure dans une citation.

Employé seul, le tiret signale chaque terme d'une énumération ou le changement d'interlocuteur dans un dialogue. Employés par paires, ils s'utilisent comme les parenthèses. En fin de phrase, le second tiret est supprimé avant le point final.

Les énumérations

  • elles sont introduites par un deux-points ;
  • les énumérations de premier rang sont introduites par un tiret et se terminent par un point-virgule, sauf la dernière par un point final ;
  • les énumérations de second rang sont introduites par un tiret décalé et se terminent par une virgule.

Les titres et intertitres

Quand le découpage des lignes permet d'en comprendre le sens, on ne met pas de point, de virgule ou de point virgule.

Espaces en usage avant et après les signes de ponctuation

  • Point et virgule sont suivis d'un blanc.
  • Point d'interrogation, point d'exclamation, point-virgule et deux-points sont suivis d'un blanc et précédés d'une "espace fine insécable". Ce caractère, auquel les professionnels de l'édition de texte sont justement attachés, existe dans les traitements de texte, peut être remplacé par un blanc dans les simples messages et par le caractère &nbsp; en HTML.
  • Les guillemets ouvrants ou fermants sont, respectivement, précédés ou suivis d'un blanc.
  • Les parenthèses ou crochets ouvrants sont précédés d'un blanc.
  • Les parenthèses ou crochets fermants sont suivis d'un blanc.
  • Les apostrophes et traits d'union ne sont ni précédés ni suivis de blanc.
  • Le tiret est précédé et suivi d'un blanc.
  • Les points de suspension sont suivis d'un blanc.
Composition de pages HTML : | PC (Luc Tamisier) | Macintosh (Roger Guillet)
 | Code des couleurs |
Langue française | DGLF : textes législatifs |
Réforme de l'orthographe | Université catholique de Louvain |
Service Général Informatique et Réseaux
Université René Descartes
45 rue des Saints-Pères 75270 PARIS Cedex 06, France
Téléphone 01 44 50 26 21 Fax 01 42 96 34 97
Messagerie : Yvonne Méchaly


Ponctuation : règles de disposition des espaces

Signe | Nom du signe de ponctuation | Avant | Après | Exemples
, | virgule | pas d'espace | espace | Le chat, le chien, le loup
. | point | pas d'espace | espace | Il lit. Il écrit.
... | points de suspension | pas d'espace | espace | Il lit... Il écrit...
: | deux points | espace insécable | espace | Il mélange les ingrédients : farine, beurre, lait.
; | point virgule | espace insécable | espace | On l'invita ; il entra.
! | point d'exclamation | espace insécable | espace | Holà ! Attention !
? | point d'interrogation | espace insécable | espace | Qui ? quoi ? Comment ?
' | apostrophe | pas d'espace | pas d'espace | C'est lui. Je l'ai vu. J'y vais.
( | parenthèse ouvrante | espace | pas d'espace | Une (ou plusieurs) personne(s) semble(nt) venue(s) ici.
) | parenthèse fermante | pas d'espace | espace | ð exception dans certains cas
[ | crochet ouvrant | espace | pas d'espace | Une [ou plusieurs] personne[s] semble[nt] venue[s] ici.
] | crochet fermant | pas d'espace | espace | ð exception dans certains cas
« | guillemet ouvrant | espace | espace insécable | Les « quoique » sont toujours des « parce que » méconnus.
» | guillemet fermant | espace insécable | espace |
- | trait d'union | pas d'espace | pas d'espace | As-tu visité Aix-les-Bains lundi après-midi ?
- | tiret d'énumération | souvent, retrait de paragraphe | espace | - le chat - le chien

L'espace insécable (sur Winword : touches Ctrl + Maj + Espace) permet d'éviter le rejet d'un signe de ponctuation en début de ligne.

Si on ne met pas d'espace insécable, il peut y avoir coupure entre un mot et le signe qui le suit. Par exemple : Où sont les gâteaux au chocolat

?

Le passage à la ligne du signe de ponctuation n'est pas du meilleur effet. En utilisant l'espace insécable, " chocolat ?" est considéré comme un seul mot et restera donc placé sur une même ligne.

On placera également l'espace insécable dans un nombre tel que 34 000, afin que 34 et 000 reste sur une même ligne.


Typographie française

Règles de typographie française

applicables à l'écriture d'articles, de comptes rendus de réunions, de projets, de messages électroniques ou de pages HTML

Il est toujours agréable de lire des documents bien composés, sans fautes sémantiques ou syntaxiques, sans abréviations incompréhensibles, normalement accentués et ponctués. Les logiciels et matériels que nous utilisons actuellement permettent d'atteindre une qualité honorable.

Il est très difficile dans nos diverses activités professionnelles de respecter la totalité des règles traditionnelles telles qu'elles sont exposées dans les Règles Typographiques en usage à l'Imprimerie Nationale (ISBN 2-11-081075-0) ou dans le Dictionnaire des règles typographiques de Louis Guéry, CFPJ Editions. Cependant, on peut se plier à quelques habitudes communes en matière d'abréviations, d'emploi des majuscules, d'accentuations, d'écriture des chiffres, de présentation, de ponctuation. Voici quelques règles extraites du Manuel de typographie française élémentaire d'Yves Perrousseaux (tél. 04 92 76 49 41).

Abréviations

Règles générales

  • Une abréviation qui ne se compose que des premières lettres du mot se termine par un point :
    référence = réf.
  • Une abréviation qui se termine par la dernière lettre du mot ne comporte pas ce point final :
    boulevard = bd
  • L'abréviation des groupes de mots ne comporte pas de point final : s'il vous plaît : SVP ou svp
Il y a cependant des exceptions consacrées par l'usage.

On abrège

  • après Jésus-Christ, par apr. J.-C. ou apr. J-C
  • avant Jésus-Christ, par av. J.-C. ou av. J-C
  • article, par art. (ne s'abrège pas lorsqu'il s'agit de l'article premier de statuts ou de titres de lois)
  • bas de casse (minuscules), par bdc
  • basse tension, par BT
  • bon à tirer, par BAT
  • capitale (d'un pays), par cap.
  • capitale (majuscule), par CAP
  • c'est-à-dire, par c.-à-d. ou c-à-d
  • confer, par cf.
  • département, par dép.
  • environ, par env.
  • et cetera, par etc. (pas de points de suspension ni de répétition)
  • exemple, par ex.
  • faubourg, par fg
  • féminin, par fém.
  • figure, par fig.
  • habitants, par hab.
  • haute tension, par HT
  • hauteur, par H. ou haut. (H est le symbole de l'hydrogène)
  • hors taxes, par ht
  • idem, par id.
  • introduction, par introd.
  • largeur, par l. ou larg. (l veut dire litre)
  • longueur, par L ou par long.
  • Madame, par Mme
  • Mademoiselle, par Mlle
  • masculin, par masc.
  • Mesdames, par Mmes
  • Mesdemoiselles, par Mlles
  • Messieurs, par MM.
  • Monseigneur, par Mgr
  • Monsieur, par M. (et non pas par Mr.)
  • moyenne tension, par MT
  • numéro, numéros, par no, nos
  • nota bene, par NB
  • page, par p. (ne se répète pas : p. 127 et 128)
  • paragraphe, par § (ne se répète pas : § 4 et 5)
  • par intérim, par p.i.
  • par ordre, par p.o.
  • pour cent, par p. 100 ou par %
  • pour mille, par p. 1000
  • post-scriptum, par P-S
  • président directeur-général, par pdg
  • recto, par ro, verso, par vo
  • répondez s'il vous plaît, par RSVP
  • sans garantie du gouvernement, par SGDG ou sgdg
  • sans lieu ni date, par s.l.n.d.
  • siècle, par s.
  • société, par sté ou Sté
  • société anonyme, par SA
  • société à responsabilité limitée, par SARL
  • suivant(e)(s), par suiv.
  • supplément, par suppl.
  • taxe sur la valeur ajoutée, par TVA
  • téléphone, par Tél. ou tél.
  • toutes taxes comprises, par TTC

Points cardinaux

Nord, Sud, Est, Ouest : N, S, E, O ou W
NE, NO, SE, SO ou SW, NNE, NNO, SSE, SSO ou SSW, NNE-SSE, etc.
Ex. Ces gens sont originaires de l'Ouest. Il a marché plein sud.

Mesures légales (loi du 3 mai 1961)

Ces abréviations sont invariables au pluriel. On abrège
  • ampère(s), par A
  • are(s), par a
  • centiare(s), par ca
  • centigramme(s), par cg
  • centilitre(s), par cl
  • centimètre(s), par cm
  • décalitre(s), par dal
  • décamètre(s), par dam
  • décibel(s), par dB
  • degré(s), par °
  • degré(s) Celsius, par °C (25 °C)
  • degré(s) Farenheit, par °F (80 °F)
  • franc(s), par F (1 F, 357 F, 675,24 F)
  • grade(s), par gr
  • gramme(s), par g
  • hectare(s), par ha
  • hectogramme(s), par hg
  • hectolitre(s), par hl
  • hectomètre(s), par hm
  • heure(s), par h (20 h, 20 h 30)
  • jour(s), par j ou par d
  • kilogramme(s), par kg (1 kg, 25,5 kg)
  • kilomètre(s), par km
  • kilomètre(s) par heure, par km/h
  • kilowatt(s), par kW
  • kilowatt(s)-heure, par kWh
  • litre(s), par l
  • mètre(s), par m, mètre(s) carré(s), par m2, mètre(s) cube(s), par m3
  • mètre(s) par seconde, par m/s
  • millibar(s), par mbar
  • millilitre(s), par ml
  • millimètre(s), par mm
  • minute(s), (angle) par '
  • minute(s), (temps) par min
  • quintal, quintaux, par q
  • seconde(s) (angle), par "
  • seconde(s) (temps), par s
  • stère(s), par st
  • tonne(s), par t
  • volt(s), par V
  • watt(s), par W

Nombres ordinaux

  • premier, premiers, première, premières : 1er, 1ers, 1re, 1res
  • deuxième, deuxièmes : 2e, 2es
    deuxième ou second : on emploie deuxième quand l'énumération peut aller au delà de deux et second quand l'énumération s'arrête à deux.
    ex. deuxième République, seconde mi-temps.
  • troisième, troisièmes : 3e, 3es
  • primo, secundo, tertio : 1o, 2o, 3o

Majuscules et minuscules

On compose avec une capitale initiale :
  • le mot qui commence une phrase ou une citation complète : elle lui demanda : "Avez-vous trouvé ce livre ?"
  • les patronymes, les prénoms, les surnoms.
  • les noms des peuples, les habitants des régions ou des agglomérations : les Espagnols, les Alsaciens, les Grenoblois. Par contre le nom des langues commence par une minuscule : l'espagnol, le français, le russe, l'arabe, etc.
On écrira donc : un agent de police, la commission des finances, l'état-major.

Organismes d'État

  • l'académie de Reims mais l'Académie de médecine
  • l'université René Descartes, l'université de Toulouse
  • la préfecture de Haute-Savoie
  • le Muséum d'histoire naturelle
  • le Collège de France
  • la Commission européenne
  • les Nations unies

Titres

  • le ministre de l'Éducation nationale
  • M. le professeur Morel

Sigles et acronymes

Les sigles ou acronymes ne comportent ni séparations ni points : EDF, RATP, SNCF, USA, HTML
S'ils se prononcent aisément : Assedic, Euratom, Inserm, Unesco

On met l'accent sur les capitales (si la machine qu'on utilise le permet !)

Chiffres

  • La version 48 de l'EMBL contient 700 169 610 bases, 1 046 026 séquences, 181 343 sous-séquences, 114 821 références.
  • 995,55
  • Ce village, de 1245 habitants, possède 27 km de voies communales réparties sur une surface cadastrée de 25 500 ha 450 ca.
  • 1995 : 858 inscrits, 732 votants, 729 exprimés.
  • La fête sera cette année les 5, 6 et 7 août.
  • Un colloque sur l'oeuvre de Descartes est prévu le mardi 10 décembre 1996.
  • J'ai programmé l'enregistrement à 23 h 15.
  • Un moteur de 5 ampères sous 220 volts.
  • L'étain, d'une densité 7,2, fond à 232 °C et bout vers 2 250 °C.
On compose en chiffres romains les divisions principales d'un ouvrage, les régimes politiques, dynasties, salons, conciles ...

On compose en lettres

  • les nombres inférieurs à 10 : ce document comprend trois parties. Il y a quatre ans et deux mois, avait lieu...
  • les nombre employés comme substantifs : entrer en sixième
  • les fractions d'heures suivant les mots midi et minuit : midi vingt, minuit dix-sept
  • certaines expressions : les années soixante, la guerre de Trente ans

Chiffres composés

  • dix-huit, quatre-vingt-dix-sept, vingt et un
  • cent vingt-deux, trois cent trente et un
  • mille neuf cent quatre-vingt-seize
  • quatre-vingts mais quatre-vingt-un
  • trois cents mais trois cent dix ou sept cent mille

Téléphone, fax

Téléphone 01 44 50 26 18 - Fax 01 42 96 34 97

Adresse

Pour faciliter le tri postal, les adresses s'écrivent sans abréviations, sans majuscules accentuées et sans ponctuation. CEDEX signifie Courrier d'Entreprise à Distribution EXceptionnelle.

Ponctuation

Les phrases se terminent par un point final, un point d'exclamation, un point d'interrogation ou des points de suspension.

La virgule sépare les parties d'une proposition ou d'une phrase à condition qu'elles ne soient pas déjà réunies par les conjonctions et, ou, ni. Elle sépare les énumérations. Elle isole les mots mis en apostrophe. On ne met pas de virgule avant une parenthèse, un tiret ou un crochet.

Le point virgule sépare différentes propositions de même nature.

Le deux-points introduit une explication, une citation, un discours, une énumération.

Les points de suspension sont toujours au nombre de trois.

Les guillemets "informatiques" sont si simplifiés qu'il est impossible de respecter les règles typographiques françaises traditionnelles. Le point final se met avant ou après le guillemet fermant suivant le contexte, il n'est pas doublé.

Les parenthèses intercalent une précision dans la phrase.

Les crochets indiquent une précision à l'intérieur d'une parenthèse ou une coupure dans une citation.

Employé seul, le tiret signale chaque terme d'une énumération ou le changement d'interlocuteur dans un dialogue. Employés par paires, ils s'utilisent comme les parenthèses. En fin de phrase, le second tiret est supprimé avant le point final.

Les énumérations

  • elles sont introduites par un deux-points ;
  • les énumérations de premier rang sont introduites par un tiret et se terminent par un point-virgule, sauf la dernière par un point final ;
  • les énumérations de second rang sont introduites par un tiret décalé et se terminent par une virgule.

Les titres et intertitres

Quand le découpage des lignes permet d'en comprendre le sens, on ne met pas de point, de virgule ou de point virgule.

Espaces en usage avant et après les signes de ponctuation

  • Point et virgule sont suivis d'un blanc.
  • Point d'interrogation, point d'exclamation, point-virgule et deux-points sont suivis d'un blanc et précédés d'une "espace fine insécable". Ce caractère, auquel les professionnels de l'édition de texte sont justement attachés, existe dans les traitements de texte, peut être remplacé par un blanc dans les simples messages et par le caractère &nbsp; en HTML.
  • Les guillemets ouvrants ou fermants sont, respectivement, précédés ou suivis d'un blanc.
  • Les parenthèses ou crochets ouvrants sont précédés d'un blanc.
  • Les parenthèses ou crochets fermants sont suivis d'un blanc.
  • Les apostrophes et traits d'union ne sont ni précédés ni suivis de blanc.
  • Le tiret est précédé et suivi d'un blanc.
  • Les points de suspension sont suivis d'un blanc.
Composition de pages HTML : | PC (Luc Tamisier) | Macintosh (Roger Guillet)
 | Code des couleurs |
Langue française | DGLF : textes législatifs |
Réforme de l'orthographe | Université catholique de Louvain |
Service Général Informatique et Réseaux
Université René Descartes
45 rue des Saints-Pères 75270 PARIS Cedex 06, France
Téléphone 01 44 50 26 21 Fax 01 42 96 34 97
Messagerie : Yvonne Méchaly


Tutoriel WEB

Les bases du HTML

Vu dans href="http://www.w3.org/TR/html-markup
  • Page 1
    • I. Introduction
      • I-A. Introduction au HTML
        • I-A-1. Qu'est-ce que le HTML ?
        • I-A-2. Qu'est-ce qu'une balise HTML ?
          • I-A-2-a. Les balises simples
          • I-A-2-b. Les balises doubles
          • I-A-2-c. Imbrication des balises
      • I-B. Structure d'un document HTML
      • I-C. Le DOCTYPE
      • I-D. Les commentaires
  • Page 2
    • II. Le corps du document - body
      • II-A. Les niveaux de titres
      • II-B. Les paragraphes de texte
      • II-C. La mise en forme de texte
        • II-C-1. Le texte en gras
        • II-C-2. Le texte en italique
        • II-C-3. Le texte souligné
        • II-C-4. Le texte barré
        • II-C-5. Le texte en exposant
        • II-C-6. Le texte en indice
        • II-C-7. Modifier la couleur du texte
        • II-C-8. Modifier la police du texte
        • II-C-9. Modifier la taille du texte
      • II-D. Les images et zones réactives
        • II-D-1. Les images
        • II-D-2. Les zones réactives
          • II-D-2-a. Les zones rectangulaires
          • II-D-2-b. Les zones circulaires
          • II-D-2-c. Les zones polygonales
      • II-E. Les liens hypertextes
        • II-E-1. Les liens externes
        • II-E-2. Les liens internes
          • II-E-2-a. Les ancres
          • II-E-2-b. Les liens vers d'autres cadres
        • II-E-3. Les liens e-mails
        • II-E-4. Les protocoles
        • II-E-5. Informations complémentaires
      • II-F. Les cadres
        • II-F-1. À quoi servent-ils ?
        • II-F-2. Débuter avec les cadres
        • II-F-3. Les cadres locaux
        • II-F-4. Les cadres aujourd'hui
      • II-G. Les listes
        • II-G-1. Les différents types de listes
          • II-G-1-a. Les listes non ordonnées
            • II-G-1-a-i. Les différents types de puces
            • II-G-1-a-ii. Les puces en image
          • II-G-1-b. Les listes ordonnées
            • II-G-1-b-i. Les différents types de numérotation
            • II-G-1-b-ii. Modifier le début de la numérotation
          • II-G-1-c. Les listes de définitions
          • II-G-1-d. Les listes de répertoires
          • II-G-1-e. Les listes de menus
        • II-G-2. Les listes imbriquées
        • II-G-3. L'utilité des listes aujourd'hui
      • II-H. Les tableaux
        • II-H-1. À quoi servent-ils ?
        • II-H-2. Du tableau simple au tableau complexe
          • II-H-2-a. Les bases d'un tableau
          • II-H-2-b. Le titre d'un tableau
          • II-H-2-c. La ligne d'en-tête d'un tableau
          • II-H-2-d. Les différentes parties d'un tableau
          • II-H-2-e. La fusion de lignes et de colonnes d'un tableau
        • II-H-3. L'utilité des tableaux aujourd'hui
      • II-I. Les formulaires
        • II-I-1. À quoi servent-ils ?
        • II-I-2. La balise form
        • II-I-3. Les champs texte monolignes
        • II-I-4. Les champs texte multilignes
        • II-I-5. Les champs cachés
        • II-I-6. Les champs de fichiers
        • II-I-7. Les boutons radio
        • II-I-8. Les cases à cocher
        • II-I-9. Les boutons
          • II-I-9-a. Le bouton simple
          • II-I-9-b. Le bouton d'envoi
          • II-I-9-c. Le bouton image
          • II-I-9-d. Le bouton effacer
        • II-I-10. Les listes
        • II-I-11. Améliorez l'accessibilité de vos formulaires
  • Page 3
    • III. L'entête du document - head
      • III-A. Le titre
      • III-B. Les scripts
        • III-B-1. Les scripts externes
        • III-B-2. Les scripts internes
      • III-C. Les styles
        • III-C-1. Les styles externes
        • III-C-2. Les styles internes
      • III-D. Les meta
        • III-D-1. À quoi servent-elles ?
        • III-D-2. La balise meta content-type
        • III-D-3. Ajoutez des infos sur vous
        • III-D-4. Ajoutez des infos sur votre site
        • III-D-5. Ajoutez des infos sur la création
        • III-D-6. Orientez les robots
        • III-D-7. Orientez les visiteurs
        • III-D-8. Plus encore...
  • Page 4
    • IV. Aller plus loin
      • IV-A. Le XHTML
      • IV-B. Le CSS
      • IV-C. Le référencement
      • IV-D. Et encore plus...

Ce cours complet sur le HTML va vous permettre d'en apprendre les bases conformément aux recommandations et normes en vigueur établies par le W3C. Il répondra à quasiment toutes les questions que vous pouvez vous poser sur ce langage.

Je tiens à remercier Kerod et Auteur qui m'ont conseillé et accompagné tout au long de la rédaction de ce tutoriel et qui ont participé à la relecture de cet article, ainsi que dourouc05, koopajah et RideKick pour leur relecture attentive.


Tutoriel WEB

Les bases du HTML

Vu dans href="http://www.w3.org/TR/html-markup
  • I. Introduction
    • I-A. Introduction au HTML
      • I-A-1. Qu'est-ce que le HTML ?
      • I-A-2. Qu'est-ce qu'une balise HTML ?
        • I-A-2-a. Les balises simples
        • I-A-2-b. Les balises doubles
        • I-A-2-c. Imbrication des balises
    • I-B. Structure d'un document HTML
    • I-C. Le DOCTYPE
    • I-D. Les commentaires

I. Introduction

I-A. Introduction au HTML

I-A-1. Qu'est-ce que le HTML ?

Le HTML (HyperText Markup Language) est un format de présentation de données permettant de créer des pages web pouvant être lues dans des navigateurs.

C'est un langage de description de données, et non un langage de programmation. Il est figé c'est-à-dire qu'une fois le document chargé dans le navigateur, il ne répond à aucune action de l'utilisateur sur le contenu de la page.

Ce langage est pourvu d'un système de balisage qui va permettre de structurer notre document.

I-A-2. Qu'est-ce qu'une balise HTML ?

Une balise HTML est un élément que l'on va ajouter au texte de départ pour dire au navigateur de quelle manière l'afficher. Elle n'est pas affichée telle quelle dans le navigateur, elle est interprétée par celui-ci.
Elle est toujours délimitée par les signes < et >.

Exemple de balise
Sélectionnez
<html>

Une balise peut en plus comporter de zéro à plusieurs attributs. Les attributs sont des informations complémentaires qui la caractérisent. Ils se présentent sous la forme nomattribut="valeur". Attention à ne pas confondre un attribut HTML et une propriété CSS !

Exemple de balise et son attribut
Sélectionnez
<html lang="fr">

Chaque balise ouverte doit être fermée, cependant il existe des exceptions.

On distingue deux types de balises :

  • Les balises simples.
  • Les balises doubles.
I-A-2-a. Les balises simples

Ce sont des balises qui sont dites "vides", c'est-à-dire qu'elles ne vont contenir aucune autre balise HTML. Ces balises n'ont pas besoin d'être fermées.

Exemple de balise simple
Sélectionnez
<img src="adresse/de/l/image">

Si ces balises n'ont pas besoin d'être fermées en HTML, ça devient faux en XHTML.
Cf : Les balises vides en XHTML.

I-A-2-b. Les balises doubles

Les balises doubles sont dites ouvrantes/fermantes, c'est-à-dire qu'elles nécessitent deux balises, une ouvrante et une fermante dans lesquelles on va pouvoir mettre d'autres balises ou du texte.
La balise fermante est identique à la balise ouvrante, à la différence qu'elle contient un "/" pour indiquer à quel endroit on la ferme.

Exemple de balise double
Sélectionnez
<p>Ici du texte ou tout autre balise.</p>
I-A-2-c. Imbrication des balises

Lorsque l'on cumule l'écriture de plusieurs balises ouvrantes (forcément inévitable), il est impératif de respecter la hiérarchie des balises, c'est-à-dire que la première ouverte sera la dernière à être fermée.
Le chevauchement des balises est une grave erreur.

Exemple de balises imbriquées
Sélectionnez
<b><u>Ici les balises sont correctement imbriquées.</u></b>
Exemple de balises chevauchées
Sélectionnez
<b><u>Ici les balises ne sont</b> pas correctement imbriquées, c'est une erreur.</u>

Commentez l'article : 27 commentaires

I-B. Structure d'un document HTML

Avant de commencer tout développement, il est important de connaître la structure d'une page HTML.
Commençons donc par voir celle-ci avec la structure minimale obligatoire d'une page qui sera notre base de travail tout au long de ce tutoriel :

Document HTML de base
Sélectionnez
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Titre de la page</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body>

<!-- Ici votre site -->

</body>
</html>

La première ligne du document s'appelle le DOCTYPE. C'est une balise indispensable pour conserver la compatibilité du rendu de votre page sur les différents navigateurs modernes.

Après le DOCTYPE, vient la balise <html>. Elle encadre l'ensemble des autres balises.

La balise <html> contient deux grandes balises : <head>, qui va contenir tout l'en-tête de la page et <body> qui va contenir tout le corps du document.

Si vous incluez des pages à l'aide d'un langage serveur (PHP, ASP, JSP...), ayez toujours en tête que le DOCTYPE, la balise <html> ainsi que les balises <head> et <body> sont uniques dans une page. Si tel n'est pas le cas dans votre code source, vous aurez de mauvaises surprises à l'affichage de votre site.

Commentez l'article : 27 commentaires

I-C. Le DOCTYPE

À quoi sert ce fameux DOCTYPE ? Est-il vraiment utile ?

Oui, il est utile, même très utile.
Il sert d'une part à déclarer quel "langage", "grammaire", ou norme on applique à notre page. Cette déclaration nous permet de soumettre nos pages au validateur du W3C (World Wide Web Consortium) qui vérifie que notre code HTML ne comporte aucune erreur de syntaxe (balises mal fermées, utilisation d'attributs inexistants...) en fonction du DOCTYPE, donc de la DTD (Document Type Definition) choisie. D'autre part, il indique au navigateur de quelle manière interpréter telle balise, telle propriété CSS. L'absence de cette balise est appelée le mode Quirks, ou non conforme, alors qu'au contraire, la présence de cette balise est appelée le mode Standard, ou conforme.

Pour vous faire une idée de son importance, en mode Quirks, le modèle de boîte Microsoft ne calcule pas de la même manière la taille d'un bloc que le modèle W3C, lorsque celui-ci a des marges intérieures (padding), voire même des bordures.
Une illustration vous montrera le résultat des deux modèles de boîte en mode Quirks :

Si vous pensez que c'est le modèle Microsoft qui réagit de la bonne manière, alors détrompez-vous. Il vous suffit de rajouter le DOCTYPE en première ligne pour vous rendre compte que ce n'est pas le navigateur qui respecte le modèle W3C qui va changer de comportement, mais bien celui qui utilise le modèle Microsoft.

Et l'URL sur la ligne du DOCTYPE, est-elle vraiment utile, elle ?
La réponse est encore une fois : oui. Vous pouvez certes faire valider vos pages sur le site du validateur du W3C sans l'URL, mais son oubli a la fâcheuse tendance à faire passer Internet Explorer en mode Quirks, ce qui anéantira tous vos efforts de compatibilité entre les différents navigateurs.

Plus d'infos sur les DTD (Document Type Definition).

Vous pouvez choisir votre DOCTYPE parmi quelques-uns en fonction de votre degré de rigueur et/ou vos besoins.
Une liste non exhaustive est disponible dans la FAQ (X)HTML.

Commentez l'article : 27 commentaires

I-D. Les commentaires

Les commentaires permettent de laisser des informations ou des descriptions du code et sont utilisables à n'importe quel endroit de votre document. Cependant, ce ne sont pas ces commentaires-là qu'il faudra utiliser pour les langages JavaScript et CSS qui possèdent leur propre système de commentaires.
Ces commentaires ne seront pas affichés dans le navigateur mais ils resteront présents dans le code source, donc il faut à tout prix éviter de mettre des informations confidentielles dedans.

Ils sont délimités par <!-- et --> et peuvent être multilignes.

Par souci de compatibilité entre les navigateurs et de mal interprétation de ceux-ci, il est fortement déconseillé d'écrire deux tirets d'union (ou plus) consécutifs.

Commentaires HTML
Sélectionnez
<!-- Voici un premier commentaire sur une ligne. -->

<!-- Voici un deuxième commentaire.
     Celui-ci est multilignes. -->

<!------------------ Cette méthode est déconseillée ! ----------------->


Tutoriel WEB

Les bases du HTML

Vu dans href="http://www.w3.org/TR/html-markup
  • II. Le corps du document - body
    • II-A. Les niveaux de titres
    • II-B. Les paragraphes de texte
    • II-C. La mise en forme de texte
      • II-C-1. Le texte en gras
      • II-C-2. Le texte en italique
      • II-C-3. Le texte souligné
      • II-C-4. Le texte barré
      • II-C-5. Le texte en exposant
      • II-C-6. Le texte en indice
      • II-C-7. Modifier la couleur du texte
      • II-C-8. Modifier la police du texte
      • II-C-9. Modifier la taille du texte
    • II-D. Les images et zones réactives
      • II-D-1. Les images
      • II-D-2. Les zones réactives
        • II-D-2-a. Les zones rectangulaires
        • II-D-2-b. Les zones circulaires
        • II-D-2-c. Les zones polygonales
    • II-E. Les liens hypertextes
      • II-E-1. Les liens externes
      • II-E-2. Les liens internes
        • II-E-2-a. Les ancres
        • II-E-2-b. Les liens vers d'autres cadres
      • II-E-3. Les liens e-mails
      • II-E-4. Les protocoles
      • II-E-5. Informations complémentaires
    • II-F. Les cadres
      • II-F-1. À quoi servent-ils ?
      • II-F-2. Débuter avec les cadres
      • II-F-3. Les cadres locaux
      • II-F-4. Les cadres aujourd'hui
    • II-G. Les listes
      • II-G-1. Les différents types de listes
        • II-G-1-a. Les listes non ordonnées
          • II-G-1-a-i. Les différents types de puces
          • II-G-1-a-ii. Les puces en image
        • II-G-1-b. Les listes ordonnées
          • II-G-1-b-i. Les différents types de numérotation
          • II-G-1-b-ii. Modifier le début de la numérotation
        • II-G-1-c. Les listes de définitions
        • II-G-1-d. Les listes de répertoires
        • II-G-1-e. Les listes de menus
      • II-G-2. Les listes imbriquées
      • II-G-3. L'utilité des listes aujourd'hui
    • II-H. Les tableaux
      • II-H-1. À quoi servent-ils ?
      • II-H-2. Du tableau simple au tableau complexe
        • II-H-2-a. Les bases d'un tableau
        • II-H-2-b. Le titre d'un tableau
        • II-H-2-c. La ligne d'en-tête d'un tableau
        • II-H-2-d. Les différentes parties d'un tableau
        • II-H-2-e. La fusion de lignes et de colonnes d'un tableau
      • II-H-3. L'utilité des tableaux aujourd'hui
    • II-I. Les formulaires
      • II-I-1. À quoi servent-ils ?
      • II-I-2. La balise form
      • II-I-3. Les champs texte monolignes
      • II-I-4. Les champs texte multilignes
      • II-I-5. Les champs cachés
      • II-I-6. Les champs de fichiers
      • II-I-7. Les boutons radio
      • II-I-8. Les cases à cocher
      • II-I-9. Les boutons
        • II-I-9-a. Le bouton simple
        • II-I-9-b. Le bouton d'envoi
        • II-I-9-c. Le bouton image
        • II-I-9-d. Le bouton effacer
      • II-I-10. Les listes
      • II-I-11. Améliorez l'accessibilité de vos formulaires

II. Le corps du document - body

C'est dans la balise <body> que nous allons mettre tout le texte et toutes les images qui apparaîtront lorsqu'un visiteur viendra sur notre page.

II-A. Les niveaux de titres

Il existe différents niveaux de titres, ils vont de 1 à 6 et ont chacun leur importance. La balise représentant ces niveaux de titre est <hX> où X représente le niveau.

Exemple :

Exemple de titre
Sélectionnez
<h1>Titre de ma page</h1>

Il est important de respecter la hiérarchie des différents niveaux de titres, sachant que l'élément le plus haut est le <h1>. En effet, un titre <h2> ne se retrouvera jamais au-dessus d'un <h1> dans un document.
Le titre <h1> étant le plus important, il convient également de ne le faire apparaître qu'une seule fois dans un document.

Vous ne devez pas choisir un titre pour le rendu qu'il a dans le navigateur (différent selon les navigateurs et pouvant être modifié à l'aide de CSS), mais bien pour le niveau hiérarchique qu'il représente.

II-B. Les paragraphes de texte

Comme vous tapez du texte dans un traitement de texte, vous segmentez votre texte en paragraphes. En HTML c'est la même chose, sauf qu'il faut préciser nous-même où commence un paragraphe et où il se termine. C'est ce à quoi sert la balise <p>.

Les paragraphes de texte en HTML
Sélectionnez
<p>Voici un premier paragraphe.</p>

<p>Voici un deuxième paragraphe.</p>

II-C. La mise en forme de texte

Les différentes techniques citées ci-dessous pour mettre en forme du texte sont obsolètes. Si elles fonctionnent encore en HTML 4.01, il vaut mieux s'en séparer et les remplacer par un langage fait pour ça et beaucoup plus puissant : le CSS.

II-C-1. Le texte en gras

Pour mettre le texte en gras on l'encadre de la balise <b> :

Texte en gras
Sélectionnez
<b>Ce texte s'affichera en gras.</b>

II-C-2. Le texte en italique

Pour mettre le texte en italique on l'encadre de la balise <i> :

Texte en italique
Sélectionnez
<i>Ce texte s'affichera en italique.</i>

II-C-3. Le texte souligné

Pour souligner le texte on l'encadre de la balise <u> :

Texte souligné
Sélectionnez
<u>Ce texte sera souligné.</u>

II-C-4. Le texte barré

Pour barrer le texte on l'encadre de la balise <s> :

Texte barré
Sélectionnez
<s>Ce texte sera barré.</s>

II-C-5. Le texte en exposant

Pour placer le texte en exposant on l'encadre de la balise <sup> :

Texte en exposant
Sélectionnez
<sup>Ce texte sera en exposant.</sup>

II-C-6. Le texte en indice

Pour placer le texte en indice on l'encadre de la balise <sub> :

Texte en indice
Sélectionnez
<sub>Ce texte sera en indice.</sub>

II-C-7. Modifier la couleur du texte

Pour modifier la couleur du texte on utilise l'attribut color de la balise <font> :

Texte en rouge
Sélectionnez
<font color="#ff0000">Ce texte sera en rouge.</font>

Les couleurs peuvent être écrites de deux manières :

  • En hexadécimal de type RVB et précédées d'un dièse (#) ; Exemples : #ff0000 => rouge, #00ff00 => vert, #0000ff => bleu.
  • Textuelles en anglais US ; Exemples : red, yellow, pink.

II-C-8. Modifier la police du texte

Pour modifier la police du texte on utilise l'attribut face de la balise <font> :

Texte en verdana
Sélectionnez
<font face="verdana">Ce texte sera en verdana.</font>

On a tendance à écrire des familles de polices plutôt qu'une seule police. En effet, il se peut que sur un système différent du vôtre la police choisie ne soit pas installée et il faut qu'il puisse alors afficher le texte dans une police proche de celle que vous vouliez avoir.
On sépare alors les différentes polices par une virgule dans l'ordre de sélection le cas où la précédente ne peut pas être affichée.

Texte en verdana ou sans-serif
Sélectionnez
<font face="verdana,sans-serif">Ce texte sera en verdana ou en sans-serif si verdana n'est pas installée.</font>

II-C-9. Modifier la taille du texte

Pour modifier la taille du texte on utilise l'attribut size de la balise <font> :

Texte en taille 5
Sélectionnez
<font size="5">Ce texte sera en taille 5.</font>

Par défaut, la valeur de l'attribut size vaut "3".
Il y a deux manières de modifier la valeur de cet attribut : et les valeurs possibles sont les entiers de "1" à "7".

  • En absolu : Les valeurs possibles sont les entiers de "1" à "7".
  • En relatif : Les valeurs possibles les entiers de "-2" à "+4".

Et il est bien évidemment possible de renseigner ces trois attributs (color, face, size) à la fois dans la même balise <font>.

II-D. Les images et zones réactives

II-D-1. Les images

Pour afficher une image en HTML, on utilise la balise <img>. Elle admet différents attributs, dont les plus importants sont src et alt.
L'attribut src permet de renseigner le chemin de l'image, qui peut être absolu HTTP ou relatif, très utile pour pouvoir l'afficher.
L'attribut alt affiche un texte alternatif à la place de l'image dans le cas où, pour une raison ou autre, celle-ci ne peut pas être chargée. Il aide de plus les moteurs de recherche à référencer l'image et les déficients visuels à savoir ce que l'image représente.

Afficher une image
Sélectionnez
<img src="adresse/de/l/image" alt="Description de l'image">

L'attribut alt n'est pas censé créer une infobulle lors du survol de l'image, qui est le rôle de l'attribut title, cependant sur Internet Explorer le alt affiche cette infobulle.

Les différents formats d'image supportés par cette balise sont :

  • GIF
  • JPG
  • PNG
  • BMP (à éviter)

II-D-2. Les zones réactives

Le HTML permet de créer des zones réactives sur les images, afin de définir plusieurs liens différents sur une seule et même image, ou de ne rendre qu'une seule partie de l'image cliquable. On appelle l'ensemble de ces zones une carte, ou map.
Les balises qui permettent de faire ces zones réactives sont <map> et <area> étroitement liées avec la balise <img>. En effet, on doit forcément préciser sur quelle image ces zones vont être présentes.
L'attribut de la balise <img> qui va contenir le nom de la map dont elle fait référence est usemap. Le nom de cette map est précédé du signe dièse (#).

Image mappée
Sélectionnez
<img src="adresse/de/l/image" alt="Description de l'image" usemap="#nomDeLaMap">

La balise qui va contenir l'ensemble de nos zones réactives pour cette image est la balise <map>, qui doit obligatoirement avoir l'attribut name renseigné et qui aura pour valeur le nom de la map, le même renseigné dans l'attribut usemap de notre image.
Comme vous l'aurez sans doute deviné et comme son nom l'indique, la balise <area> sera une zone réactive dans notre map. Il y a une balise area par zone.

Structure d'une map
Sélectionnez
<map name="nomDeLaMap">
    <!-- Ici nous allons mettre nos différentes zones réactives -->
    <area ...>
    <area ...>
</map>

Les différents attributs de la balise <area> nécessaires à son bon fonctionnement sont :

  • coords, qui va contenir les différentes coordonnées de notre zone.
  • href, qui va définir l'adresse de destination du lien.
  • shape, qui va renseigner le type de zone que l'on souhaite afficher.

On distingue trois types de zones :

  • Les zones rectangulaires,
  • Les zones circulaires,
  • Les zones polygonales.

On peut bien évidemment avoir autant de zones que l'on veut sur une map, et on peut également combiner les différents types de zones sur une seule et même image.
Attention toutefois à ne pas faire se chevaucher les zones ! Le cas échéant, c'est la zone définie la première qui s'affichera au-dessus.

II-D-2-a. Les zones rectangulaires

Pour définir une zone rectangulaire, l'attribut shape doit prendre pour valeur "rectangle" ou "rect".
Les coordonnées définies dans l'attribut coords se réfèrent aux abscisses et ordonnées des coins supérieur gauche et inférieur droit du rectangle que l'on souhaite tracer par rapport au coin haut gauche de l'image. Ces valeurs sont séparées par une virgule et exprimées en pixels.

Syntaxe :

Zone rectangulaire
Sélectionnez
<area shape="rect" coords="x1,x2,y1,y2" href="adresse/de/destination">

Exemple :

Zone rectangulaire
Sélectionnez
<area shape="rect" coords="10,50,60,60" href="adresse/de/destination">
II-D-2-b. Les zones circulaires

Une zone circulaire est définie par la valeur "circle" ou "circ" de l'attribut shape.
Les valeurs de l'attribut coords se réfèrent aux abscisse et ordonnée du centre du cercle ainsi que le rayon de ce cercle par rapport au coin haut gauche de l'image. Ces valeurs sont séparées par une virgule et exprimées en pixels.

Syntaxe :

Zone circulaire
<area shape="circ" coords="x,y,rayon" href="adresse/de/destination">

Exemple :

Zone circulaire
Sélectionnez
<area shape="circ" coords="40,40,10" href="adresse/de/destination">
II-D-2-c. Les zones polygonales

C'est la valeur "polygon" ou "poly" de l'attribut shape qui permet de définir une zone polygonale.
Les valeurs de l'attribut coords se réfèrent aux abscisse et ordonnée de chacun des points par rapport au coin haut gauche de l'image. Ces valeurs sont séparées par une virgule et exprimées en pixels.

Syntaxe :

Zone polygonale
Sélectionnez
<area shape="poly" coords="x1,y1,x2,y2,x3,y3,..,xn,yn" href="adresse/de/destination">

Exemple :

Zone polygonale
<area shape="poly" coords="0,0,40,50,78,101,17,150" href="adresse/de/destination">

II-E. Les liens hypertextes

Un lien hypertexte est un élement HTML permettant d'envoyer le visiteur vers une nouvelle page. On peut insérer dans cet élément toute sorte de textes, images et autres balises dites "inline" (comme les balises <span>, <strong>, etc).

Un lien sera représenté dans le code par la balise <a>. Tout ce qui sera dans cette balise fera office de lien. L'adresse de destination doit se trouver dans l'attribut href.

L'attribut title, quant à lui, permet de renseigner un petit descriptif sur le contenu de la page cible, et est un atout non néligeable en matière de référencement et d'accessibilité.

Exemple texte :

Exemple d'un lien texte
<a href="adresse/de/destination.html">Texte du lien</a>

Exemple image :

Exemple d'un lien image
<a href="adresse/de/destination.html"><img src="adresse/de/l/image.gif"></a>

On distingue deux types de liens, les liens externes et les liens internes.

II-E-1. Les liens externes

Un lien externe est un lien hypertexte qui renvoie vers une autre page. Cette autre page peut être une page de votre site ou celle d'un site tiers.

II-E-2. Les liens internes

Un lien interne est un lien qui renvoie vers la même page, mais pas forcément au même endroit de la page.

Attention à ne pas confondre "liens internes" avec "lien interne au site" !
Un lien interne au site est en général un lien externe à la page.

II-E-2-a. Les ancres

Les ancres permettent de naviguer à l'intérieur d'une même page. Par exemple, ce tutoriel a en haut un sommaire avec des liens qui renvoient plus bas dans la page, ce sont des ancres.
Pour faire une ancre, il faut utiliser le signe dièse (#) suivi d'un mot-clef. Ce mot-clef sera repris dans l'attribut id d'une balise à laquelle on fait faire une ancre :

Exemple d'une ancre interne
Sélectionnez
<a href="#motClef">Texte de mon ancre</a>

[...]

<h2 id="motClef">Texte vers lequel l'ancre est renvoyée</h2>

Si vous voulez faire une ancre vers une page externe, il vous suffit de rajouter l'adresse de destination dans la balise de lien :

Exemple d'une ancre externe
Sélectionnez
<a href="adresse/de/destination.html#motClef">Texte de mon ancre</a>
II-E-2-b. Les liens vers d'autres cadres

Si vous utilisez des cadres pour votre navigations, vous aurez certainement envie que les liens de votre menu, dans le cadre nommé "cadreMenu" par exemple, pointent vers votre cadre principal que l'on appellera "cadrePrincipal".
Dans ce cas, il faut renseigner l'attribut target de la balise de lien :

Exemple d'un lien vers un autre cadre
Sélectionnez
<a href="adresse/de/destination.html" target="cadrePrincipal">Lien de mon menu</a>

Il existe plusieurs valeurs pour l'attribut target :

Valeur | Description
_self | Affichage dans le cadre courant (par défaut).
_blank | Ouvre le lien dans une nouvelle fenêtre.
_top | Affichage dans la totalité de la fenêtre courante.
_parent | Affichage dans le cadre qui enveloppe la structure courante.
NomDuCadre | Affichage dans le cadre spécifié.

Pour plus d'infos sur les cadres, reportez-vous à la section "Les cadres".

II-E-3. Les liens e-mails

Vous pouvez permettre à vos visiteurs d'écrire sur votre adresse e-mail avec la syntaxe "mailto:" :

Exemple d'un lien vers une adresse e-mail
Sélectionnez
<a href="mailto:jwillette@monsite.com">Ecrivez-moi</a>

Ce type de liens ouvre le logiciel de messagerie par défaut de vos visiteurs.

Vous pouvez aussi renseigner un sujet par défaut de l'e-mail, ainsi qu'un corps voire même les deux :

Exemple d'un lien vers une adresse e-mail avec un sujet par défaut
Sélectionnez
<a href="mailto:jwillette@monsite.com?subject=Sujet du mail">Ecrivez-moi</a>
Exemple d'un lien vers une adresse e-mail avec un corps par défaut
Sélectionnez
<a href="mailto:jwillette@monsite.com?body=Corps du mail">Ecrivez-moi</a>
Exemple d'un lien vers une adresse e-mail avec un sujet et un corps par défaut
Sélectionnez
<a href="mailto:jwillette@monsite.com?subject=Sujet du mail&body=Corps du mail">Ecrivez-moi</a>

Vous pouvez enfin mettre plusieurs destinataires ou mettre une personne en copie du mail :

Exemple d'un lien vers plusieurs adresses e-mail
Sélectionnez
<a href="mailto:destinataire1@monsite.com;destinataire2@monsite.com">Ecrivez-nous</a>
Exemple d'un lien vers une adresse e-mail et une autre en copie
Sélectionnez
<a href="mailto:destinataire1@monsite.com?cc=destinataire2@monsite.com">Ecrivez-nous</a>

II-E-4. Les protocoles

Un protocole est un moyen qu'ont deux ordinateurs de communiquer. Il diffère selon le type de données echangées.
Il existe de nombreux protocoles disponibles par lien hypertexte, en voici une liste non exhaustive :

Protocole | Signification de l'acronyme | Description | Syntaxe utilisée
HTTP | HyperText Transfer Protocol | Permet de transférer des données sur l'Internet. | <a href="http://...">...</a>
HTTPS | HyperText Transfer Protocol Secured | Permet de transférer des données sur l'Internet en permettant de vérifier l'identité du site grâce à un certificat d'authentification. | <a href="https://...">...</a>
SMTP | Simple Mail Transfer Protocol | Permet de transférer des e-mails. | <a href="mailto:...">...</a>
FTP | File Transfer Protocol | Permet de transférer des fichiers. | <a href="ftp://...">...</a>
NNTP | Networks News Transfer Protocol | Permet de lire, distribuer, ... les news de newsgroups. | <a href="news:...">...</a>
TELNET |  | Permet d'accéder à un ordinateur distant. | <a href="telnet://...">...</a>
IRC | Internet Relay Chat | Permet de se connecter à un serveur de Chat. | <a href="irc://...">...</a>

II-E-5. Informations complémentaires

  • Pour éviter d'avoir le cadre bleu autour d'une image lorsqu'elle est dans un lien, il vous suffit de renseigner l'attribut border à "0" :
Image sans bordure bleue
Sélectionnez
<a href="adresse/de/destination.html"><img src="adresse/de/l/image.gif" border="0"></a>
  • Si vous voulez avoir une infobulle qui s'affiche sur votre lien lors du passage de la souris, vous pouvez renseigner l'attribut title :
Infobulle sur le lien
Sélectionnez
<a href="adresse/de/destination.html" title="Description de la page cible">Texte du lien</a>
  • Vous pouvez remplacer l'adresse du lien par l'appel d'une fonction Javascript qui s'exécutera au clic du lien.
Fonction Javascript appelée dans un lien
Sélectionnez
<a href="javascript:maFonctionJavascript()">Texte du lien</a>

II-F. Les cadres

II-F-1. À quoi servent-ils ?

Les cadres servent à séparer la fenêtre en différents morceaux indépendants qui peuvent chacun contenir une page HTML différente, ces morceaux ayant la capacité de communiquer entre eux.
On utilise au minimum deux cadres dans une fenêtre, en général un cadre pour le menu à gauche et un autre pour le contenu du site. Parfois un rajoute un cadre en haut pour un bandeau fixe.

II-F-2. Débuter avec les cadres

Le document HTML qui va appeler les différents cadres ne pourra servir qu'à ça. Aucun texte ou aucune image inséré dans ce document ne sera affiché dans le navigateur du visiteur. Donc dans le cas où nous avons deux cadres, un pour le menu et un pour le contenu, nous aurons trois fichiers différents. Comme les deux pages du menu et du contenu sont des pages ordinaires, nous ferons l'impasse dessus. En revanche, la page qui appelle les cadres est tout à fait différente.
Ce sont les balises <frameset> et <frame> qui vont être utilisées pour la mise en oeuvre du jeu de cadres.

Document HTML de base pour un jeu de cadres
Sélectionnez
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
    <title>Titre de la page</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<frameset>

<!-- Ici le contenu de la frameset principale -->

</frameset>
</html>

On remarque la présence de la balise <frameset> qui remplace d'ordinaire la balise <body> et le DOCTYPE approprié pour l'usage des cadres.
La balise <frameset> va désigner le nombre de cadres et leur taille.
Si on renseigne l'attribut cols, la page sera coupée verticalement, alors que si on renseigne l'attribut rows, la page sera coupée horizontalement. Ces attributs prennent pour valeur les tailles des différents cadres séparées par une virgule. Si une des valeurs est une étoile, ça signifie que le cadre en question prendra toute la place disponible restante dans la fenêtre. On ne peut évidemment pas utiliser ces deux attributs conjointement sur une seule et même balise <frameset>.

Deux cadres verticaux
Sélectionnez
<frameset cols="20%, *">
Trois cadres verticaux
Sélectionnez
<frameset cols="20%, *, 20%">
Deux cadres horizontaux
Sélectionnez
<frameset rows="100, *">

Dans cette balise <framset> nous allons mettre l'ensemble de nos cadres. Le nombre de cadres correspond au nombre de valeurs renseignées dans les attributs cols et rows.

Exemple de cadres
Sélectionnez
<frameset cols="200, *">
    <frame>
    <frame>
</frameset>

C'est dans la balise <frame> que l'on va fixer la source de chacun des cadres, grâce à l'attribut src.
Un attribut important de cette balise est name. En effet, il va falloir dire à nos liens qui sont dans le menu, par exemple, d'aller changer la source d'un autre cadre. L'attribut target du lien prendra alors pour valeur le nom du cadre ciblé.
On peut aussi jouer sur les bordures avec l'attribut frameborder qui prend pour valeur "0" ou "1".
De plus, par défaut, les cadres peuvent être redimensionnés. Si on veut interdire cette fonctionnalité, on renseignera l'attribut noresize qui prend pour seule valeur "noresize".
Enfin, on peut éliminer les marges intérieures latérales avec les attributs marginwidth et marginheight renseignés à "0".

Exemple de cadres
Sélectionnez
<frameset cols="200, *">
    <frame name="menu" src="menu.html">
    <frame name="contenu" src="page1.html">
</frameset>
Exemple d'un lien sur la page menu.html
Sélectionnez
<a href="page2.html" target="contenu">Aller à la page 2</a>

On peut aller encore plus loin, en imbricant différents cadres. Par exemple, on veut un bandeau en haut qui prend toute la largeur de l'écran. En-dessous, on veut deux cadres verticaux, un pour le menu et l'autre pour le contenu. Le code HTML ressemblera alors à quelque chose comme :

Exemple de cadres
Sélectionnez
<frameset rows="100, *">
    <frame name="bandeau" src="bandeau.html">
    <frameset cols="200, *">
        <frame name="menu" src="menu.html">
        <frame name="contenu" src="page1.html">
    </frameset>
</frameset>

II-F-3. Les cadres locaux

Le cadre local ou "iframe" permet également d'insérer une page externe dans notre site, à la différence qu'il sera à la suite du contenu de notre propre document et non pas séparé par un troisième fichier qui fait la jointure.
L'attribut de la balise <iframe> qui va servir à afficher le contenu d'une autre page est src. On lui renseigne l'adresse complète si le site est différent du nôtre, ou le chemin relatif ou absolu dans le cas où l'on veut afficher une de nos propres pages.
On peut supprimer les bordures de l'iframe pour lui donner l'impression de mieux s'intégrer à notre document en renseignant l'attribut frameborder à "0" ("1" par défaut).
Aussi, les marges intérieures sont assez gênantes quand on a une page qui doit faire exactement les dimensions données à cette balise. On peut alors les supprimer avec les attributs marginwidth et marginheight renseignés à "0".
Dans le cas où un navigateur ne peut pas afficher ce cadre local, il est intéressant de laisser un texte alternatif. C'est le texte que l'on écrit à l'intérieur de la balise.

Exemple de cadre local
Sélectionnez
<iframe frameborder="0" marginwidth="0" marginheight="0" src="http://adresse/d/une/page.html">
    Désolé, votre navigateur ne supporte pas les cadres locaux
</iframe>

II-F-4. Les cadres aujourd'hui

De nos jours, il est fortement déconseillé d'utiliser ce genre de procédé. Voici une liste non-exhaustive des problèmes encourus de part l'utilisation des frames :

  • Impossibilité d'ajouter aux favoris la page désirée.
  • Mauvaise gestion de l'impression par les navigateurs.
  • Perte du sens véritable de la nature d'un document HTML censé être identifié par une URL précise et unique.
  • Référencement des pages du site impossible dans les moteurs de recherche.
  • Technologie obsolète qui est totalement abandonnée dans les futures versions du (X)HTML.

II-G. Les listes

Elles servent, comme leur nom l'indique, à créer une liste d'items, plus précisément à les énumérer, comme dans le cas d'un sommaire par exemple.

II-G-1. Les différents types de listes

On distingue cinq types de listes différents, chacun prévu pour un usage bien précis :

  • Les listes non ordonnées, ou à puces.
  • Les listes ordonnées.
  • Les listes de définitions.
  • Les listes de répertoires.
  • Les listes de menus.
II-G-1-a. Les listes non ordonnées

Elles sont démarquées par la balise <ul> et chacun des items est entouré de la balise <li> :

Exemple de liste non ordonnée
Sélectionnez
<p>Ma liste de courses :</p>
<ul>
    <li>Champignons</li>
    <li>Avocat</li>
    <li>Dentifrice</li>
    <li>Céréales</li>
</ul>

Résultat :

Liste non ordonnée

II-G-1-a-i. Les différents types de puces

On va pouvoir jouer sur le design des puces à l'aide de trois types différents. On renseigne le type des puces avec l'attribut type de la balise <ul>.
Les types sont :

  • disc (par défaut au niveau 1 d'imbrication)
  • circle (par défaut au niveau 2 d'imbrication)
  • square (par défaut au niveau 3 et suivants d'imbrication)

Dans l'exemple précédent, nous avons donc vu une liste non ordonnée avec une puce de type disc. Voici à quoi ressemblent les deux autres :

Exemple de liste non ordonnée
Sélectionnez
<p>Ma liste de courses :</p>
<ul type="circle">
    <li>Champignons</li>
    <li>Avocat</li>
    <li>Dentifrice</li>
    <li>Céréales</li>
</ul>

Résultat :

Liste non ordonnée

Exemple de liste non ordonnée
Sélectionnez
<p>Ma liste de courses :</p>
<ul type="square">
    <li>Champignons</li>
    <li>Avocat</li>
    <li>Dentifrice</li>
    <li>Céréales</li>
</ul>

Résultat :

Liste non ordonnée

II-G-1-a-ii. Les puces en image▲

Des disques, des cercles ou des carrés, c'est bien beau, mais si on veut une puce en forme de flèche et de couleur bleue ?
Pour cela, rien de plus simple, il suffit d'utiliser une image pour remplacer la puce originale. Cependant cette méthode n'est possible qu'à l'aide de CSS et de la propriété list-style-image :

Exemple de liste non ordonnée
Sélectionnez
<p>Ma liste de courses :</p>
<ul>
    <li>Champignons</li>
    <li>Avocat</li>
    <li>Dentifrice</li>
    <li>Céréales</li>
</ul>
CSS
Sélectionnez
li
{
    list-style-image : url(puce.gif);
}

Résultat :

Liste non ordonnée

Pour plus d'informations sur les puces imagées, je vous renvoie à l'article CSS plus complet :
CSS débutants : Puces en gifs avec les CSS

II-G-1-b. Les listes ordonnées

Elles sont introduites par la balise <ol> et chacun des items est encadré par la balise <li> :

Exemple de liste ordonnée
Sélectionnez
<p>Top 3 du tiercé :</p>
<ol>
    <li>Jolly</li>
    <li>Tonnerre</li>
    <li>Tornade</li>
</ol>

Résultat :

Liste ordonnée

II-G-1-b-i. Les différents types de numérotation

Il existe cinq manières différentes de numéroter les liste ordonnées. On renseigne le type de numérotation avec l'attribut type de la balise <ol>.
Les types sont :

  • 1 : Numérotation par les chiffres arabes (par défaut).
  • I : Numérotation par les chiffres romains.
  • i : Numérotation par les chiffres romains minuscules.
  • A : Numérotation par les lettres de l'alphabet.
  • a : Numérotation par les lettres de l'alphabet minuscules.

Dans l'exemple précédent, nous avons donc vu une liste ordonnée avec une numérotation par les chiffres arabes. Voici à quoi ressemblent les autres :

Exemple de liste ordonnée
Sélectionnez
<p>Top 3 du tiercé :</p>
<ol type="I">
    <li>Jolly</li>
    <li>Tonnerre</li>
    <li>Tornade</li>
</ol>

Résultat :

Liste ordonnée

Exemple de liste ordonnée
Sélectionnez
<p>Top 3 du tiercé :</p>
<ol type="i">
    <li>Jolly</li>
    <li>Tonnerre</li>
    <li>Tornade</li>
</ol>

Résultat :

Liste ordonnée

Exemple de liste ordonnée
Sélectionnez
<p>Top 3 du tiercé :</p>
<ol type="A">
    <li>Jolly</li>
    <li>Tonnerre</li>
    <li>Tornade</li>
</ol>

Résultat :

Liste ordonnée

Exemple de liste ordonnée
Sélectionnez
<p>Top 3 du tiercé :</p>
<ol type="a">
    <li>Jolly</li>
    <li>Tonnerre</li>
    <li>Tornade</li>
</ol>

Résultat :

Liste ordonnée

II-G-1-b-ii. Modifier le début de la numérotation

Il est tout à fait possible, pour une raison ou une autre, de modifier le numéro de départ par lequel va s'incrémenter la numérotation.
Pour cela, il suffit de préciser une valeur à l'attribut start de la balise <ol>. Cette valeur doit dans tous les cas être numérique :

Exemple de liste ordonnée
Sélectionnez
<p>Top 3 inversé du tiercé :</p>
<ol type="I" start="8">
    <li>Tortue</li>
    <li>Escargot</li>
    <li>Limace</li>
</ol>
II-G-1-c. Les listes de définitions

Elles sont délimitées par la balise <dl> qui comprend une liste de termes à définir représentés par la balise <dt> qui peuvent avoir une ou plusieurs définitions elles-mêmes encadrées par la balise <dd> (une pour chaque définition).

Exemple de liste de définitions
Sélectionnez
<dl>
    <dt>Oreiller</dt>
    <dd>Pièce de literie bourrée de plumes, de duvet, de crin... destinée à soutenir la tête pendant le repos.</dd>
    <dt>Puce</dt>
    <dd>Insecte de très petite taille se déplaçant par sauts.</dd>
    <dd>Marché où l'on vend des objets d'occasion.</dd>
</dl>

Résultat :

Liste de définitions

II-G-1-d. Les listes de répertoires

Elles sont encadrées par la balise <dir> et chacun des items est compris dans la balise <li>.

Exemple de liste de répertoires
Sélectionnez
<dir>
    <li>css</li>
    <li>fichiers</li>
    <li>images</li>
    <li>js</li>
</dir>

Résultat :

Liste de répertoires

II-G-1-e. Les listes de menus

Elles sont représentées par la balise <menu> et chacun des items est délimité par la balise <li>.

Exemple de liste de menus
Sélectionnez
<menu>
    <li>Accueil</li>
    <li>Page 1</li>
    <li>Page 2</li>
</menu>

Résultat :

Liste de menus

II-G-2. Les listes imbriquées

L'imbrication des listes permet une présentation claire et détaillée d'un menu ou d'un sommaire par exemple. On peut imbriquer les listes non ordonnées et ordonnées sans distinction et même les mélanger :

Exemple de listes imbriquées
Sélectionnez
<ol type="I">
    <li>La genèse</li>
    <li>La vie
        <ol type="A">
            <li>L'enfance</li>
            <li>L'adolescence</li>
            <li>Le passage à l'âge adulte
                <ul>
                    <li>Le jeune adulte</li>
                    <li>La crise de la quarantaine</li>
                </ul>
            </li>
            <li>La vieillesse</li>
        </ol>
    </li>
    <li>La mort</li>
</ol>

Résultat :

Listes imbriquées

II-G-3. L'utilité des listes aujourd'hui

La principale utilisation des listes de nos jours se fait par les listes non ordonnées pour la création de divers menus. L'imbrication de ces listes non ordonnées couplée avec un soupçon de CSS permet de faire des menus à multiples niveaux d'affichage, comme les menus déroulants.

D'autre part, on peut retrouver les listes ordonnées principalement pour la rédaction de sommaires, notamment destinés aux FAQ.

Voici quelques exemples de menus qui utilisent ces listes non ordonnées : Cours CSS : Menu et barre de navigation

II-H. Les tableaux

II-H-1. À quoi servent-ils ?

Un tableau qu'est-ce que c'est ? Tout simplement une suite de lignes et de colonnes qui forment un ensemble de cellules.
Les tableaux servent avant tout à présenter des données tabulaires dont voici un exemple :

Elèves | Français | Mathématiques | Histoire | Sport
Laure | 14 | 10 | 11 | 11
Philippe | 8.5 | 12 | 9 | 15
Jean | 15 | 14.5 | 10.5 | 12
Maurice | 7.5 | 18 | 12 | 14

Malgré cela, l'emploi le plus fréquent des tableaux reste la mise en page de documents. En effet, l'implémentation des tableaux étant assez intuitive, les débutants préfèreront en user ainsi. S'ajoute à cela les éditeurs WYSIWYG des logiciels de création de sites qui génèrent ce genre de code automatiquement.

Cependant, la mise en page par tableau devient dépréciée : Voir le paragraphe L'utilité des tableaux aujourd'hui.

II-H-2. Du tableau simple au tableau complexe

II-H-2-a. Les bases d'un tableau

Un tableau est délimité par la balise <table>. Le contenu d'un tableau HTML est généré horizontalement. C'est-à-dire qu'il n'est pas créé colonne par colonne mais ligne par ligne. Pour créer un tableau, nous commençons par créer des lignes grâces aux balises <tr>. Puis nous insérons dans ces lignes les cellules du tableau grâce aux balises <td>.
Le contenu (textes, images, autres balises) se trouve uniquement dans les balises <td> et ne doit se trouver en aucun cas en dehors.

Donc pour avoir un tableau d'une cellule, soit une ligne et une colonne, on obtient ce code :

Tableau d'une cellule
Sélectionnez
<table border="1">
    <tr>
        <td>Contenu de la cellule</td>
    </tr>
</table>

On obtient :

Contenu de la cellule

Et pour un tableau de deux lignes et deux colonnes :

Tableau de deux lignes et deux colonnes
Sélectionnez
<table border="1">
    <tr>
        <td>Cellule 1</td>
        <td>Cellule 2</td>
    </tr>
    <tr>
        <td>Cellule 3</td>
        <td>Cellule 4</td>
    </tr>
</table>

On obtient :

Cellule 1 | Cellule 2
Cellule 3 | Cellule 4

Par défaut, la bordure n'est pas visible, dans les codes précédents on a rajouté l'attribut border à la balise <table> pour la faire apparaître. On peut évidemment épaissir la bordure en augmentant la valeur.

On peut voir sur les tableaux affichés précédemment que le texte n'est pas directement collé à la bordure. Il s'agit là d'un espace interne par défaut des navigateurs. Pour le supprimer, on doit renseigner l'attribut cellpadding et lui mettre la valeur "0".

De la même manière, la bordure ne fait pas effectivement 1 pixel de large alors qu'on lui a renseigné la valeur 1. Il persiste un espace par défaut entre chaque cellule que l'on peut faire disparaître en affectant la valeur "0" à l'attribut cellspacing.

Un autre attribut nécessaire est l'attribut summary. Il contient du texte et fournit un résumé du tableau, utile pour les personnes malvoyantes.

Si on reprend tout ce dont on vient de parler, on aurait un code comme :

Récapitulatif des attributs de la balise table
Sélectionnez
<table border="1" cellpadding="0" cellspacing="0" summary="Résumé du tableau pour les personnes malvoyantes">
    <tr>
        <td>Cellule 1</td>
        <td>Cellule 2</td>
    </tr>
</table>

Attention à bien avoir le même nombre de <td> pour chaque ligne, sinon le navigateur risque de mal interpréter le tableau.

II-H-2-b. Le titre d'un tableau

Pour décrire le contenu d'un tableau, par exemple expliquer dans notre tout premier exemple de tableau qu'il s'agit des notes de la classe de 3èmeB, il faut utiliser la balise <caption>, à placer directement après l'ouverture du tableau.

Cette balise prend l'attribut align qui accepte comme valeurs "top" (par défaut), "bottom", "left" et "right", en fonction de l'endroit où l'on veut afficher cette légende.

Exemple d'un titre de tableau
Sélectionnez
<table border="1">
    <caption align="bottom">Notes de la classe de 3èmeB</caption>
    <tr>
        <td>Elèves</td>
        <td>Français</td>
        <td>Mathématiques</td>
        <td>Histoire</td>
        <td>Sport</td>
    </tr>
    <tr>
        <td>Laure</td>
        <td>14</td>
        <td>10</td>
        <td>11</td>
        <td>11</td>
    </tr>
    <tr>
       [...]
    </tr>
</table>
II-H-2-c. La ligne d'en-tête d'un tableau

Pour rependre l'exemple des notes de la classe de 3èmeB, on remarque que la première ligne peut faire office d'en-tête. En effet, elle renseigne le contenu de chacune des colonnes et n'a donc pas le même genre de contenu que tout le reste du tableau.
Pour préciser au navigateur qu'il s'agit donc de cellules spéciales, on va les modifier en remplaçant pour cette ligne seulement les balises <td> par des balises <th> :

Utilisation de la balise th
Sélectionnez
<table border="1">
    <caption align="bottom">Notes de la classe de 3èmeB</caption>
    <tr>
        <th>Elèves</th>
        <th>Français</th>
        <th>Mathématiques</th>
        <th>Histoire</th>
        <th>Sport</th>
    </tr>
    <tr>
        <td>Laure</td>
        <td>14</td>
        <td>10</td>
        <td>11</td>
        <td>11</td>
    </tr>
    <tr>
       [...]
    </tr>
</table>
II-H-2-d. Les différentes parties d'un tableau

Quand on arrive à avoir un tableau de grande taille, il devient moins évident à gérer. Pour cela, on peut regrouper les lignes par grandes parties : l'en-tête, le corps et le pied, respectivement représentées par les balises <thead>, <tbody> et <tfoot>.
Ces balises vont englober les lignes en fonction de l'endroit où les lignes doivent être placées. Elles sont évidemment facultatives mais aident à la maintenance du code.

Elles doivent apparaître dans l'ordre suivant : <thead>, <tfoot> et <tbody>.

Notre sempiternel exemple de la classe de 3èmeB contient clairement un en-tête, mais pas de pied. Qu'à cela ne tienne, on va en rajouter un, parce que la natalité ayant tant augmenté que les classes sont nombreuses et qu'arrivé en fin de tableau on ne sait plus à quoi correspondent les colonnes. Ce qui donne :

Exemple de groupage des lignes d'un tableau
Sélectionnez
<table border="1">
    <caption align="bottom">Notes de la classe de 3èmeB</caption>

    <thead>
        <tr>
            <th>Elèves</th>
            <th>Français</th>
            <th>Mathématiques</th>
            <th>Histoire</th>
            <th>Sport</th>
        </tr>
    </thead>

    <tfoot>
        <tr>
            <th>Elèves</th>
            <th>Français</th>
            <th>Mathématiques</th>
            <th>Histoire</th>
            <th>Sport</th>
        </tr>
    </tfoot>

    <tbody>
        <tr>
            <td>Laure</td>
            <td>14</td>
            <td>10</td>
            <td>11</td>
            <td>11</td>
        </tr>
        <tr>
           [...]
        </tr>
    </tbody>
</table>
II-H-2-e. La fusion de lignes et de colonnes d'un tableau

On distingue deux types de fusion : la fusion horizontale où sont en jeu deux (ou plus) colonnes, la fusion verticale où sont en jeu deux (ou plus) lignes. Dans les deux cas, elle s'opère sur les cellules, donc sur la balise <td>. Elle se traduit par l'utilisation de l'attribut colspan dans le cas d'une fusion horizontale et par l'attribut rowspan dans le cas d'une fusion verticale.
Ces attributs prennent pour valeurs le nombre de cellules à fusionner.

Exemple d'utilisation de colspan
Sélectionnez
<table border="1">
    <tr>
        <td colspan="5">Cellule qui se répend sur 5 colonnes</td>
    </tr>
    <tr>
        <td>Colonne 1</td>
        <td>Colonne 2</td>
        <td>Colonne 3</td>
        <td>Colonne 4</td>
        <td>Colonne 5</td>
    </tr>
</table>

On obtient :

Cellule qui se répend sur 5 colonnes
Colonne 1 Colonne 2 Colonne 3 Colonne 4 Colonne 5

La somme des colspan de chaque ligne doit être identique à toutes les autres lignes.

En ce qui concerne l'attribut rowspan, on aurait un code tel que :

Exemple d'utilisation de rowspan
Sélectionnez
<table border="1">
    <tr>
        <td rowspan="2">Cellule sur deux lignes</td>
        <td>Ligne 1 - Colonne 2</td>
        <td>Ligne 1 - Colonne 3</td>
        <td>Ligne 1 - Colonne 4</td>
    </tr>
    <tr>
        <td>Ligne 2 - Colonne 2</td>
        <td>Ligne 2 - Colonne 3</td>
        <td>Ligne 2 - Colonne 4</td>
    </tr>
</table>

Il est tout de suite beaucoup plus difficile de se rendre compte de son erreur, le rowspan est déjà moins intuitif que le colspan.

On pourrait aller plus loin en combinant les deux techniques sur un seul et même tableau :

Exemple d'utilisation de colspan et rowspan
Sélectionnez
<table border="1">
    <tr>
        <td colspan="3">Cellule 1</td>
        <td>Cellule 2</td>
    </tr>
    <tr>
        <td rowspan="3">Cellule 3</td>
        <td>Cellule 4</td>
        <td>Cellule 5</td>
        <td>Cellule 6</td>
    </tr>
    <tr>
        <td>Cellule 7</td>
        <td colspan="2" rowspan="2">Cellule 8</td>
    </tr>
    <tr>
        <td>Cellule 9</td>
    </tr>
</table>

On remarque que le code est devenu extrêmement compliqué et que la moindre erreur de fusion de notre part entraînerait une interprétation du tableau complètement bancale par les navigateurs.

II-H-3. L'utilité des tableaux aujourd'hui

Grâce aux techniques de fusion vues précédemment, la tendance il y a quelques années, était de profiter de ce système pour mettre en page assez rapidement l'ensemble de son site web. Cependant, si cette méthode peut séduire, elle est fortement déconseillée.
En effet, les tableaux sont censés (et doivent) être utilisés uniquement pour l'affichage de données tabulaires.
Dans le cas d'une mise en page, préférez la solution du couple "DIV + CSS". Voir l'article : Une mise en page rapide et facile avec des div et du CSS.

On peut facilement voir dans notre dernier exemple où l'on combine les deux techniques de fusion, que notre code sera difficilement maintenable dans le cas d'une retouche ou de l'ajout d'une nouvelle cellule.

Voici quelques raisons pour lesquelles il ne faut pas utiliser les tableaux pour la mise en page :

  • Ils alourdissent les pages HTML : beaucoup de balises pour finalement y mettre peu de contenu.
  • Ils sont très difficiles à maintenir dans le cas d'une retouche.
  • Ils nuisent à l'accessibilité : problème d'interprétation des navigateurs spécialisés destinés aux malvoyants par exemple.
  • Ils sont mal gérés par les navigateurs à l'impression dans le cas de tableaux complexes.

J'espère avoir réussi à vous convaincre de ne pas/plus utiliser les tableaux à mauvais escient.

II-I. Les formulaires

II-I-1. À quoi servent-ils ?

Les formulaires servent à envoyer des données au serveur, données remplies en général par un visiteur, que ce soit pour l'inscription sur un site ou un formulaire de contact par exemple.
Les formulaires sont dotés de divers contrôles comme des champs de saisie, des boutons, des listes, etc, qui permettent au visiteur d'interagir avec la page qu'il est en train de consulter.

II-I-2. La balise form

Tous les champs de formulaires quels qu'ils soient doivent se trouver dans cette balise <form>.
C'est cette balise qui va permettre de renseigner la page de destination du formulaire, à l'aide de l'attribut action, qui peut prendre pour valeurs une URL en absolu ou en relatif, voire même une adresse e-mail.
Elle est aussi utilisée pour préciser le mode d'envoi des données. C'est avec l'attribut method que l'on va le préciser. Cet attribut prend deux valeurs différentes qui sont "get" et "post". Les valeurs envoyées en "GET" passent par l'URL alors qu'en "POST" elles sont envoyées de manière transparente, aussi, on préfèrera l'utilisation de la méthode d'envoi "POST".
L'attribut enctype, quant à lui, sert à indiquer le type de données envoyées au serveur dans le cas d'utilisation de la méthode "POST". La valeur généralement utilisée pour cet attribut est "multipart/form-data" qui sert lors de l'envoi de fichiers chargés avec un champ de type "file".

Voyons maintenant à quoi pourrait ressembler notre balise <form> :

Exemple de balise form
Sélectionnez
<form action="envoi-formulaire.php" method="post">
    <!-- Contenu du formulaire -->
</form>

Si vous pouvez bien entendu mettre plusieurs formulaires dans un même document, ceux-ci doivent en aucun cas être imbriqués.

De plus, il est déconseillé d'utiliser des espaces dans l'attribut name de tous les champs utilisés dans un formulaire, puisque celui-ci sera retranscrit en caractère de soulignement "_" lors de la soumission du formulaire et peut donc induire en erreur lors de la récupération des données dans vos scripts.

II-I-3. Les champs texte monolignes

On distingue deux types de champs texte monolignes : les champs de type "texte" et les champs de type "mot de passe".
Le champ de type "texte" est l'élément de base d'un formulaire, il permet d'entrer du texte court sur une ligne, comme un login, un e-mail, ou autres alors que le champ de type "mot de passe" permet de renseigner un mot de passe, dont l'affichage sera camouflé aux yeux des autres personnes.
Le champ de texte monoligne est caractérisé par la balise <input> et l'attribut type dont la valeur sera "text" ou "password".
On renseignera aussi l'attribut name qui sera le nom du champ, celui qui va nous permettre de retrouver la valeur lors de l'envoi du formulaire.
D'autres attributs sont disponibles, comme value qui permet d'attribuer une valeur par défaut au champ, size qui permet de préciser la taille du champ en nombre de caractères, maxlength qui sert à limiter le nombre de caractères possibles, readonly qui prend pour seule valeur "readonly" et verrouille le champ, disabled qui prend pour seule valeur "disabled" et permet de désactiver le champ.

Lorsqu'un champ est défini en "disabled", sa valeur n'est pas envoyée au serveur.

Voici quelques exemples de champs texte :

Exemples de champs texte
Sélectionnez
<input type="text" size="5" name="code_postal" maxlength="5">

<input type="text" name="nom_champ" readonly="readonly" value="Champ vérouillé">

<input type="text" name="login" value="Entrez ici votre login" size="20">

<input type="password" name="mdp">

II-I-4. Les champs texte multilignes

Si vous souhaitez que vos visiteurs puissent saisir de longs textes, comme des champs de commentaires pour des articles d'un blog par exemple, il faudra se tourner vers l'utilisation de la balise <textarea>.
Contrairement au champ de texte monoligne, le textarea est une balise double et son contenu est écrit entre les balises ouvrante et fermante et non dans un attribut value.
Deux attributs sont nécessaires au <textarea> : rows qui contient le nombre de lignes et cols qui contient le nombre de colonnes.
On peut, tout comme le champ de texte monoligne, rajouter les attributs name, readonly et disabled.
L'attribut maxlength n'existe pas pour cette balise, et pour en limiter le nombre de caractères il est possible de passer par du JavaScript.

Voici quelques exemples de <textarea> :

Exemples de champs texte multilignes
Sélectionnez
<textarea name="commentaire" rows="5" cols="80"></textarea>

<textarea name="sujet" rows="6" cols="100">Texte par défaut</textarea>

II-I-5. Les champs cachés

Il nous arrivera souvent de vouloir envoyer des données au serveur de manière transparente pour le visiteur. On utilisera alors un champ caché, qui ne sera pas affiché dans le navigateur du visiteur mais dont les données seront envoyées. Attention, cette balise apparaît tout de même dans le code source de la page.
Pour cela, on utilise la balise <input> avec "hidden" comme valeur de l'attribut type.
Il est aussi nécessaire de renseigner l'attribut name pour retrouver ces données cachées du côté du serveur ainsi que l'attribut value qui va contenir ces données.

Exemple de champ caché :

Exemple de champ caché
Sélectionnez
<input type="hidden" name="clef" value="a182f7d8e844d956a65b18e84f">

II-I-6. Les champs de fichiers

Pour permettre aux visiteurs d'envoyer des fichiers par l'intermédiaire du formulaire, que ce soit en pièce jointe d'un e-mail ou le chargement d'une image sur le serveur, on va utiliser la balise <input> dont l'attribut type est renseigné à "file".
Ceci fait, un champ avec un bouton "Parcourir" sera disponible.
Mais pour que le champ soit opérationnel, il faut impérativement renseigner l'attribut enctype de la balise <form> à "multipart/form-data".
Il est aussi plus qu'utile de préciser l'attribut name du champ "file". On peut aussi renseigner l'attribut size qui affecte la taille du champ dans lequel sera écrit le nom du fichier.

Exemple de champ "file" :

Exemple de champ file
Sélectionnez
<input type="file" name="image">

Il est également possible de limiter le poids du fichier en rajoutant un champ caché dans le formulaire contenant le champ "file". Ce champ caché doit avoir pour name la valeur "MAX_FILE_SIZE" et pour value le poids maximum en octet.

Limitation du poids du champ file
Sélectionnez
<input type="hidden" name="MAX_FILE_SIZE" value="20000">

Cette limitation ne vous affranchit pas de faire la vérification côté serveur ! En effet, le code HTML peut facilement être modifié par les visiteurs, donc cette valeur aussi.

II-I-7. Les boutons radio

Les boutons radio sont utilisés lorsque vous voulez laisser aux visiteurs un choix et un seul parmi une liste de propositions. La balise est alors <input> dont l'attribut type est renseigné à "radio".
Ces boutons radio vont par groupe, c'est-à-dire qu'ils doivent avoir le même nom pour un groupe de propositions. Le nom est renseigné avec l'attribut name.
La valeur de l'attribut value va être transmise au serveur en fonction du bouton choisi. Vous pouvez aussi forcer un bouton radio d'un groupe à être coché au chargement de la page en lui mettant l'attribut checked dont la seule valeur est "checked".

Voyons maintenant des exemples de groupes de boutons radio :

Exemples de groupes de boutons radio
Sélectionnez
<p>
    <input type="radio" name="civilité" value="mlle"> Mademoiselle
    <input type="radio" name="civilité" value="mme"> Madame
    <input type="radio" name="civilité" value="mr"> Monsieur
</p>

<p>
    <input type="radio" name="genre" value="homme" checked="checked"> Homme
    <input type="radio" name="genre" value="femme"> Femme
    <input type="radio" name="genre" value="et"> Alien
    <input type="radio" name="genre" value="indéfini"> Indéfini
</p>

Si vous donnez un nom différent aux boutons d'un groupe, le navigateur ne saura pas qu'ils appartiennent au même groupe (y a pas de miracle), donc plusieurs choix seront possibles et on perd toute l'utilité des boutons radio.

II-I-8. Les cases à cocher

Les cases à cocher sont sensiblement identiques aux boutons radio, mais permettent un choix multiple pour un groupe de propositions. Les attributs sont identiques, à la différence que l'attribut type prend pour valeur "checkbox".
Un problème cependant, lorsque vous désignez un groupe de cases à cocher par le même nom, seule la dernière sera envoyée au serveur. Pour contrer cela, il suffit de rajouter des crochets ouvrant et fermant au nom du groupe. Il indiquera au serveur qu'il s'agit d'un tableau de valeurs à récupérer et non une seule valeur (comme dans le cas des boutons radio). En revanche, dans le cas d'utilisation d'une case à cocher unique (sans groupe), comme par exemple des CGU à valider, les crochets sont inutiles.

Voici un exemple de groupe de cases à cocher :

Exemple de cases à cocher
Sélectionnez
<input type="checkbox" name="qualite[]" value="intelligent"> Intelligent
<input type="checkbox" name="qualite[]" value="beau"> Beau
<input type="checkbox" name="qualite[]" value="serviable"> Serviable
<input type="checkbox" name="qualite[]" value="fort"> Fort
<input type="checkbox" name="qualite[]" value="généreux"> Généreux

II-I-9. Les boutons

Il existe deux balises différentes pour présenter les boutons : la balise <input> et la balise <button>. La différence entre les deux est que la balise <button> est double, donc qu'elle a une balise ouvrante et une balise fermante alors que la balise <input> est simple. Il est de plus possible des balises de mise en forme dans la balise <button>.

Il y a 4 types différents de boutons :

  • Le bouton simple
  • Le bouton d'envoi
  • Le bouton image
  • Le bouton effacer
II-I-9-a. Le bouton simple

Il est défini par l'attribut type des balises <input> et <button> ayant pour valeur "button".
Ce bouton n'est utile que lors d'appel de scripts JavaScript au moment du clic. Il n'a aucune autre fonction particulière.

Exemples de boutons simples :

Exemples de boutons simples
Sélectionnez
<input type="button" name="addition" value="Additionner" onclick="addition();">

<button type="button" name="multiplication" onclick="multiplication();"><b>Multiplier</b></button>
II-I-9-b. Le bouton d'envoi

Le bouton d'envoi sert, comme son nom l'indique, à envoyer les données du formulaire au serveur. C'est celui qui va permettre de valider le formulaire.
Il est caractérisé par la valeur "submit" de l'attribut type des balises <input> et <button>.

Exemples de boutons d'envoi :

Exemples de boutons d'envoi
Sélectionnez
<input type="submit" name="envoyer" value="Valider">

<button type="submit" name="soumettre">Soumettre<br>les réponses</button>
II-I-9-c. Le bouton image

Le bouton image se comporte exactement comme un bouton d'envoi, c'est-à-dire qu'il sert à la validation du formulaire. Il sert à personnaliser son bouton, dans le cas où l'on ne trouve pas les boutons de base à notre goût.
Il est défini par l'attribut type de la balise <input> ayant pour valeur "image" et l'on renseigne l'adresse de l'image avec l'attribut src. C'est le seul bouton qui ne peut pas être géré par la balise <button>.

Exemple de bouton image :

Exemple de bouton image
Sélectionnez
<input type="image" name="envoyer" src="adresse/de/l/image">
II-I-9-d. Le bouton effacer

Ce bouton sert à réinitialiser toutes les valeurs du formulaire.
Il est caractérisé par la valeur "reset" de l'attribut type des balises <input> et <button>.

Exemples de boutons effacer :

Exemples de boutons effacer
Sélectionnez
<input type="reset" name="effacer" value="Effacer toutes les valeurs">

<button type="reset" name="effacer">Réinitialiser</button>

II-I-10. Les listes

Les listes permettent de laisser un choix aux visiteurs, au même titre que les boutons radio ou les cases à cocher, mais sont plus pratiques lorsqu'il s'agit de proposer un grand nombre de choix.
On distingue deux types de listes, les listes normales et les listes déroulantes.
Les deux sont introduites par la balise <select> qui comprend les différents choix sous forme de balise <option> dont on renseigne la valeur qui sera envoyée au serveur grâce à son attribut value.
On peut même suggérer une proposition par défaut en précisant l'attribut selected de la balise <option> de notre choix.
Par défaut, une liste est déroulante.
On peut (doit) renseigner le nom de la liste avec l'attribut name.

Continuons avec un exemple :

Exemple de liste
Sélectionnez
<select name="couleur_yeux">
    <option value="bleus">Bleus</option>
    <option value="bruns" selected="selected">Bruns</option>
    <option value="verts">Verts</option>
    <option value="noisettes">Noisettes</option>
    <option value="gris">Gris</option>
    <option value="vairons">Vairons</option>
</select>

Cette liste est donc une liste déroulante avec un seul choix possible parmi les six proposés.

On peut rendre cette liste non déroulante en rajoutant l'attribut size qui prend pour valeur le nom de choix à afficher, par exemple "3".

Ce qui donne :

Exemple de liste
Sélectionnez
<select name="couleur_yeux" size="3">
    <option value="bleus">Bleus</option>
    <option value="bruns">Bruns</option>
    <option value="verts" selected="selected">Verts</option>
    <option value="noisettes">Noisettes</option>
    <option value="gris">Gris</option>
    <option value="vairons">Vairons</option>
</select>

Ici encore, un seul choix est possible. Pour pouvoir proposer plusieurs choix, comme dans le cas de cases à cocher, il suffit de rajouter l'attribut multiple qui prend pour seule valeur "multiple".

Voyons pour l'exemple :

Exemple de liste à choix multiple
Sélectionnez
<select name="matieres_preferees" size="5" multiple="multiple">
    <option value="maths">Maths</option>
    <option value="français">Français</option>
    <option value="anglais">Anglais</option>
    <option value="histoire">Histoire</option>
    <option value="sport">Sport</option>
    <option value="dessin">Dessin</option>
    <option value="musique">Musique</option>
    <option value="physique">Physique</option>
    <option value="sciences naturelles">Sciences naturelles</option>
</select>

Le choix multiple ne peut pas se faire sur une liste déroulante. L'attribut size doit être renseigné pour que le multiple fonctionne.

II-I-11. Améliorez l'accessibilité de vos formulaires

Pour améliorer l'accessibilité de vos formulaires aux handicapés, malvoyants, quelques balises ont été créées et il est toujours bon de les utiliser, d'autant plus qu'elles ne perturbent pas l'utilisation pour les autres visiteurs et clarifient même la compréhension des formulaires.

Il s'agit d'une part de la balise <fieldset> qui permet de grouper logiquement des champs de formulaires de même nature. Par exemple, pour un formulaire d'inscription vous pouvez grouper tous les champs en rapport avec les informations personnelles du visiteur, puis grouper tous les champs concernant ses loisirs, etc.

La balise qui va permettre de donner ce nom au groupage de champs est <legend>.

Regardons quelques exemples :

Exemples de fieldset
Sélectionnez
<fieldset>
    <legend>Informations personnelles</legend>

    <!-- Ici divers champs sur les informations personnelles, comme la saisie du nom, prénom et adresse -->
</fieldset>

<fieldset>
    <legend>Loisirs</legend>

    <!-- Ici divers champs sur les loisirs du visiteur, comme la musique et les films qu'il aime etc -->
</fieldset>

Il y a d'autre part, la balise <label> qui permet de donner un libellé à un champ de formulaire en les associant à l'aide de l'attribut for de cette balise qui doit être identique à l'attribut id du champ auquel elle est rattachée. Le texte mis dans le label est alors cliquable.

Par exemple :

Exemples de fieldset
Sélectionnez
<label for="nom">Votre nom</label> <input type="text" name="nom" id="nom">

Aimez-vous la viande ?
<label for="oui">Oui</label> <input type="radio" name="viande" id="oui">
<label for="non">Non</label> <input type="radio" name="viande" id="non">


Tutoriel WEB

Les bases du HTML

Vu dans href="http://www.w3.org/TR/html-markup
  • III. L'entête du document - head
    • III-A. Le titre
    • III-B. Les scripts
      • III-B-1. Les scripts externes
      • III-B-2. Les scripts internes
    • III-C. Les styles
      • III-C-1. Les styles externes
      • III-C-2. Les styles internes
    • III-D. Les meta
      • III-D-1. À quoi servent-elles ?
      • III-D-2. La balise meta content-type
      • III-D-3. Ajoutez des infos sur vous
      • III-D-4. Ajoutez des infos sur votre site
      • III-D-5. Ajoutez des infos sur la création
      • III-D-6. Orientez les robots
      • III-D-7. Orientez les visiteurs
      • III-D-8. Plus encore...

III. L'entête du document - head

La balise <head> contient de nombreux renseignements sur la page, sur l'auteur, ainsi que la plupart des scripts (JavaScript, VBscript,...) et styles CSS.

III-A. Le titre

Le titre de votre page, qui se trouve entre les balises <title> et </title>, est sans doute l'une des balises les plus importantes du document.

En effet, c'est son contenu qui sera affiché en titre des résultats de la recherche dans les moteurs de recherche, donc il faut essayer au maximum d'y mettre les mots-clefs importants.
Il est très conseillé, voire fortement recommandé de mettre un titre unique pour chaque page de votre site, toujours en rapport avec le contenu de la page en question.

Ce titre est également ce qui apparaît dans la barre de titre du navigateur ainsi que dans les signets lorsque vous mettez le site en favoris.

Exemple de titre
Sélectionnez
<title>Tutoriel HTML - Apprenez les bases du HTML</title>

Commentez l'article : 27 commentaires

III-B. Les scripts

Les scripts sont de petits programmes en JavaScript ou en VBScript exécutés côté client qui augmentent l'ergonomie de vos pages lorsqu'ils sont utilisés à bon escient.

On distingue deux moyens d'inclure des scripts :

  • Les scripts externes.
  • Les scripts internes.

III-B-1. Les scripts externes

Les scripts externes sont des fichiers externes à la page, avec l'extension .js par exemple pour les scripts JavaScript.

On les inclut grâce à l'attribut src de la balise <script> :

Balise script
Sélectionnez
<script type="text/javascript" src="chemin/du/fichier/javascript.js"></script>

Dans le cas d'inclusion d'un script externe, tout le code inséré entre les balises <script> sera ignoré !

III-B-2. Les scripts internes

Les scripts internes sont des morceaux de code directement écrits entre les balises <script> et </script>. Ils sont donc insérés directement dans la page comme suit :

Balise script
Sélectionnez
<script type="text/javascript">
    function maFonction()
    {
        /* du code ici */
    }
</script>

Lors de la création d'une fonction, celle-ci est unique à la page, donc pour pouvoir la réutiliser il faut la réécrire dans une autre page : duplication inutile de code.

III-C. Les styles

Les feuilles de style en cascade ou CSS (Cascading Style Sheets) s'utilisent pour mettre en page notre code HTML.

III-C-1. Les styles externes

Il y a deux manières d'importer un fichier CSS externe, soit avec une balise HTML, soit avec du code CSS.

Import avec une balise HTML
Sélectionnez
<link rel="stylesheet" type="text/css" href="chemin/du/fichier.css">
Import avec du code CSS
Sélectionnez
<style type="text/css">
    @import url("chemin/du/fichier.css");
</style>

Quelle méthode doit alors être préférée ?

Au niveau "performance", aucune. Mais on va préférer la seconde méthode pour la simple et bonne raison que cette syntaxe n'est pas reconnue par les anciens navigateurs (comme Netscape 4.x) et donc ceux-ci interprétant très mal les propriétés CSS ne risqueront pas de rendre le site illisible pour le visiteur.

III-C-2. Les styles internes

Les styles internes à la page sont à écrire entre les balises <style> et </style> :

CSS interne
Sélectionnez
<style type="text/css">
    body
    {
        background-color : #fff;
    }
</style>

Les styles internes sont uniques à la page, donc pour pouvoir les réutiliser il faut les réécrire dans une autre page : duplication inutile de code.

III-D. Les meta

III-D-1. À quoi servent-elles ?

Les balises meta, obligatoirement placées dans la balise <head>, permettent de renseigner diverses informations sur la page en cours, comme son auteur, une courte description du document, des mots-clefs, la date de création, son jeu de caractère (ou encodage), etc.

On peut différencier deux grandes familles de balises meta :

  • Les meta name : Touchent toutes les informations concernant le document, l'auteur, le site, les outils utilisés, etc.
  • Les meta http-equiv : Concernent les meta qui communiquent avec le navigateur.

S'il existe de nombreuses balises meta différentes, la plupart sont inutiles, et de ce fait totalement facultatives.
Pour garder la validité W3C de votre page, seule la balise concernant son encodage est nécessaire.

Il y a quelques années, certaines balises étaient indispensables pour le référencement de son site Web, comme la description et les mots-clefs, cependant, les techniques de référencement étant en perpétuelle évolution, aujourd'hui leur intérêt est minime.

III-D-2. La balise meta content-type

Cette meta est la plus importante et la seule obligatoire pour passer la validation W3C.

  • meta content-type — Précise le type MIME de la page ainsi que le jeu de caractères utilisé (encodage).
Exemple
Sélectionnez
<meta http-equiv="content-type" content="text/html; charset=utf-8">

III-D-3. Ajoutez des infos sur vous

  • meta author — Renseigne le prénom et nom de l'auteur de la page courante. S'il y a plusieurs auteurs, les séparer d'une virgule.
Exemple
Sélectionnez
<meta name="author" content="Josselin WILLETTE">
  • meta publisher — Renseigne le prénom et nom de l'éditeur du site. S'il y a plusieurs éditeurs, les séparer d'une virgule. Dans le cas d'une société, il faut renseigner son nom.
Exemple
Sélectionnez
<meta name="publisher" content="Josselin WILLETTE">
  • meta reply-to — Définit l'adresse e-mail de l'auteur de la page. Attention, cette balise est scannée par les robots spammeurs !
Exemple
Sélectionnez
<meta name="reply-to" content="jwillette at monsite dot com">
  • meta contact — Définit l'adresse e-mail de la personne ou service à contacter. Attention, cette balise est scannée par les robots spammeurs !
Exemple
Sélectionnez
<meta name="contact" content="contact at masociete dot com">
  • meta contactname — Spécifie le nom de la personne à contacter.
Exemple
Sélectionnez
<meta name="contactname" content="Josselin WILLETTE">
  • meta contactorganization — Indique le nom de la société détentrice du site.
Exemple
Sélectionnez
<meta name="contactorganization" content="MaSociété SARL">
  • meta contactstreetaddress1 — Indique la première ligne de l'adresse de l'auteur ou de la société détentrice du site.
Exemple
Sélectionnez
<meta name="contactstreetaddress1" content="15 rue de la poupée qui tousse">
  • meta contactstreetaddress2 — Indique la deuxième ligne de l'adresse de l'auteur ou de la société détentrice du site.
Exemple
Sélectionnez
<meta name="contactstreetaddress2" content="Bâtiment A, Etage 3">
  • meta contactzip — Indique le code postal de l'auteur ou de la société détentrice du site.
Exemple
Sélectionnez
<meta name="contactzip" content="75000">
  • meta contactcity — Indique la ville de l'auteur ou de la société détentrice du site.
Exemple
Sélectionnez
<meta name="contactcity" content="MAVILLE">
  • meta contactstate — Indique le pays de l'auteur ou de la société détentrice du site.
Exemple
Sélectionnez
<meta name="contactstate" content="FRANCE">

III-D-4. Ajoutez des infos sur votre site

  • meta description — Courte description du site qui sera affichée dans les résultats de la plupart des moteurs de recherche. Ne pas dépasser les 200 caractères sous peine de voir la description tronquée.
Exemple
Sélectionnez
<meta name="description" content="Tutoriel HTML sur les éléments fondamentaux à savoir pour bien débuter la programmation Web">
  • meta keywords — Contient une liste de mots-clefs sur lesquels les moteurs de recherche vont se référer. Les mots-clefs sont séparés par une virgule. Avoir trop de mots-clefs peut être considéré par les moteurs comme du spam, donc ne pas dépasser les 500 caractères.
Exemple
Sélectionnez
<meta name="keywords" content="tutoriel html, cours html, balise meta, formulaires, listes, tableaux, cadres">
  • meta identifier-url — Renseigne l'URL d'entrée du site.
Exemple
Sélectionnez
<meta name="identifier-url" content="http://j-willette.developpez.com/">
  • meta subject — Expose le sujet de votre site en quelques mots.
Exemple
Sélectionnez
<meta name="subject" content="Site d'apprentissage du HTML">
  • meta distribution — Définit le type de réseau de publication du site.
Valeurs | Description
global | Visible sut l'Internet.
local | Visible uniquement sur un poste local.
iu | Visible sur un intranet.
Exemple
Sélectionnez
<meta name="distribution" content="global">
  • meta rating — Définit le type de public visé par le site.
Valeurs | Description
general | Tout public.
mature | Réservé aux adultes.
restricted | Accès restreint.
14years | Accès interdit en-dessous de 14 ans.
Exemple
Sélectionnez
<meta name="rating" content="general">
  • meta language — Renseigne la langue utilisée sur le site.
Exemple
Sélectionnez
<meta name="language" content="fr">

III-D-5. Ajoutez des infos sur la création

  • meta copyright — Indique le ou les copyrights auxquels la page est soumise.
Exemple
Sélectionnez
<meta name="copyright" content="© 2007 Josselin WILLETTE">
  • meta generator — Déclare quels sont les logiciels utilisés pour faire le site. Les différents logiciels sont séparés d'une virgule.
Exemple
Sélectionnez
<meta name="generator" content="Notepad++, Gimp">
  • meta date-creation-ddmmyyyy — Indique la date de création de la page sous la forme JJMMAAAA.
Exemple
Sélectionnez
<meta name="date-creation-ddmmyyyy" content="01122007">
  • meta date-revision-ddmmyyyy — Indique la date de dernière modification de la page sous la forme JJMMAAAA.
Exemple
Sélectionnez
<meta name="date-revision-ddmmyyyy" content="01122007">
  • meta content-script-type — Précise le langage de scripts utilisé dans la page par son type MIME.
Exemple
Sélectionnez
<meta http-equiv="content-script-type" content="text/javascript">
  • meta content-style-type — Indique l'utilisation d'une feuille de style dans la page et renseigne son type MIME.
Exemple
Sélectionnez
<meta http-equiv="content-style-type" content="text/css">

III-D-6. Orientez les robots

  • meta robots — Indique aux robots indexeurs si la page doit être indexée ou non. Plusieurs valeurs sont possibles, séparées par une virgule. Par défaut, la valeur est all.
Valeurs | Description
index | Autorise les robots à indexer la page.
noindex | Interdit aux robots d'indexer la page.
follow | Autorise les robots à suivre les liens de la page.
nofollow | Interdit aux robots de suivre les liens de la page.
all | Correspond à "index, follow".
none | Correspond à "noindex, nofollow".
noarchive | Interdit aux moteurs de recherche de proposer une version de cache de la page.
Exemple
Sélectionnez
<meta name="robots" content="index, nofollow, noarchive">
  • meta revisit-after — Précise aux robots le nombre de jours d'intervalle à respecter avant leur prochaine visite sur le site. Attention, beaucoup de robots à l'heure actuelle ne se réfèrent plus à cette balise.
Exemple
Sélectionnez
<meta name="revisit-after" content="3 days">

III-D-7. Orientez les visiteurs

  • meta refresh — Permet de rafraichir la page toutes les x secondes où x est la valeur de content. Si une URL est renseignée, alors la navigateur redirigera le visiteur au bout de x secondes vers la page indiquée.
Exemple
Sélectionnez
<meta http-equiv="refresh" content="60">
<meta http-equiv="refresh" content="0; url=http://j-willette.developpez.com/">

III-D-8. Plus encore...

  • meta window-target — Indique le cadre de destination pour l'ensemble des liens du site dans le cas d'utilisation de frames. Permet d'éviter de renseigner l'attribut target sur chacun des liens.
Exemple
Sélectionnez
<meta http-equiv="window-target" content="corps">
  • meta pragma — Interdit la mise en cache des pages avec son unique valeur : no-cache. Balise très peu fiable, à coupler avec une solution côté serveur.
Exemple
Sélectionnez
<meta http-equiv="pragma" content="no-cache">
  • meta expires — Renseigne la date d'expiration de la page, au format "JJ Mois (en anglais) AAAA". Au-delà de cette date, la page précédente est rechargée par le navigateur. La page peut ne jamais expirer en indiquant la valeur never.
Exemple
Sélectionnez
<meta http-equiv="expires" content="never">
<meta http-equiv="expires" content="21 December 2007">
  • meta set-cookie — Crée un cookie sur l'ordinateur du visiteur.
Exemple
Sélectionnez
<meta http-equiv="set-cookie" content="dejavenu=oui; path=/; expires=Thursday, 14-April-08 00:00:00 GMT">
  • meta imagetoolbar — Supprime la barre d'outils qui s'affiche sur les images lorsque la souris pointe dessus sur Internet Explorer. Sa seule valeur est no.
Exemple
Sélectionnez
<meta http-equiv="imagetoolbar" content="no">
  • meta site-enter — Crée une transition à l'entrée du site. Ne fonctionne qu'avec Internet Explorer.
  • meta site-exit — Crée une transition à la sortie du site. Ne fonctionne qu'avec Internet Explorer.
  • meta page-enter — Crée une transition à l'entrée de la page. Ne fonctionne qu'avec Internet Explorer.
  • meta page-exit — Crée une transition à la sortie de la page. Ne fonctionne qu'avec Internet Explorer.
Valeurs | Description
blendTrans(duration=4) | Crée un fade in en entrée et un fade out en sortie.
revealTrans(duration=4,transition=0) | Crée une transition carrée entrante.
revealTrans(duration=4,transition=1) | Crée une transition carrée sortante.
revealTrans(duration=4,transition=2) | Crée une transition ronde entrante.
revealTrans(duration=4,transition=3) | Crée une transition ronde sortane.
revealTrans(duration=4,transition=4) | Créé une transition rideau vers le haut.
revealTrans(duration=4,transition=5) | Créé une transition rideau vers le bas.
revealTrans(duration=4,transition=6) | Créé une transition rideau vers la droite.
revealTrans(duration=4,transition=7) | Créé une transition rideau vers la gauche.
revealTrans(duration=4,transition=8) | Créé une transition rideau multiple vers la droite.
revealTrans(duration=4,transition=9) | Créé une transition rideau multiple vers le bas.
revealTrans(duration=4,transition=10) | Créé une transition damier vers la droite.
revealTrans(duration=4,transition=11) | Créé une transition damier vers le bas.
revealTrans(duration=4,transition=12) | Créé une transition brush.
revealTrans(duration=4,transition=13) | Créé une transition de porte qui se ferme verticalement.
revealTrans(duration=4,transition=14) | Créé une transition de porte qui s'ouvre verticalement.
revealTrans(duration=4,transition=15) | Créé une transition de porte qui se ferme horizontalement.
revealTrans(duration=4,transition=16) | Créé une transition de porte qui s'ouvre horizontalement.
revealTrans(duration=4,transition=17) | Créé une transition diagonale NE-SO.
revealTrans(duration=4,transition=18) | Créé une transition diagonale SE-NO.
revealTrans(duration=4,transition=19) | Créé une transition diagonale NO-SE.
revealTrans(duration=4,transition=20) | Créé une transition diagonale SO-NE.
revealTrans(duration=4,transition=21) | Créé une transition par lignes horizontales.
revealTrans(duration=4,transition=22) | Créé une transition par lignes verticales.
revealTrans(duration=4,transition=23) | Créé une transition aléatoire.
Exemple
Sélectionnez
<meta http-equiv="page-enter" content="blendTrans(duration=2)">

Vous pouvez modifier la valeur duration comme bon vous semble, elle renseigne le temps de transition.

Et encore plus...

Vous avez peut-être déjà remarqué dans le code source de certains sites des balises meta qui commencent par "DC.", comme par exemple :

Sélectionnez
<meta name="dc.keywords" content="liste, de, mots, clefs">

Ces balises font partie de ce que l'on appelle le Dublin Core.
Pour plus d'informations, vous pouvez lire la traduction officielle du Guide d'utilisation du Dublin Core ainsi que la liste de ces meta (en).

L'idée de créer une cohérence dans la création de métadonnées partait d'une bonne intention, seulement elle n'a pas su s'imposer dans les moeurs à cause sans doute d'une trop grande timidité sur la propagation de cette idée.
De ce fait, elles ne sont pas très utilisées.


Tutoriel WEB

Les bases du HTML

Vu dans href="http://www.w3.org/TR/html-markup
  • IV. Aller plus loin
    • IV-A. Le XHTML
    • IV-B. Le CSS
    • IV-C. Le référencement
    • IV-D. Et encore plus...

IV. Aller plus loin

IV-A. Le XHTML

Vous pouvez apprendre le XHTML qui est une évolution orientée XML du HTML. Cela implique par exemple d'écrire les balises et attributs entièrement en minuscules, de toujours fermer les balises, même les balises simples (Ex : <br> devient <br />), mais bien évidemment de changer de DOCTYPE.

Pour plus d'informations concernant les différences entre HTML et XHTML et pour en avoir une introduction, reportez-vous au tutoriel d'Adrien Pellegrini.

IV-B. Le CSS

CSS, ou "Cascading StyleSheets" est un langage qui sert à mettre en forme des documents (X)HTML ou XML. A ce titre, il est beaucoup plus puissant que les balises de mises en forme vues précédemment. Aussi, dès qu'il s'agit de présenter des données dans une page, que ce soit du texte ou des blocs entiers, je vous conseille fortement de l'utiliser en lieu et place des balises obsolètes comme <font>.

Pour débuter dans ce langage, voyez plutôt la section CSS de Développez.com.

IV-C. Le référencement

Avoir une page HTML, voire un site complet maintenant que vous avez suivi ce tutoriel, c'est bien beau, mais si on ne peut pas le trouver dans Google ou tout autre moteur de recherche, ça ne sert pas à grand chose. Aussi, pour aller plus loin dans le dur apprentissage de la création de sites, il faut passer par des techniques de référencement qui permettront à notre site d'être visible sur la toile.
Ces techniques sont en perpétuelle évolution, donc il faudra autant que faire se peut se tenir informé des nouvelles techniques pour rester dans les meilleures places.

Nous vous proposons des tutoriels complets et régulièrement révisés pour vous tenir à la page de ces techniques dans notre section Webmarketing.


La spécification HTML 4.01

W3C La version française de cette traduction est : http://www.la-grange.net/w3c/html4.01/cover.html La spécification HTML 4.01 La spécification. HTML 4.01

Table des matières abrégée

  1. À propos de la spécification HTML 4
  2. Introduction à HTML 4
  3. À propos de SGML et HTML
  4. La conformité : exigences et recommandations
  5. La représentation du document HTML - Jeux de caractères, encodages de caractères et entités
  6. Les types de données de base de HTML - Données textuelles, couleurs, longueurs, URI, types de contenu, etc.
  7. La structure globale du document HTML - L'en-tête et le corps du document
  8. Les indications de langue et la direction du texte - Considérations internationales pour le texte
  9. Le texte - Paragraphes, lignes et phrases
  10. Les listes - Listes non-ordonnées, listes numérotées et listes de définition
  11. Les tables
  12. Les liens - Liens hypertextes et indépendants des médias
  13. Les objets, les images et les applets
  14. Les feuilles de style - Rajout de style aux documents HTML
  15. L'alignement, le style des polices et les règles horizontales
  16. Les cadres - Présentations multi-fenêtrées des documents
  17. Les formulaires - Formulaires de saisie par l'utilisateur : champs textuels, boutons, menus et autres
  18. Les scripts - Documents animés et formulaires intelligents
  19. Les informations de référence de SGML pour HTML - Définition formelle de HTML et validation
  20. La déclaration SGML de HTML 4
  21. La définition de type de document
  22. La définition de type de document transitoire
  23. La définition de type de document pour un jeu d'encadrement
  24. Les références des entités de caractères en HTML 4
  1. Changements
  2. Remarques sur les performances, l'implémentation et la conception
  • Références
  • Index des éléments
  • Index des attributs
  • Index

La version française de cette traduction est : http://www.la-grange.net/w3c/html4.01/cover.html

Traducteurs

  • Jean-Jacques Solari
  • Karl Dubost
  • Alix Marchandise-Franquet
  • Eric Schreiner
  • Claude Chaunier
  • Leyla Greengard

dans le cadre de l'effort de la liste de discussion w3c-translators.fr@w3.org
La version française peut contenir des erreurs. La version anglaise de cette note est l'unique version normative. Version originale : http://www.w3.org/TR/1999/REC-html401-19991224

Recommandation du W3C du 24 décembre 1999

Cette version :
http://www.w3.org/TR/1999/REC-html401-19991224
Les versions à télécharger ne sont pas disponibles.
Dernière version de HTML 4.01 :
http://www.w3.org/TR/html401
Dernière version de HTML 4 :
http://www.w3.org/TR/html4
Dernière version de HTML :
http://www.w3.org/TR/html
Version précédente de HTML 4.01 :
http://www.w3.org/TR/1999/PR-html40-19990824
Recommandation HTML 4 précédente :
http://www.w3.org/TR/1998/REC-html40-19980424
Rédacteurs :
Dave Raggett <dsr@w3.org>
Arnaud Le Hors, W3C
Ian Jacobs, W3C

Copyright ©1997-1999 W3C ® (MIT, INRIA, Keio), Tous droits réservés. Les règles de responsabilité, de nom de marque, d'utilisation des documents et de licence des logiciels du W3C s'appliquent.

Résumé

Cette spécification définit le langage de balisage hypertexte (HyperText Markup Language - HTML), le langage de publication du World Wide Web. Cette spécification définit HTML 4.01, qui est une sous-version de HTML 4. En plus des fonctionnalités texte, multimédia et hyperliens des versions précédentes de HTML (HTML 3.2 [HTML32] et HTML 2.0 [RFC1866]), HTML 4 apporte la gestion de plus d'options multimédia, des langages de script, des feuilles de style, de meilleures capacités d'impression et des documents pour que ceux-ci soient plus accessibles aux utilisateurs avec des handicaps. HTML 4 améliore également nettement l'internationalisation des documents, dans le but de rendre le Web réellement largement mondial.

HTML 4 est une application SGML se conformant au standard international ISO 8879 -- Standard Generalized Markup Language [ISO8879].

Statut de ce document

Cette section décrit le statut de ce document au moment de sa publication. D'autres documents peuvent venir le remplacer. Le dernier statut de cette série de documents est conservé au W3C.

Ce document spécifie HTML 4.01, qui fait partie de la ligne de spécification HTML 4. La première version de HTML 4 était la recommandation HTML 4.0 [HTML40], publiée le 18 décembre 1997 et révisée le 24 avril 1998. Cette spécification est la première recommandation de HTML 4.01. Elle inclut les changements non rédactionnels intervenus depuis la version du 24 avril de HTML 4.0. Quelques changements ont eu lieu sur les DTD, par exemple. Ce document rend obsolète les versions précédentes de HTML 4.0, bien que le W3C propose toujours ces spécifications ainsi que leurs DTD sur son site.

Ce document a été passé en revue par les membres du W3C et par les tierces parties intéressées et le Directeur l'a homologué comme recommandation du W3C. C'est un document stable qui peut être employé comme matériel de référence ou cité comme référence normative par un autre document. Le rôle du W3C dans la création de cette spécification est d'attirer l'attention sur celle-ci et de promouvoir son large déploiement. Cela améliore les fonctionnalités et l'interopérabilité du Web.

Le W3C recommande que les agents utilisateurs et les auteurs (et en particulier, les outils d'édition) produisent des documents HTML 4.01 plutôt que des documents HTML 4.0. Le W3C recommande que les auteurs produisent des documents HTML 4 à la place de documents HTML 3.2. Pour des raisons de rétro-compatibilité, le W3C recommande également que les outils interprétant le HTML 4 continue à gérer HTML 3.2 ainsi que HTML 2.0.

Pour tous renseignements sur les prochaines générations de HTML, « Le langage de balisage hypertexte extensible » [XHTML], veuillez vous reporter à l'activité HTML du W3C et à la liste des documents techniques du W3C.

Ce document a été produit au sein de l'activité HTML du W3C. Les buts du groupe de travail HTML (membres uniquement) sont débattus dans la charte du groupe de travail HTML (membres uniquement).

Une liste des recommandations actuelles du W3C et des autres documents techniques peut être trouvée à http://www.w3.org/TR.

Les débats publics sur les fonctionnalités de HTML ont lieu sur la liste de diffusion www-html@w3.org (archives de www-html@w3.org).

Les langues disponibles

La version anglaise de cette spécification est l'unique version normative. Cependant, pour obtenir les traductions de ce document, voir http://www.w3.org/MarkUp/html4-updates/translations.

Errata

La liste des erreurs connues dans cette spécification est disponible à :
http://www.w3.org/MarkUp/html4-updates/errata

Veuillez signaler les erreurs dans ce document à www-html-editor@w3.org.

Table des matières complète

  1. À propos de la spécification HTML 4
    1. L'organisation de la spécification
    2. Les conventions du document
      1. Les éléments et les attributs
      2. Les remarques et les exemples
    3. Remerciements
      1. Remerciements pour la présente révision
    4. L'avis de copyright
  2. Introduction à HTML 4
    1. Qu'est-ce que le World Wide Web ?
      1. Introduction aux URI
      2. Les identifiants de fragment
      3. Les URI relatifs
    2. Qu'est-ce que HTML ?
      1. Une brève histoire de HTML
    3. HTML 4
      1. L'internationalisation
      2. L'accessibilité
      3. Les tables
      4. Les documents composés
      5. Les feuilles de style
      6. Les scripts
      7. L'impression
    4. La création de documents avec HTML 4
      1. Séparer la structure et la présentation
      2. Considérer l'accès universel au Web
      3. Aider les agents utilisateurs dans la restitution progressive
  3. À propos de SGML et HTML
    1. Introduction à SGML
    2. Les structures SGML utilisées dans HTML
      1. Les éléments
      2. Les attributs
      3. Les références de caractères
      4. Les commentaires
    3. Comment lire le DTD de HTML
      1. Les commentaires du DTD
      2. Les définitions des entités paramètres
      3. Les déclarations des éléments
        • Les définitions du modèle de contenu
      4. Les déclarations des attributs
        • Les entités du DTD dans les définitions d'attributs
        • Les attributs booléens
  4. La conformité : exigences et recommandations
    1. Définitions
    2. SGML
    3. Le type de contenu "text/html"
  5. La représentation du document HTML - Jeux de caractères, encodages de caractères et entités
    1. Le jeu de caractères du document
    2. Les encodages de caractères
      1. Choisir un encodage
        • Remarques sur les encodages spécifiques
      2. Spécifier l'encodage de caractères
    3. Les références de caractères
      1. Les références de caractères numériques
      2. Les références des entités de caractères
    4. Les caractères non affichables
  6. Les types de données HTML de base - Données textuelles, couleurs, longueurs, URI, types de contenu, etc.
    1. L'information de casse
    2. Les types SGML de base
    3. Les chaînes textuelles
    4. Les URI
    5. Les couleurs
      1. Remarques sur l'utilisation des couleurs
    6. Les longueurs
    7. Les types de contenu (les types MIME)
    8. Les codes de langue
    9. Les encodages de caractères
    10. Les caractères seuls
    11. Les dates et les heures
    12. Les types de lien
    13. Les descripteurs de média
    14. Les données des scripts
    15. Les données des feuilles de style
    16. Les noms des cadres cibles
  7. La structure globale du document HTML - L'en-tête et le corps du document
    1. Introduction à la structure du document HTML
    2. Les informations de version HTML
    3. L'élément HTML
    4. L'en-tête du document
      1. L'élément HEAD
      2. L'élément TITLE
      3. L'attribut title
      4. Les métadonnées
        • La spécification des métadonnées
        • L'élément META
        • Les profils de métadonnées
    5. Le corps du document
      1. L'élément BODY
      2. Les identifiants des éléments : les attributs id et class
      3. Les éléments de bloc et les éléments en-ligne
      4. Le regroupement des éléments : les éléments DIV et SPAN
      5. Les titres : les éléments H1, H2, H3, H4, H5 et H6
      6. L'élément ADDRESS
  8. Les indications de langue et la direction du texte - Considérations internationales pour le texte
    1. La spécification de la langue du contenu : l'attribut lang
      1. Les codes de langue
      2. L'héritage des codes de langue
      3. L'interprétation des codes de langue
    2. La spécification de la direction du texte et des tables : l'attribut dir
      1. Introduction à l'algorithme bi-directionnel
      2. L'héritage des indications de direction du texte
      3. L'établissement de la direction d'un texte imbriqué
      4. L'inactivation de l'algorithme bi-directionnel : l'élément BDO
      5. Les références de caractères pour la directionnalité et le contrôle des ligatures
      6. L'effet des feuilles de style sur la bi-directionnalité
  9. Le texte - Paragraphes, lignes et phrases
    1. Les blancs
    2. Le texte structuré
      1. Les phrases : les éléments EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, ABBR et ACRONYM
      2. Les citations : les éléments BLOCKQUOTE et Q
        • La restitution des citations
      3. Les indices et les exposants : les éléments SUB et SUP
    3. Les lignes et les paragraphes
      1. Les paragraphes : l'élément P
      2. Le contrôle des sauts de ligne
        • Forcer le saut de ligne : l'élément BR
        • Interdire le saut de ligne
      3. Les césures
      4. Le texte préformaté : l'élément PRE
      5. La restitution visuelle des paragraphes
    4. Les marques de révision dans le document : les éléments INS et DEL
  10. Les listes - Listes non-ordonnées, listes ordonnées et listes de définitions
    1. Introduction aux listes
    2. Les listes non-ordonnées (UL), les listes ordonnées (OL) et les items de liste (LI)
    3. Les listes de définitions : les éléments DL, DT et DD
      1. La restitution visuelle des listes
    4. Les éléments DIR et MENU
  11. Les tables
    1. Introduction aux tables
    2. Les éléments de construction des tables
      1. L'élément TABLE
        • La directionnalité de la table
      2. La légende de la table : l'élément CAPTION
      3. Les regroupements de rangées : les éléments THEAD, TFOOT et TBODY
      4. Les regroupements de colonnes : les éléments COLGROUP et COL
        • L'élément COLGROUP
        • L'élément COL
        • Le calcul du nombre de colonnes dans une table
        • Le calcul de la largeur des colonnes
      5. Les rangées de la table : l'élément TR
      6. Les cellules de la table : les éléments TH et TD
        • Les cellules qui occupent plusieurs rangées ou colonnes
    3. La mise en forme de la table par les agents utilisateurs visuels
      1. Les bordures et les règles
      2. L'alignement horizontal et vertical
        • L'héritage des spécifications d'alignement
      3. Les marges des cellules
    4. La restitution de la table par les agents utilisateurs non-visuels
      1. L'association des informations de rubrique aux cellules de données
      2. La catégorisation des cellules
      3. L'algorithme pour obtenir les informations de rubrique
    5. Un exemple de table
  12. Les liens - Liens hypertextes et indépendants des médias
    1. Introduction aux liens et aux ancres
      1. La visite d'une ressource reliée
      2. Les autres relations des liens
      3. La spécification des ancres et des liens
      4. Les titres des liens
      5. Les liens et l'internationalisation
    2. L'élément A
      1. La syntaxe des noms d'ancre
      2. Les liens imbriqués sont illégaux
      3. Les ancres avec un attribut id
      4. Les ressources non disponibles et non identifiables
    3. Les relations du document : l'élément LINK
      1. Les liens progressifs et les liens inverses
      2. Les liens et les feuilles de style externes
      3. Les liens et les moteurs de recherche
    4. L'information de chemin : l'élément BASE
      1. La résolution des URI relatifs
  13. Les objets, les images et les applets
    1. Introduction aux objets, images et applets
    2. L'inclusion d'une image : l'élément IMG
    3. L'inclusion générique : l'élément OBJECT
      1. Les règles de restitution des objets
      2. L'initialisation de l'objet : l'élément PARAM
      3. Les systèmes de nommage globaux des objets
      4. La déclaration et l'instanciation des objets
    4. L'inclusion d'un applet : l'élément APPLET
    5. Remarques sur les documents incorporés
    6. Les images cliquables
      1. Les images cliquables côté client : les éléments MAP et AREA
        • Exemples d'images cliquables côté client
      2. Les images cliquables côté serveur
    7. La présentation visuelle des images, objets et applets
      1. La largeur et la hauteur
      2. L'espace autour des images et des objets
      3. Les bordures
      4. L'alignement
    8. La manière de spécifier un texte de remplacement
  14. Les feuilles de style - Rajout de style aux documents HTML
    1. Introduction aux feuilles de style
    2. Le rajout de style à HTML
      1. L'établissement du langage de feuille de style par défaut
      2. Les informations de style en-ligne
      3. Les informations de style dans l'en-tête : l'élément STYLE
      4. Les types de média
    3. Les feuilles de style externes
      1. Les feuilles de style préférées et alternatives
      2. La spécification des feuilles de style externes
    4. Les feuilles de style en cascade
      1. Les cascades dépendant du média
      2. L'héritage et la cascade
    5. La dissimulation des données de style à l'agent utilisateur
    6. Le rattachement des feuilles de style avec les en-têtes HTTP
  15. L'alignement, le style des polices et les règles horizontales
    1. Le formatage
      1. La couleur d'arrière-plan
      2. L'alignement
      3. Les objets flottants
        • Faire flotter un objet
        • Faire flotter un texte autour d'un objet
    2. Les polices
      1. Les éléments de style de police : les éléments TT, I, B, BIG, SMALL, STRIKE, S et U
      2. Les éléments modificateurs de police : les éléments FONT et BASEFONT
    3. Les règles : l'élément HR
  16. Les cadres - Présentations multi-fenêtrées des documents
    1. Introduction aux cadres
    2. La disposition des cadres
      1. L'élément FRAMESET
        • Les rangées et les colonnes
        • Les jeux d'encadrement imbriqués
        • Le partage des données entre les cadres
      2. L'élément FRAME
        • L'établissement du contenu initial d'un cadre
        • La restitution visuelle d'un cadre
    3. La spécification des informations du cadre cible
      1. L'établissement de la cible par défaut des liens
      2. La sémantique de cible
    4. Le contenu de remplacement
      1. L'élément NOFRAMES
      2. Les descriptions longues des cadres
    5. Les cadres en-ligne : l'élément IFRAME
  17. Les formulaires - Formulaires de saisie par l'utilisateur : champs textuels, boutons, menus et autres
    1. Introduction aux formulaires
    2. Les commandes
      1. Les types de commande
    3. L'élément FORM
    4. L'élément INPUT
      1. Les types de commande créés par l'élément INPUT
      2. Exemples de formulaires contenant des commandes INPUT
    5. L'élément BUTTON
    6. Les éléments SELECT, OPTGROUP et OPTION
      1. Les options présélectionnées
    7. L'élément TEXTAREA
    8. L'élément ISINDEX
    9. Les labels
      1. L'élément LABEL
    10. Le rajout d'une structure aux formulaires : les éléments FIELDSET et LEGEND
    11. Donner l'attention à un élément
      1. La navigation par tabulation
      2. Les clés d'accès
    12. Les commandes inactives et en lecture seule
      1. Les commandes inactives
      2. Les commandes en lecture seule
    13. La soumission du formulaire
      1. La méthode de soumission du formulaire
      2. Les commandes réussies
      3. Le traitement des données du formulaire
        • Première étape : identifier les commandes réussies
        • Deuxième étape : construire le jeu des données du formulaire
        • Troisième étape : coder le jeu des données du formulaire
        • Quatrième étape : soumettre le jeu des données du formulaire codé
      4. Les types de contenu du formulaire
        • "application/x-www-form-urlencoded"
        • "multipart/form-data"
  18. Les scripts - Documents animés et formulaires intelligents
    1. Introduction aux scripts
    2. La conception des documents pour les agents utilisateurs qui gèrent les scripts
      1. L'élément SCRIPT
      2. La spécification du langage de script
        • Le langage de script par défaut
        • La déclaration locale du langage de script
        • L'appel des éléments HTML à partir d'un script
      3. Les événements intrinsèques
      4. La modification dynamique des documents
    3. La conception des documents pour les agents utilisateurs qui ne gèrent pas les scripts
      1. L'élément NOSCRIPT
      2. La dissimulation des données de scripts aux agents utilisateurs
  19. Les informations de référence SGML pour HTML - Définition formelle de HTML et validation
    1. La validation du document
    2. Un exemple de catalogue SGML
  20. La déclaration SGML de HTML 4
    1. La déclaration SGML
  21. La définition de type de document
  22. La définition de type de document transitoire
  23. La définition de type de document pour un jeu d'encadrement
  24. Les références des entités de caractères dans HTML 4
    1. Introduction aux références des entités de caractères
    2. Les références des entités de caractères pour les caractères ISO 8859-1
      1. La liste des caractères
    3. Les références des entités de caractères pour les symboles, les symboles mathématiques et les lettres grecques
      1. La liste des caractères
    4. Les références des entités de caractères des caractères qui sont significatifs pour le balisage et des caractères pour l'internationalisation
      1. La liste des caractères
  1. Changements
    1. Les changements survenus entre la version HTML 4.0 du 24 avril 1998 et celle HTML 4.01 du 24 décembre 1999
      1. Les changements apportés à la spécification
        • Les changements généraux
        • À propos de SGML et HTML
        • La représentation du document HTML
        • Les types de données HTML de base
        • La structure globale du document HTML
        • Les indications de langue et la direction du texte
        • Les tables
        • Les liens
        • Les objets, les images et les applets
        • Les feuilles de style dans les documents HTML
        • Les cadres
        • Les formulaires
        • La déclaration SGML
        • Le DTD strict
        • Remarques
        • Références
      2. Les erreurs corrigées
      3. Les erreurs typographiques mineures corrigées
      4. Les éclaircissements
      5. Les problèmes connus des navigateurs
    2. Les changements survenus entre la version du 18 décembre 1997 et celle du 24 avril 1998
      1. Les erreurs corrigées
      2. Les erreurs typographiques mineures corrigées
    3. Les changements survenus entre HTML 3.2 et HTML 4.0 (18 décembre 1997)
      1. Les changements sur les éléments
        • Les nouveaux éléments
        • Les éléments déconseillés
        • Les éléments obsolètes
      2. Les changements sur les attributs
      3. Les changements pour l'accessibilité
      4. Les changements pour les métadonnées
      5. Les changements pour le texte
      6. Les changements pour les liens
      7. Les changements pour les tables
      8. Les changements pour les images, les objets et les images cliquables
      9. Les changements pour les formulaires
      10. Les changements pour les feuilles de style
      11. Les changements pour les cadres
      12. Les changements pour les scripts
      13. Les changements pour l'internationalisation
  2. Remarques sur les performances, l'implémentation et la conception
    1. Remarques sur les documents invalides
    2. Les caractères spéciaux dans les valeurs d'attribut URI
      1. Les caractères non-ASCII dans les valeur d'attribut URI
      2. Les esperluettes dans les valeurs d'attribut URI
    3. Remarques pour les implémentation SGML
      1. Les sauts de ligne
      2. La spécification de données non-HTML
        • Comme contenu d'élément
        • Comme valeurs d'attributs
      3. Les fonctionnalités SGML dont la gestion est limitée
      4. Les attributs booléens
      5. Les sections marquées
      6. Les instructions de traitement
      7. Le balisage raccourci
    4. Remarques pour aider les moteurs de recherche à indexer votre site Web
      1. Les robots d'exploration
        • Le fichier robots.txt
        • Les robots et l'élément META
    5. Remarques sur les tables
      1. Les justifications de conception
        • Le reformatage dynamique
        • L'affichage progressif
        • La structure et la présentation
        • Les groupes de rangées et de colonnes
        • L'accessibilité
      2. Les algorithmes de disposition recommandés
        • L'algorithme de disposition fixe
        • L'algorithme de disposition automatique
    6. Remarques sur les formulaires
      1. L'affichage progressif
      2. Les évolutions futures
    7. Remarques sur les scripts
      1. La syntaxe réservée pour les macrocommandes de script futures
        • Les pratiques courantes pour les macrocommandes de script
    8. Remarques sur les cadres
    9. Remarques sur l'accessibilité
    10. Remarques sur la sécurité
      1. Les problèmes de sécurité des formulaires
  • Références
    1. Les références normatives
    2. Les références informatives
  • Index des éléments
  • Index des attributs
  • Index

La version française de cette traduction est :
http://www.la-grange.net/w3c/html4.01/cover.html

Traducteurs

  • Jean-Jacques Solari
  • Karl Dubost
  • Alix Marchandise-Franquet
  • Eric Schreiner
  • Claude Chaunier
  • Leyla Greengard

dans le cadre de l'effort de la liste de discussion w3c-translators.fr@w3.org
La version française peut contenir des erreurs. La version anglaise de cette note est l'unique version normative. Version originale : http://www.w3.org/TR/1999/REC-html401-19991224


À propos de la spécification HTML 4.0

La version française de cette traduction est :
http://www.la-grange.net/w3c/html4.01/

Traducteur : Leyla Greengard dans le cadre de l'effort de la liste de discussion w3c-translators.fr@w3.org
La version française peut contenir des erreurs. La version anglaise de cette note est l'unique version normative. Version originale : http://www.w3.org/TR/1999/REC-html401-19991224

1 À propos de la spécification HTML 4

Sommaire

  1. L'organisation de la spécification
  2. Les conventions du document
    1. Les éléments et les attributs
    2. Les remarques et les exemples
  3. Remerciements
    1. Remerciements pour la présente révision
  4. L'avis de copyright

1.1 L'organisation de la spécification

La spécification est organisée selon les sections suivantes :

Sections 2 et 3 : Introduction à HTML 4
L'introduction décrit la place de HTML dans le système du World Wide Web, fournit une brève histoire du développement de HTML, met en valeur ce qui peut-être réalisé avec HTML 4 et fournit quelques astuces d'écriture du HTML.

Un tutoriel SGML abrégé donne aux lecteurs une certaine compréhension des relations existantes entre HTML et SGML et offre un résumé sur la manière de comprendre la définition de type de document HTML (le DTD).

Sections 4 - 24 : Manuel de référence de HTML 4
Le coeur du manuel fournit la référence du langage HTML, qui définit tous les éléments et attributs du langage.

Ce document a été organisé par sujet plutôt que selon un ordre grammatical de HTML. Les sujets sont regroupés en trois catégories : la structure, la présentation et l'interactivité. Bien qu'il soit difficile de répartir les structures HTML entre ces trois catégories, ce modèle reflète l'expérience du groupe de travail HTML selon laquelle la séparation de la structure de la présentation d'un document produit des documents plus efficaces et plus faciles à maintenir.

La référence du langage comprend les informations suivantes :

  • les caractères qui peuvent apparaître dans un document HTML ;

  • les types de données fondamentaux d'un document HTML ;

  • les éléments qui régissent la structure d'un document HTML, comprenant le texte, les listes, les tables, les liens et les objets, images et applets incorporés ;

  • les éléments qui régissent la présentation d'un document HTML, comprenant les feuilles de style, les polices, les couleurs, les règles et autres présentations visuelles, ainsi que les cadres pour une présentation multi-fenêtrée ;

  • les éléments qui régissent l'interactivité d'un document HTML, comprenant les formulaires de saisie par l'utilisateur et les scripts pour les documents réactifs ;

  • la définition SGML formelle de HTML :

    • la déclaration SGML de HTML ;
    • trois DTD : un strict, un transitoire et un pour les jeux d'encadrement ;
    • la liste des références de caractères.
Appendices
Le premier appendice contient des informations sur les changements intervenus depuis HTML 3.2 pour aider les auteurs et les développeurs dans leur transition vers HTML 4, et les changements intervenus depuis la spécification du 18 décembre 1997. Le second appendice contient des remarques sur les caractéristiques et l'implémention, qui sont destinées en premier lieu aux développeurs pour les aider dans la création des agents utilisateurs HTML 4.

errata-01

Références
Une liste normative et informative des références.
Index
Trois index donnent aux lecteurs un accès rapide aux définitions des concepts clés, des éléments et des attributs.

1.2 Les conventions du document

Ce document a été rédigé à l'intention de deux types de lecteurs : les auteurs et les développeurs. Nous espérons que la spécification fournira aux auteurs les outils nécessaires pour l'écriture de documents efficaces, attractifs et accessibles, sans les submerger de détails sur l'implémentation de HTML. Par contre, les développeurs devraient y trouver tout ce dont ils ont besoin pour construire des agents utilisateurs conformes.

La spécification peut-être abordée selon différentes optiques :

  • Lire du début à la fin. La spécification commence par une présentation générale de HTML et devient de plus en plus technique et spécifique au fur et à mesure de la lecture.

  • Accéder rapidement à l'information. Afin d'obtenir au plus vite des informations sur la syntaxe et la sémantique, la version en ligne de la spécification inclut les possibilités suivantes :
    1. toute référence à un élément, ou un attribut, est reliée à sa définition dans la spécification. Chaque élément, ou attribut, n'est défini que dans un seul endroit ;
    2. chaque page comprend des liens vers les index, de sorte qu'on ne se trouve jamais à plus de deux liens de la définition d'un élément, ou d'un attribut ;

    3. la page de garde de chacune des trois sections du manuel de référence du langage développe la table des matières initiale pour la section en question.

1.2.1 Les éléments et les attributs

Les noms des éléments sont écrits en lettres majuscules (par exemple, BODY). Les noms des attributs sont écrits en lettres minuscules (par exemple, lang, onsubmit). Rappelez-vous que les éléments et les attributs HTML sont indifférents à la casse ; la convention d'écriture est élaborée dans un souci de plus grande lisibilité.

Les noms des éléments et des attributs ont été balisés dans ce document, de sorte que certains agents utilisateurs les restitueront d'une manière particulière.

Chaque définition d'attribut spécifie le type de valeur que celui-ci admet. Si ce type comprend un petit nombre de valeurs possibles, la définition donne alors l'ensemble de ces valeurs, séparées par des caractères barre verticale « | ».

Après l'information de type, chaque définition d'attribut signale la sensibilité à la casse des valeurs que celui-ci admet, entre crochets ("[ ]"). Voir la section sur l'information de casse pour plus de détails.

1.2.2 Les remarques et les exemples

Les remarques informatives sont enjolivées par rapport au texte normal et pourrraient être mises en évidence par certains agents utilisateurs.

Tous les exemples illustrant une utilisation déconseillée sont marqués « EXEMPLE DÉCONSEILLÉ ». Les exemples déconseillés proposent également une solution alternative. Tous les exemples qui illustrent des usages illégaux sont clairement marqués « EXEMPLE ILLÉGAL ».

Les exemples et les remarques ont étés balisés de telle sorte qu'ils peuvent être mis en évidence par certains agents utilisateurs.

1.3 Remerciements

Merci à tous ceux qui ont aidé à la rédaction des documents de travail qui ont permis l'élaboration de la spécification du HTML 4, et à tous ceux qui ont envoyé des corrections et des suggestions.

Merci beaucoup au groupe Initiative pour l'accessibilité du Web (WAI HC group) pour ses travaux sur l'amélioration de l'accessibilité de HTML et à T.V. Raman (Adobe) pour ses premiers travaux sur le développement de formulaires accessibles.

Les auteurs de cette spécification, les membres du groupe de travail HTML du W3C, méritent des applaudissements pour leur relecture rapide, leurs commentaires constructifs et leurs efforts : John D. Burger (MITRE), Steve Byrne (JavaSoft), Martin J. Dürst (University of Zurich), Daniel Glazman (Electricité de France), Scott Isaacs (Microsoft), Murray Maloney (GRIF), Steven Pemberton (CWI), Robert Pernett (Lotus), Jared Sorensen (Novell), Powell Smith (IBM), Robert Stevahn (HP), Ed Tecot (Microsoft), Jeffrey Veen (HotWired), Mike Wexler (Adobe), Misha Wolf (Reuters), et Lauren Wood (SoftQuad).

Merci à Dan Connolly (W3C) pour son investissement rigoureux comme éditeur à temps-partiel et son organisation du groupe de travail HTML. Merci à Sally Khudairi (W3C) pour son travail indispensable dans le cadre des revues de presse.

Merci à Jan Kärrman, auteur de html2ps pour son aide dans la création de la version Postscript de la spécification.

De l'aide particulière du W3C à Sophia-Antipolis de la part de Janet Bertot, Bert Bos, Stephane Boyera, Daniel Dardailler, Yves Lafon, Håkon Lie, Chris Lilley et Colas Nahaboo (Bull).

Enfin, merci à Tim Berners-Lee, sans qui rien de cela n'aurait été possible.

1.3.1 Remerciements pour la présente révision

Merci beaucoup à Shane McCarron pour son suivi des erreurs dans cette version de la spécification.

1.4 Avis de copyright

Pour toutes informations sur les droits d'auteurs, veuillez consulter les avis sur la propriété intellectuelle (W3C Intellectual Property Notice), les avis sur les documents du W3C (W3C Document Notice) et les avis sur les droits de propriété intellectuelle concernant les logiciels (W3C IPR Software Notice).


Introduction à HTML 4

2 Introduction à HTML 4

Table des matières

  1. Qu'est-ce que le World Wide Web ?
    1. Introduction aux URI
    2. Les identifiants de fragment
    3. Les URI relatifs
  2. Qu'est-ce que HTML ?
    1. Une brève histoire de HTML
  3. HTML 4
    1. L'internationalisation
    2. L'accessibilité
    3. Les tables
    4. Les documents composés
    5. Les feuilles de styles
    6. Les - scripts
    7. L'impression
  4. La création de document avec HTML 4
    1. Séparer la structure et la présentation
    2. Considérer l'accès universel au Web
    3. Aider les agents utilisateurs dans la restitution progressive

2.1 Qu'est-ce que le World Wide Web ?

Le World Wide Web (Web) est un réseau de ressources et d'informations. Le Web repose sur trois mécanismes pour rendre ces données facilement disponibles le plus largement possible :

  1. un système de nommage uniforme pour leur localisation sur le Web (par exemple, les URI) ;
  2. des protocoles, pour accéder à des ressources nommées dont on possède l'adresse (par exemple, HTTP) ;
  3. l'hypertexte, pour faciliter la navigation entre ces ressources (par exemple, HTML).

Les liens entre ces trois mécanismes apparaissent clairement tout au long de cette spécification.

2.1.1 Introduction aux URI

Chaque ressource disponible sur le Web -- document HTML, image, séquence vidéo, programme, etc. -- possède une adresse représentée sous la forme d'un identifiant de ressource uniforme ou URI.

Les URI sont formés de trois parties distinctes :

  1. le nom du protocole utilisé pour accéder à la ressource ;
  2. le nom de la machine hébergeant la ressource ;
  3. le nom de la ressource en question, indiqué sous la forme d'un chemin.

Prenons, pour exemple, l'URI qui désigne la page des rapports techniques du W3C :

    http://www.w3.org/TR

Cet URI peut être compris comme suit : il est disponible via le protocole HTTP (voir [RFC2616]), hébergé sur la machine nommée « www.w3.org » et accessible par le chemin "/TR". On peut rencontrer d'autres systèmes dans les documents HTML, par exemple, comme "mailto" pour un e-mail ou "ftp" pour le protocole FTP.

Voici un autre exemple d'URI, qui pointe sur la boîte aux lettres d'un utilisateur :

... un texte...
Pour tout commentaire, envoyez un e-mail à
<A href="mailto:jean@quelquepart.com">Jean BON</A>.

Remarque : La plupart des lecteurs connaît probablement le terme « URL » et non le terme « URI ». Les URL forment un sous-ensemble du système de nommage plus général URI.

2.1.2 Les identifiants de fragment

Certains URI se rapportent à un endroit dans une ressource. Ce genre d'URI se termine par un caractère « # », suivi par l'identifiant d'une ancre (appelé identifiant de fragment ). Par exemple, voici un URI qui pointe sur l'ancre section_2 de la page top.html :

http://unsite.com/html/top.html#section_2

2.1.3 Les URI relatifs

Un URI relatif ne comporte pas de nom de protocole ni de nom de machine. Son chemin se rapporte généralement à une ressource disponible sur la même machine que le document courant. Les liens relatifs peuvent comporter d'autres composants de chemin relatifs (par exemple, ces caractères « .. » signifient le niveau supérieur dans la hiérchie définie par le chemin) et des identifiants de fragment.

Les URI relatifs se résolvent en URI complets, en utilisant l'URI de base. Comme exemple de résolution d'URI relatif, prenons l'URI de base : "http://www.acme.com/support/intro.html". Dans le balisage de lien hypertexte ci-dessous :

  <A href="fournisseurs.html">Fournisseurs</A>

l'URI relatif se développerait en l'URI complet "http://www.acme.com/support/fournisseurs.html", tandis que pour le balisage de l'image ci-dessous :

  <IMG src="../icones/logo.gif" alt="logo">

l'URI relatif se développerait en l'URI complet "http://www.acme.com/icones/logo.gif".

En HTML, les URI s'utilisent pour :

  • relier un autre document ou ressource (voir les éléments A et LINK) ;
  • relier une feuille de style externe ou un script (voir LINK et SCRIPT) ;
  • inclure une images, un objet ou un applet dans une page (voir les éléments IMG, OBJECT, APPLET et INPUT) ;
  • créer des images cliquables (voir les éléments MAP et AREA) ;
  • soumettre un formulaire (voir l'élément FORM) ;
  • créer un cadre (voir les éléments FRAME et IFRAME) ;
  • citer une référence externe (voir les éléments Q, BLOCKQUOTE, INS et DEL) ;
  • se reporter aux conventions de métadonnées qui décrivent un document (voir l'élément HEAD).

errata-04

Veuillez consulter la section concernant le type URI pour plus d'informations.

2.2 Qu'est-ce que HTML ?

Publier de l'information en vue d'une distribution mondiale nécessite l'usage d'un langage universellement compréhensible, d'une sorte de « langue maternelle » acceptée par tous les ordinateurs. Le langage de publication utilisé sur le World Wide Web est le langage de balisage hypertexte HTML.

HTML donne aux auteurs les moyens de :

  • publier des documents en ligne possédant des titres, du texte, des tables, des listes, des photos, etc.
  • ramener des informations en ligne via des liens hypertextes avec un clic ;
  • concevoir des formulaires pour conduire des transactions avec des services distants, dans le but de rechercher des informations, de faire des réservations, de prendre des commandes, etc.
  • inclure des feuilles de calculs, des séquences vidéos ou sonores et d'autres applications, directement dans les documents.

2.2.1 Une brève histoire de HTML

Le langage HTML a été développé à l'origine par Tim Berners-Lee, alors au CERN, et popularisé par le navigateur Mosaic, développé au NCSA. Pendant les années 1990, il s'est épanoui en profitant de la croissance explosive du Web. Durant cette période, HTML s'est agrandi de nombreuses manières différentes. Le Web dépend des auteurs de pages et des éditeurs de logiciels qui partagent les mêmes conventions pour HTML. Cela a motivé un travail commun sur les spécifications de HTML.

La spécification HTML 2.0 (novembre 1995, voir [RFC1866]) a été développé sous l'égide de l'Internet Engineering Task Force (IETF) pour codifier les pratiques courantes à la fin de 1994. Les spécifications HTML+ (1993) et HTML 3.0 (1995, voir [HTML30]) proposaient des versions HTML bien plus riches. Malgré l'absence de consensus autour d'un standard, ces avant-projets ont conduit à l'adoption d'un éventail de fonctions nouvelles. Les efforts du groupe de travail HTML du World Wide Web Consortium pour la codification des pratiques courantes en 1996 donnèrent naissance à la spécification HTML 3.2 (janvier 1997, voir [HTML32]). Les changements intervenus entre HTML 3.2 et HTML 4 sont résumés dans l'appendice A.

La plupart des gens sont d'accord sur le fait que les documents HTML devraient fonctionner correctement sur des plates-formes et des navigateurs différents. Parvenir à l'interopérabilité permet de baisser les coûts des fournisseurs de contenus parce qu'ils n'ont à développer qu'une seule version d'un document. Si cet effort n'est pas fait, le risque est grand de voir le Web régresser vers un monde propriétaire de formats incompatibles, en réduisant en fin de compte son potentiel commercial au détriment de tous ses participants.

Chaque version HTML a essayé de refléter le plus grand consensus entre les acteurs de l'industrie, de sorte que les investissements consentis par les fournisseurs de contenus ne soient pas gaspillés et que leurs documents ne deviennent en peu de temps illisibles.

Le langage HTML a été développé avec l'intuition que les appareils de toutes sortes devaient pouvoir utiliser les informations sur le Web : les ordinateurs personnels avec des écrans de résolution et de profondeur de couleurs variables, les téléphones cellulaires, les appareils portables, les appareils de synthèse et de reconnaissance de la parole, les ordinateurs avec une bande passante faible comme élevée, et ainsi de suite.

2.3 HTML 4

La spécification HTML 4 prolonge HTML avec des mécanismes pour les feuilles de styles, les scripts, les cadres, l'incorporation des objets, la gestion améliorée des écritures de droite à gauche ou mixtes, les tables enrichies et les améliorations des formulaires, qui augmentent l'accessibilité pour les personnes ayant un handicap physique.

La spécification HTML 4.01 est une révision de HTML 4 qui corrige des erreurs et apporte certains changements depuis la révision précédente.

2.3.1 L'internationalisation

Cette version de HTML a été conçue avec l'aide d'experts dans le domaine de l'internationalisation, de telle sorte que les documents peuvent être écrits en toutes langues et diffusés partout dans le monde. Cela a été accompli en tenant compte du document [RFC2070], qui traite de l'internationalisation de HTML.

L'adoption de la norme ISO/IEC:10646 (voir [ISO10646]), comme jeu de caractères du document pour HTML, a représenté une étape importante. C'est la norme mondiale la plus complète, qui tient compte des problèmes concernant la représentation des caractères internationaux, le sens des écritures, la ponctuation et autres particularités des langues mondiales.

Le langage HTML propose maintenant une meilleure gestion des diverses langues humaines à l'intérieur du document. Cela permet une efficacité accrue dans l'indexation des documents par les moteurs de recherche, la typographie de qualité, la syntèse de la parole à partir du texte, la césure, etc.

2.3.2 L'accessibilité

Au fur et à mesure de la croissance de la communauté du Web et de la diversification des capacités et aptitudes de ses membres, il devient crucial que les technologies employées soient appropriées à leurs besoins spécifiques. Le langage HTML a été conçu pour rendre les pages Web plus accessibles à ceux qui ont des déficiences physiques. Les développements de HTML 4 qui ont été inspirés par ce souci de l'accessibilité comprennent :

  • une meilleure distinction de la structure et de la présentation du document, en encourageant pour cela l'utilisation des feuilles de style au lieu des éléments et attributs de présentation HTML ;
  • l'amélioration des formulaires, ce qui comprend l'ajout de clés d'accès [ndt. access keys], l'ajout de la possibilité de regrouper sémantiquement les contrôles des formulaires et celle de regrouper sémantiquement les options de l'élément SELECT et l'ajout des étiquettes actives [ndt. active labels] ;
  • la possibilité de baliser la description textuelle d'un objet incorporé (avec l'élément OBJECT) ;
  • un nouveau mécanisme d'images cliquables côté client (l'élément MAP ), qui permet aux auteurs d'intégrer des liens sous forme de texte et d'images ;
  • l'accompagnement obligatoire des images, incluses avec l'élément IMG, et des images cliquables, incluses avec l'élément AREA, d'un texte de remplacement ;
  • la gestion des attributs title et lang pour tous les éléments ;
  • la gestion des éléments ABBR et ACRONYM ;
  • un éventail élargi des médias cibles (tty, braille, etc.) à utiliser avec les feuilles de style ;
  • l'amélioration des tables, en y incluant des légendes, des regroupements de colonnes et des mécanismes pour faciliter la restitution non visuelle ;
  • les descriptions longues des tables, images, cadres, etc.

Les auteurs qui composent des pages en tenant compte de ces notions d'accessibilité ne seront pas seulement remerciés par les utilisateurs intéressés mais en retireront aussi d'autres bénéfices : les documents HTML bien conçus, qui distinguent la structure de la présentation, s'adapteront plus facilement aux nouvelles technologies.

Remarque : Pour plus d'informations sur la conception de documents HTML accessibles, veuillez consulter [WAI].

2.3.3 Les tables

Le nouveau modèle de la table se base sur le document [RFC1942]. Les auteurs disposent maintenant d'un plus grand contrôle sur leur structure et leur disposition (par exemple, les regroupements de colonnes). La possibilité dont disposent les auteurs de spécifier la largeur des colonnes permet aux agents utilisateurs d'afficher les données de table progressivment (au fur et à mesure du chargement), plutôt que d'attendre le chargement entier de la table avant de pouvoir la restituer.

Remarque : Au moment de la rédaction de la spécification, certains logiciels d'édition HTML s'appuient essentiellement sur les tables pour la mise en page, ce qui peut aisément entraîner des problèmes d'accessibilité.

2.3.4 Les documents composés

Le langage HTML offre maintenant une structure standard pour l'incorporation d'objets média et d'applications génériques dans les documents HTML. L'élément OBJECT (de même que ses ancêtres, les éléments plus spécifiques IMG et APPLET) fournit le moyen d'inclure des images, des séquences vidéo, de l'audio, des mathématiques, des applications spécialisées et d'autres objets dans un document. Il permet aussi aux auteurs de spécifier une hiérarchie de restitutions de remplacement aux agents utilisateurs qui ne gèrent pas certaines restitutions particulières.

2.3.5 Les feuilles de styles

Les feuilles de styles simplifient le balisage HTML et soulagent grandement HTML des responsabilités de la présentation. Elles donnent aux auteurs comme aux utilisateurs le contrôle de la présentation des documents -- informations sur les polices de caractères, alignement, couleurs, etc.

Les informations de style peuvent être spécifiées pour un élément ponctuel ou pour des groupes d'éléments. Elles peuvent se trouver à l'intérieur du document HTML ou dans une feuille de styles externe.

Les mécanismes, qui associent une feuille de styles à un document, sont indépendants du langage de feuille de style.

Avant l'apparition des feuilles de styles, les auteurs disposaient d'un contrôle limité sur la restitution des pages. HTML 3.2 comprenait un certain nombre d'attributs et d'éléments permettant un contrôle de l'alignement, de la taille de la police de caractères et de la couleur du texte. Les auteurs abusaient également de tables et d'images pour la mise en page. Le temps relativement long nécessaire pour que les utilisateurs mettent à jour leurs navigateurs implique que ces usages vont perdurer encore pendant un certain temps. Cependant, puisque les feuilles de styles offrent des moyens de présentation plus puissants, le World Wide Web Consortium fera graduellement disparaître nombre d'éléments et d'attributs de présentation HTML. Tout au long de ce document, les éléments et attributs concernés sont marqués comme « déconseillés ». Ils sont généralement accompagnés d'exemples montrant comment parvenir au même résultat en utilisant d'autres éléments ou les feuilles de styles.

2.3.6 Les scripts

Au travers de scripts, les auteurs peuvent concevoir des pages Web dynamiques (par exemple, des « formulaires intelligents » qui réagissent au cours de leur remplissage par l'utilisateur) et utiliser HTML comme support d'applications en réseau.

Les mécanismes fournis pour associer HTML et scripts sont indépendants du langage de script.

2.3.7 L'impression

Les auteurs voudront parfois aider l'utilisateur dans l'impression d'autres documents, en plus du document courant. Lorsque des documents font partie d'un ensemble, on peut décrire leurs relations en utilisant l'élément HTML LINK ou encore en utilisant le cadre de description des ressources (RDF) du W3C (voir [RDF10]).

2.4 La création de document avec HTML 4

Nous recommandons aux auteurs et aux développeurs d'observer les principes généraux suivants dans leur travail avec HTML 4.

2.4.1 Séparer la structure et la présentation

Le langage HTML trouve ses racines dans SGML qui a toujours été un langage destiné à la spécification d'un balisage de structures. Avec la maturité, les éléments et attributs de présentation HTML sont de plus en plus remplacés par d'autres mécanismes, en particulier les feuilles de styles. L'expérience montre que la séparation de la structure d'un document de sa présentation permet de réduire les coûts de diffusion vers un grand éventail de plates-formes, de médias, etc., et facilite la mise à jour des documents.

2.4.2 Considérer l'accès universel au Web

De manière à rendre le Web plus accessible à tous, notamment aux personnes avec un handicap physique, les auteurs devraient prendre en compte la façon dont leurs documents seront interprétés sur une grande variété de plates-formes : les navigateurs commandés à la voix, les lecteurs en Braille, etc. Nous ne demandons pas aux concepteurs de brider leur créativité, seulement que leurs créations intègrent les restitutions alternatives. HTML propose nombre de mécanismes à cet effet (par exemple, les attributs alt, accesskey, etc.)

En outre, les auteurs devraient garder à l'esprit que leurs documents peuvent aussi toucher des publics éloignés, dont les ordinateurs sont configurés très différemment. Pour qu'un document soit correctement interprété, les auteurs devraient y inclure des informations sur la langue naturelle et le sens d'écriture, sur l'encodage employé et d'autres aspects relatifs à l'internationalisation.

2.4.3 Aider les agents utilisateurs dans la restitution progressive

En concevant soigneusement leurs tables et en faisant appel aux nouvelles fonctionnalités des tables de HTML 4, les auteurs peuvent aider les agents utilisateurs à restituer les documents plus rapidement. Les auteurs peuvent apprendre à concevoir des tables pour leur restitution progressive (voir l'élément TABLE). Les développeurs peuvent consulter les remarques sur les tables dans l'appendice pour des informations sur les algorithmes progressifs.


À propos de SGML et HTML

3 À propos de SGML et HTML

Sommaire

  1. Introduction à SGML
  2. Les structures SGML utilisées en HTML
    1. Les éléments
    2. Les attributs
    3. Les références de caractères
    4. Les commentaires
  3. Comment lire le DTD de HTML
    1. Les commentaires du DTD
    2. Les définitions des entités paramètres
    3. Les déclarations des éléments
      • Les définitions du modèle de contenu
    4. Les déclarations des attributs
      • Les entités du DTD dans les définitions d'attributs
      • Les attributs booléens

Cette section du document introduit le langage SGML et présente ses relations avec HTML. La présentation complète de SGML en est laissée à la norme (voir [ISO8879]).

3.1 Introduction à SGML

Le langage SGML est un système qui permet de définir des langages de balisage. Les auteurs balisent leurs documents en marquant les informations de structure, de présentation et sur la sémantique tout au long du document. HTML est un exemple de langage de balisage. Voici un exemple de document HTML :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
   <HEAD>
      <TITLE>Mon premier document HTML</TITLE>
   </HEAD>
   <BODY>
      <P>Bonjour tout le monde !
   </BODY>
</HTML>

Un document HTML se divise en deux parties, une section d'en-tête (ici, entre <HEAD> et </HEAD>) et un corps (ici, entre <BODY> et </BODY>). Le titre du document apparaît dans l'en-tête (en même temps que d'autres informations concernant le document) et le contenu du document apparaît dans le corps. Dans cet exemple, le corps contient un unique paragraphe, balisé par <P>.

Chaque langage de balisage, défini en SGML, est appelé une application SGML. Une application SGML se caractérise généralement par :

  1. Une déclaration SGML. La déclaration SGML spécifie quels caractères et quels délimiteurs peuvent apparaître dans l'application ;
  2. Une définition de type de document (DTD). Le DTD définit la syntaxe des structures de balisage. Le DTD peut inclure des définitions supplémentaires tels que des références d'entités de caractères ;
  3. Une spécification qui décrit la sémantique imputée au balisage. Cette spécification impose également des restrictions sur la syntaxe qui ne peuvent pas être exprimées dans le DTD ;
  4. Les instances du document contenant les données (le contenu) et le balisage. Chaque instance contient une référence au DTD qui doit être utilisé pour l'interpréter.

Cette spécification comprend une déclaration SGML, trois définitions de type de document (voir la section sur les informations de version HTML pour une description des trois) et une liste des références de caractères.

3.2 Les structures SGML utilisées dans HTML

Les sections suivantes présentent les structures SGML qui sont utilisées dans HTML.

L'appendice liste quelques une des fonctionnalités de SGML qui sont rarement gérées par les outils et les agents utilisateurs HTML et qui donc devraient être évitées.

3.2.1 Les éléments

Une définition de type de document SGML déclare les types d'élément qui représentent les structures ou les comportements voulus. HTML comprend des types d'élément qui représentent des paragraphes, des liens hypertextes, des listes, des tables, des images, etc.

Chaque déclaration de type d'élément décrit généralement trois parties : une balise ouvrante, un contenu et une balise fermante.

Le nom de l'élément apparaît dans la balise ouvrante (écrit selon cette forme-ci <nom-élément>) et la balise fermante (écrit selon cette forme-là </nom-élément>) ; remarquez le caractère barre oblique « / » avant le nom de l'élément, dans la balise fermante. Par exemple, les balises ouvrante et fermante du type d'élément UL délimitent les éléments d'une liste :

<UL>
<LI><P>...élément de liste 1...
<LI><P>...élément de liste 2...
</UL>

Certains types d'élément HTML autorisent les auteurs à omettre la balise fermante (par exemple, les types d'élément P et LI). Quelques rares types d'élément admettent également l'omission de la balise ouvrante ; par exemple, HEAD et BODY. Le DTD de HTML indique, pour chaque type d'élément, si les balises ouvrantes ou fermantes sont obligatoires ou non.

D'autres types d'élément HTML ne possèdent aucun contenu. Par exemple, l'élement de saut de ligne BR n'a aucun contenu ; son seul rôle est de terminer une ligne de texte. De tels éléments vides n'ont jamais de balise fermante. La définition de type de document et le texte de la spécification indiquent si un type d'élément est vide (sans contenu) ou sinon, s'il peut avoir un contenu, ce qui est considéré comme contenu légal.

Les noms des éléments sont toujours insensibles à la casse.

Veuillez consulter la norme SGML pour obtenir plus d'informations à propos des règles qui contrôlent les éléments (par exemple, ils doivent être correctement imbriqués, c'est-à-dire, une balise fermante referme, en remontant jusqu'à la balise ouvrante correspondante, toutes les balises ouvrantes intermédiaires avec des balises fermantes manquantes, (section 7.5.1), etc.).

Par exemple, le paragraphe suivant :

<P>Ceci est le premier paragraphe.</P>
...un élément de bloc...

peut être réécrit sans sa balise fermante :

<P>Ceci est le premier paragraphe.
...un élément de bloc...

tant que la balise ouvrante <P> soit fermée par l'élément de bloc suivant. De la même manière, si un paragraphe est imbriqué dans un élément de bloc, tel que :

<DIV>
<P>Ceci est le paragraphe.
</DIV>

la balise fermante de l'élément de bloc englobant (ici, </DIV>) implique automatiquement la balise fermante de la balise ouvrante libre <P>.

Les éléments ne sont pas des balises. Certaines personnes font référence aux éléments comme à des balises (par exemple, « la balise P »). Souvenez-vous que l'élément est une chose et que la balise en est une autre (qu'elle soit ouvrante ou fermante). Par exemple, l'élément HEAD est toujours présent, même si les balises ouvrante et fermante de HEAD peuvent être absentes dans le balisage.

Tous les types d'élément déclarés dans cette spécification sont listés dans l'index des éléments.

3.2.2 Les attributs

Les éléments peuvent avoir des propriétés qui leur sont associées, appelées attributs, et qui peuvent avoir des valeurs (par défaut, ou encore définies par l'auteur ou par un script). Les couples attribut/valeur apparaissent avant le caractère « > » final de la balise ouvrante d'un élément. Un nombre quelconque de couples attribut/valeur (autorisés), séparés par des espaces, peut apparaître dans la balise ouvrante d'un élément. Ils peuvent survenir dans n'importe quel ordre.

Dans cet exemple, l'attribut id est défini pour un élément H1 :

<H1 id="section1">
Ceci est un titre identifié grâce à l'attribut id
</H1>

Par défaut, SGML exige que toutes les valeurs d'attribut soient délimitées en utilisant indiféremment les guillemets doubles (code décimal ASCII 34) ou les guillemets simples (code décimal ASCII 39). Les guillemets simples peuvent être inclus à l'intérieur de la valeur d'attribut quand la valeur est délimitée par des guillemets doubles, et vice versa. Les auteurs peuvent également utiliser les références de caractères numériques pour représenter le guillemet double « &#34; » et le guillemet simple « &#39; ». Pour le guillemet double, les auteurs peuvent également utiliser la référence d'entité de caractère « &quot; ».

Dans certains cas, les auteurs peuvent spécifier la valeur d'un attribut sans guillemets. La valeur d'attribut peut contenir uniquement les lettres (a-z et A-Z), les chiffres (0-9), le caractère trait d'union « - » (code décimal ASCII 45), le caractère virgule (code décimal ASCII 46), le caractère souligné « _ » (code décimal ASCII 95) et le caractère deux-points « : » (code décimal ASCII 58). Nous recommandons l'utilisation des guillemets même lorsqu'il est possible de les omettre.

Les noms des attributs sont toujours insensibles à la casse.

Les valeurs des attributs sont généralement insensibles à la casse. La définition de chaque attribut, dans le manuel de référence, indique si sa valeur est indifférente ou non à la casse.

Tous les attributs définis par cette spécification sont listés dans l'index des attributs.

3.2.3 Les références de caractères

Les références de caractères sont des noms numériques ou symboliques pour les caractères qui peuvent être inclus dans un document HTML. Ils sont utiles pour faire appel aux caractères rarement utilisés ou ceux que les outils d'édition rendent difficiles ou impossibles à saisir. Vous verrez des références de caractères tout au long de ce document ; ils commencent par un signe « & » et se termine par un caractère point-virgule « ; ». En voici des exemples courants :

  • "&lt;" représente le caractère chevron vers la gauche « < »
  • "&gt;" représente le caractère chevron vers la droite « > »
  • "&quot;" représente le caractère guillemet double « " »
  • "&#229;" (en décimal) représente la lettre « a minuscule » avec un petit cercle au-dessus « å »
  • "&#1048;" (en décimal) représente la lettre cyrillique "I" en capitale « И »
  • "&#x6C34;" (en hexadécimal) représente le caractère chinois pour l'eau « 水 »

Nous expliquons les références de caractères HTML en détails un peu plus loin dans la section sur les jeux de caractères d'un document HTML. La spécification contient également une liste des références de caractères qui peuvent apparaître dans les documents HTML 4.

3.2.4 Les commentaires

Les commentaires HTML ont la syntaxe suivante :

<!-- ceci est un commentaire -->
<!-- ainsi que celui ci,
    qui occupe plus d'une ligne -->

Les blancs [ndt. white space] ne sont pas permis entre le délimiteur d'ouverture de la déclaration de balisage « <! » et le délimiteur d'ouverture de commentaire « -- », mais ils sont autorisés entre le délimiteur de fin de commentaire « -- » et le délimiteur de fin de déclaration de balisage « > ». Une erreur classique c'est inclure une chaîne de traits d'union « --- » à l'intérieur d'un commentaire. Les auteurs devraient éviter de placer deux traits d'unions adjacents, ou plus, à l'intérieur des commentaires.

L'information qui apparaît entre les commentaires n'a aucune signification particulière (par exemple, les références de caractères ne sont pas interprétées comme telles).

Remarquez que les commentaires sont du balisage.

3.3 Comment lire le DTD de HTML

Chaque déclaration d'élément et d'attribut dans cette spécification est accompagnée par son fragment de définition de type de document. Nous avons choisi d'inclure les fragments de DTD dans la spécification, plutôt que de rechercher une manière plus compréhensible, mais plus longue et moins précise, de décrire les propriétés d'un élément. Le mode d'emploi suivant devrait permettre aux lecteurs non familiarisés avec SGML de lire le DTD et de comprendre les détails techniques de la spécification HTML.

3.3.1 Les commentaires du DTD

Dans les DTD, les commentaires peuvent s'étaler sur une ou plusieurs lignes. Dans le DTD, les commentaires sont délimités par une paire de marques « -- », par exemple :

<!ELEMENT PARAM - O EMPTY       -- valeur de propriete nommee -->

Ici, le commentaire « valeur de propriété nommée » explique l'utilisation du type d'élément PARAM. Les commentaires du DTD sont uniquement informatifs.

3.3.2 La définition des entités paramètres

Le DTD de HTML commence par une série de définitions d'entités paramètres. Une définition d'entité paramètre définit une sorte de macrocommande qui peut être appelée et résolue ailleurs dans le DTD. Ces macrocommandes ne peuvent pas apparaître dans les documents HTML, seulement dans le DTD. D'autres types de macrocommandes, appelées références de caractères, peuvent être utilisées elles dans le texte d'un document HTML ou à l'intérieur des valeurs des attributs.

Quand l'entité paramètre est appelée par son nom dans le DTD, elle est alors développée sous la forme d'une chaîne de caractères.

Une définition d'entité paramètre commence par le mot-clé « <!ENTITY % », suivi par le nom de l'entité, la chaîne de caractères entre guillemets correspondant au développement de l'entité et finalement un caractère de fermeture « > ». Les instances des entités paramètres dans un DTD commencent par « % », suivi du nom de l'entité paramètre et terminé par un caractère point-virgule « ; » optionnel.

L'exemple suivant définit la chaîne de caractères dans laquelle l'entité « %fontstyle; » se développera :

<!ENTITY % fontstyle "TT | I | B | BIG | SMALL">

la chaîne de caractère correspondant à l'entité paramètre peut contenir d'autres noms d'entités paramètres. Ces noms sont alors développés récursivement. Dans l'exemple suivant, l'entité paramètre « %inline; » est définie de façon à inclure les entités paramètres « %fontstyle; », « %phrase; », « %special; » et « %formctrl; ».

<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">

Vous rencontrerez fréquemment deux entités de DTD dans le DTD de HTML : « %block; » et « %inline; ». Elles sont utilisées lorsque le modèle de contenu comprend, respectivement, des éléments de bloc et des éléments en-ligne, (définis dans la section sur la structure globale d'un document HTML).

3.3.3 Les déclarations des éléments

Le substrat du DTD de HTML est constitué des déclarations des types d'éléments et leurs attributs. Le mot-clé « <!ELEMENT » commence une déclaration et le caractère « > » la termine. Entre ceux-ci sont spécifiés :

  1. le nom de l'élément ;
  2. si les balises de l'élément sont ou non optionnelles. Quand deux traits d'union apparaissent après le nom de l'élément, cela signifie que les balises ouvrante et fermante sont obligatoires. Un trait d'union suivi par la lettre « 0 » signifie que la balise fermante peut être omise. Une paire de lettres « 0 » indique que les balises ouvrante comme fermante peuvent être omises ;
  3. le contenu de l'élément, s'il existe. On appelle le contenu qui est autorisé pour un élément son modèle de contenu. Les types d'éléments qui sont destinés à n'avoir aucun contenu sont appelés éléments vides. Le modèle de contenu de tels éléments est déclaré en utilisant le mot-clé « EMPTY ».

Dans cette exemple :

    <!ELEMENT UL - - (LI)+>
  • le type d'élément déclaré est UL ;
  • les deux traits d'union indique que la balise ouvrante « <UL> » comme la balise fermante « </UL> » de cet élément sont obligatoires ;
  • le modèle de contenu de ce type d'élément est déclaré comme étant « d'au moins un élément LI ». Nous expliquons plus loin comment définir les modèles de contenu.

Cet exemple illustre la déclaration d'un type d'élément vide :

    <!ELEMENT IMG - O EMPTY>
  • le type d'élément déclaré est IMG ;
  • le trait d'union et le « O » qui le suit indiquent que la balise fermante peut être omise, mais, en même temps que le modèle de contenu « EMPTY », cela va renforcer la règle selon laquelle la balise fermante doit être omise ;
  • le mot-clé « EMPTY » signifie que les instances de ce type ne doivent pas avoit de contenu.

Les définitions du modèle de contenu

Le modèle de contenu décrit ce que peut contenir une instance d'un type d'élément. Les définitions du modèle de contenu peuvent inclure :

  • les noms des types d'éléments qui sont autorisés ou interdits (par exemple, l'élément UL contient les instances du type d'élément LI et le type d'élément P ne peut pas contenir d'autres éléments P) ;
  • des entités de DTD (par exemple, l'élément LABEL contient des instances de l'entité paramètre « %inline; ») ;
  • le texte du document (indiqué par la structure SGML « #PCDATA »). Le texte peut contenir des références de caractères. Souvenez-vous que ceux ci commencent par le caractère « & » et finissent par un caractère point-virgule (par exemple, « Les aventures de Tintin, par Herg&eacute; » contient la référence d'entité de caractère du caractère « e accent aigü »).

Le modèle de contenu d'un élément est spécifié selon la syntaxe suivante. Veuillez remarquer que la liste suivante constitue une simplification des règles de la syntaxe SGML complète et ne permet pas, par exemple, de définir les préséances.

( ... )
Délimite un groupe.
A
A doit être présent, une fois seulement.
A+
A doit être présent une ou plusieurs fois.
A?
A doit être présent zéro ou une fois.
A*
A peut être présent zéro ou plusieurs fois.
+(A)
A peut être présent.
-(A)
A ne peut pas être présent.

errata-14

A | B
A ou B peuvent l'un ou l'autre être présents, mais pas les deux.
A , B
A et B doivent tous deux être présents, dans cet ordre.
A & B
A et B doivent tous deux être présents, dans n'importe quel ordre.

Les exemples suivants sont tirés du DTD de HTML :

   <!ELEMENT UL - - (LI)+>

L'élément UL doit contenir un ou plusieurs éléments LI.

   <!ELEMENT DL    - - (DT|DD)+>

L'élément DL doit contenir un ou plusieurs éléments DT ou DD, dans n'importe quel ordre.

   <!ELEMENT OPTION - O (#PCDATA)>

L'élément OPTION peut contenir seulement du texte et des entités, telles que &amp; -- ceci est indiqué par le type de données SGML « #PCDATA ».

Quelques uns des types d'élément HTML utilisent une fonctionnalité supplémentaire SGML pour exclure des éléments de leur modèle de contenu. Les éléments exclus sont précédés par un trait d'union. Les exclusions explicites sont prioritaires sur les éléments autorisés.

Dans cet exemple, la présence de « -(A) » signifie que l'élément A ne peut pas apparaître dans un autre élément A (c.à-d., les ancres ne peuvent pas être imbriquées).

   <!ELEMENT A - - (%inline;)* -(A)>

Remarquez que le type d'élément A, qui fait pourtant partie de l'entité paramètre « %inline; » du DTD, est exclu explicitement à cause de « -(A) ».

De la même manière, la déclaration de type d'élément suivante pour FORM interdit les formulaires imbriqués :

   <!ELEMENT FORM - - (%block;|SCRIPT)+ -(FORM)>

3.3.4 Les déclarations des attributs

Le mot-clé « <!ATTLIST » commence la déclaration des attributs admis par un élément. Il est suivi par le nom de l'élément en question, une liste des définitions d'attribut et un caractère « > » de fermeture. Chaque définition d'attribut forme un triplet qui définit :

  • le nom de l'attribut ;
  • le type de la valeur d'attribut ou un ensemble explicite de valeurs possibles. Les valeurs définies explicitement par le DTD sont insensibles à la casse. Veuillez consultez la section sur les types de données HTML de base pour plus d'informations sur les types des valeurs d'attributs ;
  • si la valeur par défaut de l'attribut est implicite (mot-clé « #IMPLIED »), auquel cas la valeur par défaut doit être fournie par l'agent utilisateur (selon les cas, par héritage des éléments parents), si la valeur est toujours requise (mot-clé « #REQUIRED ») ou bien si la valeur est fixe, spécifiée à la valeur donnée (mot-clé « #FIXED »). Certaines définitions d'attributs spécifient explicitement une valeur par défaut pour l'attribut.

Dans cet exemple, l'attribut name est défini pour l'élément MAP. L'attribut est optionnel pour cet élément.

<!ATTLIST MAP
  name        CDATA     #IMPLIED
  >

Les valeurs autorisées pour l'attribut sont donnés comme étant du type « CDATA », un type de données SGML. Le type « CDATA » représente du texte qui peut contenir des références de caractères.

Pour plus d'information sur les types « CDATA », « NAME », « ID » et les autres types de données, veuillez consulter la section sur les types de données HTML.

Les exemples suivants illustrent plusieurs définitions d'attribut :

rowspan     NUMBER     1         -- nombre de rangées occupées par la cellule --
http-equiv  NAME       #IMPLIED  -- nom de l'en-tête de réponse HTTP  --
id          ID         #IMPLIED  -- id unique sur l'ensemble du document --
valign      (top|middle|bottom|baseline) #IMPLIED

L'attribut « rowspan » requiert une valeur de type « NUMBER ». La valeur par défaut est donnée explicitement comme étant "1". L'attribut « http-equiv » requiert une valeur de type « NAME ». L'attribut optionnel « id » requiert une valeur de type ID. L'attribut optionnel « valign » est contraint de prendre l'une des valeurs de l'ensemble {top, middle, bottom, baseline}.

Les entités du DTD dans les définitions d'attributs

Les définitions d'attributs peuvent également contenir les références d'entités paramètres.

Dans cet exemple, nous voyons que la liste des définitions d'attributs pour l'élément LINK commence par l'entité paramètre « %attrs; ».

<!ELEMENT LINK - O EMPTY               -- un lien independant du média -->
<!ATTLIST LINK
  %attrs;                              -- %coreattrs, %i18n, %events --
  charset     %Charset;      #IMPLIED  -- encodage caractères de la ressource appelée --
  href        %URI;          #IMPLIED  -- URI de la ressource appelée --
  hreflang    %LanguageCode; #IMPLIED  -- code de langue --
  type        %ContentType;  #IMPLIED  -- type de contenu consultatif --
  rel         %LinkTypes;    #IMPLIED  -- types de lien relatif --
  rev         %LinkTypes;    #IMPLIED  -- types de lien à rebours --
  media       %MediaDesc;    #IMPLIED  -- pour restitution sur ce média --
  >

balise ouvrante : obligatoire, balise fermante : interdite

L'entité paramètre « %attrs; » est définie ainsi :

<!ENTITY % attrs "%coreattrs; %i18n; %events;">

L'entité paramètre « %coreattrs; » dans la définition de « %attrs; » se développe ainsi :

<!ENTITY % coreattrs
 "id          ID             #IMPLIED  -- id unique sur tout le document --
  class       CDATA          #IMPLIED  -- liste de classes, séparées par des espaces --
  style       %StyleSheet;   #IMPLIED  -- info de style associé --
  title       %Text;         #IMPLIED  -- titre consultatif --"
  >

L'entité paramètre « %attrs; » a été définie par commodité puisque ces attributs sont définis pour la plupart des types d'élément HTML.

De même, le DTD définit l'entité paramètre « %URI; » comme se développant dans la chaîne de caractères "CDATA".

<!ENTITY % URI "CDATA"
    -- un identifiant de ressource uniforme (URI),
       voir [URI]
    -->

Ainsi que le montre l'exemple, l'entité paramètre « %URI; » fournit aux lecteurs du DTD plus d'informations, tel le type de données attendu par un attribut. Des entités similaires ont été définies pour « %Color; », « %Charset; », « %Length; », « %Pixels; », etc.

Les attributs booléens

Certains attributs jouent le rôle de variables booléennes (par exemple, l'attribut selected de l'élément OPTION). Leur apparition dans la balise ouvrante d'un élément implique que la valeur de l'attribut est « vraie ». Leur absence implique une valeur « fausse ».

Les attributs booléens peuvent légalement prendre une valeur unique : le nom de l'attribut lui-même (par exemple, selected="selected").

Cet exemple définit l'attribut selected comme étant un attribut booléen.

selected     (selected)  #IMPLIED  -- option présélectionnée --

L'attribut prend la valeur « vraie » du fait de sa présence dans la balise ouvrante de l'élément :

<OPTION selected="selected">
...contenus...
</OPTION>

En HTML, les attributs booléens peuvent apparaître dans leur forme minimisée -- la valeur de l'attribut apparaît seule dans la balise ouvrante de l'élément. Donc, l'attribut selected peut être défini en écrivant :

<OPTION selected>

à la place de :

<OPTION selected="selected">

Les auteurs devraient avoir connaissance du fait que nombre d'agents utilisateurs reconnaissent seulement la forme minimisée des attributs booléens et non leur forme complète.


La conformité : exigences et recommandations

4 La conformité : exigences et recommandations

Sommaire

  1. Définitions
  2. SGML
  3. Le type de contenu "text/html"

Nous démarrons la spécification de HTML 4 dans cette section, en commençant par le contrat qui lie les auteurs, les documents, les utilisateurs et les agents utilisateurs.

Dans ce document, les mots-clés « DOI(VEN)T », « NE DOI(VEN)T PAS », « REQUIS », « DEVRA », « NE DEVRA PAS », « DEVRAIT », « NE DEVRAIT PAS », « RECOMMANDÉ », « PEUT » et « OPTIONNEL » doivent s'interpréter comme cela est décrit dans le document [RFC2119]. Cependant, pour des questions de lisibilité, ces mots n'apparaissent pas en majuscules dans cette spécification.

Parfois, les auteurs de cette spécification conseillent des bonnes pratiques pour les auteurs et les agents utilisateurs. Ces recommandations ne sont pas normatives et la conformité avec cette spécification ne dépend pas de leur application. Ces recommandations se présentent sous la forme d'expressions telles que « Nous recommandons... », « Cette spécification recommande... » ou autres expressions analogues.

4.1 Définitions

Document HTML
Un document HTML est un document SGML qui respecte les contraintes de cette spécification.
Auteur
Un auteur est une personne ou un programme qui écrit ou génère des documents HTML. Un outil d'édition représente un cas particulier d'auteur ; c'est un programme qui génère du HTML.

Nous recommandons que les auteurs rédigent des documents conformes au DTD strict plutôt qu'à l'un des autres DTD définis par cette spécification. Veuillez consulter la section sur les informations de version pour les détails concernant les DTD définis dans HTML 4.

Utilisateur
Un utilisateur est une personne qui interagit avec un agent utilisateur pour voir, entendre ou, plus généralement, utiliser un document HTML interprété.
Agent utilisateur HTML
Un agent utilisateur HTML représente un quelconque système interprétant les documents HTML. Les agents utilisateurs comprennent les navigateurs visuels (en mode texte seul ou graphique), les navigateurs non visuels (audio, Braille), les robots de recherche, les serveurs mandataires [ndt. proxies], etc.

Un agent utilisateur conforme pour HTML est un agent utilisateur qui respecte les conditions obligatoires (« doit ») présentées dans la spécification, y compris les points suivants :

  • Un agent utilisateur devrait éviter d'imposer des limites de longueur arbitraires sur les valeurs d'attributs littérales (voir la section sur les capacités dans la déclaration SGML). Pour la présentation des informations sur les attributs SGML, veuillez consulter la section sur les définitions des attributs ;
  • Un agent utilisateur doit s'assurer que la restitution est inchangée en la présence ou l'absence des balises ouvrantes ou fermantes, quand le DTD de HTML indique que celles-ci sont optionnelles. Voir la section sur les définitions des éléments pour une introduction aux éléments SGML ;
  • Pour des raisons de rétro-compatibilité, nous recommandons que les outils interprétant HTML 4 continue à gérer HTML 3.2 (voir [HTML32]) et HTML 2.0 (voir [RFC1866]).
Situations d'erreur
Cette spécification ne définit pas comment les agents utilisateurs conformes doivent gérer les situations d'erreur générales, ni comment les agents utilisateurs doivent se comporter lorsqu'ils rencontrent des éléments, des attributs, des valeurs d'attributs ou des entités non spécifiés dans ce document.

Cependant, pour la gestion des erreurs qui est recommandée, veuillez consulter les remarques sur les documents invalides.

Déconseillé
Un élément, ou un attribut, déconseillé est un élément qui est rendu caduque par les nouvelles structures. Les éléments déconseillés sont définis, dans le manuel de référence, aux endroits concernés, et sont clairement signalés comme étant déconseillés. Les éléments déconseillés pourront devenir obsolètes dans les futures versions de HTML.

Les agents utilisateurs devraient continuer à gérer les éléments déconseillés pour des raisons de rétro-compatibilité.

Les définitions des éléments et attributs signalent clairement ceux qui sont déconseillés.

Cette spécification contient des exemples qui illustrent comment éviter l'utilisation des éléments déconseillés. Dans la plupart des cas, cela dépend de l'agent utilisateur, s'il gère ou non les feuilles de style. En général, les auteurs devraient utiliser les feuilles de style, pour obtenir des effets de style et de mise en forme, plutôt que les attributs de présentation HTML. Les attributs de présentation HTML sont déconseillés quand il existe une alternative par les feuilles de style (voir, par exemple, la spécification [CSS1]).

Obsolète
Un élément, ou un attribut, obsolète est un élément pour lequel il n'y a aucune garantie de gestion de la part de l'agent utilisateur. Les éléments obsolètes ne sont plus définis dans la spécification, mais restent listés pour la chronologie dans la section sur les changements du manuel de référence

4.2 SGML

HTML 4 est une application SGML qui est conforme au Standard International ISO 8879 -- Langage de balisage général standard SGML (défini dans [ISO8879]).

Les exemples dans la spécification se conforment au DTD strict, à moins que les exemples en question ne se rapportent à des éléments ou des attributs définis seulement par le DTD transitoire ou le DTD de jeu d'encadrement. Par souci de brièveté, la plupart des exemples de cette spécification ne commencent pas par la déclaration de type de document qui est obligatoire au début de tout document HTML.

Les fragments de DTD, dans les définitions des éléments, proviennent du DTD strict, sauf pour les éléments relatifs aux cadres.

Veuillez consulter la section sur les informations de version HTML pour des détails sur le cadre d'utilisation des DTD strict, transitoire et de jeu d'encadrement.

Les commentaires qui apparaissent dans les DTD de HTML 4 n'ont pas de valeur normative ; ils sont uniquement informatifs.

Les agents utilisateurs ne doivent pas interpréter les instructions de traitement SGML (par exemple, <?full volume>) ou les commentaires. Pour plus d'informations sur le sujet et les autres caractérisitiques de SGML, qui peuvent être légales en HTML mais qui sont rarement gérées par les agents utilisateurs HTML, veuillez consulter la section sur les fonctionnalités SGML dont la gestion est limité.

4.3 Le type de contenu "text/html"

Les documents HTML sont envoyés sur Internet sous forme d'une séquence d'octets, accompagnée par une information d'encodage (décrite dans la section sur les encodages des caractères). La structure de la transmission, désignée par le terme entité message, est définie par les documents [RFC2045] et [RFC2616]. Une entité message dont le type de contenu est "text/html" représente un document HTML.

Le type de contenu des documents HTML est défini comme suit :

Nom du type de contenu:
text
Nom du sous-type de contenu :
html
Paramètres requis :
aucun
Paramètres optionnels :
charset
Considérations sur l'encodage :
tout encodage est permis
Considérations de sécurité:
Voir les remarques sur la sécurité

Le paramètre optionnel "charset" se rapporte à l'encodage des caractères qui est utilisé pour représenter le document HTML comme séquence d'octets. Les valeurs légales de ce paramètre sont définies dans la section sur les encodages des caractères. Bien que ce paramètre soit optionnel, nous recommandons qu'il soit toujours présent.


La représentation du document HTML

5 La représentation du document HTML

Sommaire

  1. Le jeu de caractères du document
  2. Les encodages de caractères
    1. Choisir un encodage
      • Remarques sur les encodages spécifiques
    2. Spécifier l'encodage de caractères
  3. Les références de caractères
    1. Les références de caractères numériques
    2. Les références des entités de caractères
  4. Les caractères non affichables

Dans ce chapitre, nous traitons de la manière dont les documents HTML sont représentés sur un ordinateur et sur Internet.

La section sur le jeu de caractères du document aborde la question selon laquelle quels caractères abstraits peuvent faire partie d'un document HTML. Par caractère, on entend la lettre « A » latine, la lettre « I » cyrillique, le caractère chinois signifiant « eau », etc.

La section sur les encodages de caractères entreprend d'expliquer comment ces caractères peuvent être représentés dans un fichier ou lors d'un transfert par Internet. Étant donné que certains encodages ne peuvent pas représenter directement tous les caractères que l'auteur peut souhaiter inclure dans un document, HTML offre d'autres mécanismes, nommés références de caractères, pour appeler n'importe quel caractère.

Comme il existe un grand nombre de caractères dans l'ensemble des langues humaines et une grande diversité de représentation pour ceux-ci, on doit prendre les dispositions adéquates de sorte que les documents puissent être interprétés par les agents utilisateurs du monde entier.

5.1 Le jeu de caractères du document

Afin de promouvoir l'intéropérabilité, SGML exige de chaque application (y compris HTML) qu'elle spécifie son jeu de caractères du document. Un jeu de caractères du document consiste en :

  • un répertoire : un ensemble de caractères abstraits, tels que la lettre « A » latine, la lettre « I » cyrillique, le caractère chinois signifiant « eau », etc.
  • des positions de code : un ensemble de références entières vers les caractères du répertoire.

Chaque document SGML (dont chaque document HTML) est une séquence de caractères issus du répertoire. Les systèmes informatiques identifient chaque caractère par sa position de code ; par exemple, dans le jeu de caractères ASCII, les positions de code 65, 66 et 67 se rapportent respectivement aux caractères « A », « B » et « C ».

Le jeu de caractères ASCII n'est pas suffisant pour un système d'information global tel que le Web, c'est pourquoi HTML utilise le jeu de caractères bien plus important, appelé jeu de caractères universel UCS, défini par la norme [ISO10646]. Cette norme définit un répertoire composé des milliers de caractères utilisés par les communautés du monde entier.

Ce jeu de caractères, défini dans [ISO10646], équivaut caractère par caractère à la norme Unicode ([UNICODE]). De nouveaux caractères sont de temps en temps rajoutés à ces deux normes et on devrait en consulter les amendements sur leurs sites Web respectifs. Dans la présente spécification, on emploie le terme « [ISO10646] » quand on se réfère au jeu de caractères du document, tandis qu'on réserve le terme « [UNICODE] » pour désigner l'algorithme de texte bi-directionnel Unicode.

Cependant, le jeu de caractères du document n'est pas suffisant pour que les agents utilisateurs puissent interpréter les documents HTML correctement de la façon dont ceux-ci sont habituellement échangés -- codés sous la forme d'une séquence d'octets dans un fichier ou lors d'une transmission sur le réseau. Les agents utilisateurs doivent également connaître l'encodage de caractères particulier qui a été utilisé pour transformer le flux de caractères du document en flux d'octets.

5.2 Les encodages de caractères

Ce que cette spécification appelle un encodage de caractères est connu sous différentes appellations dans d'autres spécifications (ce qui peut amener une certaine confusion). Cependant, le concept reste largement le même sur Internet. Également, les en-têtes des protocoles, les attributs et les paramètres, qui appellent des encodages de caractères, portent le même nom « charset » et utilisent les mêmes valeurs issues du registre [IANA] (voir [CHARSETS] pour une liste complète).

Le paramètre « charset » identifie un encodage de caractères, qui représente une méthode pour convertir une séquence d'octets en une séquence de caractères. Cette conversion s'intègre naturellement au système de l'activité du Web : les serveurs envoient des documents HTML aux agents utilisateurs sous la forme d'un flux d'octets, les agents utilisateurs les interprètent comme séquence de caractères. Les méthodes de conversion se rangent dans un éventail allant de la simple correspondance un-à-un jusqu'à des systèmes de commutation ou des algorithmes complexes.

Une simple technique de codage un-octet-par-caractère n'est pas suffisante pour des chaînes textuelles sur un répertoire de caractères aussi grand que [ISO10646]. Il existe plusieurs encodages différents, concernant des parties de [ISO10646], en plus des encodages du jeu de caractères entier (tel que UCS-4).

5.2.1 Choisir un encodage

Les outils d'édition (par exemple, un éditeur de texte) peuvent coder des documents HTML avec l'encodage de caractères de leur choix, ce choix dépendant essentiellement des conventions utilisées par le logiciel système. Ces outils peuvent utiliser tout encodage commode lequel couvre la plupart des caractères contenus dans le document, pourvu que l'encodage soit correctement étiqueté. Les caractères occasionnels, qui ne sont pas contenus dans cet encodage, peuvent tout de même être représentés par des références de caractères. Celles-ci se rapportent toujours au jeu de caractères du document, et non à l'encodage de caractères.

Les serveurs et serveurs mandataires [ndt. proxies] peuvent changer un encodage (ce qu'on appelle un transcodage) à la volée afin de satisfaire les requêtes des agents utilisateurs (voir la section 14.2 du document [RFC2616], l'en-tête de requête HTTP « Accept-Charset »). Les serveurs et serveurs mandataires ne sont pas tenus de renvoyer un document dans un encodage de caractères qui couvre le jeu de caractères du document en entier.

Les encodages de caractères couramment utilisés sur le Web comprennent ISO-8859-1 (appelé aussi « Latin-1 », utilisable pour la plupart des langues d'Europe de l'Ouest), ISO-8859-5 (qui gère le cyrillique), SHIFT_JIS (un encodage du japonais), EUC-JP (un autre encodage du japonais) et UTF-8 (un encodage de ISO 10646 qui utilise un nombre différent d'octets pour différents caractères). Les noms des jeux de caractères sont insensibles à la casse, de sorte que, par exemple, "SHIFT_JIS", "Shift_JIS", et "shift_jis" sont équivalents.

Cette spécification n'indique pas quels encodages de caractères l'agent utilisateur doit reconnaître.

Les agents utilisateurs conformes doivent correctement établir la correspondance avec ISO 10646 de tous les caractères, dans tous les encodages de caractères qu'ils reconnaissent (ou ils doivent se comporter comme s'ils l'avaient fait).

Remarques sur les encodages spécifiques

Quand un texte HTML est transmis dans l'encodage UTF-16 (charset=UTF-16), les données textuelles doivent être transmises dans l'ordre des octets du réseau (« grand boutien » [ndt. big-endian], l'octet de poids fort en premier), selon les spécifications [ISO10646], Section 6.3 et [UNICODE], clause C3, page 3-1.

En outre, afin de maximiser les chances d'une interprétation correcte, il est recommandé que les documents transmis en UTF-16 commencent toujours par un caractère « ESPACE INSÉCABLE SANS CHASSE » (code FEFF en hexadécimal, également appelé marque d'ordre des octets (BOM)), qui, lorsque les octets sont inversés, devient FFFE en hexadécimal, un caractère assuré de n'être jamais assigné. Ainsi, l'agent utilisateur, qui reçoit un code FFFE hexadécimal comme premiers octets d'un texte, saurait que les octets doivent être inversés pour le restant du texte.

Le format de transformation UTF-1 de [ISO10646] (enregistré par l'IANA sous la désignation ISO-10646-UTF-1) ne devrait pas être employé. Pour plus d'informations sur ISO 8859-8 et l'algorithme bi-directionnel, veuillez consulter la section sur la bi-directionnalité et l'encodage de caractères.

5.2.2 Spécifier l'encodage de caractères

Comment un serveur détermine-t-il l'encodage de caractères qu'il va appliquer au document servi ? Certains serveurs examinent les premiers octets d'un document ou vérifient dans une base de données de fichiers et encodages connus. Nombre de serveurs modernes donnents beaucoup plus de contrôle aux webmestre, pour la configuration du jeu de caractères, que les serveurs anciens. Les webmestres devraient utiliser ces mécanismes pour l'émission du paramètre « charset » dès que possible, mais ils devraient également faire attention de ne pas identifier un document avec une mauvaise valeur pour ce paramètre.

Comment un agent utilisateur connaît-il l'encodage de caractères qui a été utilisé ? Le serveur devrait fournir cette information. Le moyen le plus simple, dont dispose le serveur pour informer l'agent utilisateur de l'encodage de caractères du document, c'est d'utiliser le paramètre « charset » dans le champs de l'en-tête « Content-Type » du protocole HTTP ([RFC2616], sections 3.4 et 14.17). Par exemple, l'en-tête HTTP suivant annonce qu'il s'agit de l'encodage "EUC-JP" :

Content-Type: text/html; charset=EUC-JP

Veuillez consulter la section sur la conformité pour la définition du type de contenu "text/html".

Le protocole HTTP ([RFC2616], section 3.7.1) mentionne ISO-8859-1 comme encodage par défaut lorsque le paramètre « charset » est absent du champs « Content-Type » de l'en-tête. En pratique, cette recommandation s'est révélée inutile parce que certains serveurs ne permettent pas d'envoyer un paramètre « charset » et d'autres peuvent ne pas être configurés pour l'envoyer. C'est pourquoi, les agents utilisateurs ne doivent pas supposer une valeur par défaut pour le paramètre « charset ».

Afin de pallier aux limitations du serveur ou de sa configuration, les documents HTML peuvent emporter des informations explicites sur l'encodage de caractères du document ; l'élément META peut être utilisé pour apporter cette information à l'agent utilisateur.

Par exemple, pour spécifier que l'encodage de caractères du document en question est "EUC-JP", le document devrait inclure la déclaration META suivante :

<META http-equiv="Content-Type" content="text/html; charset=EUC-JP">

La déclaration META doit seulement être utilisée lorsque l'encodage est organisé de telle sorte que les octets en valeurs ASCII représentent des caractères ASCII (au moins jusqu'à ce que l'élément META soit analysé). Les déclarations META devraient apparaître le plus tôt possible dans l'élément HEAD.

Dans les cas où ni le protocole HTTP, ni l'élément META ne donnent les informations sur l'encodage de caractères du document, HTML fournit également un attribut charset pour plusieurs éléments. En combinant ces mécanismes, un auteur peut augmenter considérablement les probabilités selon lesquelles l'agent utilisateur va reconnaître l'encodage de caractères de la ressource que l'utilisateur aura ramené.

En résumé, les agents utilisateurs conformes doivent observer les priorités suivantes pour la détermination de l'encodage de caractères d'un document (de la plus importante à la moins importante) :

  1. Un paramètre HTTP « charset » dans le champs « Content-Type » ;
  2. Une déclaration META, dont l'attribut « http-equiv » a la valeur "Content-Type" et l'attribut « charset » a une valeur spécifiée ;
  3. L'attribut charset, placé sur un élément qui désigne une ressource externe.

En plus de cette liste de priorités, l'agent utilisateur peut faire appel à des moyens heuristiques et aux préférences de l'utilisateur. Par exemple, nombre d'agents utilisateurs emploient des méthodes heuristiques pour effectuer une distinction entre les divers encodages utilisés pour les textes en japonais. Également, les agents utilisateurs disposent d'un encodage de caractères par défaut local, défini par l'utilisateur, qui s'applique en l'absence d'autres indicateurs.

Les agents utilisateurs peuvent fournir un mécanisme qui permette aux utilisateurs d'annuler les informations « charset » fausses. Cependant, si l'agent utilisateur propose un tel mécanisme, il ne devrait le faire que pour la navigation et non pour l'édition, afin d'éviter la création de pages Web qui contiendraient un paramètre « charset » incorrect.

Remarque : Si, pour une application particulière, il devient nécessaire de se référer à des caractères en dehors de [ISO10646], ces caractères devraient être assignés à une espace privé, afin d'éviter des conflits avec les versions actuelles ou futures de la norme. On le déconseille fortement pour des raisons de portabilité.

5.3 Les références de caractères

Un encodage de caractères donné peut ne pas pouvoir exprimer tous les caractères du jeu de caractères du document. Avec de tels encodages, ou lorsque les configurations matérielles ou logicielles ne permettent pas aux utilisateurs d'entrer directement certains caractères, les auteurs peuvent avoir recours aux références de caractères SGML. Les références de caractères sont un mécanisme, indépendant de l'encodage, utilisé pour ajouter n'importe quel caractère issu du jeu de caractères du document.

Les références de caractères en HTML peuvent se présenter sous deux formes :

  • les références de caractères numériques (décimales ou hexadécimales) ;
  • les références d'entités de caractères.

Les références de caractères dans les commentaires n'ont pas de signification particulière ; ce sont simplement des données de commentaires.

Remarque : HTML offre d'autres moyens pour présenter des données textuelles, en particulier les images en-ligne.

Remarque : Dans SGML, dans certains cas, il est possible d'éliminer le caractère « ; » final après une référence de caractère (par exemple, à un saut de ligne ou immédiatement avant une balise). Dans d'autres cas, il n'est pas possible de l'éliminer (par exemple, au milieu d'un mot). Nous encourageons fortement l'utilisation du caractère « ; » dans tous les cas, afin d'éviter les problèmes avec les agents utilisateurs qui en requièrent la présence.

5.3.1 Les références de caractères numériques

Les références de caractères numériques spécifient la position du code d'un caractère dans le jeu de caractères du document. Les références de caractères numériques peuvent prendre deux formes :

  • la syntaxe « &#D; », dans laquelle D représente un nombre décimal qui se rapporte au numéro de caractère D décimal ISO 10646 ;
  • la syntaxe « &#xH; » ou « &#XH; », dans laquelle H représente un nombre hexadécimal qui se rapporte au numéro de caractère H hexadécimal ISO 10646. Les nombres hexadécimaux dans les références de caractères numériques sont insensibles à la casse.

Voici quelques exemples de références de caractères numériques :

  • « &#229; » (en décimal) représente la lettre « a avec un petit cercle au-dessus å » (utilisée par exemple en norvégien) ;
  • « &#xE5; » (en hexadécimal) représente le même caractère « å » ;
  • « &#Xe5; » (en hexadécimal) représente encore le même caractère « å » ;
  • « &#1048; » (en décimal) représente la lettre « I cyrillique majuscule И » ;
  • « &#x6C34; » (en hexadécimal) représente le caractère chinois qui signifie « eau 水 ».

Remarque : Bien que la représentation en système hexadécimal ne soit pas définie dans la norme [ISO8879], elle devrait apparaître dans une révision, comme décrit dans [WEBSGML]. Cette convention est particulièrement utile étant donné que les normes de caractères utilisent généralement des représentations hexadécimales.

5.3.2 Les références des entités de caractères

Afin de fournir aux auteurs un moyen plus intuitif pour appeler les caractères du jeu de caractères du document, HTML propose un ensemble de références d'entités de caractères. Les références d'entités de caractères utilisent des noms symboliques de sorte que les auteurs n'aient pas à se remémorer les positions des codes. Par exemple, la référence d'entité de caractère « &aring; » se rapporte à la lettre « a minuscule surmontée d'un anneau å » ; il est plus facile de se remémorer « &aring; » que « &#229; ».

HTML 4 ne définit pas une référence d'entité de caractère pour chacun des caractères du jeu de caractères du document. Par exemple, il n'existe pas de référence d'entité de caractère pour la lettre « I cyrillique majuscule ». Veuillez consulter la liste complète des références de caractères qui sont définis en HTML 4.

Les références d'entités de caractères sont sensibles à la casse. Ainsi, « &Aring; » (A majuscule, anneau) ne se rapporte pas au même caractère que « &aring; » (a minuscule, anneau).

Quatre références d'entités de caractères méritent une attention particulière car elles sont fréquemment utilisées pour masquer certains caractères spéciaux.

  • « &lt; » représente le caractère « < » ;
  • « &gt; » représente le caractère « > » ;
  • « &amp; » représente le caractère « & » ;
  • « &quot; » représente le caractère « " ».

Les auteurs qui souhaitent employer le caractère « < » dans leur texte devraient utiliser « &lt; » (code décimal ASCII 60), afin d'éviter toute confusion avec le début d'une balise (caractère de début de balise). De même, les auteurs devraient utiliser « &gt; » (code décimal ASCII 62) dans leur texte au lieu de « > », pour éviter des problèmes avec les agents utilisateurs anciens qui le perçoivent, de manière erronée, comme la fin d'une balise (caractère de fin de balise) lorsqu'il apparaît dans les valeurs d'attributs entre guillemets.

Les auteurs devraient utiliser « &amp; » (code décimal ASCII 38) au lieu de « & », pour éviter toute confusion avec le début d'une référence de caractère (délimiteur ouvrant de référence d'entité), Les auteurs devraient également utiliser « &amp; » dans les valeurs d'attributs, étant donné que les références de caractères sont admises dans les valeurs d'attribut de type « CDATA ».

Certains auteurs utilisent la référence d'entité de caractère « &quot; » pour coder les instances de guillemets doubles « " », car on peut utiliser ce caractère pour délimiter les valeurs des attributs.

5.4 Les caractères non affichables

Un agent utilisateur n'est pas toujours en mesure de restituer de manière significative tous les caractères d'un document, par exemple, si l'agent utilisateur ne dispose pas d'une police appropriée, la valeur d'un caractère peut ne pas s'exprimer au travers de l'encodage de caractères interne de l'agent utilisateur, etc.

Étant donné l'éventail des réponses possibles dans de pareils cas, ce document ne suggère aucun comportement spécifique. Selon l'implémentation, les caractères non affichables peuvent également être gérés par le système d'affichage sous-jacent et non pas l'application elle-même. En l'absence d'un comportement plus précis, qui soit, par exemple, adapté aux besoins d'une écriture ou d'une langue particulière, nous recommendons que les agents utilisateurs empruntent les comportements suivants :

  1. Adopter un mécanisme visible et clair, mais non intrusif, pour avertir l'utilisateur de l'absence des ressources nécessaires ;
  2. Si le caractère manquant est présenté en utilisant sa repésentation numérique, utiliser la forme hexadécimale (et non décimale), car c'est la forme qui est utilisée pour les normes des jeux de caractères.


Les types de données HTML de base

6 Les types de données HTML de base

Sommaire

  1. L'information de casse
  2. Les types SGML de base
  3. Les chaînes textuelles
  4. Les URI
  5. Les couleurs
    1. Remarques sur l'utilisation des couleurs
  6. Les longueurs
  7. Les types de contenu (les types MIME)
  8. Les codes de langue
  9. Les encodages de caractères
  10. Les caractères seuls
  11. Les dates et les heures
  12. Les types de lien
  13. Les descripteurs de média
  14. Les données des scripts
  15. Les données des feuille de style
  16. Les noms des cadres cibles

Cette section de la spécification décrit les types de données de base qui peuvent apparaître dans le contenu d'un élément ou dans la valeur d'un attribut.

Pour une introduction à la lecture du DTD de HTML, veuillez consulter le tutoriel SGML.

6.1 L'information de casse

Chaque définition d'attribut contient des informations concernant la sensibilité à la casse pour les valeurs qu'il admet. L'information de casse est présentée selon les clés suivantes :

CS
La valeur est sensible à la casse [ndt. case-sensitive] (i.e., l'agent utilisateur interpréte « a » et « A » différemment).
CI
La valeur est insensible à la casse [ndt. case-insensitive] (i.e., l'agent utilisateur interpréte « a » et « A » de la même manière).
CN
La valeur n'est pas concernée par le changement de casse [ndt. case-neutral], par exemple, parce que c'est un nombre ou un caractère issu du jeu de caractères du document.
CA
La définition de l'élément, ou de l'attribut, donne par elle-même l'information de casse.
CT
Consultez la définition de type pour les détails sur l'information de casse.

Si une valeur d'attribut est constituée d'une liste de valeurs, les clés s'appliquent à toutes les valeurs dans la liste, à moins que précisé autrement.

6.2 Les types SGML de base

La définition de type de document spécifie la syntaxe du contenu des éléments et des valeurs des attributa HTML en utilisant les atomes [ndt. tokens] SGML par exemple, PCDATA, CDATA, NAME, ID, etc.). Voir [ISO8879] pour obtenir leurs définitions complètes. Les lignes suivantes constituent un résumé des points-clés :

  • le type CDATA représente une séquence de caractères, issus du jeu de caractère du document, qui peut inclure des entités de caractères. Les agents utilisateurs devraient interpréter les valeurs d'attributs ainsi :
    • remplacer les entités de caractères par les caractères correspondants ;
    • ignorer les sauts de ligne ;
    • remplacer chaque retour chariot ou tabulation par un espace simple.

    Les agents utilisateurs peuvent ignorer les blancs de tête et de queue des valeurs d'attribut de type CDATA (par exemple, " mavaleur " peut être interprété comme "mavaleur"). Les auteurs ne devraient pas déclarer les valeurs d'attributs avec des blancs de tête ou de queue.

    Pour certains attributs HTML 4, avec des valeurs d'attribut de type CDATA, la spécification impose des contraintes supplémentaires sur le jeu des valeurs autorisées pour l'attribut, qui ne peuvent pas être exprimées par le DTD.

    Bien que les éléments STYLE et SCRIPT utilisent le type « CDATA » pour leur modèle de données, les agents utilisateurs doivent interpréter différemment le type CDATA pour ceux-ci. Le balisage et les entités doivent être traités comme du texte brut et passés tel quel à l'application. La première occurence de la séquence de caractères « </ » (délimiteur d'ouverture de balise fermante) est traitée comme terminant la fin du contenu de l'élément. Dans les documents valides, ce serait la balise fermante de l'élément.

  • les atomes ID et NAME doivent commencer par une lettre ([A-Za-z]), qui peut être suivie par un nombre quelconque de lettres, de chiffres ([0-9]), de caractères trait d'union « - », souligné « _ », deux-points « : » et points « . ».
  • les types IDREF et IDREFS représentent des références aux atomes ID définis par d'autres attributs. Le type IDREF représente un atome seul et IDREFS une liste d'atomes séparés par des espaces.
  • les atomes NUMBER doivent contenir au moins un chiffre ([0-9]).

6.3 Les chaînes textuelles

Un certain nombre d'attributs (entité %Text; dans le DTD) prennent comme valeur du texte destiné à une « lecture humaine ». Pour une introduction aux attributs, veuillez consulter les explications du mode d'emploi des attributs.

6.4 Les URI

La spécification utilise le terme URI, comme défini dans [URI] (voir également le document [RFC1630]).

Remarquez que les URI comprennent les URL (tels que définis dans les documents [RFC1738] et [RFC1808]).

Les URI relatifs se résolvent en URI complets en utilisant un URI de base. Le document [RFC1808], section 3, définit l'algorithme normatif pour cette opération. Pour en savoir plus sur les URI de base, veuillez consulter la section sur les URI de base dans le chapitre sur les liens.

Les URI sont représentés dans le DTD par l'entité paramètre %URI;.

Les URI sont en général sensibles à la casse. Il peut y avoir des URI, ou des parties de ceux-ci, pour lesquels la casse n'a pas d'importance (par exemple, les noms des machines), mais leur identification peut être difficile. Les utilisateurs devraient toujours considérer, par précaution, que les URI sont sensibles à la casse.

Veuillez consulter l'appendice pour en savoir plus sur les caractères non-ASCII dans les valeurs d'attribut des URI.

6.5 Les couleurs

Le type de valeur d'attribut « color » (entité %Color;) se rapporte aux définitions des couleurs comme spécifiées dans [SRGB]. Une valeur de couleur peut soit être un nombre hexadécimal (préfixé par un caractère dièse « # »), soit l'un des 16 noms de couleur suivants. Ces noms de couleur sont insensibles à la casse.

Noms des couleurs et valeurs sRGB
Black = "#000000" | Green = "#008000"
Silver = "#C0C0C0" | Lime = "#00FF00"
Gray = "#808080" | Olive = "#808000"
White = "#FFFFFF" | Yellow = "#FFFF00"
Maroon = "#800000" | Navy = "#000080"
Red = "#FF0000" | Blue = "#0000FF"
Purple = "#800080" | Teal = "#008080"
Fuchsia = "#FF00FF" | Aqua = "#00FFFF"

Ainsi, les valeurs de couleur "#800080" et "Purple" désignent toutes deux la même couleur violette.

6.5.1 Remarques sur l'utilisation des couleurs

Bien que les couleurs puissent apporter beaucoup d'informations aux documents et les rendre plus lisibles, veuillez considérer les principes directeurs suivants quand on ajoute de la couleurs à ses documents :

  • l'utilisation des éléments et des attributs HTML pour la spécification des couleurs est déconseillée. Vous êtes invités, plutôt, à utiliser les feuilles de style ;
  • ne pas employer des combinaisons de couleurs qui peuvent poser des problèmes aux personnes atteintes de daltonisme dans ses diverses formes ;
  • si vous utilisez une image d'arrière-plan ou définissez une couleur d'arrière-plan, alors assurez-vous également d'assortir les diverses couleurs des textes ;
  • les couleurs définies par les éléments BODY et FONT, et par l'attribut bgcolor sur les tables ressortent différemment selon les plates-formes (par exemple, entre les stations de travail et les ordinateurs Macintosh et Windows, et entre les écrans à critaux liquides et les écrans cathodiques), vous ne devriez donc pas compter uniquement sur un effet spécifique. Dans le futur, la gestion du modèle de couleur [SRGB] en même temps que des profils de couleur ICC devrait atténuer ce problème ;
  • quand cela est pratique, adoptez les conventions courantes pour minimiser les risques de confusion de l'utilisateur.

6.6 Les longueurs

HTML spécifie trois types de valeurs de longueur pour les attributs :

  1. Pixels : la valeur (entité %Pixels; dans le DTD) est un entier qui représente le nombre de pixels de canevas (écran, papier). Ainsi, la valeur "50" signifie cinquante pixels. Pour obtenir des informations normatives sur la définition d'un pixel, veuillez consulter [CSS1] ;
  2. Longueur : la valeur (entité %Length; dans le DTD) peut être soit un type « %Pixel; », soit un pourcentage de l'espace horizontal ou vertical disponible. Ainsi, la valeur "50%" signifie la moitié de l'espace disponible ;
  3. Longueur multiple : la valeur (entité %MultiLength; dans le DTD) peut être une valeur de type « %Length; » ou une longueur relative. Une longueur relative a la forme "i*", où « i » est un entier. Lors de l'affectation d'un espace aux éléments en compétition pour cet espace, l'agent utilisateur affecte en premier les longueurs en pixels et en pourcentages, puis répartit l'espace restant disponible entre les longueurs relatives. Chaque longueur relative reçoit une portion de l'espace disponible qui est proportionnelle à l'entier précédent le caractère « * ». La valeur "*" équivaut à "1*". Donc, si l'espace disponible fait 60 pixels, après que l'agent utilisateur a affecté les espaces exprimés en pixels et en pourcentage, et si les longueurs relatives en compétition ont pour valeur "1*", "2*" et "3*", la longueur relative de valeur "1*" recevra 10 pixels, celle de valeur "2*" recevra 20 pixels et celle de valeur "3*" 30 pixels.

Les valeurs de longueurs sont neutres à la casse.

6.7 Les types de contenu (les types MIME)

Remarque : Un « type de média », défini dans les documents [RFC2045] et [RFC2046], spécifie la nature d'une ressource reliée. Cette spécification emploie le terme "« type de contenu » plutôt que « type de média » en accord avec l'usage courant. Dans cette spécification toujours, un « type de média » peut se rapporter à l'attribut media en fonction duquel l'agent utilisateur va restituer le document.

Ce type est représenté dans le DTD par l'entité %ContentType;.

Les types de contenu sont insensibles à la casse.

Les types de contenu comprennent, par exemple, "text/html", "image/png", "image/gif", "video/mpeg", "text/css" et "audio/basic". Pour obtenir la liste actuelle des types MIME enregistrés, veuillez consulter [MIMETYPES].

6.8 Les codes de langue

La valeur des attributs dont le type est un code de langue (entité %LanguageCode; dans le DTD) se rapporte à un code de langue, comme spécifié par le document [RFC1766], section 2. Pour en savoir plus sur les codes de langue en HTML, veuillez consulter la section sur les codes de langue. Les caractères blancs ne sont pas autorisés dans les codes de langue.

Les codes de langues sont insensibles à la casse.

6.9 Les encodages de caractères

Les attributs « charset » (entité %Charset; dans le DTD) se rapportent à un encodage de caractères, comme défini dans la section sur les encodages de caractères. Les valeurs doivent être des chaînes de caractères (par exemple, "euc-jp") qui proviennent du registre IANA (voir [CHARSETS] pour la liste complète).

Les noms des encodages de caractère sont insensibles à la casse.

Les agents utilisateurs doivent suivre les étapes établies dans la section sur la spécification des encodages de caractères afin de déterminer l'encodage de caractères d'une ressource externe.

6.10 Les caractères seuls

Certains attributs appellent un seul caractère provenant du jeu de caractères du document. Ces attributs prennent le type %Character; dans le DTD.

Les caractères seuls peuvent être spécifiés avec des références de caractères (par exemple, « &amp; »).

6.11 Les dates et les heures

La norme [ISO8601] autorise de nombreuses options et variations pour représenter les dates et les heures. Cette spécification utilise l'un des formats décrits dans le profil [DATETIME] pour sa définition des chaînes date/heure autorisées (entité %Datetime; dans le DTD).

Le format est le suivant :

  AAAA-MM-JJThh:mm:ssTZD
dans lequel :
     AAAA = l'année en 4 chiffres
     MM   = le mois en 2 chiffres (01=janvier, etc.)
     JJ   = le jour du mois en 2 chiffres (01 à 31)
     hh   = l'heure en 2 chiffres (00 à 23) (am/pm NON admis)
     mm   = les minutes en 2 chiffres (00 à 59)
     ss   = les secondes en 2 chiffres (00 à 59)
     TZD  = l'indicateur du fuseau horaire

L'indicateur du fuseau horaire prend l'une des formes suivantes :

Z
indique le temps universel coordonné UTC. Le « Z » doit être en majuscule.
+hh:mm
indique une heure locale qui corresponda à hh heures et mm minutes en avance sur le temps UTC.
-hh:mm
indique une heure locale qui correspond à hh heures et mm minutes en retard sur le temps UTC.

Les composants doivent être présents avec le formalisme et la ponctuation exacts exposés ici. Remarquez que le « T » apparaît littéralement dans la chaîne (il doit être en majuscule), pour indiquer le début de l'élément heure, comme spécifié dans la norme [ISO8601]

Si une application de génération ne connaît pas l'heure à la seconde, elle peut utiliser la valeur "00" pour les secondes (et les minutes et les heures si nécessaire).

Remarque : Le profil [DATETIME] ne règle pas la question des sauts de seconde.

6.12 Les types de lien

Les auteurs peuvent utiliser les types de liens reconnus suivants, qui sont listés avec leur interprétation conventionnelle. Dans le DTD, l'entité %LinkTypes; se rapporte à une liste de types de lien, séparés par des espaces. Les caractères blancs ne sont pas autorisés dans les types de lien.

Ces types de liens sont insensibles à la casse, i.e., la valeur "Alternate" a la même signification que "alternate".

Les agents utilisateurs, les moteurs de recherche, etc. peuvent interpréter ces types de liens de diverses manières. Par exemple, les agents utilisateurs peuvent fournir l'accès aux documents reliés au moyen d'une barre de navigation.

Alternate
Désigne les versions de remplacement du document dans lequel le lien survient. Quand ce type accompagne l'attribut lang, il implique une version traduite du document. Quand il accompagne l'attribut media, il implique une version du document conçue pour un ou plusieurs médias différents.

errata-09

Stylesheet
Se rapporte à une feuille de style externe. Voir la section sur les feuilles de style externes pour plus de détails. Il est également utilisé avec le type de lien "Alternate" pour les feuilles de style alternatives sélectionnables par l'utilisateur.
Start
Se rapporte au premier document d'une succession de documents. Ce type de lien indique aux moteurs de recherche le document que l'auteur considère être le point de départ de la succession.
Next
Se rapporte au document suivant dans une succession linéaire de documents. Les agents utilisateurs peuvent choisir de pré-charger ce document suivant, pour réduire le temps de chargement perceptible.
Prev
Se rapporte au document précédent dans une succession ordonnée de documents. Certains agents utilisateurs reconnaissent également le synonyme "Previous".
Contents
Se rapporte au document qui fait office de table des matières. Certains agents utilisateurs reconnaissent également le synonyme "ToC" [ndt. Table of Contents].
Index
Se rapporte au document qui fournit un index du document courant.
Glossary
Se rapporte au document qui fournit un glossaire des termes relatifs au document courant.
Copyright
Se rapporte à la déclaration de droits d'auteur pour le document courant.
Chapter
Se rapporte au document faisant office de chapitre dans une succession de documents.
Section
Se rapporte au document faisant office de section dans une succession de documents.
Subsection
Se rapporte au document faisant office de sous-section dans une succession de documents.
Appendix
Se rapporte au document faisant office d'appendice dans une succession de documents.
Help
Se rapporte à un document d'aide (compléments d'informations, liens vers d'autre sources d'information, etc.)
Bookmark
Se rapporte à un signet. Un signet représente un lien vers un point d'entrée clé dans un document complémentaire. L'attribut title peut être utilisé, par exemple, pour étiqueter le signet. Remarquez qu'on peut définir plusieurs signets dans chaque document.

Les auteurs peuvent souhaiter définir des types de liens supplémentaires qui ne sont pas décrits dans cette spécification. Le cas échéant, ils devraient utiliser un profil pour citer les conventions employées pour définir les types de lien. Voir l'attribut profile de l'élément HEAD pour plus de détails.

Pour des explications approfondies sur les types de liens, veuillez consulter la section sur liens dans les documents HTML.

6.13 Les descripteurs de média

Voici une liste des descripteurs de média reconnus (entité %MediaDesc; dans le DTD).

screen
Destiné aux écrans d'ordinateur non-paginés.
tty
Destiné aux médias utilisant une grille de caractère à pas fixe, tels que les télétypes, les terminaux ou les appareils portables avec des capacités d'affichage limitées.
tv
Destiné aux appareils de type télévision (basse résolution, couleur, défilement limité).
projection
Destiné aux projecteurs.
handheld
Destiné aux appareils manuels (petit écran, monochrome, graphique bitmap, faible bande passante).
print
Destiné aux supports paginés opaques et aux documents visionnés à l'écran en mode aperçu avant impression.
braille
Destiné aux appareils Braille.
aural
Destiné aux synthétiseurs de parole.
all
Convient pour tous les supports.

Les prochaines versions de HTML pourraient introduire de nouvelles valeurs et autoriser des valeurs paramétrées. Pour préparer l'introduction de ces extensions, les agents utilisateurs conformes doivent être capables d'analyser la valeur de l'attribut media de la façon suivante :

  1. La valeur est une liste d'entrées, séparées par des virgules. Par exemple :
    media="screen, 3d-glasses, print and resolution > 90dpi"

    cette déclaration correspond à :

    "screen"
"3d-glasses"
"print and resolution > 90dpi"
  2. Chaque entrée est tronquée juste avant le premier caractère qui n'est pas une lettre US ASCII [a-zA-Z] (ISO 10646 hex 41-5a, 61-7a), un chiffre [0-9] (hex 30-39) ou un trait d'union (hex 2d). Dans l'exemple, cela donnerait :
    "screen"
"3d-glasses"
"print"
  3. Une correspondance sensible à la casse est alors recherchée avec le jeu des types de média définis précédemment. Les agents utilisateurs peuvent ignorer les entrées qui n'ont aucune correspondance. Dans l'exemple, il resterait les valeurs "screen" et "print".

Remarque : Les déclarations de feuilles de style peuvent contenir des variations en fonction du média (par exemple, la structure CSS @media). Auquel cas, il serait plus approprié d'utiliser la spécification "media=all".

6.14 Les données des scripts

Les données de script (entité %Script; dans le DTD) peuvent se présenter comme contenu de l'élément SCRIPT et comme valeur des attributs d'événement intrinsèques. Les agents utilisateurs ne doivent pas évaluer les données de script en tant que balisage HTML mais plutôt les transmettre comme données à un moteur de script.

La sensibilité à la casse des données de script dépend du langage de script.

Veuillez remarquer que les données de script, qui forment le contenu d'un élément, ne peuvent pas contenir de références de caractères, à l'inverse des données de script dans la valeur d'un attribut qui peuvent en contenir. L'appendice fournit des informations plus détaillées sur la spécification de données non-HTML.

6.15 Les données des feuilles de style

Les données de feuille de style (entité %StyleSheet; dans le DTD) peuvent se présenter comme contenu de l'élément STYLE et comme valeur de l'attribut style. Les agents utilisateurs ne doivent pas évaluer les données de style en tant que balisage HTML.

La sensibilité à la casse des données de style dépend du langage de feuille de style.

Veuillez remarquer que les données de feuille de style, qui forment le contenu de l'élément, ne peuvent pas contenir de références de caractères, à l'inverse des données de style dans la valeur d'un attribut qui peuvent en contenir. L'annexe fournit des informations plus détaillées sur la spécification de données non-HTML.

6.16 Les noms des cadres cibles

À l'exception des noms réservés ci-dessous, les noms des cadres cibles (entité %FrameTarget; dans le DTD) doivent commencer par un caractère alphabétique (a-zA-Z). Les agents utilisateurs devraient ignorer tous les autres noms de cible.

Les noms de cible suivants sont réservés et ont des significations particulières :

_blank
L'agent utilisateur devrait charger le document désigné dans une nouvelle fenêtre sans nom.
_self
L'agent utilisateur devrait charger le document dans le même cadre que l'élément qui désigne cette cible.
_parent
L'agent utilisateur devrait charger le document dans l'élément FRAMESET parent immédiat du cadre courant. Cette valeur est équivalente à "_self" si le cadre courant n'a pas de parent.
_top
L'agent utilisateur devrait charger le document dans la fenêtre originale entière (de ce fait, annulant tous les autres cadres). Cette valeur est équivalente à "_self" si le cadre courant n'a pas de parent.


La structure globale du document HTML

7 La structure globale du document HTML

Sommaire

  1. Introduction à la structure du document HTML
  2. Les informations de version HTML
  3. L'élément HTML
  4. L'en-tête du document
    1. L'élément HEAD
    2. L'élément TITLE
    3. L'attribut title
    4. Les métadonnées
      • La spécification des métadonnées
      • L'élément META
      • Les profils de métadonnées
  5. Le corps du document
    1. L'élément BODY
    2. Les identifiants des éléments : les attributs id et class
    3. Les éléments de bloc et les éléments en-ligne
    4. Le regroupement des éléments : les éléments DIV et SPAN
    5. Les titres : les éléments H1, H2, H3, H4, H5 et H6
    6. L'élément ADDRESS

7.1 Introduction à la structure du document HTML

Un document HTML 4 se compose de trois parties :

  1. une ligne contenant les informations de version HTML ;
  2. une section en-tête déclarative (enclose par l'élément HEAD) ;
  3. un corps, qui emporte le contenu effectif du document. Le corps peut être implémenté par l'élément BODY ou l'élément FRAMESET.

Les blancs (les espaces, les sauts de ligne, les tabulations et les commentaires) peuvent survenir avant ou après chaque section. Les sections 2 et 3 ci-dessus devraient être encloses par l'élément HTML.

Voici un exemple de document HTML simple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
   <HEAD>
      <TITLE>Mon premier document HTML</TITLE>
   </HEAD>
   <BODY>
      <P>Bonjour tout le monde !
   </BODY>
</HTML>

7.2 Les informations de version HTML

Un document HTML valide déclare la version HTML qui est utilisée dans le document. La déclaration de type de document indique la définition de type de document (DTD) en vigueur pour le document (voir [ISO8879]).

HTML 4.01 spécifie trois DTD et les auteurs doivent donc inclure l'une des déclarations de type de document suivantes dans leurs documents. Les DTD varient selon les éléments qui y sont gérés.

  • Le DTD HTML 4.01 strict comprend tous les éléments et attributs qui ne sont pas déconseillés ou bien ceux qui n'apparaissent pas dans les documents avec jeu d'encadrement. Pour les documents qui utilisent ce DTD, prendre la déclaration de type de document suivante :
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
  • Le DTD HTML 4.01 transitoire inclut la totalité du DTD strict auquel se rajoutent les éléments et attributs déconseillés (la plupart d'entre eux concernant la présentation visuelle). Pour les documents qui utilisent ce DTD, prendre la déclaration de type de document suivante :
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
  • Le DTD HTML 4.01 de jeu d'encadrement inclut la totalité du DTD transitoire plus les cadres. Pour les documents qui utilisent ce DTD, prendre la déclaration de type de document suivante :
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
        "http://www.w3.org/TR/html4/frameset.dtd">

L'URI, dans chacune des déclarations de type de document, permet à l'agent utilisateur de télécharger le DTD et tous les jeux d'entités qui seraient nécessaires. Les URI (relatifs) suivants se rapportent aux DTD et aux jeux d'entités de HTML 4 :

  • "strict.dtd" -- DTD strict par défaut
  • "loose.dtd" -- DTD transitoire
  • "frameset.dtd" -- DTD de documents avec jeu d'encadrement
  • "HTMLlat1.ent" -- entités Latin-1
  • "HTMLsymbol.ent" -- entités symboles
  • "HTMLspecial.ent" -- entités spéciales

On peut spécifier la corrélation entre les identifiants publics et les fichiers de DTD, en utilisant un fichier catalogue obéissant au format recommandé par l'organisme Oasis Open Consortium (voir [OASISOPEN]). Un exemple de fichier catalogue pour HTML 4.01 est inclus au début de la section sur les informations de référence SGML pour HTML. Les deux dernières lettres de la déclaration indiquent la langue du DTD. Pour HTML, c'est toujours l'anglais (« EN »).

Remarque : Pour la version HTML 4.01 du 24 décembre, le groupe de travail HTML a arrêté la politique suivante :

  • Aucun changement, qui apparaîtrait dans les prochains DTD HTML 4, ne viendra invalider les documents conformes aux DTD de la présente spécification. Le groupe de travail HTML se réserve la possibilité de corriger les défauts connus.
  • Un logiciel, conforme aux DTD de la présente spécification, peuvent ignorer les fonctionnalités des prochains DTD HTML 4 qu'il ne reconnaît pas.

Cela signifie que, dans la déclaration du type de document, les auteurs peuvent utiliser en toute sécurité un identifiant de système qui se rapporte à la dernière version d'un DTD HTML 4. Les auteurs peuvent aussi choisir d'utiliser un identifiant de système qui se rapporte à une version spécifique (datée) d'un DTD HTML 4, quand une validation par rapport à ce DTD particulier est requise. Le W3C prendra toutes les dispositions nécessaires pour que les documents d'archives soit indéfiniment disponibles à leur adresse et dans leur forme originales.

7.3 L'élément HTML

<!ENTITY % html.content "HEAD, BODY">

<!ELEMENT HTML O O (%html.content;)    -- élément racine du document -->
<!ATTLIST HTML
  %i18n;                               -- lang, dir --
  >

Balise ouvrante : optionnelle, balise fermante : optionnelle

Définition des attributs

version = cdata [CN]
Déconseillé. La valeur de cet attribut spécifie quelle version de DTD HTML régit le document en question. Cet attribut est déconseillé pour cause de redondance avec les informations de version fournies par la déclaration de type de document.

Attributs définis ailleurs

  • lang (indications de langue), dir (direction du texte)

Suivant en cela la déclaration de type de document, le restant du document HTML est contenu dans l'élément HTML. Ainsi, un document HTML typique a la structure suivante :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
...L'en-tête, le corps, etc. viennent ici...
</HTML>

7.4 L'en-tête du document

7.4.1 L'élément HEAD

<!-- %head.misc; définie précédemment comme "SCRIPT|STYLE|META|LINK|OBJECT" -->
<!ENTITY % head.content "TITLE & BASE?">

<!ELEMENT HEAD O O (%head.content;) +(%head.misc;) -- document head -->
<!ATTLIST HEAD
  %i18n;                               -- lang, dir --
  profile     %URI;          #IMPLIED  -- dictonnaire de métainformations nommé --
  >

Balise ouvrante : optionnelle, balise fermante : optionnelle

Définition des attributs

profile = uri [CT]
Cet attribut indique la localisation d'un ou plusieurs profils de métadonnées, séparés par des caractères blancs. Pour les prolongements ultérieurs, les agents utilisateurs devraient considérer cette valeur comme étant une liste, même si cette spécification ne considère que le premier URI comme étant significatif. Les profils sont expliqués ci-dessous, dans la section sur les métadonnées.

Attributs définis ailleurs

  • lang (indications de langue), dir (direction du texte)

L'élément HEAD contient des informations sur le document courant, tels que son titre, des mots-clés que les moteurs de recherche peuvent exploiter et d'autres données qui ne sont pas considérées comme faisant partie du contenu du document. Les agents utilisateurs ne restituent généralement pas les éléléments qui apparaissent comme contenu de l'élément HEAD. Il peuvent cependant rendre les informations contenues par l'élément HEAD disponibles aux utilisateurs au moyen d'autres mécanismes.

7.4.2 L'élément TITLE

<!-- L'élément TITLE n'est pas considéré faire partie du flux de texte.
       Il devrait, par exemple,  être affiché comme titre de la page ou
       de la fenêtre. Il faut exactement un seul titre par document.
    -->
<!ELEMENT TITLE - - (#PCDATA) -(%head.misc;) -- titre du document -->
<!ATTLIST TITLE %i18n>

Balise ouvrante : obligatoire, balise fermante : obligatoire

Attributs définis ailleurs

  • lang (indications de langue), dir (direction du texte)

Chaque document HTML doit avoir un élément TITLE dans la section HEAD.

Les auteurs devraient utiliser l'élément TITLE pour identifier le contenu d'un document. Étant donné que les utilisateurs consultent souvent les documents hors de leur contexte, les auteurs devraient fournir des titres en fonction du contexte. Ainsi, au lieu d'un titre comme « Introduction », qui n'apporte aucune information sur le contexte, l'auteur devrait plutôt produire un titre tel que « Introduction à l'apiculture au Moyen-Âge ».

Pour des questions d'accessibilité, les agents utilisateurs doivent toujours rendre le contenu de l'élément TITLE disponible aux utilisateurs (y compris les éléments TITLE qui apparaissent dans les cadres). Les mécanismes pour ce faire dépendent de l'agent utilisateur (par exemple, une légende, un titre sonore).

Les titres peuvent contenir des entités de caractères (pour les caractères accentués, les caractères spéciaux, etc.), mais aucun balisage (y compris les commentaires). Voici un exemple de titre de document :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Une étude sur la dynamique des populations</TITLE>
... autres éléments d'en-tête...
</HEAD>
<BODY>
... corps du document...
</BODY>
</HTML>

7.4.3 L'attribut title

Définition des attributs

title = texte [CS]
Cet attribut fournit des informations consultatives concernant l'élément sur lequel il se place.

À a différence de l'élément TITLE, qui produit une information concernant un document entier et qui ne peut apparaître qu'une fois, l'attribut title peut annoter un nombre quelconque d'éléments. Veuillez consulter la définition de l'élément pour vérifier si celui-ci gère cet attribut.

Les agents utilisateurs peuvent restituer les valeurs des attributs title de diverses façons. Les navigateurs visuels peuvent, par exemple, afficher leur valeur sous la forme d'une « infobulle » [ndt. tool tip] (un bref message qui apparaît quand le dispositif de pointage reste au-dessus d'un objet). Dans le même ordre d'idée, les agents utilisateurs sonores peuvent vocaliser les informations de titre. Par exemple, le placement de l'attribut sur un lien permet aux agents utilisateurs (visuels et non-visuels) d'indiquer à l'utilisateur la nature de la ressource reliée :

...un texte...
Voici une photo
<A href="http://quelquepart.com/trucsuper.gif" title="Moi faisant de la plongée">
   de moi faisant de la plongée l'été dernier
</A>
...un autre texte...

L'attribut title joue un rôle supplémentaire quand on l'utilise avec l'élément LINK pour désigner une feuille de style externe. Veuillez consulter la section sur les liens et les feuilles de style pour les détails.

Remarque : Pour améliorer la qualité de la synthèse de la parole dans les cas mal gérés par les techniques standards, les futures versions de HTML pourront rajouter un attribut pour le codage d'informations phonémiques et prosodiques.

7.4.4 Les métadonnées

Remarque : Le cadre de description des ressources (RDF) du W3C (voir [RDF10]) est devenu une recommandation en février 1999. RDF permet aux auteurs de définir des métadonnées, lisibles par une machine, sur les documents HTML et les autres ressources accessibles sur un réseau.

HTML autorise les auteurs à spécifier des métadonnées (des informations sur le document plutôt que sur le contenu du document) de diverses manières.

Par exemple, pour spécifier l'auteur du document, on peut utiliser l'élément META comme suit :

<META name="Author" content="Dave Raggett">

L'élément META définit une propriété (ici "Author") et lui assigne une valeur (ici "Dave Raggett").

Cette spécification ne définit aucun ensemble de propriétés de métadonnées légales. La signification d'une propriété et le jeu des valeurs légales pour celle-ci devraient être définis dans un lexique de référence, appelé profil. Par exemple, un profil conçu pour aider les moteurs de recherche à indexer les documents pourrait définir des propriétés telles que "author", "copyright", "keywords", etc.

La spécification des métadonnées

La spécification des métadonnées implique en général deux étapes :

  1. la déclaration d'une propriété et d'une valeur pour celle-ci. Cela peut être fait de deux façons :
    1. à partir de l'intérieur du document, via l'élément META ;
    2. de l'extérieur du document, en reliant des métadonnées, via l'élément LINK (voir la section sur les types de lien).
  2. l'appel d'un profil dans lequel la propriété et ses valeurs légales sont définies. Pour désigner un profil, utiliser l'attribut profile de l'élément HEAD.

Remarquez, comme le profil est défini sur l'élément HEAD, que celui-ci s'applique à tous les éléments META et LINK dans l'en-tête du document.

Les agents utilisateurs ne sont pas tenus de gérer les mécanismes de métadonnées. Pour ceux qui le ferait, cette spécification ne définit pas la manière dont ces métadonnées devraient être interprétées.

L'élément META

<!ELEMENT META - O EMPTY               -- méta-information générique -->
<!ATTLIST META
  %i18n;                               -- lang, dir, à utiliser avec le contenu --
  http-equiv  NAME           #IMPLIED  -- nom de l'en-tête de réponse HTTP --
  name        NAME           #IMPLIED  -- nom de la méta-information --
  content     CDATA          #REQUIRED -- information associée --
  scheme      CDATA          #IMPLIED  -- selection de la forme du contenu --
  >

Balise ouvrante : obligatoire, balise fermante : interdite

Définition des attributs

Pour les attributs suivants, les valeurs admises et leur interpétation dépendent du profil donné :

name = nom [CS]
Cet attribut identifie le nom d'une propriété. Cette spécification ne liste pas les valeurs légales pour cet attribut.
content = cdata [CS]
Cet attribut identifie le nom d'une propriété. Cette spécification ne liste pas les valeurs légales pour cet attribut.
scheme = cdata [CS]
Cet attribut nomme le système à utiliser pour interpréter la valeur de la propriété (voir la section sur les profils pour les détails).
http-equiv = nom [CI]
Cet attribut peut s'employer à la place de l'attribut name. Les serveurs HTTP utilisent cet attribut pour réunir des informations sur les en-têtes de message de réponse HTTP.

Attributs définis ailleurs

  • lang (indications de langue), dir (direction du texte)

On peut utiliser l'élément META pour identifier les propriétés d'un document (par exemple, l'auteur, la date d'expiration, une liste de mots-clés, etc.) et assigner des valeurs à ces propriétés. Cette spécification ne définit aucun jeu de propriétés normatif.

Chaque élément META spécifie un couple propriété/valeur. L'attribut name identifie la propriété et l'attribut content en spécifie la valeur.

Par exemple, la déclaration suivante fixe une valeur à la propriété « Auteur » :

<META name="Auteur" content="Dave Raggett">

On peut utiliser l'attribut lang avec l'élément META pour spécifier la langue de la valeur de l'attribut content. Ceci permet aux synthétiseurs de parole d'appliquer des règles de prononciation en fonction de la langue.

Dans cet exemple, le nom de l'auteur est annoncé comme étant en français :

<META name="Auteur" lang="fr" content="Arnaud Le Hors">

Remarque : L'élément META représente un mécanisme générique pour spécifier des métadonnées. Cependant, quelques éléments et attributs HTML, qui gèrent déjà certains bouts de métadonnées, peuvent être utilisés par les auteurs au lieu de l'élément META pour spécifier ces bouts : les éléments TITLE, ADDRESS, INS et DEL ainsi que les attributs title et cite.

Remarque : Quand une propriété spécifiée par un élément META prend comme valeur un URI, certains auteurs préfèrent spécifier les métadonnés au travers de l'élément LINK. Ainsi, la déclaration de métadonnées suivante :

<META name="DC.identifier"
      content="http://www.ietf.org/rfc/rfc1866.txt">

celle-ci pourrait aussi s'écrire :

<LINK rel="DC.identifier"
         type="text/plain"
         href="http://www.ietf.org/rfc/rfc1866.txt">
L'élément META et les en-têtes HTTP

L'attribut http-equiv, qui peut s'utiliser à la place de l'attribut name, a un sens particulier quand les documents sont ramenés via le protocole de transfert hypertexte HTTP. Les serveurs HTTP peuvent utiliser le nom de propriété spécifié par l'attribut http-equiv pour créer un en-tête de style [RFC822] dans la réponse HTTP. Veuillez consulter la spécification HTTP ([RFC2616]) pour des informations détaillées sur les en-têtes HTTP valides.

L'exemple suivant de déclaration META :

<META http-equiv="Expires" content="Tue, 20 Aug 1996 14:25:27 GMT">

celle-ci donnera l'en-tête HTTP :

Expires: Tue, 20 Aug 1996 14:25:27 GMT

Cette faculté peut être utilisée par les caches pour déterminer quand aller chercher une nouvelle copie du document en question.

Remarque : Certains agents utilisateurs peuvent utiliser l'élément META pour rafraîchir la page courante après un nombre de secondes spécifié, avec une option de remplacement de la page par un URI différent. Les auteurs ne devraient pas employer cette technique pour orienter les utilisateurs vers une autre page, car celle-ci peut rendre cette page inaccessible pour certains utilisateurs. La redirection de page automatique devrait avoir lieu en utilisant plutôt des redirections côté serveur.

L'élément META et les moteurs de recherche

Une utilisation courante de l'élément META consiste à spécifier des mots-clés qu'un moteur de recherche peut utiliser pour améliorer la pertinence du résultat d'une recherche. Quand des éléments META fournissent des informations en plusieurs langues sur un document, les moteurs de recherche peuvent opérer un filtrage, en fonction de l'attribut lang, pour afficher le résultat de la recherche selon les préférences de langue de l'utilisateur. Par exemple :

<!-- Pour les américanophones -->
<META name="keywords" lang="en-us"
         content="vacation, Greece, sunshine">
<!-- Pour les anglophones-->
<META name="keywords" lang="en"
         content="holiday, Greece, sunshine">
<!-- Pour les francophones -->
<META name="keywords" lang="fr"
         content="vacances, Gr&egrave;ce, soleil">

On peut également accroître l'efficacité des moteurs de recherche en utilisant l'élément LINK pour spécifier des liens vers les traductions du document en d'autres langues, des liens vers les versions du document pour d'autres médias (par exemple, un fichier PDF) et, si le document fait partie d'une collection de documents, des liens vers le point de départ adéquat à partir duquel se déplacer dans la collection.

On donne d'autres renseignements dans la section expliquant comment aider les moteurs de recherche à indexer son site Web.

L'élément META et PICS
La plate-forme pour la sélection du contenu Internet (PICS), spécifiée dans [PICS], représente une infrastructure pour associer un label (des métadonnées) à un contenu Internet. Conçue à l'origine pour aider les parents et les enseignants à contrôler ce que les enfants peuvent consulter sur Internet, cette infrastructure facilite d'autres utilisations pour les labels, comprenant la signature d'un code, la confidentialité et la gestion des droits de propriété intellectuelle.

Cet exemple montre comment on peut utiliser une déclaration META pour inclure un label PICS 1.1 :

<HEAD>
 <META http-equiv="PICS-Label" content='
 (PICS-1.1 "http://www.gcf.org/v2.5"
    labels on "1994.11.05T08:15-0500"
      until "1995.12.31T23:59-0000"
      for "http://w3.org/PICS/Overview.html"
    ratings (suds 0.5 density 0 color/hue 1))
 '>
  <TITLE>... document title ...</TITLE>
</HEAD>
L'élément META et les informations par défaut

On peut utiliser l'élément META pour spécifier les informations par défaut sur un document dans les cas suivants :

  • le langage de script par défaut ;
  • le langage de feuille de style par défaut ;
  • l'encodage de caractères du document.

L'exemple suivant spécifie l'encodage de caractères du document comme étant "ISO-8859-5" :

<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-5">

Les profils de métadonnées

L'attribut profile de l'élément HEAD spécifie la localisation d'un profil de métadonnées. La valeur de l'attribut profile est un URI. Les agents utilisateurs peuvent utiliser cet URI de deux manières :
  • Comme un nom unique global. Les agents utilisateurs peuvent être capables de reconnaître le nom (sans aller réellement chercher le profil) et effectuer certaines opérations en fonction de conventions reconnues pour ce profil. Par exemple, les moteurs de recherche pourraient fournir une interface pour effectuer une recherche dans des catalogues de documents HTML lesquels utilisent tous le même profil pour représenter les entrées d'un catalogue.
  • Comme un lien. Les agents utilisateurs peuvent résoudre l'URI et effectuer certaines opérations en fonction des définitions réelles dans le profil (par exemple, autoriser l'utilisation du profil dans le document HTML courant). Cette spécification ne définit aucun format de profil.

Cet exemple se réfère à un profil hypothétique qui définit des propriétés utiles pour l'indexation des documents. Les propriétés, définies par ce profil (qui comprend les propriétés "auteur", "copyright", "mots-cles" et "date"), ont toutes leurs valeurs fixées par les déclarations META suivantes.

 <HEAD profile="http://www.bidule.com/profils/base">
  <TITLE>Comment remplir la page de garde d'un memorandum</TITLE>
  <META name="auteur" content="Jean BON">
  <META name="copyright" content="&copy; 1997 Société Bidule.">
  <META name="mots-cles" content="entreprise,mode d'emploi,catalogage">
  <META name="date" content="1994-11-06T08:49:37+00:00">
 </HEAD>

Au moment de la rédaction de cette spécification, il est d'usage courant d'utiliser les formats de date décrit dans le document [RFC2616], section 3.3. Comme ces formats sont relativement difficiles à traiter, nous recommandons aux auteurs d'utiliser le format de date [ISO8601]. Pour plus d'informations, veuillez consulter les sections sur les éléments INS et DEL.

L'attribut scheme permet aux auteurs de donner plus de contexte aux agents utilisateurs pour l'interprétation exacte des métadonnées. Parfois, ces informations supplémentaires peuvent être critiques, comme lorsque les métadonnées peuvent être spécifiées dans des formats différents. Par exemple, un auteur pourrrait spécifier une date dans le format (ambigu) "10-9-97" ; cela veut-il dire le 9 octobre 1997 ou bien le 10 septembre 1997 ? La valeur "Month-Day-Year" de l'attribut scheme rendrait cette date non équivoque.

En d'autres occasions, l'attribut scheme peut fournir des informations utiles non critiques aux agents utilisateurs.

Par exemple, la déclaration scheme suivante peut aider l'agent utilisateur à déterminer que la valeur de la propriété "identifiant" est un numéro de code ISBN :

<META scheme="ISBN"  name="identifiant" content="0-8230-2355-9">

Les valeurs de l'attribut scheme dépendent de la propriété name et du profil qui lui est associé.

Remarque : Un exemple de profil est représenté par le profil Dublin Core (voir [DCORE]). Ce profil, qui définit un ensemble de propriétés recommandées pour les descriptions bibliographiques électroniques, est destiné à promouvoir une certaine interopérabilité entre des modèles de description disparates.

7.5 Le corps du document

7.5.1 L'élément BODY

<!ELEMENT BODY O O (%block;|SCRIPT)+ +(INS|DEL) -- corps du document -->
<!ATTLIST BODY
  %attrs;                              -- %coreattrs, %i18n, %events --
  onload          %Script;   #IMPLIED  -- le document est chargé --
  onunload        %Script;   #IMPLIED  -- le document est retiré --
  >

Balise ouvrante : optionnelle, balise fermante : optionnelle

Définition des attributs

background = uri [CT]
Déconseillé. La valeur de cet attribut est un URI qui désigne une ressource image. L'image se dispose généralement en mosaîque dans l'arrière-plan (pour les navigateurs visuels).
text = couleur [CI]
Déconseillé. Cet attribut fixe la couleur d'avant-plan du texte (pour les navigateurs visuels).
link = couleur [CI]
Déconseillé. Cet attribut fixe la couleur du texte marquant les liens hypertextes non visités (pour les navigateurs visuels).
vlink = couleur [CI]
Déconseillé. Cet attribut fixe la couleur du texte marquant les liens hypertextes visités (pour les navigateurs visuels).
alink = couleur [CI]
Déconseillé. Cet attribut fixe la couleur du texte marquant les liens hypertextes quand ils sont activés par l'utilisateur (pour les navigateurs visuels).

Attributs définis ailleurs

  • id, class (identifiants internes au document)
  • lang (indications de langue), dir (direction du texte)
  • title (titre de l'élément)
  • style (information de style en-ligne)
  • bgcolor (couleur d'arrière-plan)
  • onload, onunload (événements intrinsèques)
  • onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (événements intrinsèques)

Le corps du document représente le contenu du document. Le contenu peut être présenté par un agent utilisateur de diverses façons. Par exemple, pour les navigateur visuels, on peut assimiler le corps à un canevas dans lequel s'inscrit le contenu : le texte, les images, les couleurs, les graphiques, etc. Pour les agents utilisateurs sonores, le même contenu peut être parlé. Puisque les feuilles de style sont désormais le moyen préféré de spécifier la présentation d'un document, les attributs de présentation de l'élément BODY sont maintenant déconseillés.

EXEMPLE DÉCONSEILLÉ :
Le fragment HTML suivant illustre l'emploi d'attributs déconseillés. Il fixe une couleur blanche pour l'arrière-plan du canevas, une couleur noire pour le texte d'avant-plan et, pour les liens hypertextes, une couleur rouge initiale, une couleur fuchsia à l'activation et une couleur marron une fois ceux-ci visités.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
 <TITLE>Une étude de la dynamique de la population</TITLE>
</HEAD>
<BODY bgcolor="white" text="black"
  link="red" alink="fuchsia" vlink="maroon">
  ... corps du document...
</BODY>
</HTML>

On pourrait obtenir le même effet en utilisant une feuille de style, ainsi :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
 <TITLE>Une étude de la dynamique de la population</TITLE>
 <STYLE type="text/css">
  BODY { background: white; color: black}
  A:link { color: red }
  A:visited { color: maroon }
  A:active { color: fuchsia }
 </STYLE>
</HEAD>
<BODY>
  ... corps du document...
</BODY>
</HTML>

L'utilisation d'une feuille de style externe (reliée) est plus souple et permet de changer la présentation sans revoir la source du document HTML :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
 <TITLE>Une étude de la dynamique de la population</TITLE>
 <LINK rel="stylesheet" type="text/css" href="stylemalin.css">
</HEAD>
<BODY>
  ... corps du document...
</BODY>
</HTML>

Les jeux d'encadrement [ndt. frameset] et les corps [ndt. body] HTML. Les documents qui contiennent des jeux d'encadrement remplacent l'élément BODY par l'élément FRAMESET. Veuillez consulter la section sur les cadres pour plus d'informations.

7.5.2 Les identifiants des éléments : les attributs id et class

Définition des attributs

id = nom [CS]
Cet attribut assigne un nom à un élément. Ce nom doit être unique dans le document.
class = liste-de-valeurs-cdata [CS]
Cet attribut assigne un nom de classe, ou un ensemble de noms de classe, à un élément. Un nombre quelconque d'éléments peut se voir assigner les mêmes nom de classe ou noms. Les noms de classe multiples doivent être séparés par des caractères blancs.
L'attribut id assigne un identifiant unique à un élément (qui peut être vérifié par un analyseur SGML). Par exemple, les paragraphes suivants se distinguent par la valeur de leurs attributs id :
<P id="notreparagraphe"> Voici un paragraphe dont le nom est unique.</P>
<P id="votreparagraphe"> Voici un paragraphe dont le nom est aussi unique.</P>

L'attribut id a plusieurs rôles dans HTML :

  • comme sélecteur dans une feuille de style ;
  • comme ancre cible de liens hypertextes ;
  • comme moyen d'appeler un élément particulier à partir d'un script ;
  • comme nom d'un élément OBJECT déclaré ;
  • pour un traitement universel par les agents utilisateurs (par exemple, pour identifier les champs lors de l'extraction des données des pages HTML pour peupler une base de données, pour traduire des documents HTML dans d'autres formats, etc.).

L'attribut class, au contraire, assigne un ou plusieurs noms de classe à un élément ; on peut dire de l'élément qu'il appartient à ces classes. Un nom de classe peut être partagé par plusieurs instances d'éléments. L'attribut class a plusieurs rôles dans HTML :

  • comme sélecteur dans une feuille de style (quand l'auteur souhaite assigner une information de style à un ensemble d'éléments) ;
  • pour un traitement universel par les agents utilisateurs.

Dans l'exemple suivant, on utilise l'élément SPAN en conjonction avec les attributs id et class pour baliser les messages d'un document. Les messages apparaissent à la fois en version anglaise et en version française.

<!-- Messages en anglais -->
<P><SPAN id="msg1" class="info" lang="en">Variable declared twice</SPAN>
<P><SPAN id="msg2" class="warning" lang="en">Undeclared variable</SPAN>
<P><SPAN id="msg3" class="erreur" lang="en">Bad syntax for variable name</SPAN>

<!-- Messages en français -->
<P><SPAN id="msg1" class="info" lang="fr">Variable d&eacute;clar&eacute;e deux fois</SPAN>
<P><SPAN id="msg2" class="warning" lang="fr">Variable ind&eacute;finie</SPAN>
<P><SPAN id="msg3" class="erreur" lang="fr">Erreur de syntaxe pour variable</SPAN>

Les règles de style CSS suivantes indiqueraient aux agents utilisateurs d'afficher les messages informatifs en vert, ceux d'avertissement en jaune et ceux d'erreur en rouge :

SPAN.info    { color: green }
SPAN.warning { color: yellow }
SPAN.erreur   { color: red }

Remarquez que le nom "msg1" français et le nom "msg1" anglais ne peuvent pas apparaître dans le même document parce qu'ils partage la même valeur d'attribut id. Les auteurs peuvent trouver d'autres emplois pour l'attribut id pour affiner la présentation des messages individuels, en faire des ancres cibles, etc.

Les éléments HTML peuvent presque tous recevoir un identifiant et une information de classe.

Supposons, par exemple, que nous rédigions un document sur un langage de programmation. Ce document doit inclure un certain nombre d'exemples préformatés. On utilise l'élément PRE pour formater ces exemples. On assigne aussi une couleur d'arrière-plan (verte) à tous les éléments PRE appartenant à la classe "exemple".

<HEAD>
<TITLE>... titre du document ...</TITLE>
<STYLE type="text/css">
PRE.exemple { background : green }
</STYLE>
</HEAD>
<BODY>
<PRE class="exemple" id="exemple-1">
...exemple de code ici...
</PRE>
</BODY>

En spécifiant l'attribut id de cet exemple, on peut (1) créer un hyperlien vers celui-ci et (2) surclasser l'information de style de la classe par une information de style sur l'instance.

Remarque : L'attribut id partage le même espace de nom que l'attribut name, quand il est utilisé comme nom d'ancre. Veuillez consulter la section sur les ancres ayant un attribut id pour plus d'informations.

7.5.3 Les éléments de bloc et les éléments en-ligne

Certains éléments HTML, qui peuvent apparaître dans l'élément BODY, sont dits être de niveau « bloc » [ndt. block-level] tandis que d'autres sont dits de niveau « en-ligne » [ndt. inline] (aussi connu comme sous le nom « niveau texte »). La distinction se fondent sur plusieurs notions :

Le modèle de contenu
De manière générale, les éléments de bloc peuvent contenir des éléments en-ligne et d'autres éléments de bloc. Et de manière générale, les éléments en-ligne ne peuvent contenir que des données et d'autres éléments en-ligne. L'idée inhérente à cette distinction structurelle, c'est que les éléments de bloc créent des structures « plus grandes » que les éléments en-ligne.
Le formatage
Par défaut, les éléments de bloc sont formatés différemment des éléments en-ligne. En général, les éléments de bloc commencent sur une nouvelle ligne, et non les éléments en-ligne. Pour des informations concernant les blancs, les sauts de ligne et le formatage des blocs, veuillez consulter la section sur le texte.
La directionnalité
Pour des raisons techniques impliquant l'algorithme de texte bi-directionnel [UNICODE], les éléments de bloc diffèrent de ceux en-ligne par la manière dont ils héritent des informations de directionnalité. Pour les détails, voir la section sur l'héritage de la direction du texte.

Les feuilles de style fournissent les moyens de spécifier la restitution d'éléments arbitraires, y compris si l'élément est rendu comme étant de type bloc ou de type en-ligne. Cela peut être approprié, dans certains cas, tel qu'un style en-ligne pour les éléments d'une liste, mais généralement parlant, on décourage les auteurs de détourner l'interprétation conventionnelle des éléments HTML de cette façon.

L'altération des expressions de présentation traditionnelles des éléments de bloc et des éléments en-ligne a également un impact sur l'algorithme de texte bi-directionnel. Voir la sections sur l'effet des feuilles de style sur la bi-directionnalité pour plus d'informations.

7.5.4 Le regroupement des éléments : les éléments DIV et SPAN

<!ELEMENT DIV - - (%flow;)*            -- conteneur générique de langue/style -->
<!ATTLIST DIV
  %attrs;                              -- %coreattrs, %i18n, %events --
  >
<!ELEMENT SPAN - - (%inline;)*         -- conteneur générique de langue/style -->
<!ATTLIST SPAN
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Balise ouvrante : obligatoire, balise fermante : obligatoire

Attributs définis ailleurs

  • id, class (identifiants internes au document)
  • lang (indications de langue), dir (direction du texte)
  • title (titre de l'élément)
  • style (information de style en-ligne)
  • align (alignement)
  • onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (événements intrinsèques)

Les éléments DIV et SPAN, en conjonction avec les attributs id et class, offrent un mécanisme générique qui rajoute de la structure aux documents. Ces éléments définissent le contenu comme étant en-ligne (SPAN) ou de bloc (DIV) mais n'imposent aucune autre expression de présentation sur le contenu. Ainsi, les auteurs peuvent utiliser ceux-ci en conjonction avec les feuilles de style, l'attribut lang, etc., pour exploiter HTML selon leurs besoins et leurs goûts propres.

Supposons, par exemple, que nous voulions générer un document HTML à partir d'une base de données des informations de clientèle. Comme HTML ne comprend pas d'éléments identifiant des objets tels que « client », « numéro de téléphone », « adresse e-mail », etc., nous utilisons les éléments DIV et SPAN pour obtenir les effets de structure et de présentation désirés. Nous pourrions utiliser l'élément TABLE comme suit pour structurer les informations :

<!-- Exemple de données issues de la base client : -->
<!-- Nom : Stéphane Boyera, Tél. : (212) 555-1212, E-mail : sb@foo.org -->

<DIV id="client-boyera" class="client">
<P><SPAN class="client-title">Informations sur le client :</SPAN>
<TABLE class="client-data">
<TR><TH>Nom : <TD>Boyera</TR>
<TR><TH>Prénom : <TD>Stéphane</TR>
<TR><TH>Tél. : <TD>(212) 555-1212</TR>
<TR><TH>E-mail: <TD>sb@foo.org</TR>
</TABLE>
</DIV>

<DIV id="client-lafon" class="client">
<P><SPAN class="client-title">Informations sur le client :</SPAN>
<TABLE class="client-data">
<TR><TH>Nom : <TD>Lafon</TR>
<TR><TH>Prénom : <TD>Yves</TR>
<TR><TH>Tél. : <TD>(617) 555-1212</TR>
<TR><TH>E-mail : <TD>yves@coucou.com</TR>
</TABLE>
</DIV>

Par la suite, nous pourrons facilement rajouter des déclarations de feuilles de style pour affiner la présentation de ces entrées de la base de données.

Pour un autre exemple d'utilisation, veuillez consulter l'exemple dans la section sur les attributs class et id.

Les agents utilisateurs visuels placent en général un saut de ligne avant et après l'élément DIV, par exemple :

<P>aaaaaaaaa<DIV>bbbbbbbbb</DIV><DIV>ccccc<P>ccccc</DIV>

ce qui est typiquement restitué par :

aaaaaaaaa
bbbbbbbbb
ccccc

ccccc

7.5.5 Les titres : les éléments H1, H2, H3, H4, H5 et H6

<!ENTITY % heading "H1|H2|H3|H4|H5|H6">
<!--
  Il existe 6 degrés de titres allant de H1 (le plus important)
  à H6 (le moins important).
-->

<!ELEMENT (%heading;)  - - (%inline;)* -- titres -->
<!ATTLIST (%heading;)
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Balise ouvrante : obligatoire, balise fermante : obligatoire

Attributs définis ailleurs

  • id, class (identifiants internes au document)
  • lang (indications de langue), dir (direction du texte)
  • title (titre de l'élément)
  • style (information de style en-ligne)
  • align (alignement)
  • onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (événements intrinsèques)

Un élément de titre décrit brièvement le sujet de la section qu'il introduit. Les agents utilisateurs peuvent utiliser les informations des titres pour, par exemple, construire automatiquement la table des matières du document.

Il existe six degrés de titrage dans HTML, l'élément H1 représentant le titre le plus important et H6 le moins important. Les navigateurs visuels restituent généralement les titres les plus importants dans un corps plus grand que les moins importants.

L'exemple suivant montre comment employer l'élément DIV pour associer un titre à la section du document qui le suit. De cette manière, on peut définir un style pour la section (colorer l'arrière-plan, fixer la police, etc.) au moyen d'une feuille de style.

<DIV class="section" id="elephants-foret" >
<H1>Les éléphants des forêts</H1>
<P>Dans cette partie, nous abordons le sujet moins connu
des éléphants des forêts.
...la section continue...
<DIV class="sous-section" id="habitat-foret" >
<H2>L'habitat</H2>
<P>Les éléphants des forêts ne vivent pas
dans les arbres mais au milieu d'eux.
...la sous-section continue...
</DIV>
</DIV>

On peut décorer cette structure en utilisant les informations de style suivantes :

<HEAD>
<TITLE>... titre du document...</TITLE>
<STYLE type="text/css">
DIV.section { text-align: justify; font-size: 12pt}
DIV.sous-section { text-indent: 2em }
H1 { font-style: italic; color: green }
H2 { color: green }
</STYLE>
</HEAD>

Les sections numérotées et les références
HTML ne génère pas de lui-même les numéros des sections à partir des titres. Cette facilité peut cependant être proposées par certains agents utilisateurs. Les langages de feuille de style, tel que CSS, proposeront bientôt aux auteurs le contrôle de la génération des numéros de section (ce qui est pratique pour les appels vers l'avant dans les documents imprimés, comme dans « Voir la section 7.2 »).

Certaines personnes considèrent le fait de sauter les degrés de titre comme une mauvaise pratique. Elles acceptent « H1 H2 H1 » et pas « H1 H3 H1 », puisque le degré de titre « H2 » a été sauté.

7.5.6 L'élément ADDRESS

<!ELEMENT ADDRESS - - (%inline;)* -- informations sur l'auteur -->
<!ATTLIST ADDRESS
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Balise ouvrante : obligatoire, balise fermante : obligatoire

Attributs définis ailleurs

  • id, class (identifiants internes au document)
  • lang (indications de langue), dir (direction du texte)
  • title (titre de l'élément)
  • style (information de style en-ligne)
  • onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (événements intrinsèques)

Les auteurs peuvent employer l'élément ADDRESS pour fournir les informations de contact du document ou d'une partie essentielle de celui-ci, comme un formulaire. Cet élément apparaît souvent au début ou à la fin du document.

Par exemple, une page du site Web du W3C relative à HTML pourrait contenir les informations de contact suivantes :

<ADDRESS>
<A href="../People/Raggett/">Dave Raggett</A>,
<A href="../People/Arnaud/">Arnaud Le Hors</A>,
personnes à contacter pour l'<A href="activite">activité HTML du W3C</A><BR>
$Date : 1999/12/24 23:07:14 $
</ADDRESS>


Les indications de langue et la direction du texte

8 Les indications de langue et la direction du texte

Sommaire

  1. La spécification de la langue du contenu : l'attribut lang
    1. Les codes de langue
    2. L'héritage des codes de langue
    3. L'interprétation des codes de langue
  2. La spécification de la direction du texte et des tables : l'attribut dir
    1. Introduction à l'algorithme bi-directionnel
    2. L'héritage des indications de direction du texte
    3. L'établissement de la direction d'un texte enchâssé
    4. L'inactivation de l'algorithme bi-directionnel : l'élément BDO
    5. Les références de caractères pour la directionnalité et le contrôle des ligatures
    6. L'effet des feuilles de style sur la bi-directionnalité

Cette section du document traite de deux sujets importants qui ont des répercussions sur l'internationalisation de HTML : spécifier la langue (l'attribut lang) et la direction (l'attribut dir) du texte dans un document.

8.1 La spécification de la langue du contenu : l'attribut lang

Définition de l'attribut
lang = code-de-langue [CI]
Cet attribut spécifie dans quelle langue de base sont écrits les valeurs d'attribut et le contenu textuel d'un élément. La valeur par défaut de cet attribut n'est pas définie.

L'indication de langue faite au moyen de l'attribut lang peut être utilisée par un agent utilisateur pour contrôler la restitution de diverses manières. L'auteur qui fournit cette information peut notamment :

  • assister la tâche des moteurs de recherche ;
  • assister la tâche des synthétiseurs de parole
  • aider l'agent utilisateur à choisir les variantes de glyphes pour une typographie de haute qualité ;
  • aider l'agent utilisateur à choisir un jeu de guillemets ;
  • aider l'agent utilisateur à prendre des décisions sur la césure, les ligatures et l'espacement ;
  • assister la tâche des vérificateurs orthographiques et grammaticaux.

L'attribut lang spécifie la langue du contenu de l'élément et celle des valeurs d'attribut ; que celui-ci s'applique ou non à un attribut dépend de la syntaxe et de la sémantique de l'attribut en question, et de l'opération en jeu.

Le but de l'attribut lang est de permettre aux agents utilisateurs de représenter un contenu de façon plus pertinente en suivant les pratiques culturelles en usage dans une langue donnée. Ceci ne veut pas dire que les agents utilisateurs devraient représenter de façon moins pertinente les caractères qui seraient atypiques pour une langue particulière, ; les agents utilisateurs doivent faire de leur mieux pour représenter tous les caractères, quelle que soit la valeur spécifiée par lang.

Par exemple, si des caractères de l'alphabet grec apparaissent au milieu d'un texte en français :

<P><Q lang="fr">Ses super-pouvoirs étaient la conséquence d'un
rayonnement &gamma;</Q>, expliqua-t-il.</P>

l'agent utilisateur (1) devrait s'efforcer de représenter le contenu français de manière appropriée (dans sa façon de gérer les guillemets par exemple) et (2) doit faire son possible pour représenter le caractère « γ » même si ce n'est pas un caractère français.

Veuillez consultez la section sur les caractères non affichables pour un complément d'information.

8.1.1 Les codes de langue

La valeur de l'attribut lang est un code de langue qui identifie une langue parlée, écrite, ou utilisée d'une manière ou d'une autre pour la communication d'informations entre personnes. Les langages informatiques sont explicitement exclus des codes de langue.

Le document [RFC1766] définit et explique les codes de langue qui doivent être utilisés dans les documents HTML.

Brièvement, les codes de langues consistent en un code principal et une suite éventuellement vide de sous-codes :

        code-de-langue = code-principal ( "-" sous-code )*

Voici des exemples de codes de langue :

  • "fr" : le français ;
  • "fr-CA" : la version canadienne du français ;
  • "en-cockney" : la version est-londonienne de l'anglais ;
  • "i-navajo" : la langue navajo parlée par certains Indiens d'Amérique ;
  • "x-klingon" : le code principal « x » signale une langue expérimentale.

Les codes principaux de deux lettres sont réservés aux abréviations de langues [ISO639]. Parmi les codes de deux lettres, citons : "en" (anglais), "de" (allemand), "it" (italien), "nl" (néerlandais), "el" (grec), "es" (espagnol), "pt" (portugais), "ar" (arabe), "he" (hébreu), "ru" (russe), "zh" (chinois), "ja" (japonais), "hi" (hindi), "ur" (ourdou) et "sa" (sanscrit).

Tout sous-code de deux lettres est considéré comme étant un code de pays [ISO3166].

8.1.2 L'héritage des codes de langue

Un élément hérite de l'indication du code de langue selon l'ordre de priorité suivant (de la priorité la plus élevée à la plus faible) :

  • L'attribut lang spécifié pour l'élément lui-même ;
  • L'élément parent le plus proche, dont l'attribut lang est spécifié (i.e., l'attribut lang est hérité) ;
  • L'en-tête HTTP « Content-Language » (qui peut être configuré au sein d'un serveur). Par exemple :
    Content-Language: fr-CA
  • Les valeurs par défaut de l'agent utilisateur et les préférences de l'utilisateur.

Dans cet exemple, la langue principale du document est le français ("fr"). Un paragraphe est déclaré être en espagnol ("es"), après lequel la langue principale redevient le français. Le paragraphe qui vient ensuite inclut une phrase enchâssée en japonais ("ja"), après laquelle la langue principale redevient le français.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML lang="fr">
<HEAD>
<TITLE>Un document multilingue</TITLE>
</HEAD>
<BODY>
...Interprété comme du français...
<P lang="es">...Interprété comme de l'espagnol...
<P>...À nouveau interprété comme du français...
<P>...Texte français interrompu par<EM lang="ja">du
         japonais</EM>Le français reprend ici...
</BODY>
</HTML>
Remarque : Les cellules d'une table peuvent hériter des valeurs de lang non pas de leur parent mais de la première cellule d'un groupe. Veuillez consulter la section sur l'héritage de l'alignement pour des précisions.

8.1.3 L'interprétation des codes de langue

Dans le contexte de HTML, un code de langue devrait être interprété par les agents utilisateurs comme une hiérarchie d'atomes plutôt qu'un seul atome. Quand l'agent utilisateur ajuste la restitution en fonction des indications de langue (disons, en comparant les codes de langue de la feuille de style et les valeurs de l'attribut lang), il devrait toujours donner la préférence aux codes qui coïncident parfaitement, mais il devrait aussi envisager la correspondance des codes principaux comme étant suffisante. De cette manière, si l'attribut lang est spécifié pour l'élément HTML avec la valeur "fr-CA", l'agent utilisateur devrait préférer les indications de style qui correspondent d'abord à "fr-CA", puis à la valeur plus générale "fr".

Remarque : Les hiérarchies de codes de langue ne garantissent pas que toutes les langues ayant un même préfixe seront comprises par ceux qui lisent couramment une ou plusieurs de ces langues. Elles permettent néanmoins à l'utilisateur de se prévaloir de cette parenté lorsque c'est le cas pour lui.

8.2 La spécification de la direction du texte et des tables : l'attribut dir

Définition de l'attribut

dir = LTR | RTL [CI]
Cet attribut spécifie la direction de base d'un texte neutre par rapport à la direction (i.e., un texte qui n'a pas de directionnalité inhérente telle qu'elle est définie dans la norme [UNICODE]) dans le contenu ou les valeurs d'attribut d'un élément. Il spécifie aussi la directionnalité des tables. Les valeurs possibles sont :
  • LTR : texte ou table allant de gauche à droite [ndt. left-to-right] ;
  • RTL : texte ou table allant de droite à gauche [ndt. right-to-left].

En plus de spécifier la langue d'un document avec l'attribut lang, les auteurs peuvent avoir besoin de spécifier la directionnalité de base (de gauche à droite ou de droite à gauche) de certaines parties du texte d'un document, de la structure d'une table, etc. Cela se fait avec l'attribut dir.

La spécification [UNICODE] attribue une directionnalité aux caractères et définit un algorithme (complexe) pour déterminer la directionnalité correcte d'un texte. Si un document ne contient pas de caractère affichable droite à gauche, l'agent utilisateur conforme n'est pas tenu d'appliquer l'algorithme bi-directionnel [UNICODE]. Si un document contient des caractères droite à gauche, et si l'agent utilisateur affiche ces caractères, l'agent utilisateur doit utiliser l'algorithme bi-directionnel.

Bien que la norme Unicode spécifie des caractères spéciaux qui concernent la direction du texte, HTML offre des structures de balisage de niveau supérieur qui font la même chose : l'attribut dir (à ne pas confondre avec l'élément DIR) et l'élément BDO. Ainsi, pour faire une citation en hébreu, il est plus intuitif d'écrire ceci :

<Q lang="he" dir="rtl">...une citation en hébreu...</Q>

que l'équivalent faisant appel à des caractères Unicode :

&#x202B;&#x05F4;...une citation en hébreu...&#x05F4;&#x202C;

Les agents utilisateurs ne doivent pas utiliser l'attribut lang pour déterminer la direction du texte.

L'attribut dir est hérité et il peut être surclassé. Veuillez consulter la section sur l'héritage des indications de direction du texte pour des précisions.

8.2.1 Introduction à l'algorithme bi-directionnel

L'exemple qui suit illustre le comportement attendu de l'algorithme bi-directionnel. Il met en jeu du français, une langue écrite de gauche à droite, et de l'hébreu, une langue écrite de droite à gauche.

Considérons l'exemple de texte suivant :

  français1 HÉBREU2 français3 HÉBREU4 français5 HÉBREU6

Les caractères de cet exemple (et de tous les exemples similaires) sont rangés dans l'ordinateur dans l'ordre où ils sont affichés ici : le premier caractère du fichier est "f", le deuxième est "r", et le dernier est "6".

Supposons que la langue prédominante du document contenant ce paragraphe soit le français. Cela signifie que la direction de base est de gauche à droite. La représentation correcte de cette ligne serait :

français1 2UERBÉH français3 4UERBÉH français5 6UERBÉH
          <------           <------           <------
             h                 h                 h
---------------------------------------------------->
                         f

Les lignes en pointillés indiquent la structure de la phrase : le français prédomine, et du texte en hébreu se trouve enchâssé. Obtenir la bonne représentation ne nécessite pas de balises supplémentaires puisque les passages en hébreu sont correctement inversés par les agents utilisateurs qui appliquent l'algorithme bi-directionnel.

Inversement, si la langue prédominante du document est l'hébreu, la direction de base est de droite à gauche. La représentation correcte est alors :

6UERBÉH français5 4UERBÉH français3 2UERBÉH français1
        -------->         -------->         -------->
            f                 f                 f
<----------------------------------------------------
                         h

Dans ce cas, la phase entière a été représentée allant de droite à gauche et les séquences enchâssées en français ont été correctement inversées par l'algorithme bi-directionnel.

8.2.2 L'héritage des indications de direction du texte

L'algorithme bi-directionnel Unicode exige une direction de base pour les blocs de texte. Pour spécifier la direction de base d'un élément de bloc, donnez une valeur à l'attribut dir de l'élément. La valeur par défaut de l'attribut dir est "ltr" (texte de gauche à droite).

Quand l'attribut dir est spécifié pour un élément de bloc, il reste valable tout au long de l'élément et pour tout élément de bloc emboîté. Une valeur donnée à l'attribut dir sur un élément emboîté a priorité sur la valeur héritée.

Pour spécifier la direction de base du texte dans tout un document, donnez une valeur à l'attribut dir sur l'élément HTML.

Par exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML dir="RTL">
<HEAD>
<TITLE>...un titre allant de droite à gauche...</TITLE>
</HEAD>
...texte allant de droite à gauche...
<P dir="ltr">...texte allant de gauche à droite...</P>
<P>...encore un texte de droite à gauche...</P>
</HTML>

Les éléments en-ligne, par contre, n'héritent pas de l'attribut dir. Cela signifie qu'un élément en-ligne, sans l'attribut dir, n'ouvre pas de niveau d'enchâssement supplémentaire, en ce qui concerne l'algorithme bi-directionnel. (Ici un élément est considéré comme étant de type bloc ou bien en-ligne en fonction de sa représentation par défaut. Remarquez que les éléments INS et DEL peuvent être de type bloc ou en-ligne, selon le contexte.)

8.2.3 L'établissement de la direction d'un texte enchâssé

L'algorithme bi-directionnel [UNICODE] inverse automatiquement les séquences de caractères enchâssées en fonction de leur directionnalité inhérente (comme l'illustrent les exemples précédents). Cependant, un seul niveau d'enchâssement peut généralement être pris en compte. Pour obtenir des niveaux supplémentaires de changements de direction enchâssés, vous devez faire usage de l'attribut dir sur un élément en-ligne.

Considérons le même exemple de texte que précédemment :

français1 HÉBREU2 français3 HÉBREU4 français5 HÉBREU6

Supposons que la langue prédominante du document contenant ce paragraphe soit le français. En outre, supposons que la phrase en français ci-dessus contienne un segment en hébreu, allant de « HÉBREU2 » à « HÉBREU4 », et que le segment en hébreu contienne à son tour une citation en français (« français3 »). La représentation désirée du texte est ainsi :

français1 4UERBÉH français3 2UERBÉH français5 6UERBÉH
                  -------->
                      F
          <------------------------
                      H
---------------------------------------------------->
                      F

Pour réaliser deux changements de direction enchâssés, on doit fournir des indications supplémentaires, ce que l'on fait en délimitant le second enchâssement de manière explicite. Dans cet exemple, on utilise l'élément SPAN et l'attribut dir pour baliser le texte :

français1 <SPAN dir="RTL">HÉBREU2 français3 HÉBREU4</SPAN> français5 HÉBREU6

Les auteurs peuvent aussi utiliser des caractères spéciaux Unicode pour réaliser ces multiples changements de direction enchâssés. Pour réaliser un enchâssement allant de gauche à droite, entourez le texte enchâssé des caractères « ENCHÂSSEMENT GAUCHE-À-DROITE » ("LRE", code 202A en hexadécimal) et « DÉPILEMENT DE FORMATAGE DIRECTIONNEL » ("PDF", code 202C en hexadécimal). Pour réaliser un enchâssement allant de droite à gauche, entourez le texte enchâssé des caractères « ENCHÂSSEMENT DROITE-À-GAUCHE » ("RLE", code 202B en hexadécimal) et « PDF ».

L'utilisation du balisage de directionnalité HTML avec des caractères Unicode. Les auteurs et les développeurs de logiciels d'édition doivent doivent garder à l'esprit que des conflits peuvent survenir si on utilise l'attribut dir sur des éléments en-ligne (y compris l'élément BDO) en même temps que les caractères de formatage [UNICODE] correspondants. On utilisera de préférence l'une ou l'autre méthode de manière exclusive. La méthode avec les balises offre une meilleure assurance d'intégrité structurelle des documents et allège certaines difficultés lorsqu'on prépare un texte HTML bi-directionnel avec un simple éditeur de texte, mais certains logiciels peuvent être plus aptes à utiliser les caractères [UNICODE]. Si les deux méthodes sont utilisées, on exercera le plus grand soin à imbriquer correctement le balisage et l'enchâssement ou inactivation directionnels, sinon les conséquences sur la restitution seront indéfinies.

8.2.4 L'inactivation de l'algorithme bi-directionnel : l'élément BDO

<!ELEMENT BDO - - (%inséré;)*          -- inactivation BiDi I18N -->
<!ATTLIST BDO
  %attrsdebase;                        -- id, class, style, title --
  lang        %CodeLangue;   #IMPLIED  -- code de langue --
  dir         (ltr|rtl)      #REQUIRED -- directionnalité --
  >

Balise ouvrante : obligatoire, Balise fermante : obligatoire

Définition des attributs

dir = LTR | RTL [CI]
Cet attribut obligatoire spécifie la direction de base du contenu textuel de l'élément. Cette direction prévaut sur la directionnalité inhérente des caractères, telle qu'elle est définie dans [UNICODE]. Les valeurs possibles sont :
  • LTR : texte allant de gauche à droite [ndt. left-to-right] ;
  • RTL : texte allant de droite à gauche [ndt. right-to-left].

Attributs définis ailleurs

  • lang (indications de langue)

L'algorithme bi-directionnel et l'attribut dir suffisent généralement à gérer les changements de direction enchâssés. Il peut toutefois se présenter des situations où l'application de l'algorithme bi-directionnel aboutit à une représentation incorrecte. L'élément BDO permet aux auteurs d'inactiver l'algorithme bi-directionnel sur des passages voulus du texte.

Considérons un document contenant le même texte que précédemment :

français1 HÉBREU2 français3 HÉBREU4 français5 HÉBREU6

Mais, supposons que ce texte ait déjà été rangé visuellement. Ceci peut-être parce que la norme MIME ([RFC2045], [RFC1556]) favorise le rangement visuel, i.e., que les séquences de caractères droite-à-gauche sont insérées de droite à gauche dans le flux d'octets. Dans un courrier électronique, ce qui précède pourrait être mis en forme, sauts de ligne compris, tel que :

français1 2UERBÉH français3
4UERBÉH français5 6UERBÉH

Ceci entre en conflit avec l'algorithme bi-directionnel [UNICODE], parce que l'algorithme inverserait « 2UERBÉH », « 4UERBÉH » et « 6UERBÉH » une seconde fois, affichant les mots en hébreu de gauche à droite au lieu de les afficher de droite à gauche.

La solution dans ce cas consiste à inactiver l'algorithme bi-directionnel en plaçant l'extrait de message dans un élément PRE (pour conserver les sauts de ligne) et chaque ligne dans un élément BDO dont l'attribut dir a la valeur "LTR" :

<PRE>
<BDO dir="LTR">français1 2UERBÉH français3</BDO>
<BDO dir="LTR">4UERBÉH français5 6UERBÉH</BDO>
</PRE>

Cette disposition dit à l'algorithme bi-directionnel : « Laisse-moi le gauche-à-droite ! », et produirait la représentation désirée,

français1 2UERBÉH français3
4UERBÉH français5 6UERBÉH

L'élément BDO devrait s'utiliser dans les cas de figure où un contrôle absolu sur l'ordre des séquences est nécessaire (par exemple, des numéros de pièces de rechange dans plusieurs langues). L'attribut dir est obligatoire pour cet élément.

Les auteurs peuvent aussi utiliser des caractères spéciaux Unicode pour inactiver l'algorithme bi-directionnel -- « FORÇAGE GAUCHE-À-DROITE » ("LRO", code 202D en hexadécimal) ou « FORÇAGE DROITE-À-GAUCHE » ("RLO", code 202E en hexadécimal). Le caractère de « DÉPILEMENT DE FORMATAGE DIRECTIONNEL » (POP, code 202C en hexadécimal) termine l'un et l'autre forçage bi-directionnel.

Remarque : Se souvenir que des conflits peuvent survenir si l'attribut dir est utilisé sur un élément en-ligne (y compris l'élément BDO) en même temps que sont utilisés les caractères de formatage [UNICODE] correspondants.

La bi-directionnalité et l'encodage des caractères. Selon les documents [RFC1555] et [RFC1556], il existe des conventions particulières pour l'utilisation des valeurs du paramètre « charset », pour indiquer le traitement bi-directionnel à appliquer dans un courrier au format MIME, notamment pour faire une distinction entre les directionnalités visuelle, implicite et explicite. La valeur "ISO-8859-8" (pour l'hébreu) désigne un encodage visuel, la valeur "ISO-8859-8-i" désigne une bi-directionnalité implicite, et "ISO-8859-8-e" une directionnalité explicite.

Comme HTML utilise l'algorithme bi-directionnel Unicode, les documents conformes utilisant l'encodage ISO 8859-8 doivent être étiquetés "ISO-8859-8-i". Un contrôle directionnel explicite est aussi possible avec HTML, mais il ne peut pas être exprimé avec l'encodage ISO 8859-8 et l'étiquette "ISO-8859-8-e" ne devrait donc pas être employée.

La valeur "ISO-8859-8" sous-entend que le document a une mise en forme visuelle, en détournant l'utilisation de certains balisages (tel qu'un élément TABLE avec un alignement à droite et sans saut de ligne) pour assurer un affichage convenable avec les agents utilisateurs plus anciens qui ne gèrent pas la bi-directionnalité. De tels documents ne sont pas conformes à la spécification présente. Au besoin, on peut les rendre conformes à la spécification actuelle (et ils s'afficheront correctement pour les agents utilisateurs plus anciens) en ajoutant la balise BDO, là où c'est nécessaire. Contrairement à ce qui est dit dans les documents [RFC1555] et [RFC1556], l'encodage ISO-8859-6 (pour l'arabe) n'est pas un agencement visuel.

8.2.5 Les références de caractères pour la directionnalité et le contrôle des ligatures

Étant donné que des ambiguïtés surviennent parfois, à propos de la directionnalité de certains caractères (par exemple la ponctuation), la spécification [UNICODE] comprend des caractères qui permettent leur résolution correcte. Unicode comprend également des caractères pour contrôler la conduite des ligatures quand cela est nécessaire (par exemple, dans certaines situations mettant en jeu des lettres arabes). HTML 4 inclut des références de caractères pour les appeler.

L'extrait de DTD suivant présente quelques-unes des entités directionnelles :

   <!ENTITY zwnj CDATA "&#8204;"-- = anti-liant sans chasse -->
   <!ENTITY zwj  CDATA "&#8205;"-- = liant sans chasse -->
   <!ENTITY lrm  CDATA "&#8206;"-- = marque de gauche à droite -->
   <!ENTITY rlm  CDATA "&#8207;"-- = marque de droite à gauche -->

L'entité « zwnj » [ndt. zero width non-joiner] s'utilise pour empêcher le comportement de ligature dans les contextes où une ligature aura lieu mais ne le devrait pas. L'entité « zwj » [ndt. zero width joiner] fait le contraire ; elle force la ligature là où elle ne se produirait pas mais le devrait. Par exemple, la lettre arabe « HÉ » s'utilise pour abréger « Hijri », le nom du calendrier islamique. Étant donné que la forme isolée de « HÉ » ressemble au chiffre cinq tel qu'il est employé dans l'écriture arabe (basée sur les chiffres indo-iraniens), on évite la confusion de « HÉ » avec le chiffre cinq final d'une année en utilisant plutôt la forme initiale de « HÉ ». Il n'existe toutefois pas de contexte qui suit (c'est-à-dire une lettre liée) auquel le « HÉ » puisse se rattacher pour prendre la forme désirée. C'est le caractère « zwj » qui fournit ce contexte.

De la même manière, il y a des cas dans les textes persans où une lettre, qui normalement se lierait à la lettre suivante par une liaison cursive, ne le devrait pas. Le caractère « zwnj » s'utilise à cette occasion pour empêcher la ligature.

Les autres caractères « lrm » [ndt. left-to-right mark] et « rlm » [ndt. right-to-left mark] s'utilisent pour forcer la directionnalité des caractères neutres par rapport à la direction. Par exemple, si des guillemets symétriques « " » se trouvent entre une lettre arabe (droite-à-gauche) et une lettre latine (gauche-à-droite), la direction des guillemets n'est pas claire (introduisent-ils une citation du texte arabe ou bien du texte latin ?). Les caractères « lrm » et « rlm » ont une propriété directionnelle mais n'ont aucune propriété de chasse ni de césure. Veuillez consulter [UNICODE] pour plus de précisions.

Les glyphes de caractères réfléchis. En général, l'algorithme bi-directionnel ne réfléchi pas les glyphes de caractères, et il les laisse inchangés. Certains caractères, telles les parenthèses (voir [UNICODE], tableau 4-7) font exception. Dans les cas où la réflexion est souhaitée, par exemple pour les hiéroglyphes égyptiens, le boustrophédon grec ou certains effets esthétiques, cela devrait se contrôler au moyen de styles.

8.2.6 L'effet des feuilles de style sur la bi-directionnalité

En général, l'utilisation des feuilles de style pour changer la restitution visuelle d'un élément d'un type bloc vers un type en-ligne, et vice versa, est simple. Néanmoins, comme l'algorithme bi-directionnel repose sur la distinction élément de bloc/élément en-ligne, il faut y faire particulièrement attention lors de la transformation.

Quand un élément en-ligne, qui n'a pas d'attribut dir, est transformé dans le style d'un élément bloc par une feuille de style, il hérite de l'attribut dir de son élément de bloc parent le plus proche pour définir la direction de base du nouveau bloc.

Quand un élément de bloc, qui n'a pas d'attribut dir, est transformé dans le style d'un élément en-ligne par une feuille de style, la représentation résultante devrait être équivalente, en termes de formatage bi-directionnel, à la mise en forme qui aurait été obtenue si on avait ajouté explicitement un attribut dir (ayant la valeur héritée) à l'élément transformé.


Les paragraphes, lignes et phrases

9 Le texte

Sommaire

  1. Les blancs
  2. Le texte structuré
    1. Les phrases : les éléments EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, ABBR, et ACRONYM
    2. Les citations : les éléments BLOCKQUOTE et Q
      • La restitution des citations
    3. Les indices et les exposants : les éléments SUB et SUP
  3. Les lignes et les paragraphes
    1. Les paragraphes : l'élément P
    2. Le contrôle des coupures de ligne
      • Forcer la coupure de ligne : l'élément BR
      • Interdire la coupure de ligne
    3. Les césures
    4. Les textes préformatés : l'élément PRE
    5. La restitution visuelle des paragraphes
  4. Les marques de révision : les éléments INS et DEL

Ce chapitre traite de la structuration du texte. Les éléments de présentation du texte (éléments d'alignement, de police, ..., les feuilles de style, etc.) sont abordés par ailleurs dans cette spécification. Pour avoir des informations sur les caractères, veuillez consulter la section sur le jeu de caractères du document.

9.1 Les blancs

Le jeu de caractères du document comprend une grande variété de caractères blancs [ndt. white space]. La plupart d'entre eux sont des éléments typographiques, qui sont utilisés dans certaines applications pour produire un effet particulier d'espacement visuel. En HTML, seuls les caractères suivants sont définis comme caractères blancs :

  • « espace » ASCII (&#x0020;)
  • « tabulation » ASCII (&#x0009;)
  • « saut de page » ASCII (&#x000C;)
  • « espace sans chasse » (&#x200B;)

La coupure de ligne est également un caractère blanc. Remarquez que, bien que les caractères « &#x2028; » et « &#x2029; » soient définis dans [ISO10646] pour couper respectivement, sans ambiguïté, les lignes et les paragraphes, ils ne sont pas considérés en HTML comme une coupure de ligne, et cette spécification ne les intègre donc pas dans la catégorie plus générale des caractères blancs.

Cette spécification n'indique pas le comportement, la restitution, ou tout autre chose, des caractères d'espacement autres que ceux explicitement identifiés ici comme blancs. Pour cette raison, les auteurs devraient utiliser les éléments et les styles appropriés afin d'obtenir les effets souhaités pour la présentation visuelle de leurs blancs, plutôt qu'une suite de caractères « espace ».

Pour tous les éléments HTML, à l'exception de l'élément PRE, des successions de blancs séparent les « mots » (le terme « mot » est utilisé ici pour indiquer une « une succession de caractères non-blancs »). Lors de la mise en forme du texte, les agents utilisateurs devraient identifier ces mots et les disposer en fonction des conventions d'écriture de la langue écrite (l'écriture) et du média visé en question.

Cette disposition peut nécessiter un espacement entre les mots (appelé espace-mot), mais les conventions pour l'espace-mot varient d'une écriture à l'autre. Ainsi, par exemple, dans les écritures latines, l'espace-mot est typiquement constitué d'un caractère « espace » ASCII (&#x0020;), alors que, dans l'écriture thaï, il s'agit d'un caractère « espace sans chasse » (&#x200B;). Enfin, en japonais ou en chinois, l'espace-mot n'est normalement pas restitué du tout.

Remarquez qu'une succession de blancs entre des mots, dans le document source, peut résulter en un espace-mot complètement différent à la restitution (sauf dans le cas de l'élément PRE). En particulier, les agents utilisateurs sont censés fusionner toute succession de blancs du document source lorsqu'ils produisent l'espace-mot de la restitution. Cela peut et devrait intervenir même en l'absence d'informations de langue (issues de l'attribut lang, ou du champs de l'en-tête HTTP "Content-Language" (voir [RFC2616], section 14.12), ou du paramétrage de l'agent utilisateur, etc.).

L'élément PRE est employé pour un texte préformaté, dans lequel les blancs sont significatifs.

Afin d'éviter les conflits avec les règles de coupure de ligne SGML et les éventuelles incohérences des implémentations existantes, les auteurs ne devraient pas compter sur les agents utilisateurs pour restituer les blancs placés juste après une balise ouvrante ou bien juste avant une balise fermante. Aussi, les auteurs, et particulièrement les outils d'édition, devraient écrire :

 <P>Nous offrons une <A>assistance technique</A> gratuite à nos adhérents.</P>

et non :

 <P>Nous offrons une<A> assistance technique </A>gratuite à nos adhérents.</P>

9.2 Le texte structuré

9.2.1 Les phrases : les éléments EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, ABBR et ACRONYM

<!ENTITY % phrase "EM
| STRONG
| DFN | CODE
| SAMP | KBD | VAR | CITE | ABBR | ACRONYM" >
<!ELEMENT (%fontstyle;|%phrase;) - - (%inline;)*>
<!ATTLIST (%fontstyle;|%phrase;)
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Balise ouvrante : obligatoire, balise fermante : obligatoire

Attributs définis ailleurs

  • id, class (identifiants internes au document)
  • lang (indications de langue), dir (direction du texte)
  • title (titre de l'élément)
  • style (information de style en-ligne)
  • onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (événements intrinsèques )

Les éléments de phrase ajoutent une information structurelle à des portions du texte. L'interprétation habituelle de ces éléments de phrase est la suivante :

EM :
Indique une mise en exergue.
STRONG :
Indique une mise en exergue plus forte.
CITE :
Contient un extrait ou une référence vers une autre source.
DFN :
Indique qu'il s'agit de l'instance définissante du terme englobé.
CODE :
Désigne un fragment de code informatique.
SAMP:
Désigne un exemple des sorties d'un programme, d'un script, etc.
KBD:
Indique un texte que doit saisir l'utilisateur.
VAR:
Indique l'instance d'une variable ou le paramètre d'un programme.
ABBR:
Indique une forme abrégée (par exemple, « WWW », « HTTP », « i.e. », etc.).
ACRONYM:
Indique un acronyme (par exemple, « radar », « LAN », etc.).

Les éléments EM et STRONG s'utilisent pour mettre en exergue une portion du texte. Les autres éléments de phrase ont une signification particulière pour un document dans un contexte technique. Ces exemples illustrent quelques-uns de ces éléments de phrase :

Comme le disait <CITE>le Général De GAULLE</CITE>,
<Q lang="fr">Je vous ai compris !</Q>

Pour plus d'informations, voir <CITE>[ISO-0000]</CITE>.

Veuillez désormais indiquer, dans toute correspondance,
la référence suivante: <STRONG>1-234-55</STRONG>

La présentation des éléments de phrase dépend de l'agent utilisateur. En général, les agents utilisateurs visuels présentent le texte de l'élément EM en italique et celui de l'élément STRONG en gras. Les agents utilisateurs vocaux, eux, devraient changer les paramètres de la synthèse vocale, tels que le volume, la hauteur ou le timbre.

Les éléments ABBR et ACRONYM permettent aux auteurs d'indiquer clairement les occurrences des abréviations et des acronymes. En effet, les langues occidentales ont une grande utilisation des acronymes comme « UFO », « ONU » et « bit », ainsi que des abréviations comme « Mme. », « SA » ou « etc. ». Le chinois et le japonais emploient tous deux des mécanismes d'abréviation analogues, selon lequel un nom long est désigné par la suite par un sous-ensemble des caractères Han qui le constituent. Le balisage de ces structures fournit une aide précieuse aux agents utilisateurs et aux outils tels que les vérificateurs d'orthographe, les synthétiseurs de parole, les systèmes de traduction automatique et les moteurs de recherche.

Le contenu des éléments ABBR et ACRONYM spécifient l'expression abrégée telle qu'elle apparaîtrait normalement dans le cours du texte. L'attribut title de ces éléments peut être utilisé pour donner la forme complète ou développée de l'expression.

Voici quelques exemples d'utilisation de l'élément ABBR :

  <P>
  <ABBR title="World Wide Web">WWW</ABBR>
  <ABBR lang="fr"
        title="Soci&eacute;t&eacute; Nationale des Chemins de Fer">
     SNCF
  </ABBR>
  <ABBR lang="es" title="Do&ntilde;a">Do&ntilde;a</ABBR>
  <ABBR lang="en" title="Abbreviation">abbr.</ABBR>

Remarquer que les abréviations et les acronymes ont souvent une prononciation idiosyncratique. Par exemple, alors que « CEE » et « URL » se prononcent typiquement lettre à lettre, « OTAN » et « UNESCO »" se prononcent phonétiquement. D'autre part, certaines formes abrégées (par exemple, URI et « SQL ») sont épelées par les uns et prononcées comme des mots par les autres. En cas de nécessité, les auteurs devraient utiliser les feuilles de style pour spécifier la prononciation d'une forme abrégée.

9.2.2 Les citations : les éléments BLOCKQUOTE et Q

<!ELEMENT BLOCKQUOTE - - (%block;|SCRIPT)+ -- citation longue -->
<!ATTLIST BLOCKQUOTE
  %attrs;                              -- %coreattrs, %i18n, %events --
  cite        %URI;          #IMPLIED  -- URI du document ou message sources --
  >
<!ELEMENT Q - - (%inline;)*            -- citation courte dans la ligne -->
<!ATTLIST Q
  %attrs;                              -- %coreattrs, %i18n, %events --
  cite        %URI;          #IMPLIED  -- URI du document ou message sources --
  >

Balise ouvrante : obligatoire, balise fermante : obligatoire

Définition de l'attribut

cite = uri [CT]
La valeur de cet attribut est l'URI qui désigne le document source ou le message. Cet attribut est destiné à fournir des informations sur l'origine de la citation.

Attributs définis ailleurs

  • id, class (identifiants internes au document)
  • lang (indications de langue), dir (direction du texte)
  • title (titre de l'élément)
  • style (information de style en-ligne)
  • onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (événements intrinsèques )

Ces deux éléments désignent une citation [ndt. quotation]. L'élément BLOCKQUOTE indique une citation longue (avec un contenu de type bloc) et l'élément Q est censé être utilisé pour des citations courtes (avec un contenu de type en-ligne) ne nécessitant pas un saut de paragraphe.

Cet exemple montre le formatage d'un extrait de « Les deux tours », de J.R.R. Tolkien, sous forme d'un bloc de citation :

<BLOCKQUOTE cite="http://www.mycom.com/tolkien/les%20deux%20tours.html">
<P>Ils allaient en file indienne, courant comme des limiers après un puissant fumet,
une lueur de convoitise dans leurs yeux. L'immense traînée des Orques en marche
traçait son vilain sillon presque droit vers l'ouest ; l'herbe douce du Rohan avait
été écrasée et noircie sur leur passage.<P>
</BLOCKQUOTE>

La restitution des citations

Les agents utilisateurs visuels restituent en général l'élément BLOCKQUOTE sous la forme d'un bloc de texte en retrait.

Les agents utilisateurs visuels doivent s'assurer que le contenu d'un élément Q soit restitué avec des marques de citation englobantes. Les auteurs ne devraient pas placer de marque de citation au début ni à la fin du contenu d'un élément Q.

Les agents utilisateurs devraient ajouter les marques de citation en fonction de la langue (voir l'attribut lang). Plusieurs langues adoptent des styles différents pour les marques de citation extérieures ou intérieures (imbriquées), ce que devrait respecter les agents utilisateurs.

Les exemples ci-dessous illustrent des citations imbriquées avec l'élément Q.

John said, <Q lang="en-us">I saw Lucy at lunch, she told me
<Q lang="en-us">Mary wants you
to get some ice cream on your way home.</Q> I think I will get
some at Ben and Jerry's, on Gloucester Road.</Q>

Dans la mesure où les deux citations sont en américain, les agents utilisateurs devraient les restituer convenablement, par exemple en rajoutant des guillemets simples autour de la citation intérieure et des guillemets doubles autour de la citation extérieure :

  John said, "I saw Lucy at lunch, she told me 'Mary wants you
  to get some ice cream on your way home.' I think I will get some
  at Ben and Jerry's, on Gloucester Road."

Remarque : Nous recommandons que les implémentations de feuilles de style fournisse un moyen d'ajouter des marques de citation avant et après une citation encadrée par l'élément BLOCKQUOTE, d'une manière appropriée au contexte de langue courant et au degré d'imbrication des citations.

Toutefois, comme certains auteurs n'ont simplement utilisé l'élément BLOCKQUOTE que pour obtenir un texte en retrait, les agents utilisateurs ne devraient pas ajouter de marques de citation en style par défaut, afin de préserver les intentions de ces auteurs.

L'utilisation de l'élément BLOCKQUOTE pour obtenir le retrait d'un texte est déconseillée en faveur de l'utilisation de feuilles de style.

9.2.3 Les indices et les exposants : les éléments SUB et SUP

<!ELEMENT (SUB|SUP) - - (%inline;)*    -- indice, exposant -->
<!ATTLIST (SUB|SUP)
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Balise ouvrante : obligatoire, balise fermante : obligatoire

Attributs définis ailleurs

  • id, class (identifiants internes au document)
  • lang (indications de langue), dir (direction du texte)
  • title (titre de l'élément)
  • style (information de style en-ligne)
  • onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (événements intrinsèques)

Plusieurs écritures (par exemple, le français) requièrent une écriture en lettres supérieures ou en lettres inférieures pour leur restitution correcte. On devrait baliser les textes en lettres inférieures avec l'élément SUB et ceux en lettres supérieures avec SUP.

      H<sub>2</sub>O
      E = mc<sup>2</sup>
      <SPAN lang="fr">M<sup>lle</sup> Dupont</SPAN>

9.3 Les lignes et les paragraphes

Les auteurs découpent habituellement leurs idées et leurs arguments en paragraphes successifs. Cette organisation des informations en paragraphes n'est pas touchée par la manière dont les paragraphes sont présentés : le contenu du paragraphe, qu'il soit entièrement justifié ou seulement justifié à gauche, est toujours le même.

Le balisage HTML qui définit un paragraphe est clair : l'élément P contient un paragraphe.

La représentation visuelle des paragraphes n'est pas si simple. Un certain nombre d'aspects doivent être pris en compte, à la fois esth&eacutetiques et techniques :

  • la gestion des blancs ;
  • les coupures de ligne et les retours à la ligne ;
  • la justification ;
  • les césures ;
  • les conventions typographiques des langues écrites et leur directionnalité ;
  • la mise en forme des paragraphes en fonction de leur environnement.

Ces questions sont traitées ici. L'alignement des paragraphes et les objets flottants seront abordés plus loin dans ce document.

9.3.1 Les paragraphes : l'élément P

<!ELEMENT P - O (%inline;)*            -- paragraphe -->
<!ATTLIST P
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Balise ouvrante : obligatoire, balise fermante : optionnelle

Attributs définis ailleurs

  • id, class (identifiants internes au document)
  • lang (indications de langue), dir (direction du texte)
  • title (titre de l'élément)
  • style (information de style en-ligne)
  • align (alignement)
  • onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (événements intrinsèques )

L'élément P correspond à un paragraphe. Il ne peut pas contenir d'éléments de type bloc (même pas un autre élément P).

On déconseille vivement aux auteurs d'utiliser des éléments P vides. Les agents utilisateurs devraient ignorer de tels éléments P vides.

9.3.2 Le contrôle des coupures de ligne

On définit une coupure de ligne comme étant un « retour chariot (CR) &#x000D; », un « saut de ligne (LF) &#x000A; » ou la paire des deux (CRLF). Toutes les coupures de ligne sont des des caractères blancs.

Pour plus d'informations sur la spécification des coupures de ligne SGML, veuillez consulter les remarques sur les sauts de ligne en annexe.

Forcer la coupure de ligne : l'élément BR

<!ELEMENT BR - O EMPTY                 -- coupure de ligne forcée -->
<!ATTLIST BR
  %coreattrs;                          -- id, class, style, title --
  >

Balise ouvrante : obligatoire, balise fermante : interdite

Attributs définis ailleurs

  • id, class (identifiants internes au document)
  • title (titre de l'élément)
  • style (information de style en-ligne)
  • clear (alignement et objets flottants)

L'élément BR coupe (interrompt) la ligne de texte courante.

Pour les agents utilisateurs visuels, l'attribut clear peut s'utiliser pour déterminer si le balisage, qui suit l'élément BR, s'écoule autour des images et des autres objets qui flottent à la marge gauche ou bien droite, ou si le balisage commence en-dessous de tels objets. La section sur l'alignement et les objets flottants donnent plus de détails. Les auteurs sont invités à utiliser les feuilles de style pour contrôler l'écoulement du texte autour des images et autres objets flottants.

En rapport avec la mise en forme bi-directionnelle, l'élément BR devrait avoir le même comportement que le caractère « SÉPARATEUR DE LIGNES (&#2028) » [ISO10646] dans l'algorithme bi-directionnel.

Interdire la coupure de ligne

Parfois, les auteurs peuvent vouloir empêcher qu'une coupure de ligne n'intervienne entre deux mots. L'entité &nbsp; (&#160; ou &#xA0;) agit comme un espace insécable, où les agents utilisateurs ne devraient pas effectuer une coupure de ligne.

9.3.3 Les césures

En HTML, il existe deux types de tiret : le tiret simple [ndt. plein hyphen], insécable, et le tiret conditionnel [ndt. soft hyphen], sécable. Le tiret simple devrait être considéré par les agents utilisateurs comme un caractère comme les autres. Le tiret conditionnel indique à l'agent utilisateur l'endroit où peut se produire une coupure de ligne.

Les agents utilisateurs qui gèrent les tirets conditionnels doivent observer les règles sémantiques suivantes : si le texte se coupe sur un tiret conditionnel, le tiret doit être affiché à la fin de la ligne coupée et si le texte ne se coupe pas sur un tiret conditionnel, alors le tiret ne doit pas s'afficher du tout. En outre, le tiret conditionnel doit être ignoré lors des opérations de recherche et de tri.

En HTML, le tiret simple est spécifié par le caractère « - » (&#45; ou &#x2D;) et le tiret conditionnel par le caractère correspondant à l'entité « &shy; » (&#173; ou &#xAD;)

9.3.4 Les textes préformatés : l'élément PRE

<!ENTITY % pre.exclusion "IMG|OBJECT|BIG|SMALL|SUB|SUP">

<!ELEMENT PRE - - (%inline;)* -(%pre.exclusion;) -- texte préformaté -->
<!ATTLIST PRE
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Balise ouvrante : obligatoire, balise fermante : obligatoire

Définition de l'attribut

width = nombre [CN]
Déconseillé. Cet attribut donne une indication aux agents utilisateurs visuels sur la largeur désirée pour le bloc formaté. L'agent utilisateur peut exploiter cette information pour choisir une taille de police adéquate ou pour indenter le contenu de manière appropriée. La largeur désirée est exprimée en nombre de caractères. Cet attribut est rarement reconnu à l'heure actuelle.

Attributs définis ailleurs

  • id, class (identifiants internes au document)
  • lang (indications de langue), dir (direction du texte)
  • title (titre de l'élément)
  • style (information de style en-ligne)
  • onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (événements intrinsèques )

L'élément PRE indique aux agents utilisateurs visuels que le texte qu'il contient est « préformaté ». Lors de la gestion d'un texte préformaté, l'agent utilisateur visuel :

  • peut laisser les blancs intacts ;
  • peut restituer le texte avec une police à chasse fixe [ndt. fixed pitch font] ;
  • peut désactiver les retours à la ligne automatiques ;
  • ne doit pas désactiver le traitement bidirectionnel.

Les agents utilisateurs non visuels ne sont pas obligés de respecter les blancs du contenu de l'élément PRE.

Pour plus d'informations sur la spécification des coupures de ligne SGML, veuillez consulter les remarques sur les coupures de ligne en annexe.

Le fragment de DTD ci-dessus indique les éléments qui ne peuvent pas apparaître dans la déclaration d'un élément PRE. C'est la même chose que pour HTML 3.2, l'objectif étant de garder constant l'interlignage et l'alignement des colonnes d'un texte dans une police à chasse fixe. Les auteurs sont incités à ne pas altérer ce comportement au moyen des feuilles de style.

Les exemples ci-dessous montrent les vers préformatés du poème de Shelly : To a Skylark

<PRE>
       Higher still and higher
         From the earth thou springest
       Like a cloud of fire;
         The blue deep thou wingest,
And singing still dost soar, and soaring ever singest.
</PRE>

Voici la restitution qui devrait typiquement en être faite :

       Higher still and higher
         From the earth thou springest
       Like a cloud of fire;
         The blue deep thou wingest,
And singing still dost soar, and soaring ever singest.

Le caractère de tabulation horizontale
Le caractère « tabulation horizontale » (code 9 en décimal dans [ISO10646] et [ISO88591]) est habituellement interprété par les agents utilisateurs comme le plus petit nombre non nul de caractères « espace » nécessaires pour atteindre le prochain taquet de tabulation, ces taquets de tabulation étant placés dans la ligne tous les 8 caractères. L'utilisation de ce caractère de tabulation horizontale est fortement déconseillé, dans la mesure où l'espacement des taquets de tabulation est couramment modifié au cours de l'édition du document, ce qui conduirait à des ruptures d'alignement lors de l'affichage de ce document.

9.3.5 La restitution visuelle des paragraphes

Remarque : Cette section est une description informative de la conduite de certains agents utilisateurs visuels courants lors de la restitution des paragraphes. Les feuilles de style permettent un contrôle plus fin de cette restitution.

La manière dont sont restitués visuellement les paragraphes dépend de l'agent utilisateur. Les paragraphes sont habituellement restitués avec leurs lignes alignées à gauche et leurs marges droites non justifiées. Et inversement, pour les écritures de droite à gauche.

Les agents utilisateurs HTML restituent traditionnellement les paragraphes avec un espacement avant et un après, par exemple :

  At the same time, there began to take form a system of numbering,
  the calendar, hieroglyphic writing, and a technically advanced
  art, all of which later influenced other peoples.

  Within the framework of this gradual evolution or cultural
  progress the Preclassic horizon has been divided into Lower,
  Middle and Upper periods, to which can be added a transitional
  or Protoclassic period with several features that would later
  distinguish the emerging civilizations of Mesoamerica.

Cela contraste avec la présentation habituelle des romans qui utilise, d'une part, un alinéa pour la première ligne du paragraphe et, d'autre part, un espacement entre deux paragraphes successifs, égal à l'interligne normale, comme suit :

     At the same time, there began to take form a system of
  numbering, the calendar, hieroglyphic writing, and a technically
  advanced art, all of which later influenced other peoples.
     Within the framework of this gradual evolution or cultural
  progress the Preclassic horizon has been divided into Lower,
  Middle and Upper periods, to which can be added a transitional
  or Protoclassic period with several features that would later
  distinguish the emerging civilizations of Mesoamerica.

Suivant en cela le précédent établi par le navigateur Mosaic du NCSA apparu en 1993, les agents utilisateurs n'effectuent pas en général une justification sur les deux bords, en partie parce que c'est difficile à réaliser sans une gestion complexe des césures. L'avènement des feuilles de style et l'anti-crénelage [ndt. antialiased] des polices, permettant un positionnement au fraction de pixel, promettent d'offrir une plus grande palette de choix aux auteurs de documents HTML.

Les feuilles de style offrent un contrôle fin des types et des tailles des polices, des marges, des espacements avant et après chaque paragraphe, du retrait de la première ligne, de la justification et nombre d'autres détails. L'agent utilisateur, par le biais de sa feuille de style par défaut, restitue les éléments P d'une manière familière, comme indiqué ci-dessus. On pourrait en principe outrepasser cette mise en forme afin de restituer, par exemple, les paragraphes successifs sans les coupures conventionnelles qui les distinguent. Comme cela peut perturber le lecteur, nous n'encourageons pas cette pratique.

Par convention, les agents utilisateurs visuels HTML ajustent la longueur des lignes de texte pour que celles-ci tiennent à l'intérieur des marges disponibles. Les algorithme de coupure des ligne dépendent de l'écriture qui est mise en forme.

Pour les écritures occidentales, par exemple, le texte ne devrait se couper qu'aux blancs. Les premiers agents utilisateurs coupaient le texte juste après la balise ouvrante ou juste avant la balise fermante d'un élément, ce qui occasionnait une ponctuation aberrante. Par exemple, prenons la phrase suivante :

   Une statue de <A href="cih78">Cihuateteus</A>, qui est le patron de...

la coupure de la ligne juste avant la balise fermante de l'élément A fait que la virgule est renvoyée au début de la ligne suivante :

  Une statue de Cihuateteus
  , qui est le patron de...

Cela constitue bien une erreur, car il n'existe aucun blanc entre l'élément A et la virgule.

9.4 Les marques de révision : les éléments INS et DEL

<!-- INS/DEL sont gérés par inclusion dans BODY -->
<!ELEMENT (INS|DEL) - - (%flow;)*      -- texte inseré, texte supprimé -->
<!ATTLIST (INS|DEL)
  %attrs;                              -- %coreattrs, %i18n, %events --
  cite        %URI;          #IMPLIED  -- information ou raison de la modification --
  datetime    %Datetime;     #IMPLIED  -- date et heure de la modification --
  >

Balise ouvrante : obligatoire, balise fermante : obligatoire

Définition des attributs

cite = uri [CT]
La valeur de cet attribut est un URI qui pointe sur un document source, ou un message, qui est censé fournir l'information expliquant la raison de la modification apportée.
datetime = datetime [CS]
La valeur de cet attribut spécifie la date et l'heure de la modification.

Attributs définis ailleurs

  • id, class (identifiants internes au document)
  • lang (indications de langue), dir (direction du texte)
  • title (titre de l'élément)
  • style (information de style en-ligne)
  • onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (événements intrinsèques )

Les éléments INS et DEL sont utilisés pour marquer les parties d'un document qui ont été insérées ou supprimées, afin de suivre l'évolution des versions de ce document (par exemple, dans les projets de loi, les législateurs doivent pouvoir suivre les modifications apportées).

Ces deux éléments ne sont pas courants en HTML, dans la mesure où ils sont utilisés soit en mode bloc, soit en mode en-ligne, mais pas les deux à la fois. Ainsi, ils peuvent soit englober un ou plusieurs mots d'un paragraphe, soit un ou plusieurs éléments de type bloc comme les paragraphes, les listes et les tables.

L'exemple ci-dessous montre la modification d'un projet de loi portant à « 5 » au lieu de « 3 » le nombre de suppléants qu'un shérif de comté peut employer.

<P>
  Un shérif peut employer <DEL>3</DEL><INS>5</INS> suppléants.
</P>

L'élément INS et DEL ne doivent pas inclure de contenu de type bloc lorsqu'ils sont utilisés comme éléments en-ligne.

EXEMPLE ILLÉGAL :
L'exemple suivant n'est pas valide pour HTML.

<P>
<INS><DIV>...contenu de type bloc...</DIV></INS>
</P>

Les agents utilisateurs devraient restituer les textes insérés et supprimés de manière à faire apparaître les modifications évidentes. Par exemple, les insertions pourraient apparaître dans une police particulière et les suppressions pourraient ne pas apparaître du tout, ou être affichées barrées ou bien avec des marques spéciales, etc.

Les deux exemples ci-dessous correspondent à des modifications qui ont été apportées le 5 novembre 1994 à 08:15:30 (du matin), au Canada (c'est-à-dire. GMT-5).

     1994-11-05T13:15:30Z
     1994-11-05T08:15:30-05:00

Couplé à l'élément INS, cela donnerait :

<INS datetime="1994-11-05T08:15:30-05:00"
        cite="http://www.fictif.org/mondoc/commentaires.html">
En outre, les derniers chiffres de la direction commerciale
suggèrent que ces pratiques sont en augmentation.
</INS>

Le document "http://www.fictif.org/mondoc/commentaires.html" contiendra les commentaires explicitant cette insertion dans le document.

Les auteurs peuvent également intégrer leurs commentaires dans le document, au moyen de l'attribut title des éléments INS et DEL. Les agents utilisateurs peuvent présenter cette information à l'utilisateur (par exemple, par le biais d'une infobulle). Ainsi :

<INS datetime="1994-11-05T08:15:30-05:00"
        title="Changé suite aux remarques de Steve B. durant la réunion.">
En outre, les derniers chiffres de la direction commerciale
suggèrent que ces pratiques sont en augmentation.
</INS>


Les listes dans les documents HTML

10 Les listes

Sommaire

  1. Introduction aux listes
  2. Les listes non-ordonnées (UL), les listes ordonnées (OL) et les items de liste (LI)
  3. Les listes de définitions : les éléments DL, DT et DD
    1. La restitution visuelle des listes
  4. Les éléments DIR et MENU

10.1 Introduction aux listes

HTML offre aux auteurs plusieurs moyens pour établir des listes d'informations. Toutes les listes doivent contenir un élément de liste ou plus. Celles-ci peuvent présenter :
  • des informations non-ordonnées ;
  • des informations ordonnées ;
  • des définitions.

Par exemple, cette liste qui précède est une liste non-ordonnée qui a été crée à l'aide de l'élément UL :

<UL>
<LI>des informations non-ordonn&eacute;es ;
<LI>des informations ordonn&eacute;es ;
<LI>des d&eacute;finitions.
</UL>

La liste ordonnée, qui est créée à l'aide de l'élément OL, devrait contenir des informations dont l'ordonnancement revêt une certaine importance, comme dans une recette de cuisine :

  1. Mélanger tous les ingrédients secs ;
  2. Y verser les ingrédients humides ;
  3. Remuer pendant 10 minutes ;
  4. Cuire pendant 1 heure dans un four à 300 degrés.

La liste de définitions, qui est créée à l'aide de l'élément DL, consiste généralement en une succession de couples terme/définition (même si les listes peuvent avoir d'autres usages). Ainsi, on pourrait utiliser une liste de définitions pour la publicité d'un produit :

Un coût moindre
La nouvelle version de ce produit coûte infiniment moins que la précédente !
Encore plus facile à utiliser
Nous avons apporté des modifications au produit qui facilitent à l'extrême son utilisation !
Sans danger pour les petits
Vous pouvez laisser vos enfants dans une pièce, seuls avec ce produit, et ils ne se blesseront pas (sans garantie toutefois).

une liste qui serait définie en HTML par :

<DL>
<DT><STRONG>Un co&ucirc;t moindre</STRONG>
<DD>La nouvelle version de ce produit co&ucirc;te infiniment moins
que la pr&eacute;c&eacute;dente !
<DT><STRONG>Encore plus facile &agrave; utiliser</STRONG>
<DD>Nous avons apport&eacute; des modifications au produit
qui facilitent &agrave; l'extr&ecirc;me son utilisation !
<DT><STRONG>Sans danger pour les petits</STRONG>
<DD>Vous pouvez laisser vos enfants dans une pi&egrave;ce,
seuls avec ce produit, et ils ne se blesseront pas (sans garantie toutefois).
</DL>

On peut également imbriquer les listes et les utiliser ensemble, comme dans l'exemple suivant qui montre une liste de définitions contenant une liste non-ordonnée (les ingrédients) et une liste ordonnée (la marche à suivre) :

Les ingrédients :
  • 100 g de farine
  • 10 g de sucre
  • 1 tasse d'eau
  • 2 œufs
  • sel, poivre
La marche à suivre :
  1. Mélanger tous les ingrédients secs ;
  2. Y verser les ingrédients humides ;
  3. Remuer pendant 10 minutes ;
  4. Cuire pendant 1 heure dans un four à 300 degrés.
Remarques :
On peut varier la recette en y rajoutant des raisins secs.

La présentation exacte des trois listes dépend de l'agent utilisateur. Nous décourageons les auteurs d'utiliser les listes simplement comme un moyen pour placer le texte en retrait. C'est une affaire de style qui est du ressort des feuilles de style.

10.2 Les listes non-ordonnées (UL), les listes ordonnées (OL) et les items de liste (LI)

<!ELEMENT UL - - (LI)+                 -- liste non-ordonnée -->
<!ATTLIST UL
  %attrs;                              -- %coreattrs, %i18n, %events --
  >
<!ELEMENT OL - - (LI)+                 -- liste ordonnée -->
<!ATTLIST OL
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Balise ouvrante : obligatoire, balise fermante : obligatoire

<!ELEMENT LI - O (%flow;)*             -- item de liste -->
<!ATTLIST LI
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Balise ouvrante : obligatoire, balise fermante : optionnelle

Définition des attributs

type = indication-de-style [CI]
Déconseillé. Cet attribut fixe le style d'un item de liste. Les valeurs disponibles actuellement sont destinées aux agents utilisateurs visuels. Les valeurs possibles sont décrites ci-dessous (avec leur information de casse).
start = nombre [CN]
Déconseillé. Seulement pour l'élément OL. Cet attribut spécifie le numéro initial du premier item dans une liste ordonnée. Le numéro initial par défaut est "1". Remarquez, tandis que la valeur de cet attribut est un entier, que le label correspondant peut ne pas être numérique. Ainsi, quand l'item de liste a un style de lettres latines en majuscule (A, B, C, ...), la déclaration « start=3 » signifie « C ». Quand l'item a un style de chiffres romains en minuscules, la déclaration « start=3 » signifie « iii », etc.
value = nombre [CN]
Déconseillé. Seulement pour l'élément LI. Cet attribut fixe le numéro de l'item de liste courant. Remarquez, tandis que la valeur de cet attribut est un entier, que le label correspondant peut être non-numérique. (voir l'attribut start).
compact [CI]
Déconseillé. Quand il est spécifié, cet attribut booléen indique aux agents utilisateurs de restituer la liste de manière plus compacte. L'interprétation de cet attribut dépend de l'agent utilisateur.

Attributs définis ailleurs

  • id, class (identifiants internes au document)
  • lang (indications de langue), dir (direction du texte)
  • title (titre de l'élément)
  • style (information de style en-ligne)
  • onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (événements intrinsèques)

Les listes ordonnées et non-ordonnées sont restituées de manière identique, à l'exception de la numérotation des items des listes ordonnées par les agents utilisateurs visuels. Les agents utilisateurs peuvent présenter ces numéros de diverses façons. Les listes non-ordonnées ne sont pas numérotées.

Les deux types de liste sont constitués de séquences d'items de liste définis par l'élément LI (dont on peut omettre la balise fermante).

Cet exemple illustre la structure de base d'une liste.

<UL>
   <LI> ... premier item de liste...
   <LI> ... deuxième item de liste...
   ...
</UL>

Les listes peuvent aussi s'imbriquer :

EXEMPLE DÉCONSEILLÉ :

<UL>
     <LI> ... niveau 1, numéro 1...
     <OL>
        <LI> ... niveau 2, numéro 1...
        <LI> ... niveau 2, numéro 2...
        <OL start="10">
           <LI> ... niveau 3, numéro 10...
        </OL>
        <LI> ... niveau 2, numéro 1...
     </OL>
     <LI> ... niveau 1, numéro 2...
</UL>

Détails sur l'ordre des numéros. Dans une liste ordonnée, il n'est pas possible de poursuivre automatiquement la numérotation de la liste à partir d'une liste précédente ou encore de cacher les numéros de certains items de liste particuliers. Cependant, les auteurs peuvent réinitialiser le numéro d'un item de liste en spécifiant son attribut value. La numérotation des items suivants se poursuit alors à partir de la nouvelle valeur. Par exemple :

<ol>
<li value="30"> cet item de liste a le numéro 30.
<li value="40"> cet item de liste a le numéro 40.
<li> cet item de liste a le numéro 41.
</ol>

10.3 Les listes de définitions : les éléments DL, DT et DD

<!-- liste de définitions - DT pour le terme, DD pour sa définition -->

<!ELEMENT DL - - (DT|DD)+              -- liste de définitions -->
<!ATTLIST DL
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Balise ouvrante : obligatoire, balise fermante : obligatoire

<!ELEMENT DT - O (%inline;)*           -- terme de définition -->
<!ELEMENT DD - O (%flow;)*             -- description de définition -->
<!ATTLIST (DT|DD)
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Balise ouvrante : obligatoire, balise fermante : optionnelle

Attributs définis ailleurs

  • id, class (identifiants internes au document)
  • lang (indications de langue), dir (direction du texte)
  • title (titre de l'élément)
  • style (information de style en-ligne)
  • onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (événements intrinsèques)

Les listes de définitions varient seulement de manière minime par rapport aux autres types de liste dans la mesure où les items de liste consistent en deux parties : un terme et une description. Le terme est donné par l'élément DT et se restreint à un contenu de type en-ligne. La description est donnée par un élément DD qui porte un contenu de type bloc..

En voici un exemple :

<DL>
  <DT>Dweeb
  <DD>Une jeune personne &eacute;motive qui peut &eacute;voluer
    en <EM>nerd</EM> ou en <EM>geek</EM>

  <DT>Hacker
  <DD>Un programmeur f&ucirc;t&eacute;

  <DT>Nerd
  <DD>Une personne techniquement brillante mais socialement inepte

</DL>

Voici un exemple avec des termes et descriptions multiples :

<DL>
   <DT>Centre
   <DT>Centre
   <DD> Un point &eacute;quidistant de tous les poinst
              &agrave; la surface d'une sph&egrave;re.
   <DD> Dans certains sports de champs, le joueur qui
              occupe la position centrale sur le terrain,
              le court ou la ligne centrale.
</DL>

Une autre application de l'élément DL serait, par exemple, pour le marquage d'un dialogue, chacun des éléments DT nommant un personnage et chacun des éléments DD en contenant les paroles.

10.3.1 La restitution visuelle des listes

Remarque : Ce qui suit représente la description informative des comportements de mise en forme des listes par certains agents utilisateurs visuels. Les feuilles de styles apportent un meilleur contrôle de la mise en forme des listes (par exemple, pour la numérotation, les conventions en rapport avec la langue, l'indentation, etc.).

Les agents utilisateurs visuels place généralement en retrait les listes imbriquées en fonction du niveau d'imbrication courant.

Pour les deux éléments OL et UL, l'attribut type indique les options de restitution aux agents utilisateurs visuels.

Pour l'élément UL, les valeurs possibles de l'attribut type sont "disc", "square" et "circle". La valeur par défaut dépend de la profondeur d'imbrication de la liste courante. Ces valeurs sont insensibles à la casse.

La façon dont chacune des valeurs est représentée dépend de l'agent utilisateur. Ceux-ci devraient essayer de représenter la valeur "disc" par un petit cercle plein, la valeur "circle" par le contour d'un petit cercle et "square" par le contour d'un petit carré.

Un agent utilisateur graphique pourrait les représenter comme ceci :

Restitution possible pour 'disc' pour la valeur "disc"
Restitution possible pour 'circle' pour la valeur "circle"
Restitution possible pour 'square' pour la valeur "square"

Pour l'élément OL, les valeurs possibles de l'attribut type sont résumées dans le tableau ci-dessous (les valeurs sont sensibles à la casse) :

Type | Style de numérotation
1 | en chiffres arabes | 1, 2, 3, ...
a | alphabétique en minuscules | a, b, c, ...
A | alphabétique en majuscules | A, B, C, ...
i | en chiffres romains minuscules | i, ii, iii, ...
I | en chiffres romains majuscules | I, II, III, ...

Remarquez que l'attribut type est déconseillé et que les styles des listes devraient être contrôlés par les feuilles de style.

Par exemple, en utilisant CSS, on peut spécifier que le style des numéros des items de liste devrait être en chiffres romains minuscules. Dans l'extrait suivant, chaque élément OL appartenant à la classe "romains" présentera des chiffres romains devant ses items de liste.

<STYLE type="text/css">
OL.romains { list-style-type: lower-roman;}
</STYLE>
<BODY>
<OL class="romains">
<LI> Numéro 1...
<LI> Numéro 2...
</OL>
</BODY>

La restitution d'une liste de définitions dépend également de l'agent utilisateur. Ainsi, l'exemple :

<DL>
  <DT>Dweeb
  <DD>Une jeune personne &eacute;motive qui peut &eacute;voluer
    en un <EM>nerd</EM> ou un <EM>geek</EM>

  <DT>Hacker
  <DD>Un programmeur f&ucirc;t&eacute;

  <DT>Nerd
  <DD>Une personne techniquement brillante, mais socialement inepte
</DL>

celui-ci pourrait être restitué par :

Dweeb
       Une jeune personne émotive qui pourrait évoluer en nerd ou en geek
Hacker
       Un programmeur fûté
Nerd
       Une personne techniquement brillante, mais socialement inepte

10.4 Les éléments DIR et MENU

Les éléments DIR et MENU sont déconseillés.

Voir le DTD transitoire pour leur définition formelle.

Attributs définis ailleurs

  • id, class (identifiants internes au document)
  • lang (indications de langue), dir (direction du texte)
  • title (titre de l'élément)
  • style (information de style en-ligne)
  • onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (événements intrinsèques)

L'élément DIR était conçu pour la création de listes de répertoires multicolonnes. L'élément MENU était conçu pour les listes de menu sur une seule colonne. Les deux éléments ont la même structure que l'élément UL, seule leur restitution diffère. En pratique, l'agent utilisateur restituera une liste DIR, ou MENU, exactement comme une liste UL.

Nous recommandons fortement d'utiliser l'élément UL à leur place.


Les tables dans les documents HTML

11 Les tables

Sommaire

  1. Introduction aux tables
  2. Les éléments de construction des tables
    1. L'élément TABLE
      • La directionnalité de la table
    2. La légende de la table : l'élément CAPTION
    3. Les regroupements de rangées : les éléments THEAD, TFOOT et TBODY
    4. Les regroupements de colonnes : les éléments COLGROUP et COL
      • L'élément COLGROUP
      • L'élément COL
      • Le calcul du nombre de colonnes dans une table
      • Le calcul de la largeur des colonnes
    5. Les rangées de la table : l'élément TR
    6. Les cellules de la table : les éléments TH et TD
      • Les cellules qui occupent plusieurs rangées ou colonnes
  3. La mise en forme de la table par les agents utilisateurs visuels
    1. Les bordures et les règles
    2. L'alignement horizontal et vertical
      • L'héritage des spécifications d'alignement
    3. Les marges des cellules
  4. La restitution de la table par les agents utilisateurs non-visuels
    1. L'association des indications de rubrique aux cellules de données
    2. La catégorisation des cellules
    3. L'algorithme pour obtenir les indications de rubrique
  5. Un exemple de table

11.1 Introduction aux tables

Le modèle de la table de HTML permet aux auteurs d'arranger des données (texte, texte préformaté, images, liens, formulaires, champs de formulaires, autres tables, etc.) en rangées et colonnes de cellules.

Chaque table peut avoir une légende propre (voir l'élément CAPTION) qui fournit une brève description de l'objet de la table. On peut également fournir une description plus longue (via l'attribut summary), au bénéfice des personnes qui utilisent des agents utilisateurs gérant la synthèse de parole et l'écriture Braille.

On peut regrouper les rangées de la table dans des sections d'en-tête, de pied et de corps (via les éléments THEAD, TFOOT et TBODY, respectivement). Les regroupements de rangées apportent des informations de structure supplémentaires, qui peuvent être utilisées par les agents utilisateurs pour souligner cette structure. Les agents utilisateurs peuvent exploiter le découpage en-tête/corps/pied de telle sorte que le corps puisse défiler indépendamment des sections d'en-tête et de pied. Pour l'impression d'une longue table, les informations d'en-tête et de pied peuvent être répétées sur chacune des pages qui contiennent les données de la table.

Les auteurs peuvent également regrouper les colonnes pour apporter des informations structurelles supplémentaires qui peuvent être exploitées par les agents utilisateurs. En outre, les auteurs peuvent déclarer des propriétés de colonne au début de la définition de la table (via les éléments COLGROUP et COL) de sorte que les agents utilisateurs puissent restituer progressivement la table au lieu de devoir attendre que toutes les données de la table soient arrivées avant de pouvoir les restituer.

Les cellules de la table peuvent contenir soit des informations « de rubrique » (voir l'élément TH), soit des informations « de données » (voir l'élément TD). Les cellules peuvent occuper plusieurs rangées et colonnes. Le modèle de la table HTML 4 permet aux auteurs l'étiquetage de chaque cellule de sorte que les agents utilisateurs non-visuels puissent communiquer plus facilement à l'utilisateur les indications de rubrique concernant la cellule. Ce mécanisme apporte non seulement une grande assistance aux personnes qui ont des déficiences visuelles, mais donne aussi aux navigateurs sans fil multimodes, avec des capacités d'affichage limitées (par exemple, les téléavertisseurs et les téléphones utilisant le Web), la possibilité de gérer les tables.

Les tables ne devraient pas représenter simplement un moyen de disposer le contenu d'un document car cela peut entraîner des problèmes de restitution sur les médias non-visuels. En outre, quand on les utilise avec des graphiques, ces tables peuvent forcer l'utilisateur à effectuer un défilement horizontal pour voir une table qui aura été conçue sur un système avec une surface d'affichage plus grande. Afin de minimiser ces problèmes, les auteurs devraient employer des feuilles de style pour le contrôle de la disposition plutôt que des tables.

Remarque : Cette spécification comprend des informations plus détaillées au sujet des tables dans les sections sur les justifications de conception des tables et les problèmes pour leur implémentation.

Voici une table simple qui montre certaines des caractéristiques du modèle de la table de HTML. Soit la définition de table suivante :

<TABLE border="1"
          summary="Cette table donne quelques statistiques sur les
                   drosophiles : hauteur et poids moyens, et le
                   pourcentage de celles ayant des yeux rouges
                   (pour les m&acirc;les et les femelles).">
<CAPTION><EM>Une table test avec des cellules fusionn&eacute;es</EM></CAPTION>
<TR><TH rowspan="2"><TH colspan="2">Moyenne
    <TH rowspan="2">Yeux<BR>rouges
<TR><TH>hauteur<TH>poids
<TR><TH>M&acirc;les<TD>1.9<TD>0.003<TD>40%
<TR><TH>Femelles<TD>1.7<TD>0.002<TD>43%
</TABLE>

celle-ci pourrait être restituée par un téléimprimeur [ndt. tty device] comme ceci :

     Une table test avec des cellules fusionnées
    /-----------------------------------------\
    |          |      Moyenne      |   Yeux   |
    |          |-------------------|  rouges  |
    |          | hauteur |  poids  |          |
    |-----------------------------------------|
    | Mâles    | 1.9     | 0.003   |   40%    |
    |-----------------------------------------|
    | Femelles | 1.7     | 0.002   |   43%    |
    \-----------------------------------------/

ou comme cela par un agent utilisateur graphique :

Une table avec des cellules fusionnées

11.2 Les éléments de construction des tables

11.2.1 L'élément TABLE

<!ELEMENT TABLE - -
     (CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)>
<!ATTLIST TABLE                        -- élément table --
  %attrs;                              -- %coreattrs, %i18n, %events --
  summary     %Text;         #IMPLIED  -- objectif/structure pour sortie sonore --
  width       %Length;       #IMPLIED  -- largeur de la table --
  border      %Pixels;       #IMPLIED  -- épaisseur du cadre autour de la table --
  frame       %TFrame;       #IMPLIED  -- quelles parties de ce cadre restituer --
  rules       %TRules;       #IMPLIED  -- règles entre rangées et colonnes --
  cellspacing %Length;       #IMPLIED  -- espacement entre les cellules --
  cellpadding %Length;       #IMPLIED  -- retrait dans les cellules --
  >

Balise ouvrante : obligatoire, balise fermante : obligatoire

Définition des attributs

summary = texte [CS]
Cet attribut fournit un résumé de l'objet et de la structure de la table pour les agents utilisateurs qui opèrent une restitution sur des médias non-visuels, tels que les syntétiseurs de parole et les lecteurs Braille.
align = left|center|right [CI]
Déconseillé. Cet attribut spécifie la position de la table par rapport au document. Les valeurs admises sont :
  • left : la table est sur la gauche du document.
  • center : la table est au centre du document.
  • right : la table est sur la droite du document.
width = longueur [CN]
Cet attribut spécifie la largeur souhaitée pour la table entière et il se destine aux agents utilisateurs visuels. Quand la valeur est un pourcentage, elle est relative à l'espace horizontal disponible pour l'agent utilisateur. En l'absence de toute indication de largeur de table, celle-ci est déterminée par l'agent utilisateur.

Attributs définis ailleurs

  • id, class (identifiants internes au document)
  • lang (indications de langue), dir (direction du texte)
  • title (titre de l'élément)
  • style (information de style en-ligne)
  • onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (événements intrinsèques)
  • bgcolor (couleur d'arrière-plan)
  • frame, rules, border (bordures et règles)
  • cellspacing, cellpadding (marges des cellules)

L'élément TABLE contient tous les autres éléments qui spécifient la légende, les rangées, le contenu et la mise en forme.

La liste informative suivante décrit les opérations que l'agent utilisateur peut être amené à réaliser lors de la restitution d'une table :

  • Restituer le sommaire dans l'attribut summary disponible à l'utilisateur. Les auteurs devraient fournir le sommaire du contenu et de la structure de la table, de sorte que les personnes utilisant des agents utilisateurs non-visuels puissent mieux la comprendre ;
  • Restituer la légende, le cas échéant ;
  • Restituer l'en-tête de la table, le cas échéant. Restituer le pied de la table, le cas échéant. Les agents utilisateurs doivent savoir où restituer l'en-tête et le pied. Par exemple, s'il s'agit d'un média paginé en sortie, les agents utilisateurs peuvent placer l'en-tête en haut de chaque page, et le pied en bas de chacune d'elles. De la même manière, si l'agent utilisateur fournit un mécanisme pour faire défiler les rangées, l'en-tête peut apparaître en haut de la zone qui a défilé et le pied en bas de celle-ci ;
  • Calculer le nombre de colonnes dans la table. Remarquez que le nombre de rangées dans une table est égal au nombre d'éléments TR contenus par l'élément TABLE ;
  • Regrouper les colonnes en fonction des éventuelles spécifications de groupe de colonnes ;
  • Restituer les cellules, rangée par rangée et regroupées dans les colonnes appropriées, entre l'en-tête et le pied. Les agents utilisateurs devraient formater la table en fonction des attributs HTML et des spécifications de la feuille de style.

Le modèle de table HTML a été conçu de telle sorte que les agents utilisateurs, avec l'assistance de l'auteur, puissent restituer les tables progressivement (i.e., au fur et à mesure que les rangées arrivent) plutôt que de devoir attendre la totalité des données avant de commencer la restitution.

Afin que l'agent utilisateur puisse formater une table en une seule passe, les auteurs doivent indiquer à l'agent utilisateur :

  • Le nombre de colonnes dans la table. Veuillez consulter la section sur le calcul du nombre de colonnes dans une table pour le détail sur la manière de fournir cette information ;
  • Les largeurs de ces colonnes. Veuillez consulter la sections sur le calcul de la largeur des colonnes pour le détail sur la manière de fournir cette information.

Plus précisément, l'agent utilisateur peut restituer une table en une seule passe quand les largeurs de colonne sont spécifiées à l'aide d'une combinaison d'éléments COLGROUP et COL. Si éventuellement l'une des colonnes est spécifiée en termes relatif ou de pourcentage (voir la section sur le calcul de la largeur des colonnes), l'auteur doit aussi spécifier la largeur de la table en question.

La directionnalité de la table

La directionnalité d'une table est soit celle qui est héritée (par défaut, elle est de gauche à droite), soit celle qui est spécifiée par l'attribut dir de l'élément TABLE.

Pour une table de gauche-à-droite, la colonne zéro se trouve sur le côté gauche et la rangée zéro se trouve en haut. Pour une table de droite-à-gauche, la colonne zéro se trouve sur le côté droit et la rangée zéro en haut.

Quand l'agent utilisateur alloue des cellules supplémentaires à une rangée (voir la section sur le calcul du nombre de colonnes dans une table), ces cellules supplémentaires se rajoutent à la droite de la table, pour les tables de gauche-à-droite, et à la gauche de la table, pour les tables de droite-à-gauche.

Remarquer que l'élément TABLE est le seul sur qui l'attribut dir inverse l'ordre visuel des colonnes ; une rangée de table (TR) ou un groupe de colonnes (COLGROUP) seuls ne peuvent pas être inversés indépendamment.

Quand il est spécifié pour l'élément TABLE, l'attribut dir affecte aussi la direction du texte à l'intérieur des cellules de la table (puisque l'attribut dir est hérité par les éléments de type bloc).

Pour spécifier une table de droite-à-gauche, fixer la valeur de l'attribut dir comme suit :

<TABLE dir="RTL">
...le reste de la table...
</TABLE>

On peut changer la direction du texte dans une cellule individuelle en spécifiant l'attribut dir dans l'élément qui définit la cellule. Veuillez consulter la section sur le texte bi-directionnel pour plus d'informations sur les questions liées à la direction du texte.

11.2.2 La légende de la table : l'élément CAPTION

<!ELEMENT CAPTION  - - (%inline;)*     -- légende de la table -->

<!ATTLIST CAPTION
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Balise ouvrante : obligatoire, balise fermante : obligatoire

Définition des attributs

align = top|bottom|left|right [CI]
Déconseillé. Pour les agents utilisateurs visuels, cet attribut spécifie la position de la légende par rapport à la table. Les valeurs possibles sont :
  • top : la légende est en haut de la table. C'est la valeur par défaut
  • bottom : la légende est en bas de la table
  • left : la légende est à gauche de la table
  • right : la légende est à droite de la table.

Attributs définis ailleurs

  • id, class (identifiants internes au document)
  • lang (indications de langue), dir (direction du texte)
  • title (titre de l'élément)
  • style (information de style en-ligne)
  • onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (événements intrinsèques)

Quand l'élément CAPTION est présent, son texte devrait décrire la nature de la table. L'élément CAPTION n'est autorisé qu'immédiatement après la balise ouvrante de l'élément TABLE. L'élément TABLE ne peut contenir qu'un seul élément CAPTION.

Les agents utilisateurs visuels permettent aux personnes voyantes d'embrasser rapidement la structure de la table à partir des en-têtes et de la légende. Par conséquent, les légendes seront souvent inadaptées pour le résumé de l'objet et de la structure de la table du point de vue des personnes qui dépendent d'agents utilisateurs non-visuels.

Les auteurs devraient prendre soin de fournir des informations supplémentaires, qui résument l'objet et la structure de la table, en utilisant l'attribut summary de l'élément TABLE. Ceci est particulièrement important pour les tables dépourvues de légende. Les exemples ci-dessous illustrent l'utilisation de l'attribut summary.

Les agents utilisateurs visuels devraient éviter le rognage de toute partie de la table qui contient la légende, à moins de fournir un moyen pour accéder à toutes les parties de la table, par exemple par défilement horizontal ou vertical. Nous recommandons que le texte de la légende soit coupé à la même largeur que celle de la table. (Voir également la section sur les algorithmes de disposition recommandés.)

11.2.3 Les regroupements de rangées : les éléments THEAD, TFOOT et TBODY

<!ELEMENT THEAD    - O (TR)+           -- en-tête de la table -->
<!ELEMENT TFOOT    - O (TR)+           -- pied de la table -->

Balise ouvrante : obligatoire, balise fermante : optionnelle

<!ELEMENT TBODY    O O (TR)+           -- corps de la table -->

Balise ouvrante : optional, balise fermante : optionnelle

<!ATTLIST (THEAD|TBODY|TFOOT)          -- section de table --
  %attrs;                              -- %coreattrs, %i18n, %events --
  %cellhalign;                         -- alignement horizontal dans les cellules --
  %cellvalign;                         -- alignement vertical dans les cellules --
  >

Attributs définis ailleurs

  • id, class (identifiants internes au document)
  • lang (indications de langue), dir (direction du texte)
  • title (titre de l'élément)
  • style (information de style en-ligne)
  • onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (événements intrinsèques)
  • align, char, charoff, valign (alignement des cellules)

Les rangées de la table peuvent être regroupées dans une section en-tête de la table, une section pied de la table, et une ou plusieurs sections corps de table, en utilisant respectivement les éléments THEAD, TFOOT et TBODY. Cette organisation permet aux agents utilisateurs de gérer le défilement des corps de la table, indépendamment de l'en-tête et du pied de la table. Pour l'impression d'une longue table, les informations placées dans l'en-tête et le pied de la table peuvent se répéter sur chacune des pages contenant les données de la table.

L'en-tête et le pied de la table devraient contenir des informations sur les colonnes de la table. Le corps de la table devrait contenir les rangées des données de la table.

Quand ils sont présents, chaque élément THEAD, TFOOT et TBODY contient un groupe de rangées. Chaque groupe de rangées doit contenir au moins une rangée, qui est définie par l'élément TR.

Cet exemple illustre l'ordre et la structure des en-têtes, pieds et corps des tables.

<TABLE>
<THEAD>
     <TR> ...informations d'en-tête...
</THEAD>
<TFOOT>
     <TR> ...informations de pied...
</TFOOT>
<TBODY>
     <TR> ...première rangée des données du bloc 1...
     <TR> ...seconde rangée des données du bloc 1...
</TBODY>
<TBODY>
     <TR> ...première rangée des données du bloc 2...
     <TR> ...deuxième rangée des données du bloc 2...
     <TR> ...troisième rangée des données du bloc 2...
</TBODY>
</TABLE>

L'élément TFOOT doit survenir avant un élément TBODY dans une définition d'élément TABLE, de sorte que les agents utilisateurs puissent restituer le pied avant de recevoir toutes les rangées de données (éventuellement nombreuses). Le résumé suivant indique les balises qui sont obligatoires et celles qui peuvent être omises :

  • la balise ouvrante de l'élément TBODY est toujours requise, sauf quand la table n'est formée que d'un seul corps et n'a aucune section d'en-tête ni de pied. La balise fermante de TBODY peut toujours être omise en toute sécurité
  • les balises ouvrantes des éléments THEAD et TFOOT sont requises quand les sections d'en-tête et de pied sont respectivement présentes, mais les balises fermantes qui leur correspondent peuvent toujours être omises en toute sécurité.

Les moteurs d'analyse des agents utilisateurs doivent obéir à ces règles pour des raisons de rétro-compatibilité.

La table de l'exemple précédent pourrait être élaguées en supprimant certaines balises fermantes, comme :

<TABLE>
<THEAD>
     <TR> ...informations d'en-tête...
<TFOOT>
     <TR> ...informations de pied...
<TBODY>
     <TR> ...première rangée des données du bloc 1...
     <TR> ...seconde rangée des données du bloc 2...
<TBODY>
     <TR> ...première rangée des données du bloc 2...
     <TR> ...deuxième rangée des données du bloc 2...
     <TR> ...troisième rangée des données du bloc 2...
</TABLE>

Les sections THEAD, TFOOT et TBODY doivent contenir le même nombre de colonnes.

11.2.4 Les regroupements de colonnes : les éléments COLGROUP et COL

Les groupes de colonnes permettent aux auteurs de créer des divisions structurelles à l'intérieur d'une table. Les auteurs peuvent mettre en évidence cette structure au travers des feuilles de styles ou des attributs HTML (par exemple, l'attribut rules pour l'élément TABLE). Comme exemple de présentation visuelle des groupes de colonnes, veuillez consulter l'exemple de table.

Une table peut contenir soit un seul groupe de colonnes implicite (aucun élément COLGROUP ne délimite les colonnes), soit un certain nombre de groupes de colonnes explicites (chacun étant délimité par une instance de l'élément COLGROUP).

L'élément COL permet aux auteurs de partager des attributs entre plusieurs colonnes, sans faire appel à un regroupement structurel. L'« étendue » de l'élément COL est représentée par le nombre de colonnes qui vont partager les attributs de l'élément.

L'élément COLGROUP

<!ELEMENT COLGROUP - O (COL)*          -- groupe de colonnes de table -->
<!ATTLIST COLGROUP
  %attrs;                              -- %coreattrs, %i18n, %events --
  span        NUMBER         1         -- nombre de colonnes par défaut dans un groupe --
  width       %MultiLength;  #IMPLIED  -- largeur par défaut des COL englbés --
  %cellhalign;                         -- alignement horizontal dans les cellules --
  %cellvalign;                         -- alignement vertical dans les cellules --
  >

Balise ouvrante : obligatoire, balise fermante : optionnelle

Définition des attributs

span = nombre [CN]
Cet attribut, qui doit être un entier supérieur à 0, spécifie le nombre des colonnes dans un groupe de colonnes. Les valeurs ont la signification suivante :
  • en l'absence de l'attribut span, chaque élément COLGROUP définit un groupe de colonnes contenant une seule colonne ;
  • si la valeur spécifiée pour l'attribut span est un entier « N » supérieur à 0, l'élément COLGROUP courant définit un groupe de colonnes qui contient « N » colonnes.

Les agents utilisateurs doivent ignorer cet attribut si l'élément COLGROUP contient un ou plusieurs éléments COL.

width = longueur-multiple [CN]

Cet attribut spécifie la largeur par défaut de chaque colonne dans le groupe de colonnes courant. En plus des valeurs en pixels, des valeurs en pourcentage et des valeurs relatives normales, cet attribut admet la forme spéciale "0*" (zéro et astérisque) qui signifie que la largeur de chaque colonne dans le groupe devrait être celle minimale pour tenir le contenu de la colonne. Ceci implique que le contenu entier d'une colonne doit être connu avant que la largeur de celle-ci puisse être calculé exactement. Les auteurs devraient être conscients que la spécification de la valeur "0*" va empêcher l'agent utilisateur de restituer la table progressivement.

Cet attribut est outrepassé pour toute colonne dans le groupe de colonnes dont l'attribut width est spécifié au travers d'un élément COL.

Attributs définis ailleurs

  • id, class (identifiants internes au document)
  • lang (indications de langue), dir (direction du texte)
  • title (titre de l'élément)
  • style (information de style en-ligne)
  • onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (événements intrinsèques)
  • align, char, charoff, valign (alignement des cellules)

L'élément COLGROUP crée un groupe de colonne explicite. On peut spécifier le nombre de colonnes dans le groupe de colonnes de deux façons, qui s'excluent mutuellement :

  1. l'attribut span de l'élément (valeur par défaut "1") spécifie le nombre de colonnes dans le groupe ;
  2. chaque élément COL dans l'élément COLGROUP représente une ou plusieurs colonnes dans le groupe.

L'avantage de l'utilisation de l'attribut span, c'est que les auteurs peuvent regrouper les informations concernant les largeurs de colonne. Ainsi, si une table contient quarante colonnes, chacune d'elles ayant une largeur de 20 pixels, il est plus facile d'écrire :

   <COLGROUP span="40" width="20">
   </COLGROUP>

plutôt que :

   <COLGROUP>
      <COL width="20">
      <COL width="20">
      ...jusqu'à totaliser 40 éléments COL...
   </COLGROUP>

Quand il est nécessaire d'isoler une colonne (par exemple, pour une information de style, pour spécifier une information de largeur, etc.) au sein d'un groupe, les auteurs doivent identifier cette colonne avec un élément COL. Ainsi, pour appliquer une information de style particulière à la dernière colonne de la table précédente, on l'isole de cette manière :

   <COLGROUP width="20">
      <COL span="39">
      <COL id="mise-en-forme-particuliere">
   </COLGROUP>

L'attribut width de l'élément COLGROUP est hérité par la totalité des 40 colonnes. Le premier élément COL se rapporte aux 39 premières colonnes (sans rien de particulier pour elles) et le second assigne une valeur à l'attribut id pour la quarantième colonne, de sorte qu'une feuille de style puisse s'y appliquer.

La table dans l'exemple suivant contient deux groupes de colonnes. Le premier groupe de colonnes contient 10 colonnes et le second 5 colonnes. La largeur par défaut de chaque colonne du premier groupe de colonnes est de 50 pixels. La largeur de chaque colonne dans le second groupe sera celle minimale qui est requise pour cette colonne en question.

<TABLE>
<COLGROUP span="10" width="50">
<COLGROUP span="5" width="0*">
<THEAD>
<TR><TD> ...
</TABLE>

L'élément COL

<!ELEMENT COL      - O EMPTY           -- colonne de table -->
<!ATTLIST COL                          -- groupes et propriétés de colonnes --
  %attrs;                              -- %coreattrs, %i18n, %events --
  span        NUMBER         1         -- les attributs de COL affectent N colonnes --
  width       %MultiLength;  #IMPLIED  -- spécification de largeur de la colonne --
  %cellhalign;                         -- alignement horizontal dans les cellules --
  %cellvalign;                         -- alignement vertical dans les cellules --
  >

Balise ouvrante : obligatoire, balise fermante : interdite

Définition des attributs

span = nombre [CN]
Cet attribut, dont la valeur doit être un entier supérieur à 0, spécifie le nombre de colonnes « couvertes » par l'élément COL ; l'élément COL partage ses attributs avec toutes les colonnes qu'il couvre. La valeur par défaut de cet attribut est "1" (i.e., l'élément COL se rapporte à une seule colonne. Si la valeur « N » spécifiée pour l'attribut span est supérieure à "1", l'élément COL courant partage ses attributs avec les « N-1 » colonnes suivantes.
width = longueur-multiple [CN]
Cet attribut spécifie une largeur par défaut pour chacune des colonnes couvertes par l'élément COL courant. Il a la même signification que l'attribut width pour l'élément COLGROUP et le surclasse.

Attributs définis ailleurs

  • id, class (identifiants internes au document)
  • lang (indications de langue), dir (direction du texte)
  • title (titre de l'élément)
  • style (information de style en-ligne)
  • onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (événements intrinsèques)
  • align, char, charoff, valign (alignement des cellules)

L'élément COL permet aux auteurs de rassembler les spécifications d'attributs pour les colonnes de la table. L'élément COL ne rassemble pas les colonnes de manière structurelle (c'est le rôle de l'élément COLGROUP). Les éléments COL sont vides et ne servent que de support pour les attributs. Ils peuvent apparaître à l'intérieur comme à l'extérieur d'un groupe de colonnes explicite (i.e., l'élément COLGROUP).

L'attribut width de l'élément COL se rapporte à la largeur de chacune des colonnes dans la couverture de l'élément.

Le calcul du nombre de colonnes dans une table

Il y a deux moyens pour déterminer le nombre de colonnes dans une table (par ordre de priorité) :

  1. si l'élément TABLE contient des éléments COLGROUP ou COL, les agents utilisateurs devraient calculer le nombre de colonnes en opérant l'addition suivante :
    • pour chaque élément COL, prendre la valeur de son attribut span (la valeur par défaut est "1") ;
    • pour chaque élément COLGROUP contenant au moins un élément COL, ignorer l'attribut span de l'élément COLGROUP. Pour chaque élément COL, effectuer les calculs de l'étape 1 ;
    • pour chaque élément COLGROUP vide, prendre la valeur de son attribut span (la valeur par défaut étant "1").
  2. sinon, quand l'élément TABLE ne contient aucun élément COLGROUP ou COL, les agents utilisateurs devraient baser le nombre de colonnes sur ce qui est requis par les rangées. Le nombre de colonnes est égal au nombre de colonnes requises par la rangée ayant le plus de colonnes, y compris les cellules qui couvrent plusieurs colonnes. Pour toutes celles des rangées qui ont un nombre de colonnes moindre, elles devraient être garnies de cellules vides en fin de rangée. La « fin » d'une rangée dépend de la directionnalité de la table.

Quand une table contient des éléments COLGROUP ou COL et quand les deux types de calcul n'aboutissent pas au même nombre de colonnes, alors cela entraîne une erreur.

Une fois que l'agent utilisateur a calculé le nombre de colonnes dans la table, il peut les regrouper en groupes de colonnes.

Par exemple, pour chacune des tables suivantes, les deux méthodes de calcul devraient résulter en trois colonnes. La restitution des deux premières tables peut être progressive.

<TABLE>
<COLGROUP span="3"></COLGROUP>
<TR><TD> ...
...rangées...
</TABLE>

<TABLE>
<COLGROUP>
<COL>
<COL span="2">
</COLGROUP>
<TR><TD> ...
...rangées...
</TABLE>

<TABLE>
<COLGROUP>
<COL>
</COLGROUP>
<COLGROUP span="2">
<TR><TD> ...
...rangées...
</TABLE>

<TABLE>
<TR>
  <TD><TD><TD>
</TR>
</TABLE>

Le calcul de la largeur des colonnes

Les auteurs peuvent spécifier les largeurs des colonnes de trois façons :

Fixe
Une spécification de largeur fixe est donnée en pixels (par exemple, width="30"). La spécification de largeur fixe permet une restitution progressive.
Pourcentage
Une spécification en pourcentage (par exemple, width="20%") se fonde sur le pourcentage d'espace horizontal disponible pour la table (entre les marges courantes gauche et droite, y compris les flottants). Remarquez que cet espace ne dépend pas de la table en elle-même et la spécification en pourcentage permet donc une restitution progressive.
Proportionnelle
Une spécification proportionnelle (par exemple, width="3*") se rapporte aux portions d'espace horizontal requis par une table. Si la largeur de table reçoit une valeur fixe, via l'attribut width de l'élément TABLE les agents utilisateur peuvent restituer la table de manière progressive en même avec des colonnes proportionnelles.

Cependant, si la table n'a pas une largeur fixe, les agents utilisateurs doivent attendre d'avoir reçu toutes les données de table avant de pouvoir déterminer l'espace horizontal requis par la table. Alors seulement cet espace sera alloué aux colonnes proportionnelles.

Si l'auteur ne spécifie aucune information de largeur pour une colonne, l'agent utilisateur peut se trouver dans l'incapacité de formater progressivement la table, puisqu'il doit attendre l'arrivée de la totalité des données de la colonne pour allouer une largeur adéquate.

S'il apparaît que les largeurs des colonnes soient trop étroites pour le contenu d'une cellule de table particulière, l'agent utilisateur peut choisir de rafraîchir la table.

La table dans cet exemple contient six colonnes. La première colonne n'appartient à aucun groupe de colonnes explicite. Les trois suivantes appartiennent au premier groupe de colonnes explicite et les deux dernières au second groupe de colonnes explicite. Cette table ne peut pas faire l'objet d'un formatage progressif puisqu'elle contient des spécifications de largeur de colonne proportionnelles et n'a pas de valeur pour l'attribut width de l'élément TABLE.

Une fois que l'agent utilisateur (visuel) a reçu les données de la table, l'espace horizontal disponible sera alloué par l'agent utilisateur comme ceci : premièrement, l'agent utilisateur allouera 30 pixels aux colonnes 1 et 2 ; puis l'espace minimal requis pour la colonne 3 sera réservé ; l'espace horizontal restant sera divisé en six parts égales (puisque 2* + 1* + 3* = 6 parts) ; la colonne 4 (2*) recevra deux de ces parts, la colonne 5 (1*) une part et la colonne 6 (3*) trois parts.

<TABLE>
<COLGROUP>
   <COL width="30">
<COLGROUP>
   <COL width="30">
   <COL width="0*">
   <COL width="2*">
<COLGROUP align="center">
   <COL width="1*">
   <COL width="3*" align="char" char=":">
<THEAD>
<TR><TD> ...
...rangées...
</TABLE>

Nous avons fixé la valeur de l'attribut align à "center", dans le troisième groupe de colonnes. Toutes les cellules dans chacune des colonnes de ce groupe hériteront de cet attribut, mais pourront le surclasser. En fait, c'est l'élément COL final qui effectue ce surclassement, en spécifiant que chaque cellule, dans la colonne qu'il régit, soient alignées sur le caractère deux-points « : ».

Dans la table suivante, les spécifications de largeur de colonne permettent à l'agent utilisateur de formater progressivement la table :

<TABLE width="200">
<COLGROUP span="10" width="15">
<COLGROUP width="*">
   <COL id="avant-derniere-colonne">
   <COL id="derniere-colonne">
<THEAD>
<TR><TD> ...
...rangées...
</TABLE>

Les dix premières colonnes feront 15 pixels de large. Les deux dernières colonnes recevront chacune la moitié des 50 pixels restants. Remarquer que les éléments COL apparaissent seulement pour qu'on puisse spécifier un attribut id aux deux dernières colonnes.

Remarque : Même si l'attribut width sur l'élément TABLE n'est pas déconseillé, on encourage les auteurs à employer des feuilles de style pour spécifier la largeur des tables.

11.2.5 Les rangées de la table : l'élément TR

<!ELEMENT TR       - O (TH|TD)+        -- rangée de table -->
<!ATTLIST TR                           -- rangée de table --
  %attrs;                              -- %coreattrs, %i18n, %events --
  %cellhalign;                         -- alignement horizontal dans les cellules --
  %cellvalign;                         -- alignement vertical dans les cellules --
  >

Balise ouvrante : obligatoire, balise fermante : optionnelle

Attributs définis ailleurs

  • id, class (identifiants internes au document)
  • lang (indications de langue), dir (direction du texte)
  • title (titre de l'élément)
  • style (information de style en-ligne)
  • onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (événements intrinsèques)
  • bgcolor (couleur d'arrière-plan)
  • align, char, charoff, valign (alignement des cellules)

L'élément TR se comporte comme un conteneur pour une rangée de cellules de la table. La balise fermante peut être omise.

Cet exemple de table montre trois rangées, chacune commençant par un élément TR :

<TABLE summary="Cette table repr&eacute;sente le nombre de tasses de caf&eacute;
                consomm&eacute;es par chaque s&eacute;nateur,
                le type de caf&eacute; (d&eacute;caff&eacute;in&eacute; ou normal),
                et s'il est sucr&eacute; ou non.">
<CAPTION>Les tasses de caf&eacute; consomm&eacute;es par chaque s&eacute;nateur</CAPTION>
<TR> ...Une rangée en-tête...
<TR> ...Première rangée de données...
<TR> ...Deuxième rangée de données...
...le reste de la table table...
</TABLE>

11.2.6 Les cellules de la table : les éléments TH et TD

<!ELEMENT (TH|TD)  - O (%flow;)*       -- cellule de rubrique TH, cellule de données TD-->

<!-- La portée (scope) est plus simple que l'attribut headers des tables courantes -->
<!ENTITY % Scope "(row|col|rowgroup|colgroup)">

<!-- TH pour l'en-tête, TD pour les données,
        mais pour les cellules ayant les deux rôles utiliser TD -->
<!ATTLIST (TH|TD)                      -- cellule de rubrique ou de données --
  %attrs;                              -- %coreattrs, %i18n, %events --
  abbr        %Text;         #IMPLIED  -- abréviation pour une cellule de rubrique --
  axis        CDATA          #IMPLIED  -- liste de rubriques relatives séparées par virgules--
  headers     IDREFS         #IMPLIED  -- liste d'id pour les cellules de rubrique --
  scope       %Scope;        #IMPLIED  -- portée couverte par les cellules de rubrique --
  rowspan     NUMBER         1         -- nombre de rangées couvertes par la cellule --
  colspan     NUMBER         1         -- nombre de colonnes couvertes par la cellule --
  %cellhalign;                         -- alignement horizontal dans les cellules --
  %cellvalign;                         -- alignement vertical dans les cellules --
  >

Balise ouvrante : obligatoire, balise fermante : optionnelle

Définition des attributs

headers = idrefs [CS]
Cet attribut spécifie la liste des cellules de rubrique qui fournissent des indications de rubrique à la cellule de donnée courante. La valeur de cet attribut est une liste de noms de cellules, séparés par des espaces ; ces cellules doivent être nommées en fixant une valeur pour leur attribut id. En général, les auteurs utilisent l'attribut headers pour assister les agents utilisateurs non-visuels dans leur restitution des indications de rubrique concernant les cellules de données (par exemple, les indications de rubrique sont dites avant la cellule de données), mais on peut tout aussi bien utiliser l'attribut conjointement aux feuilles de style. Voir également l'attribut scope.
scope = nom-de-portée [CI]
Cet attribut spécifie le jeu de cellules de données pour lequel la cellule de rubrique courante fournit des indications de rubrique. On peut utiliser cet attribut à la place de l'attribut headers, notamment pour les tables simples. Quand il est spécifié, cet attribut doit avoir l'une des valeurs suivantes :
  • row : la cellule courante fournit les indications de rubrique pour le restant de la rangée qui la contient (voir également la section sur la directionnalité de la table) ;
  • col : la cellule courante fournit les indications de rubrique pour le restant de la colonne qui la contient ;
  • rowgroup : la cellule de rubrique fournit les indications de rubrique pour le restant du groupe de rangées qui la contient ;
  • colgroup : la cellule de rubrique fournit les indications de rubrique pour le restant du groupe de colonne qui la contient.
abbr = texte [CS]
Cet attribut devrait être utilisé pour fournir une forme abrégée du contenu de la cellule, qui pourrait être employée par les agents utilisateurs aux endroits nécessaires, à la place du contenu de la cellule. Les noms abrégés devraient être courts car les agents utilisateurs peuvent être amenés à les restituer plusieurs fois. Par exemple, un synthétiseur de parole pourrait restituer l'intitulé de la rubrique abrégée qui est relative à une cellule particulière, avant de restituer le contenu proprement dit de cette cellule.
axis = cdata [CI]
Cet attribut peut s'utiliser pour ranger la cellule dans une catégorie conceptuelle, qu'on peut assimiler à la formation d'un axe dans un espace à « n » dimensions. Les agents utilisateurs peuvent donner aux utilisateurs l'accès à ces catégories (par exemple, l'utilisateur peut demander à l'agent utilisateur toutes les cellules appartenant à une catégorie donnée, l'agent utilisateur peut alors présenter le résultat de la requête sous la forme d'une table des matières, etc.). Veuillez consulter la section sur la catégorisation des cellules pour plus d'informations. La valeur de cet attribut est une liste de noms de catégorie, séparés par des virgules.
rowspan = nombre [CN]
Cet attribut spécifie le nombre de rangées couvertes par la cellule courante. La valeurs par défaut pour cet attribut est "1". La valeur zéro "0" signifie que la cellule couvre toutes les rangées, à partir de la rangée courante jusqu'à la dernière rangée de la section de table (THEAD, TBODY ou TFOOT) dans laquelle la cellule est définie.
colspan = nombre [CN]
Cet attribut spécifie le nombre de colonnes couvertes par la cellule courante. La valeur par défaut pour cet attribut est "1". La valeur zéro "0" signifie que la cellule couvre toutes les colonnes, à partir de la colonne courante jusqu'à la dernière colonne du groupe de colonnes (COLGROUP) dans lequel la cellule est définie.
nowrap [CI]
Déconseillé. Quand il est présent, cet attribut booléen indique aux agents utilisateurs visuels de désactiver la coupure de texte automatique pour cette cellule. On devrait utliser les feuilles de style, plutôt que cet attribut, pour obtenir des effets de coupure. Remarque : Utilisé imprudemment, cet attribut peut créer des cellules dont la largeur est excessive.
width = longueur [CN]
Déconseillé. Cet attribut indique à l'agent utilisateur d'employer une largeur de cellule donnée.
height = longueur [CN]
Déconseillé. Cet attribut indique à l'agent utilisateur d'employer une hauteur de cellule donnée.

Attributs définis ailleurs

  • id, class (identifiants internes au document)
  • lang (indications de langue), dir (direction du texte)
  • title (titre de l'élément)
  • style (information de style en-ligne)
  • onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (événements intrinsèques)
  • bgcolor (couleur d'arrière-plan)
  • align, char, charoff, valign (alignement des cellules)

Les cellules de table peuvent contenir deux types d'informations : des informations de rubrique et des informations de données. Cette distinction permet aux agents utilisateurs de restituer les cellules de rubrique et de données différemment, même en l'absence de feuilles de style. Par exemple, les agents utilisateurs visuels peuvent présenter le texte des cellules de rubrique en caractères gras. Les synthétiseurs de parole peuvent restituer les informations de rubrique avec une inflexion de voix particulière.

L'élément TH définit une cellule qui contient une indication de rubrique. Les agents utilisateurs disposent de deux types d'informations de rubrique : le contenu de l'élément TH et la valeur de l'attribut abbr. Les agents utilisateurs doivent restituer soit le contenu de la cellule, soit la valeur de l'attribut abbr. Pour les médias visuels, cette dernière possibilité peut être adéquate quand il n'y a pas suffisamment de place pour restituer le contenu entier de la cellule. Pour les médias non-visuels, l'attribut abbr peut s'employer comme abréviation des rubriques de la table, quand celles-ci sont restituées en accompagnement du contenu des cellules concernées.

Les attributs headers et scope permettent également aux auteurs d'assister les agents utilisateurs non-visuels dans leur traitement des informations de rubrique. Veuillez consulter la sections sur l'étiquetage des cellules pour les agents utilisateurs non-visuels pour des informations et des exemples.

L'élément TD définit une cellule qui contient des données.

Les cellules peuvent être vides (i.e., elles ne contiennent pas de données.

Par exemple, la table suivante contient quatre colonnes de données, chacune étant chapeautée par une description de la colonne.

<TABLE summary="Cette table repr&eacute;sente le nombre de tasses de caf&eacute;
                consomm&eacute;es par chaque s&eacute;nateur,
                le type de caf&eacute; (d&eacute;caff&eacute;in&eacute; ou normal),
                et s'il est sucr&eacute; ou non.">
<CAPTION>Les tasses de caf&eacute; consomm&eacute;es par chaque s&eacute;nateur</CAPTION>
<TR>
   <TH>Nom</TH>
   <TH>Tasses</TH>
   <TH>Type de caf&eacute;</TH>
   <TH>Sucre ?</TH>
<TR>
   <TD>T. Sexton</TD>
   <TD>10</TD>
   <TD>Espresso</TD>
   <TD>Non</TD>
<TR>
   <TD>J. Dinnen</TD>
   <TD>5</TD>
   <TD>D&eacute;ca.</TD>
   <TD>Oui</TD>
</TABLE>

Un agent utilisateur restituant sur un téléimprimeur pourrait afficher celle-ci comme suit :

Nom          Tasse      Type de café     Sucre ?
T. Sexton    10         Espresso         Non
J. Dinnen    5          Déca.            Oui

Les cellules qui occupent plusieurs rangées ou colonnes

Les cellules peuvent occuper plusieurs rangées ou colonnes. Le nombre des rangées ou des colonnes occupées par une cellule est fixé par les attributs rowspan et colspan des éléments TH et TD.

Dans la définition de cette table, nous spécifions que la cellule en rangée 4 et colonne 2 devrait occuper un total de trois colonnes, y compris la colonne courante.

<TABLE border="1">
<CAPTION>Les tasses de caf&eacute; consomm&eacute;es par chaque s&eacute;nateur</CAPTION>
<TR><TH>Nom<TH>Tasses<TH>Type de caf&eacute;<TH>Sucre ?
<TR><TD>T. Sexton<TD>10<TD>Espresso<TD>Non
<TR><TD>J. Dinnen<TD>5<TD>D&eacute;ca.<TD>Oui
<TR><TD>A. Soria<TD colspan="3"><em>Non disponible</em>
</TABLE>

Cette table pourrait être restituée sur un téléimprimeur par un agent utilisateur visuel comme suit :

   Les tasses de café consommées par
             chaque sénateur
 ---------------------------------------
 |   Nom   |Tasses|Type de café|Sucre ?|
 ---------------------------------------
 |T. Sexton| 10   |Espresso    |Non    |
 ---------------------------------------
 |J. Dinnen|5     |Déca.       |Oui    |
 ---------------------------------------
 |A. Soria |Non disponible             |
 ---------------------------------------

L'exemple suivant illustre (à l'aide de bordures de table) la manière dont les définitions des cellules qui occupent plus d'une rangée, ou colonne, affectent la définition des cellules suivantes. Considérons la définition de table suivante :

<TABLE border="1">
<TR><TD>1 <TD rowspan="2">2 <TD>3
<TR><TD>4 <TD>6
<TR><TD>7 <TD>8 <TD>9
</TABLE>

Comme la cellule "2" couvre la première et la deuxième rangée, la définition de cette deuxième rangée va la prendre en compte. Ainsi, le deuxième élément TD dans la deuxième rangée définit en réalité la troisième cellule de la rangée. Visuellement, la table serait restituée sur un téléimprimeur par :

-------------
| 1 | 2 | 3 |
----|   |----
| 4 |   | 6 |
----|---|----
| 7 | 8 | 9 |
-------------

tandis qu'un agent utilisateur graphique la restituerait par :

Image d'une table avec rowspan=2

Remarquez que, si l'élément TD définissant la cellule "6" avait été omis, une cellule supplémentaire vide aurait été ajoutée par l'agent utilisateur pour compléter la rangée.

De la même manière, dans la définition de table suivante :

<TABLE border="1">
<TR><TD>1 <TD>2 <TD>3
<TR><TD colspan="2">4 <TD>6
<TR><TD>7 <TD>8 <TD>9
</TABLE>

la cellule "4" couvre deux colonnes, de sorte que le deuxième élément TD dans la rangée définit en réalité la troisième cellule ("6") :

-------------
| 1 | 2 | 3 |
--------|----
| 4     | 6 |
--------|----
| 7 | 8 | 9 |
-------------

Un agent utilisateur graphique pourrait la restituer par :

Image d'une table avec colspan=2

La définition de cellules qui se chevauchent constitue une erreur. Les agents utilisateurs peuvent diverger sur la façon de gérer cette erreur (par exemple, la restitution peut varier).

EXEMPLE ILLÉGAL

L'exemple suivant montre comment on pourrait créer des cellules qui se chevauchent. Dans cette table, la cellule "5" couvre deux rangées et la cellule "7" deux colonnes, de sorte qu'elles se chevauchent dans la cellule entre "7" et "9":

<TABLE border="1">
<TR><TD>1 <TD>2 <TD>3
<TR><TD>4 <TD rowspan="2">5 <TD>6
<TR><TD colspan="2">7 <TD>9
</TABLE>

11.3 La mise en forme de la table par les agents utilisateurs visuels

Remarque : Les sections suivantes décrivent les attributs de table HTML qui ont trait à la mise en forme visuelle. Lors de la première publication de cette spécification en 1997, la spécification des feuilles de style [CSS1] n'offrait pas de mécanismes permettant le contrôle de tous les aspects de la mise en forme visuelle des tables. Depuis lors, la spécification des feuilles de style [CSS2] a rajouté des propriétés qui permettent la mise en forme visuelle des tables.

HTML 4 inclut des mécanismes pour contrôler :

  • le style des bordures ;
  • l'alignement horizontal et vertical du contenu des cellules ;
  • les marges des cellules.

11.3.1 Les bordures et les règles

Les attributs suivants affectent le cadre externe et les règles internes de la table.

Définition des attributs

frame = void|above|below|hsides|lhs|rhs|vsides|box|border [CI]
Cet attribut spécifie quels côtés du cadre entourant la table seront visibles. Les valeurs possibles sont :
  • void : aucun côté. C'est la valeur par défaut ;
  • above : le côté en haut seulement ;
  • below : le côté en bas seulement ;
  • hsides : les côtés en haut et en bas seulement ;
  • vsides : les côtés droite et gauche seulement ;
  • lhs : le côté gauche seulement ;
  • rhs : le côté droit seulement ;
  • box : les quatre côtés ;
  • border : les quatre côtés
rules = none|groups|rows|cols|all [CI]
Cet attribut spécifie quelles règles vont apparaître entre les cellules à l'intérieur de la table. La restitution des règles dépend de l'agent utilisateur. Les valeurs possibles sont :
  • none : aucune règle. C'est la valeur par défaut ;
  • groups : les règles apparaîtront seulement entre les groupes de rangées (voir THEAD, TFOOT et TBODY) et les groupes de colonnes (voir COLGROUP et COL) ;
  • rows : les règles apparaîtront seulement entre les rangées ;
  • cols : les règles apparaîtront seulement entre les colonnes ;
  • all : les règles apparaîtront entre toutes les rangées et colonnes.
border = pixels [CN]
Cet attribut spécifie l'épaisseur (en pixels seulement) du cadre autour de la table (voir la remarque ci-dessous pour plus d'informations sur cet attribut).

Afin d'aider à distinguer les cellules d'une table, on peut spécifier l'attribut border de l'élément TABLE. Considérons cet exemple précédent :

<TABLE border="1"
       summary="Cette table repr&eacute;sente le nombre de tasses de caf&eacute;
                consomm&eacute;es par chaque s&eacute;nateur,
                le type de caf&eacute; (d&eacute;caff&eacute;in&eacute; ou normal),
                et s'il est sucr&eacute; ou non.">
<CAPTION>Les tasses de caf&eacute; consomm&eacute;es par chaque s&eacute;nateur</CAPTION>
<TR>
   <TH>Nom</TH>
   <TH>Tasses</TH>
   <TH>Type de caf&eacute;</TH>
   <TH>Sucre ?</TH>
<TR>
   <TD>T. Sexton</TD>
   <TD>10</TD>
   <TD>Espresso</TD>
   <TD>Non</TD>
<TR>
   <TD>J. Dinnen</TD>
   <TD>5</TD>
   <TD>D&eacute;ca.</TD>
   <TD>Oui</TD>
</TABLE>

Dans l'exemple suivant, l'agent utilisateur devrait afficher des bordures épaisses de 5 pixels à gauche et à droite de la table, avec des règles dessinées entre chaque colonne.

<TABLE border="5" frame="vsides" rules="cols">
<TR> <TD>1 <TD>2 <TD>3
<TR> <TD>4 <TD>5 <TD>6
<TR> <TD>7 <TD>8 <TD>9
</TABLE>

Les agents utilisateurs devraient observer les paramètres suivants pour rétro-compatibilité.

  • La définition border="0" implique que frame="void" et, à moins que ce ne soit indiqué autrement, que rules="none" ;
  • Les autres valeurs de l'attribut border impliquent que frame="border" et, à moins que ce ne soit indiqué autrement, que rules="all" ;
  • La valeur "border" dans la balise ouvrante de l'élément TABLE devrait s'interpréter comme la valeur de l'attribut frame. Elle implique que rules="all" et une certaine valeur par défaut (non-nulle) pour l'attribut border.

Par exemple, les définitions suivantes sont équivalentes :

<TABLE border="2">
<TABLE border="2" frame="border" rules="all">

comme celles-ci :

<TABLE border>
<TABLE frame="border" rules="all">

Remarque : L'attribut border définit également le comportement de bordure des éléments OBJECT et IMG, mais il admet des valeurs différentes pour ceux-ci.

11.3.2 L'alignement horizontal et vertical

Les attributs suivants peuvent être spécifiés sur divers éléments de table (voir leurs définitions).

<!-- attributs d'alignement horizontal pour le contenu des cellules -->
<!ENTITY % cellhalign
  "align      (left|center|right|justify|char) #IMPLIED
   char       %Character;    #IMPLIED  -- caractère d'alignement, e.g. char=':' --
   charoff    %Length;       #IMPLIED  -- décalage du caractère d'alignement --"
  >
<!-- attributs d'alignement vertical pour le contenu des cellules -->
<!ENTITY % cellvalign
  "valign     (top|middle|bottom|baseline) #IMPLIED"
  >

Définition des attributs

align = left|center|right|justify|char [CI]
Cet attribut spécifie l'alignement des données et la justification du texte dans une cellule. Les valeurs possibles sont :
  • left : données repoussées à gauche/texte justifié à gauche. C'est la valeur par défaut ;
  • center : données au centre/texte centré. C'est la valeur par défaut pour les rubriques de tables ;
  • right : données repoussées à droite/texte justifié à droite ;
  • justify : texte justifié ;
  • char : aligne le texte sur un caractère donné. Si l'agent utilisateur ne gère pas l'alignement sur un caractère, le comportement lié à sa présence n'est pas spécifié.
valign = top|middle|bottom|baseline [CI]
Cet attribut spécifie la position verticale des données dans une cellule. Les valeurs possibles sont :
  • top : les données de la cellule sont repoussées en haut de la cellule ;
  • middle : les données de la cellule sont centrées verticalement dans la cellule. C'est la valeur par défaut ;
  • bottom : les données de la cellule sont repoussées en bas de la cellule ;
  • baseline : toutes les cellules, qui se trouvent dans la même rangée qu'une cellule dont l'attribut valign a cette valeur, devraient avoir leurs données textuelles positionnées de telle sorte que la première ligne de texte apparaisse sur une ligne de base commune à toutes les cellules de cette rangée. Cette contrainte ne s'applique pas aux lignes de texte suivantes dans ces cellules.
char = caractère [CN]
Cet attribut définit le caractère seul, dans un fragment de texte, qui fait office d'axe d'alignement. La valeur par défaut de cet attribut est le caractère point décimal pour la langue courante, telle qu'elle est définie par l'attribut lang (par exemple, le point « . » pour l'anglais et la virgule « , » pour le français). Les agents utilisateurs ne sont pas obligés de gérer cet attribut.
charoff = longueur [CN]
Quand il est présent, cet attribut spécifie le décalage de la première occurrence du caractère d'alignement sur chaque ligne. Si la ligne ne comprend pas de caractère d'alignement, elle devrait glisser horizontalement de manière à finir sur la position d'alignement.

Quand on utilise l'attribut charoffpour fixer le décalage du caractère d'alignement, la direction du décalage est déterminée par la direction de texte courante (fixée par l'attribut dir). Dans les textes de gauche-à-droite (c'est le défaut), le décalage s'opère à partir de la marge de gauche. Et inversement, pour les textes de droite-à-gauche, à partir de la marge de droite. Les agents utilisateurs ne sont pas obligés de gérer cet attribut.

La table dans cet exemple aligne des rangées de valeurs monétaires sur un point décimal. On définit explicitement le caractère d'alignement comme étant « , ».

<TABLE border="1">
<COLGROUP>
<COL><COL align="char" char=",">
<THEAD>
<TR><TH>L&eacute;gumes <TH>Prix au kilo
<TBODY>
<TR><TD>Laitues         <TD>&euro;1
<TR><TD>Carottes       <TD>&euro;10,50
<TR><TD>Navets dor&eacute;s   <TD>&euro;100,30
</TABLE>

La mise en forme de la table pourrait ressembler à ce qui suit :

-----------------------------
|   Légumes  | Prix au kilo |
|------------|--------------|
|Laitues     |      €1      |
|------------|--------------|
|Carottes    |     €10,50   |
|------------|--------------|
|Navets dorés|    €100,30   |
-----------------------------

Quand le contenu de la cellule contient plus d'une instance du caractère d'alignement spécifié par l'attribut char et que ce contenu va à la ligne, le comportement de l'agent utilisateur n'est pas défini. Les auteurs devraient donc être prudent dans leur utilisation de l'attribut char.

Remarque : Les agents utilisateurs visuels restituent typiquement le contenu des éléments TH centré verticalement et horizontalement, et en caractères gras.

L'héritage des spécifications d'alignement

L'alignement du contenu des cellules peut être spécifié cellule par cellule ou bien peut être hérité des éléments qui l'englobent, telles que la rangée, la colonne ou la table même.

L'ordre de priorité (de la plus élevée à la plus basse) des attributs align, char et charoff est le suivant :

  1. l'attribut d'alignement défini sur un élément à l'intérieur des données de la cellule (par exemple, un élément P) ;
  2. l'attribut d'alignement défini sur une cellule (les éléments TH et TD) ;
  3. l'attribut d'alignement défini sur un élément de regroupement de colonnes (les éléments COL et COLGROUP). Quand la cellule fait partie d'un ensemble recouvrant plusieurs colonnes, la propriété d'alignement est héritée de la définition de la cellule initiant le recouvrement ;
  4. l'attribut d'alignement défini sur un élément de rangée ou de regroupement de rangées (les éléments TR, THEAD, TFOOT et TBODY). Quand la cellule fait partie d'un ensemble recouvrant plusieurs rangées, la propriété d'alignement est héritée de la définition de la cellule initiant le recouvrement ;
  5. l'attribut d'alignement défini sur la table (l'élément TABLE) ;
  6. la valeur d'alignement par défaut.

L'ordre de priorité (de la plus élevée à la plus basse) de l'attribut valign (ainsi que des autres attributs hérités lang, dir et style) est le suivant :

  1. l'attribut défini sur un élément à l'intérieur des données de la cellule (par exemple, un élément P) ;
  2. l'attribut défini sur une cellule (les éléments TH et TD) ;
  3. l'attribut défini sur un élément de rangée ou de regroupement de rangées (les éléments TR, THEAD, TFOOT et TBODY). Quand la cellule fait partie d'un ensemble recouvrant plusieurs rangées, la valeur de l'attribut est héritée de la définition de la cellule initiant le recouvrement ;
  4. l'attribut défini sur un élément de regroupement de colonnes (les éléments COL et COLGROUP). Quand la cellule fait partie d'un ensemble recouvrant plusieurs colonnes, la valeur de l'attribut est héritée de la définition de la cellule initiant le recouvrement ;
  5. l'attribut défini sur la table (l'élément TABLE) ;
  6. la valeur par défaut de l'attribut.

En outre, lors de la restitution des cellules, l'alignement horizontal est déterminé par les colonnes, de préférence aux rangées, tandis que les rangées ont la préférence sur les colonnes pour ce qui est de l'alignement vertical.

L'alignement par défaut des cellules dépend de l'agent utilisateur. L'agent utilisateur devrait cependant remplacer la valeur par défaut de l'attribut selon la directionnalité courante (i.e., ne pas laisser la valeur "left" dans tous les cas).

Les agents utilisateurs qui ne reconnaissent pas la valeur "justify" de l'attribut align devraient utiliser la valeur de directionnalité héritée à la place.

Remarque : Une cellule peut hériter de la valeur d'un attribut non pas de son parent, mais de la première cellule d'un recouvrement. Il s'agit d'une exception aux règles générales d'héritage des attributs.

11.3.3 Les marges des cellules

Définition des attributs

cellspacing = longueur [CN]
Cet attribut spécifie la quantité d'espacement que l'agent utilisateur devrait laisser entre le côté gauche de la table et le côté gauche de la colonne la plus à gauche, le côté supérieur de la table et le côté supérieur de la rangée la plus haute, et ainsi de suite pour le côté droit et le côté inférieur de la table. L'attribut spécifie également la quantié d'espacement à laisser entre les cellules.
cellpadding = longueur [CN]
Cet attribut spécifie la quantité d'espacement entre la bordure de la cellule et son contenu. Si la valeur de cet attribut est une longueur en pixels, alors les quatre marges devraient toutes se trouver à cette distance du contenu. Si la valeur de l'attribut est une longueur en pourcentage, les marges supérieure et inférieure devraient se trouver à égale distance du contenu, en fonction d'un pourcentage de l'espacement vertical disponible, et les marges gauche et droite se trouver à égale distance du contenu, en fonction d'un pourcentage de l'espacement horizontal disponible.

Cest deux attributs contrôlent l'espacement entre et à l'intérieur des cellules. Les illustrations suivantes expliquent la manière dont ils interagissent :

Image montrant comment les attributs cellspacing et cellpadding interagissent.

Dans l'exemple suivant, l'attribut cellspacing spécifie que les cellules devraient être séparées de vingt pixels, les unes par rapport aux autres et par rapport au cadre de la table. L'attribut cellpadding spécifie que la marge supérieure et la marge inférieure de la cellule seront chacune séparées du contenu de la cellule de 10% de l'espacement vertical disponible (totalisant 20%). De même, la marge de gauche et la marge de droite de la cellule seront chacune séparées du contenu de la cellule de 10% de l'espacement horizontal disponible (totalisant 20%).

<TABLE cellspacing="20" cellpadding="20%">
<TR> <TD>Données1 <TD>Données2 <TD>Données3
</TABLE>

Si une table, ou une colonne donnée, a une largeur fixe, les attributs cellspacing et cellpadding peuvent demander plus d'espace que celui qui est assigné. Les agents utilisateurs peuvent donner à ces attributs la priorité sur l'attribut de largeur width quand un conflit survient, mais ils ne sont pas obligés de le faire.

11.4 La restitution de la table par les agents utilisateurs non-visuels

11.4.1 L'association des indications de rubrique aux cellules de données

Les agents utilisateurs non-visuels, tels que les synthétiseurs de parole et les lecteurs Braille, peuvent faire appel aux attributs suivants des éléments TD et TH pour restituer les cellules de la table plus intuitivement :

  • Pour une cellule de données particulière, l'attribut headers liste les cellules qui fournissent des indications de rubrique pertinentes. Dans ce but, chaque cellule de rubrique doit être nommée en utilisant l'attribut id. Remarquez qu'il n'est pas toujours possible de distinguer clairement les cellules de rubrique de celles de données. On devrait utiliser l'élément TD pour de telles cellules en même temps que les attributs id ou scope, selon celui qui convient ;
  • Pour une cellule de rubrique donnée, l'attribut scope indique à l'agent utilisateur les cellules qui sont concernées par ces indications de rubrique. Les auteurs peuvent choisir d'employer cet attribut plutôt que l'attribut headers, selon celui qui convient le mieux ; les deux attributs remplissent la même fonction. L'attribut headers est en général nécessaire quand les rubriques se trouvent en positions inhabituelles par rapport aux données qui les concernent ;
  • L'attribut abbr spécifie un nom de rubrique abrégé pour les cellules de rubrique, de sorte que les agents utilisateurs puissent restituer les indications de rubrique plus rapidement.

Dans l'exemple suivant, nous assignons des indications de rubrique aux cellules, en définissant l'attribut headers. Chaque cellule dans la même colonne se rapporte à la même cellule de rubrique (via l'attribut id).

<TABLE border="1"
       summary="Cette table repr&eacute;sente le nombre de tasses de caf&eacute;
                consomm&eacute;es par chaque s&eacute;nateur,
                le type de caf&eacute; (d&eacute;caff&eacute;in&eacute; ou normal),
                et s'il est sucr&eacute; ou non.">
<CAPTION>Les tasses de caf&eacute; consomm&eacute;es par chaque s&eacute;nateur</CAPTION>
<TR>
   <TH id="t1">Nom</TH>
   <TH id="t2">Tasses</TH>
   <TH id="t3" abbr="Type">Type de café</TH>
   <TH id="t4">Sucre ?</TH>
<TR>
   <TD headers="t1">T. Sexton</TD>
   <TD headers="t2">10</TD>
   <TD headers="t3">Espresso</TD>
   <TD headers="t4">Non</TD>
<TR>
   <TD headers="t1">J. Dinnen</TD>
   <TD headers="t2">5</TD>
   <TD headers="t3">Déca.</TD>
   <TD headers="t4">Oui</TD>
</TABLE>

Un synthétiseur de parole pourrait restituer cette table comme suit :

Légende : Les tasses de café consommées par chaque sénateur
Résumé : Cette table représente le nombre de tasses de café
         consommées par chaque sénateur, le type de café (déca. ou normal),
         et s'il est sucré ou non.
Nom : T. Sexton,   Tasses : 10,   Type : Espresso,   Sucre : Non
Nom : J. Dinnen,   Tasses : 5,    Type : Déca.,      Sucre : Oui

Remarquer la manière dont la rubrique « Type de café » s'abrège en « Type », en utilisant l'attribut abbr.

Le même exemple, en substituant l'attribut scope à l'attribut headers. Remarquez la valeur "col" de l'attribut scope, qui signifie « toutes les cellules dans la colonne courante » :

<TABLE border="1"
       summary="Cette table repr&eacute;sente le nombre de tasses de caf&eacute;
                consomm&eacute;es par chaque s&eacute;nateur,
                le type de caf&eacute; (d&eacute;caff&eacute;in&eacute; ou normal),
                et s'il est sucr&eacute; ou non.">
<CAPTION>Les tasses de caf&eacute; consomm&eacute;es par chaque s&eacute;nateur</CAPTION>
<TR>
   <TH scope="col">Nom</TH>
   <TH scope="col">Tasses</TH>
   <TH scope="col" abbr="Type">Type de café</TH>
   <TH scope="col">Sucre ?</TH>
<TR>
   <TD>T. Sexton</TD>
   <TD>10</TD>
   <TD>Espresso</TD>
   <TD>Non</TD>
<TR>
   <TD>J. Dinnen</TD>
   <TD>5</TD>
   <TD>Déca.</TD>
   <TD>Oui</TD>
</TABLE>

Voici un exemple un peu plus complexe illustrant l'utilisation des autres valeurs de l'attribut scope :

<TABLE border="1" cellpadding="5" cellspacing="2"
  summary="Les cours d'histoire propos&eacute;s dans la communaut&eacute;
           de Bath, arrang&eacute;s selon le nom du cours, le professeur,
           le r&eacute;sum&, le code et le prix.">
  <TR>
    <TH colspan="5" scope="colgroup">Cours communautaires -- Bath Automne 1997</TH>
  </TR>
  <TR>
    <TH scope="col" abbr="Nom">Nom du cours</TH>
    <TH scope="col" abbr="Prof.">Professeur</TH>
    <TH scope="col">R&eacute;sum&eacute;</TH>
    <TH scope="col">Code</TH>
    <TH scope="col">Frais</TH>
  </TR>
  <TR>
    <TD scope="row">&Agrave;pr&egrave;s la Guerre Civile</TD>
    <TD>Dr. John Wroughton</TD>
    <TD>
       Ce cours &eacute;tudiera les ann&eacute;es de troubles qui ont
       suivi l'ann&eacute;e 1646 en Angleterre. <EM>6 r&eacute;unions hebdomadaires,
      d&eacute;but lundi 13 octobre.</EM>
    </TD>
    <TD>H27</TD>
    <TD>&pound;32</TD>
  </TR>
  <TR>
    <TD scope="row">Introduction &agrave; l'Angleterre anglo-saxonne</TD>
    <TD>Mark Cottle</TD>
    <TD>
       Un cours d'une journ&eacute;e pr&eacute;sentant les premiers temps de
       la p&eacute;riode de reconstruction m&eacute;di&eacute;vale,
       les Anglo-saxons et leur soci&eacute;t&eacute;.<br>
       <EM>Samedi 18 octobre.</EM>
    </TD>
    <TD>H28</TD>
    <TD>&pound;18</TD>
  </TR>
  <TR>
    <TD scope="row">La Gr&Egrave;ce glorieuse</TD>
    <TD>Val&eacute;rie Lorenz</TD>
    <TD>
     Les origines de la d&eacute;mocratie, la philosophie, le c&#339;ur du th&eacute;&acirc;tre,
     la patrie de la dialectique. Les Romains auraient pu le faire, mais les
     Grecs furent les premiers. <br><EM>Samedi 25 octobre 1997</EM>
    </TD>
    <TD>H30</TD>
    <TD>&pound;18</TD>
  </TR>
</TABLE>

Un agent utilisateur graphique pourrait restituer la table comme ceci :

Une table avec des cellules fusionnées

Remarquez l'utilisation de l'attribut scope avec la valeur "row". Bien que la première cellule dans chaque rangée contienne des données, non des indications de rubrique, l'attribut scope fait que la cellule de données se comporte comme une cellule de rubrique de rangée. Ceci permet aux synthétiseurs de parole de fournir le nom du cours concerné à la demande, ou de le déclarer immédiatement avant le contenu de chaque cellule.

11.4.2 La catégorisation des cellules

Les utilisateurs, qui parcourent une table avec un agent utilisateur basé sur la parole, peuvent souhaiter entendre une explication sur le contenu d'une cellule en plus d'entendre le contenu en question. Un moyen par lequel l'agent utilisateur pourrait offrir une explication serait de dire les indications de rubrique associées avant de dire le contenu de la cellule de données (voir la section sur l'association des indications de rubrique aux cellules de données).

Les utilisateurs peuvent également vouloir des informations sur plusieurs cellules, auquel cas les indications de rubrique données au niveau de la cellule (par les attributs headers, scope et abbr) peuvent ne pas fournir le contexte adéquat. Considérons la table suivante, qui montre la répartition des frais de repas, d'hôtels et de transport pour deux villes (San Jose et Seattle) sur plusieurs jours :

Image d'un tableau listant les frais de déplacement dans deux villes, San Jose et Seattle, par date et catégorie (repas, hôtels et transports), illustré avec des sous-titres

Les utilisateurs pourraient souhaiter extraire des informations de la table sous la forme de requêtes comme :

  • « Qu'ai-je dépensé en repas ? » ;
  • « Qu'ai-je dépensé en repas le 25 août ? » ;
  • « Quel est l'ensemble de mes dépenses à San Jose ? ».

Chaque requête implique un calcul par l'agent utilisateur qui peut faire intervenir zéro ou plusieurs cellules. Afin de déterminer, par exemple, les coûts des repas du 25 août, l'agent utilisateur doit connaître quelles cellules se rapportent à « Repas » (tous les repas) et à « Dates » (particulièrement le 25 août), puis déterminer l'intersection de ces deux ensembles.

Pour satisfaire ce genre de requête, le modèle de table HTML 4 permet aux auteurs de ranger les rubriques et les données des cellules en catégories. Par exemple, pour le tableau des frais de déplacement, l'auteur pourrait regrouper les cellules de rubrique "San Jose" et "Transports" dans la catégorie « dépenses » et les quatre jours dans la catégorie « date ». Les trois questions précédentes auraient alors les significations suivantes :

  • « Qu'ai-je dépensé en repas ? » signifiant « Quelles sont toutes les cellules de données dans la catégorie "dépenses=Repas" ? » ;
  • « Qu'ai-je dépensé en repas le 25 août ? » signifiant « Quelles sont toutes les cellules dans les catégories "dépenses=Repas" et "date=25-08-1997" ? » ;
  • « Quel est l'ensemble de mes dépenses à San Jose ? » signifiant « Quelles sont toutes les cellules dans les catégories "dépenses=Repas, Hôtels, Transports" et "ville=San Jose" ? »

L'auteur catégorise une cellule de rubrique ou de données en spécifiant l'attribut axis sur la cellule. Par exemple, dans le tableau des frais de déplacement, on pourrait ranger la cellule contenant l'information "San Jose" dans la catégorie "ville" de la manière suivante :

  <TH id="a6" axis="ville">San Jose</TH>

Toute cellule qui contient des informations relatives à "San Jose" devrait se rapporter à cette cellule de rubrique au travers soit de l'attribut headers, soit de l'attribut scope. Ainsi, les frais de repas du 25-08-1997 devraient être balisées pour se rapporter à l'attribut id (dont la valeur ici est "a6") de la cellule de rubrique :

  <TD headers="a6">37.74</TD>

Chaque attribut headers fournit une liste de références id. Les auteurs peuvent donc catégoriser une cellule donnée par un nombre quelconque de moyens (ou selon un nombre quelconque de rubriques).

Voici le balisage du tableau des frais de déplacement avec des indications de catégorie :

<TABLE border="1"
          summary="Ce tableau r&eacute;sume les frais de d&eacute;placment
                   occasionn&eacute;s lors des voyages du mois d'août
                   &agrave; San Jose et &agrave; Seattle">
<CAPTION>
  R&eacute;capitulatif des frais de d&eacute;placement
</CAPTION>
<TR>
  <TH></TH>
  <TH id="a2" axis="dépenses">Repas</TH>
  <TH id="a3" axis="dépenses">Hôtels</TH>
  <TH id="a4" axis="dépenses">Transports</TH>
  <TD>Sous-totaux</TD>
</TR>
<TR>
  <TH id="a6" axis="ville">San Jose</TH>
  <TH></TH>
  <TH></TH>
  <TH></TH>
  <TD></TD>
</TR>
<TR>
  <TD id="a7" axis="date">25-08-97</TD>
  <TD headers="a6 a7 a2">37.74</TD>
  <TD headers="a6 a7 a3">112.00</TD>
  <TD headers="a6 a7 a4">45.00</TD>
  <TD></TD>
</TR>
<TR>
  <TD id="a8" axis="date">26-08-97</TD>
  <TD headers="a6 a8 a2">27.28</TD>
  <TD headers="a6 a8 a3">112.00</TD>
  <TD headers="a6 a8 a4">45.00</TD>
  <TD></TD>
</TR>
<TR>
  <TD>Sous-totaux</TD>
  <TD>65.02</TD>
  <TD>224.00</TD>
  <TD>90.00</TD>
  <TD>379.02</TD>
</TR>
<TR>
  <TH id="a10" axis="ville">Seattle</TH>
  <TH></TH>
  <TH></TH>
  <TH></TH>
  <TD></TD>
</TR>
<TR>
  <TD id="a11" axis="date">27-08-97</TD>
  <TD headers="a10 a11 a2">96.25</TD>
  <TD headers="a10 a11 a3">109.00</TD>
  <TD headers="a10 a11 a4">36.00</TD>
  <TD></TD>
</TR>
<TR>
  <TD id="a12" axis="date">28-08-97</TD>
  <TD headers="a10 a12 a2">35.00</TD>
  <TD headers="a10 a12 a3">109.00</TD>
  <TD headers="a10 a12 a4">36.00</TD>
  <TD></TD>
</TR>
<TR>
  <TD>Sous-totaux</TD>
  <TD>131.25</TD>
  <TD>218.00</TD>
  <TD>72.00</TD>
  <TD>421.25</TD>
</TR>
<TR>
  <TH>Totaux</TH>
  <TD>196.27</TD>
  <TD>442.00</TD>
  <TD>162.00</TD>
  <TD>800.27</TD>
</TR>
</TABLE>

Remarquez que le balisage du tableau de cette façon permet aux agents utilisateurs d'éviter de troubler l'utilisateur avec des informations parasites. Par exemples, si un synthétiseur de parole devait dire tous les nombres dans la colonne "Repas" de cette table, en réponse à la question « Quel est la totalité de mes frais de repas ? », l'utilisateur serait incapable de distinguer entre les dépenses du jour et les sous-totaux ou les totaux. En catégorisant soigneusement les cellules de données, les auteurs permettent aux agents utilisateurs de faire des distinctions sémantiques importantes lors de la restitution.

Bien sûr, il n'y a pas de limite quant à la manière dont les auteurs peuvent catégoriser les informations contenues dans une table. Dans la table des frais de déplacement, par exemple, on pourrait rajouter les catégories "sous-totaux" et "totaux".

Cette spécification n'oblige pas les agents utilisateurs à gérer les informations fournies par l'attribut axis, ni ne fait de recommandation sur la manière dont les agents utilisateurs peuvent présenter les informations de l'attribut axis aux utilisateurs ou sur la manière dont les utilisateurs peuvent interroger l'agent utilisateur sur ces informations.

Les agents utilisateurs, notamment les syntétiseurs de parole, peuvent cependant combiner les informations communes à plusieurs cellules résultant d'une requête. Par exemple, si l'utilisateur demande « Qu'est-ce que j'ai dépensé à San Jose ? », l'agent utilisateur déterminerait d'abord les cellules en question (25-08-1997 : 37.74, 26-08-1997 : 27.28), puis restituerait ces informations. Un agent utilisateur disant ces informations pourraient les lire ainsi :

   Ville : San Jose. Date : 25-08-1997. Dépenses, Repas : 37.74
   Ville : San Jose. Date : 26-08-1997. Dépenses, Repas : 27.28

ou, de manière plus concise :

   San Jose, 25-08-1997, Repas : 37.74
   San Jose, 26-08-1997, Repas : 27.28

Une restitution encore plus économe combinerait les informations communes et les réarrangerait :

   San Jose, Repas, 25-08-1997 : 37.74
                    26-08-1997 : 27.28

Les agents utilisateurs qui gère ce type de restitution devraient donner à l'utilisateur des moyens pour personnaliser la restitution (par exemple, au travers d'une feuille de style).

11.4.3 L'algorithme pour obtenir les indications de rubrique

En l'absence d'indications de rubrique fournies soit par l'attribut scope, soit par l'attribut headers, les agents utilisateurs peuvent néanmoins construire des informations de rubrique en fonction de l'algorithme suivant. L'objectif de l'algorithme consiste à rechercher une liste ordonnée de rubriques. (Dans la description suivante de l'algorithme, on suppose que la directionnalité de la table est de gauche à droite).

  • Premièrement, à partir de la position de la cellule, rechercher des cellules de rubrique de rangée vers la gauche. Puis rechercher des cellules de rubrique de colonne vers le haut. La recherche dans une direction s'achève quand le bord de la table est atteint ou bien quand on trouve une cellule de données qui fait suite à une cellule de rubrique ;
  • Les rubriques de rangée sont insérées dans la liste, dans l'ordre où elles apparaissent dans la table. Pour les tables de gauche-à-droite, les rubriques s'insèrent de gauche à droite ;
  • Les rubriques de colonne sont insérées après les rubriques de rangée, dans l'ordre où elles apparaissent dans la table, de haut en bas ;
  • Si une cellule de rubrique a un attribut headers spécifié, alors les rubriques référencées par cet attribut sont insérées dans la liste et la recherce s'achève pour la direction courante ;
  • Les cellules TD qui ont un attribut axis sont également traitées comme des cellules de rubrique.

11.5 Un exemple de table

Cet exemple montre des rangées et des colonnes regroupées. L'exemple est extrait du livre « Developing International Software », par Nadine Kano.

En « art ascii », la table suivante :

<TABLE border="2" frame="hsides" rules="groups"
          summary="La gestion des pages de codes par diverses versions
                   de MS Windows.">
<CAPTION>GESTION DES PAGES DE CODES DANS WINDOWS DE MICROSOFT</CAPTION>
<COLGROUP align="center">
<COLGROUP align="left">
<COLGROUP align="center" span="2">
<COLGROUP align="center" span="3">
<THEAD valign="top">
<TR>
<TH>ID<BR>page de codes
<TH>Nom
<TH>ACP
<TH>OEMCP
<TH>Windows<BR>NT 3.1
<TH>Windows<BR>NT 3.51
<TH>Windows<BR>95
<TBODY>
<TR><TD>1200<TD>Unicode (BMP de ISO/IEC-10646)<TD><TD><TD>X<TD>X<TD>*
<TR><TD>1250<TD>Windows 3.1 Europe de l'Est<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1251<TD>Windows 3.1 Cyrillique<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1252<TD>Windows 3.1 US (ANSI)<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1253<TD>Windows 3.1 Grec<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1254<TD>Windows 3.1 Turc<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1255<TD>Hébreu<TD>X<TD><TD><TD><TD>X
<TR><TD>1256<TD>Arabe<TD>X<TD><TD><TD><TD>X
<TR><TD>1257<TD>Balte<TD>X<TD><TD><TD><TD>X
<TR><TD>1361<TD>Coréen (Johab)<TD>X<TD><TD><TD>**<TD>X
<TBODY>
<TR><TD>437<TD>MS-DOS United States<TD><TD>X<TD>X<TD>X<TD>X
<TR><TD>708<TD>Arabe (ASMO 708)<TD><TD>X<TD><TD><TD>X
<TR><TD>709<TD>Arabe (ASMO 449+, BCON V4)<TD><TD>X<TD><TD><TD>X
<TR><TD>710<TD>Arabe (Arabe transparent)<TD><TD>X<TD><TD><TD>X
<TR><TD>720<TD>Arabe (Transparent ASMO)<TD><TD>X<TD><TD><TD>X
</TABLE>

cette table serait restituée comme ceci :

                GESTION DES PAGES DE CODES DANS WINDOWS DE MICROSOFT
===============================================================================
    ID    | Nom                          | ACP  OEMCP | Windows Windows Windows
  page de |                              |            |  NT 3.1 NT 3.51    95
   codes  |                              |            |
-------------------------------------------------------------------------------
   1200   | Unicode (BMP de ISO 10646)   |            |    X       X       *
   1250   | Windows 3.1 Europe de l'Est  |  X         |    X       X       X
   1251   | Windows 3.1 Cyrillique       |  X         |    X       X       X
   1252   | Windows 3.1 US (ANSI)        |  X         |    X       X       X
   1253   | Windows 3.1 Grec             |  X         |    X       X       X
   1254   | Windows 3.1 Turc             |  X         |    X       X       X
   1255   | Hébreu                       |  X         |                    X
   1256   | Arabe                        |  X         |                    X
   1257   | Balte                        |  X         |                    X
   1361   | Coréen (Johab)               |  X         |            **      X
-------------------------------------------------------------------------------
    437   | MS-DOS United States         |        X   |    X       X       X
    708   | Arabe (ASMO 708)             |        X   |                    X
    709   | Arabe (ASMO 449+, BCON V4)   |        X   |                    X
    710   | Arabe (Arabe transparent)    |        X   |                    X
    720   | Arabe (Transparent ASMO)     |        X   |                    X
===============================================================================

Un agent utilisateur graphique pourrait restituer cette table par :

Une table avec des rangées et des colonnes regroupées

Cet exemple montre comment utiliser l'élément COLGROUP pour regrouper des colonnes et fixer l'alignement de colonne par défaut. De la même façon pour l'élément TBODY pour regrouper des rangées. Les attributs frame et rules indiquent à l'agent utilisateur les bordures et les règles à restituer.


Les liens dans les documents HTML

12 Les liens

Sommaire

  1. Introduction aux liens et aux ancres
    1. La visite d'une ressource reliée
    2. Les autres relations des liens
    3. La spécification des ancres et des liens
    4. Les titres des liens
    5. Les liens et l'internationalisation
  2. L'élément A
    1. La syntaxe des noms d'ancre
    2. Les liens imbriqués sont illégaux
    3. Les ancres avec un attribut id
    4. Les ressources non disponibles et non identifiables
  3. Les relations du document : l'élément LINK
    1. Les liens progressifs et les liens inverses
    2. Les liens et les feuilles de style externes
    3. Les liens et les moteurs de recherche
  4. L'information de chemin : l'élément BASE
    1. La résolution des URI relatifs

12.1 Introduction aux liens et aux ancres

HTML offre nombre des expressions conventionnelles de l'édition pour enrichir le texte et structurer les documents, mais ce qui le distingue des autres langages de balisage ce sont ses fonctionnalités pour les documents hypertextes et interactifs. Cette section présente le lien (ou encore hyperlien ou lien Web) qui est la structure hypertexte de base. Le lien représente une connexion d'une ressource Web à une autre. Bien que le concept en soit simple, le lien a été un des moteurs principaux de la réussite du Web.

Un lien possède deux extrêmités, appelées ancres, et une direction. Le lien part de l'ancre « source » et pointe vers l'ancre « destination », qui peut représenter n'importe quelle ressource Web (par exemple, une image, une séquence vidéo, un extrait sonore, un programme, un document HTML, un élément au sein d'un document HTML, etc.).

12.1.1 La visite d'une ressource reliée

Le comportement par défaut associé au lien est de ramener une autre ressource Web. Ce comportement est communément et implicitement obtenu par la sélection du lien (par exemple, un clic de souris, une entrée au clavier, etc..

L'extrait HTML suivant contient deux liens, l'un dont l'ancre destination est un document HTML nommé "chapitre2.html" et l'autre une image au format PNG nommée "foret.png" :

<BODY>
...un texte...
<P>Plus de d&eacute;tails dans le  <A href="chapitre2.html">chapitre deux</A>.
Voir aussi cette <A href="../images/foret.png">carte de la for&ecirc;t enchant&eacute;e.</A>
</BODY>

En activant ces liens (par un clic de souris, une entrée au clavier, une commande vocale, etc.), l'utilisateur peut visiter ces ressources. Remarquez que l'attribut href dans chaque ancre source spécifie l'adresse de l'ancre destination avec un URI.

L'ancre destination du lien peut être un élément à l'intérieur d'un document HTML. L'ancre destination doit avoir reçu un nom d'ancre et tout URI qui désigne cet ancre doit inclure le nom comme étant son identifiant de fragment.

Les ancres destinations dans les documents HTML peuvent être spécifiées soit par l'élément A (en le nommant grâce à l'attribut name), soit par tout autre élément (en le nommant avec l'attribut id).

Ainsi, par exemple, un auteur pourrait créer une table des matières dont les entrées sont reliées aux éléments de titre H2, H3, etc., dans le même document. En utilisant l'élément A pour créer les ancres destinations, nous écririons :

<H1>Table des mati&egrave;res</H1>
<P><A href="#section1">Introduction</A><BR>
<A href="#section2">Historique</A><BR>
<A href="#section2.1">Sur un ton plus personnel</A><BR>
...le reste de la table des matières...
...le corps du document...
<H2><A name="section1">Introduction</A></H2>
...section 1...
<H2><A name="section2">Historique</A></H2>
...section 2...
<H3><A name="section2.1">Sur un ton plus personnel</A></H3>
...section 2.1...

On peut obtenir le même effet en transformant les éléments de titre eux-mêmes en ancres :

<H1>Table des mati&egrave;res</H1>
<P><A href="#section1">Introduction</A><BR>
<A href="#section2">Historique</A><BR>
<A href="#section2.1">Sur un ton plus personnel</A><BR>
...le reste de la table des matières...
...le corps du document...
<H2 id="section1">Introduction</H2>
...section 1...
<H2 id="section2">Historique</H2>
...section 2...
<H3 id="section2.1">Sur un ton plus personnel</H3>
...section 2.1...

12.1.2 Les autres relations des liens

De loin, l'utilisation la plus commune du lien est de ramener une autre ressource Web, comme illustré dans les exemples précédents. Cependant, les auteurs peuvent insérer, dans leurs documents, des liens qui expriment d'autres relations entre les ressources que le simple « activer ce lien pour visiter telle ressource ». Les liens qui expriment d'autres types de relation ont un ou plusieurs types de lien spécifiés dans leur ancre source.

Les rôles d'un lien défini par l'élément A, ou LINK, sont spécifiés au travers des attributs rel et rev.

Par exemple, les liens définis par l'élément LINK peuvent décrire la position d'un document par rapport à une série de documents. Dans l'extrait suivant, les liens dans le document intitulé « Chapitre 5 » pointent vers le chapitre qui précède et celui qui suit :

<HEAD>
...autres informations d'en-tête...
<TITLE>Chapitre 5</TITLE>
<LINK rel="prev" href="chapitre4.html">
<LINK rel="next" href="chapitre6.html">
</HEAD>

Le type du premier lien est "prev" et celui du second est "next" (deux parmi plusieurs types de lien reconnus). Les liens spécifiés par l'élément LINK ne sont pas restitués avec le contenu du document, même si les agents utilisateurs peuvent les restituer autrement (par exemple, comme outils de navigation).

Même s'ils ne sont pas utilisés pour la navigation, ces liens peuvent être interprétés de manière intéressante. Par exemple, un agent utilisateur, qui imprime une série de documents HTML comme si c'était un seul document, peut utiliser ces informations de lien comme base pour la formation d'un document linéaire cohérent. On donne plus d'informatons ci-dessous sur l'utilisation des liens au bénéfice des moteurs de recherche.

12.1.3 La spécifications des ancres et des liens

Bien que plusieurs éléments et attributs HTML créent des liens vers d'autres ressources (par exemple, l'élément IMG, l'élément FORM, etc.), ce chapitre traite des liens et des ancres créées par les éléments LINK et A. L'élément LINK ne peut apparaître que dans l'en-tête du document. L'élément A ne peut apparaître que dans le corps.

Quand l'attribut href de l'élément A est spécifié, l'élément définit l'ancre source d'un lien que l'utilisateur peut activer pour ramener une ressource Web. L'ancre source représente l'emplacement de l'instance de A et l'ancre destination la ressource Web.

La ressource ramenée peut être prise en main par l'agent utilisateur de plusieurs façons : en ouvrant un nouveau document HTML dans la même fenêtre d'agent utilisateur, en ouvrant un nouveau document HTML dans une fenêtre différente, en lançant un nouveau programme qui va prendre en charge la ressource, etc. Puisque l'élément A possède un contenu (texte, images, etc.), les agents utilisateurs peuvent restituer ce contenu de manière à indiquer la présence d'un lien (par exemple, en soulignant ce contenu).

Quand les attributs name ou id de l'élément A sont spécifiés, l'élément définit alors une ancre qui peut être la destination d'autres liens.

Les auteurs peuvent spécifier simultanément les attributs name et href dans la même instance de A.

L'élément LINK définit une relation entre le document courant et une autre ressource. Bien que l'élément LINK n'ait aucun contenu, la relation qu'il définit peut être restituée par certains agents utilisateurs.

12.1.4 Les titres des liens

L'attribut title peut être spécifié sur les deux éléments A et LINK pour ajouter des informations sur la nature d'un lien. Ces informations peuvent être parlées par l'agent utilisateur, être restituées sous forme d'infobulles, entraîner un changement dans la représentation de l'image du curseur, etc.

Nous pouvons donc enrichir l'exemple précédent en produisant un titre pour chaque lien :

<BODY>
...un texte...
<P>Plus de d&eacute;tails dans le <A href="chapitre2.html"
       title="Aller au chapitre deux">chapitre deux</A>.
<A href="./chapter2.html"
       title="Voir le chapitre deux.">chapitre deux</A>.
Voir aussi cette <A href="../images/foret.png"
       title="Image PNG de la for&ecirc;t enchant&eacute;e">carte de la
for&ecirc;t enchant&eacute;e.</A>
</BODY>

12.1.5 Les liens et l'internationalisation

Comme les liens sont susceptibles de pointer vers des documents codés avec différents encodages de caractères, les éléments A et LINK reconnaissent l'attribut charset. Cet attribut permet aux auteurs de conseiller les agents utilisateurs sur le codage des données à l'autre extrêmité du lien.

L'attribut hreflang apporte aux agents utilisateurs des informations concernant la langue de la ressource au bout d'un lien, tout comme l'attribut lang fournit des informations à propos de la langue du contenu d'un élément ou de la valeur d'un attribut.

Munis de cette connaissance supplémentaire, les agents utilisateurs devraient pouvoir éviter la présentation d'informations incohérentes à l'utilisateur. Au lieu de cela, ils peuvent localiser les ressources nécessaires pour la présentation correcte du document, ou bien, s'ils ne peuvent pas localiser ces ressources, ils devraient au moins avertir l'utilisateur que le document sera illisible et en donner la raison.

12.2 L'élément A

<!ELEMENT A - - (%inline;)* -(A)       -- ancre -->
<!ATTLIST A
  %attrs;                              -- %coreattrs, %i18n, %events --
  charset     %Charset;      #IMPLIED  -- encodage de la ressource reliée --
  type        %ContentType;  #IMPLIED  -- type de contenu consultatif --
  name        CDATA          #IMPLIED  -- extrêmité de lien nommée --
  href        %URI;          #IMPLIED  -- URI de la ressource reliée --
  hreflang    %LanguageCode; #IMPLIED  -- code de langue --
  rel         %LinkTypes;    #IMPLIED  -- types de lien progressif --
  rev         %LinkTypes;    #IMPLIED  -- types de lien inverse --
  accesskey   %Character;    #IMPLIED  -- touche pour l'accessibilité --
  shape       %Shape;        rect      -- pour images cliquables côté client --
  coords      %Coords;       #IMPLIED  -- pour images cliquables côté client --
  tabindex    NUMBER         #IMPLIED  -- position dans l'ordre de tabulation --
  onfocus     %Script;       #IMPLIED  -- l'élément acquiert l'attention --
  onblur      %Script;       #IMPLIED  -- l'élément perd l'attention --
  >

Balise ouvrante : obligatoire, balise fermante : obligatoire

Définition des attributs

name = cdata [CS]
Cet attribut nomme l'ancre courante de sorte que celle-ci puisse être la destination d'un autre lien. La valeur de cet attribut doit être un nom d'ancre unique. La portée de ce nom a pour cadre le document courant. Remarquez que cet attribut partage le même espace de nom que l'attribut id.
href = uri [CT]
Cet attribut spécifie la localisation d'une ressource Web, définissant ainsi un lien entre l'élément courant (l'ancre source) et l'ancre destination définie par cet attribut.
hreflang = code-de-langue [CI]
Cet attribut spécifie la langue de base de la ressource désignée par l'attribut href et ne peut s'utiliser que si href est spécifié.
type = type-de-contenu [CI]
Cet attribut donne une indication consultative sur le type du contenu disponible à l'adresse cible du lien. Il permet aux agents utilisateurs de se rabattre sur un mécanisme de repli plutôt que d'aller chercher ce contenu, quand il leur est indiqué qu'ils n'obtiendront qu'un contenu dont ils ne reconnaissent pas le type.
Les auteurs qui utilisent cet attribut prennent la responsabilité du risque d'une éventuelle incohérence par rapport au contenu disponible à l'adresse cible du lien.
Pour la liste courante des types de contenu enregistrés, veuillez consulter l'entrée [MIMETYPES].
rel = types-de-lien [CI]
Cet attribut décrit la relation partant du document courant vers l'ancre spécifiée par l'attribut href. La valeur de cet attribut est une liste de types de lien séparés par des espaces.
rev = types-de-lien [CI]
Cet attribut est utilisé pour décrire un lien inverse partant de l'ancre spécifiée par l'attribut href vers le document courant. La valeur de cet attribut est une liste de types de lien séparés par des espaces.
charset = encodage-de-caractères [CI]
Cet attribut spécifier l'encodage de caractères de la ressource désignée par le lien. Veuillez consulter la section sur les encodages de caractères pour des précisions.

Attributs définis ailleurs

  • id, class (identifiants internes au document)
  • lang (indications de langue), dir (direction du texte)
  • title (titre de l'élément)
  • style (information de style en-ligne )
  • shape et coords (images cliquables)
  • onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (événements intrinsèques )
  • target (indication du cadre cible)
  • tabindex (navigation par tabulation)
  • accesskey (clés d'accès)

Chaque élément A définit une ancre :

  1. le contenu de l'élément A définit la position de l'ancre ;
  2. l'attribut name nomme l'ancre, de sorte que celle-ci puisse être la destination de zéro ou plusieurs liens (voir également la section sur les ancres avec un attribut id) ;
  3. l'attribut href fait de cette ancre l'ancre source d'exactement un lien.

Les auteurs peuvent également créer un élément A qui ne spécifie aucune ancre, i.e., qui ne spécifie aucun attribut href, name ou id. Les valeurs de ces attributs peuvent être fixées par la suite au moyen de scripts.

Dans l'exemple suivant, l'élément A définit un lien. L'ancre source est représentée par le texte « site Web du W3C » et l'ancre destination par "http://www.w3.org/" :

Pour plus d'informations, veuillez consulter
le <A href="http://www.w3.org/">site Web du W3C</A>.

Ce lien désigne la page d'accueil du World Wide Web Consortium. Quand un utilisateur active ce lien via l'agent utilisateur, celui-ci va ramener la ressource, ici un document HTML.

Les agents utilisateurs restituent généralement les liens de sorte à les mettre en évidence pour les utilisateurs (soulignage, vidéo inverse, etc.). La restitution exacte dépend de l'agent utilisateur. La restitution peut varier si l'utilisateur a déjà visité le lien ou non. Une restitution visuelle du lien précédent pourrait être la suivante :

Pour plus d'informations, veuillez consulter le site Web du W3C.
                                                ---------------

Pour indiquer explicitement aux agents utilisateurs l'encodage de caractères de la page de destination, spécifiez l'attribut charset :

Pour plus d'information, veuillez consulter le
<A href="http://www.w3.org/" charset="ISO-8859-1">site Web du W3C</A>

Supposons que nous définissions une ancre nommée "ancre-1" dans le fichier "un.html".

...texte avant l'ancre...
<A name="ancre-1">Voici l'emplacement de l'ancre un.</A>
...texte après l'ancre...

Ceci crée une ancre autour du texte « Voici l'emplacement de l'ancre un. ». Habituellement, le contenu de l'élément A n'est pas restitué de façon particulière quand l'élément A définit seulement une ancre.

Ayant défini l'ancre, nous pouvons nous y référer à partir du même document ou d'un autre. Les URI qui désignent des ancres contiennent un caractère « # » suivi par le nom de l'ancre (l'identifiant de fragment). Voici quelques exemples de tels URI :

  • un URI absolu : http://www.macompanie.com/un.html#ancre-1
  • un URI relatif : ./un.html#ancre-1 ou bien un.html#ancre-1
  • quand le lien est défini dans le même document : #ancre-1

Ainsi, un lien défini dans le fichier "deux.html" dans le même répertoire que le fichier "un.html" se référerait à l'ancre comme suit :

...texte avant le lien...
Pour plus d'informations, veuillez consultez l'<A href="./un.html#ancre-1">ancre un</A>.
...texte après le lien...

Dans l'exemple suivant, l'élément A spécifie un lien (avec l'attribut href) et crée une ancre nommée (avec l'attribut name) simultanément :

Je viens de rentrer de vacances ! Voici une
<A name="ancre-2"
   href="http://www.unecompanie.com/Gens/Ian/vacances/famille.png">
photo de ma famille sur le lac.</A>.

Cet exemple contient un lien vers un autre type de ressource Web (une image PNG). L'activation du lien entraînerait le chargement de la ressource image à partir du Web (et éventuellement son affichage si le système est configuré dans ce sens).

Remarque : Les agents utilisateurs devraient être capables de trouver les ancres créées par des éléments A vides, mais certains n'arrivent pas à le faire. Par exemple, certains agents utilisateurs peuvent ne pas trouver l'ancre « ancre-vide » dans le fragment HTML suivant :

<A name="ancre-vide"></A>
<EM>...autre HTML...</EM>
<A href="#ancre-vide">Lien vers l'ancre vide</A>

12.2.1 La syntaxe des noms d'ancre

Le nom d'une ancre est la valeur soit de l'attribut name, soit de l'attribut id, quand on les utilise dans le contexte des ancres. Les noms d'ancre doivent obéir aux règles suivantes :

  • Unicité : Les noms d'ancre doivent être uniques dans le document. Les noms d'ancre qui ne diffèrent que par la casse ne devraient pas apparaître dans le même document ;
  • Correspondance des chaînes : Les comparaisons entre les identifiants de fragment et les noms d'ancre doivent être réalisées selon une correspondance exacte (sensibilité à la casse).

Ainsi, l'exemple suivant est juste pour ce qui est de la correspondance des chaînes et doit donc être considéré comme une correspondance par les agents utilisateurs :

<P><A href="#xxx">...</A>
...suite du document...
<P><A name="xxx">...</A>

EXEMPLE ILLÉGAL :
L'exemple suivant est illégal pour ce qui est de l'unicité, dans la mesure où les deux noms sont identiques mis à part la casse :

<P><A name="xxx">...</A>
<P><A name="XXX">...</A>

Bien que l'extrait suivant soit un code HTML légal, le comportement de l'agent utilisateur n'est pas défini ; certains agents utilisateurs peuvent considérer (par erreur) ceci comme étant une correspondance et d'autres non.

<P><A href="#xxx">...</A>
...suite du document...
<P><A name="XXX">...</A>

Les noms d'ancre devraient se limiter aux caractères ASCII. Veuilleur consulter l'appendice pour plus d'informations sur les caractères non-ASCII dans les valeurs d'attribut URI.

12.2.2 Les liens imbriqués sont illégaux

Les liens et les ancres définis par l'élément A ne doivent pas être imbriqués ; un élément A ne doit pas contenir d'autres éléments A.

Puisque le DTD définit l'élément LINK comme étant vide, les éléments LINK ne doivent pas être imbriqués non plus.

12.2.3 Les ancres avec un attribut id

On peut utiliser l'attribut id pour créer une ancre dans la balise ouvrante de n'importe quel élément (y compris l'élément A).

Cet exemple illustre une utilisation de l'attribut id pour positionner une ancre dans un élément H2. L'ancre est reliée via l'élément A.

Vous pouvez obtenir des pr&eacute;cisions dans la <A href="#section2">Section deux</A>.
...plus loin dans le document
<H2 id="section2">Section deux</H2>
...plus loin dans le document
<P>Veuillez vous reporter &agrave; la <A href="#section2">Section deux</A>
ci-dessus pour plus de d&eacute;tails.

L'exemple suivant nomme une ancre destination avec l'attribut id :

Je suis de retour de vacances ! Voici une
<A id="ancre-deux">photo de ma famille sur le lac.</A>.

Les attributs id et name partagent le même espace de noms. Cela signifie qu'ils ne peuvent pas tous deux définir une ancre avec le même nom dans le même document. On admet l'utilisation des deux attributs pour spécifier l'identifiant unique d'un élément pour les éléments suivants : A, APPLET, FORM, FRAME, IFRAME, IMG et MAP. Quand les deux attributs sont utilisés sur un seul élément, leurs valeurs doivent être identiques.

EXEMPLE ILLÉGAL :
L'extrait suivant est un code HTML illégal, puisque ces attributs déclare le nom deux fois dans le même document.

<A href="#a1">...</A>
...
<H1 id="a1">
...des pages et des pages...
<A name="a1"></A>

L'exemple suivant illustre le fait que les attributs id et name doivent être les mêmes quand tous les deux apparaissent dans la balise ouvrante d'un élément :

<P><A name="a1" id="a1" href="#a1">...</A>

De par sa spécification dans le DTD de HTML, l'attribut name peut contenir des références de caractères. Ainsi, la valeur "D&#xfc;rst" est valide pour l'attribut name, comme l'est la valeur "D&uuml;rst". La valeur de l'attribut id, par contre, ne peut pas contenir de références de caractères.

Utiliser id ou name ? Les auteurs devraient considérer les points suivants au moment de décider lequel attribut utiliser entre id et name pour le nom d'une ancre :

  • l'attribut id peut faire plus qu'un nom d'ancre (par exemple, sélecteur de feuille de style, identifiant de traitement, etc.) ;
  • certains agents utilisateurs anciens ne gèrent pas les ancres créées par l'attribut id ;
  • l'attribut name autorise des noms d'ancre plus variés (avec les entités).

12.2.4 Les ressources non disponibles et non identifiables

L'appel d'une ressource non disponible ou non identifiable constitue une erreur. Bien que les agents utilisateurs puissent varier dans la manière de gérer une telle erreur, nous recommandons les comportements suivants :

  • si l'agent utilisateur ne peut pas localiser une ressource reliée, il devrait le signaler à l'utilisateur ;
  • si l'agent utilisateur ne peut pas identifier le type de la ressource reliée, il devrait quand même essayer de la traiter. Il devrait avertir l'utilisateur et il peut lui permettre d'intervenir et identifier le type du document.

12.3 Les relations du documents : l'élément LINK

<!ELEMENT LINK - O EMPTY               -- un lien indépendant du média -->
<!ATTLIST LINK
  %attrs;                              -- %coreattrs, %i18n, %events --
  charset     %Charset;      #IMPLIED  -- encodage de caractères de la ressource reliée --
  href        %URI;          #IMPLIED  -- URI de la ressource reliée --
  hreflang    %LanguageCode; #IMPLIED  -- code de langue --
  type        %ContentType;  #IMPLIED  -- type de contenu consultatif --
  rel         %LinkTypes;    #IMPLIED  -- types de lien progressif --
  rev         %LinkTypes;    #IMPLIED  -- types de lien inverse --
  media       %MediaDesc;    #IMPLIED  -- pour restitution sur ce média --
  >

Balise ouvrante : obligatoire, balise fermante : interdite

Attributs définis ailleurs

  • id, class (identifiants internes au document)
  • lang (indications de langue), dir (direction du texte)
  • title (titre de l'élément)
  • style (information de style en-ligne )
  • onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (événements intrinsèques )
  • href, hreflang, type, rel, rev (liens et ancres)
  • target (indication du cadre cible)
  • media (information de style d'en-tête)
  • charset (encodages de caractères)

Cet élément définit un lien. À la différence de l'élément A, il ne peut apparaître que dans la section HEAD du document, même s'il peut apparaître un nombre de fois quelconque. Bien que l'élément LINK n'ait pas de contenu, il véhicule des informations de relations qui peuvent être restituées par les agents utilisateurs de diverses façons (par exemple, une barre d'outils avec un menu déroulant présentant les liens).

Cet exemple illustre la manière dont les éléments LINK peuvent apparaître dans la section HEAD d'un document. Le document courant a pour nom "chapitre2.html". L'attribut rel spécifie la relations du document relié avec le document courant. Les valeurs "Index", "Next" et "Prev" sont expliquées dans la section sur les types de lien.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
  <TITLE>Chapitre 2</TITLE>
  <LINK rel="Index" href="../index.html">
  <LINK rel="Next"  href="chapitre3.html">
  <LINK rel="Prev"  href="chapitre1.html">
</HEAD>
...le reste du document...

12.3.1 Les liens progressifs et les liens inverses

Les attributs rel et rev jouent des rôles complémentaires : l'attribut rel spécifie un lien progressif [ndt. forward link] et l'attribut rev un lien inverse [ndt. reverse link].

Considérons les deux documents A et B suivants.

Document A :       <LINK href="docB" rel="foo">

celui-ci a exactement la même signification que :

Document B :       <LINK href="docA" rev="foo">

On peut spécifier les deux attributs simultanément.

12.3.2 Les liens et les feuilles de style externes

Quand l'élément LINK relie une feuille de style externe à un document, l'attribut type spécifie le langage de feuille de style et l'attribut media spécifie le ou les médias de restitution prévus. Les agents utilisateurs peuvent gagner du temps en ne ramenant que celles des feuilles de style qui s'appliquent à l'appareil courant.

Les types de média sont abordés ultérieurement dans la section sur les feuilles de style.

12.3.3 Les liens et les moteurs de recherche

Les auteurs peuvent utiliser l'élément LINK pour fournir diverses informations aux moteurs de recherche, comprenant :

  • des liens vers les versions alternatives d'un document, écrites dans une autre langue ;
  • des liens vers les versions alternatives d'un document, conçues pour des médias différents, par exemple une version convenant particulièrement pour l'impression ;
  • des liens vers la page de garde d'une collection de documents.

Les exemples ci-dessous illustrent les façons de combiner les indications de langue, les types de média et les types de lien pour améliorer la prise en charge des documents par les moteurs de recherche.

Dans l'exemple suivant, nous utilisons l'attribut hreflang pour indiquer aux moteurs de recherche où trouver les versions hollandaise, portugaise et arabe d'un document. Remarquez l'utilisation de l'attribut charset pour le manuel arabe. Remarquez aussi l'utilisation de l'attribut lang pour indiquer que la valeur de l'attribut title de l'élément LINK, qui désigne le manuel français, est en français.

<HEAD>
<TITLE>Le manuel en anglais</TITLE>
<LINK title="Le manuel en hollandais"
      type="text/html"
      rel="alternate"
      hreflang="nl"
      href="http://quelquepart.com/manuel/hollandais.html">
<LINK title="Le manuel en portugais"
      type="text/html"
      rel="alternate"
      hreflang="pt"
      href="http://quelquepart.com/manuel/portugais.html">
<LINK title="Le manuel en arabe"
      type="text/html"
      rel="alternate"
      charset="ISO-8859-6"
      hreflang="ar"
      href="http://quelquepart.com/manuel/arabe.html">
<LINK lang="fr" title="Le manuel en fran&ccedil;ais"
      type="text/html"
      rel="alternate"
      hreflang="fr"
      href="http://quelquepart.com/manuel/francais.html">
</HEAD>

Dans l'exemple suivant, nous indiquons aux moteurs de recherche où trouver la version imprimée d'un manuel.

<HEAD>
<TITLE>Manuel de r&eacute;f&eacute;rence</TITLE>
<LINK media="print" title="Le manuel en Postscript"
      type="application/postscript"
      rel="alternate"
      href="http://quelquepart.com/manuel/postscript.ps">
</HEAD>

Dans l'exemple suivant, nous indiquons aux moteurs de recherche où trouver la page de garde d'une collection de documents.

<HEAD>
<TITLE>Manuel de r&eacute;f&eacute;rence -- Page 5</TITLE>
<LINK rel="Start" title="La premi&egrave;re page du manuel"
      type="text/html"
      href="http://quelquepart.com/manuel/debut.html">
</HEAD>

On donne des informations supplémentaires en appendice dans les remarques pour aider les moteurs de recherche dans l'indexation de votre site Web.

12.4 L'information de chemin : l'élément BASE

<!ELEMENT BASE - O EMPTY               -- URI de base du document -->
<!ATTLIST BASE
  href        %URI;          #REQUIRED -- l'URI faisant office d'URI de base --
  >

Balise ouvrante : obligatoire, balise fermante : interdite

Définition des attributs

href = uri [CT]
Cet attribut spécifie un URI absolu qui agit comme URI de base pour la résolution des URI relatifs.

Attributs définis ailleurs

  • target (indication du cadre cible)

Dans HTML, les liens et les références d'images, d'applets, de programmes de traitement de formulaire, de feuilles de style, etc. sont toujours spécifiés par un URI. Les URI relatifs sont résolus par rapport à un URI de base, qui peut avoir diverses provenances. L'élément BASE permet aux auteurs de spécifier explicitement l'URI de base d'un document.

Quand il est présent, l'élément BASE doit apparaître dans la section HEAD du document HTML, avant tout élément qui se réfère à une source externe. L'information de chemin spécifiée par l'élément BASE n'affecte que les URI du document dans lequel cet élément apparaît.

Par exemple, soit les déclarations suivantes des éléments BASE et A :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
 <HEAD>
   <TITLE>Nos produits</TITLE>
   <BASE href="http://www.poulets.com/produits/intro.html">
 </HEAD>

 <BODY>
   <P>Avez-vous vu nos <A href="../cages/poules.gif">cages &agrave; poules</A> ?
 </BODY>
</HTML>

l'URI relatif "../cages/poules.gif" se résoudrait en :

http://www.poulets.com/cages/poules.gif

12.4.1 La résolution des URI relatifs

Les agents utilisateurs doivent calculer l'URI de base, pour la résolution des URI relatifs, selon le document [RFC1808], section 3. Ce qui suit est la description de la mise en application du document [RFC1808] spécifiquement à HTML.

Les agents utilisateurs doivent calculer l'URI de base en fonction de la préséance suivante (de la priorité la plus élevée à la plus basse) :

  1. l'URI de base est fixé par l'élément BASE ;
  2. l'URI de base est déterminé par les métadonnées découvertes lors d'une interaction protocolaire, telle qu'un en-tête HTTP (voir le document [RFC2616]) ;
  3. par défaut, l'URI de base correspond à l'URI du document courant. Les documents HTML n'ont pas tous un URI de base (par exemple, un document HTML valide peut apparaître dans un e-mail et ne pas être désigné par un URI). De tels documents sont considérés comme erronés s'ils contiennent des URI relatifs et dépendent d'un URI de base par défaut.

De surcroît, les éléments OBJECT et APPLET définissent des attributs qui ont priorité sur la valeur fixée par l'élément BASE. Veuillez consulter les définitions de ces éléments pour des précisions sur les questions d'URI qui leur sont propres.

Remarque : Pour les versions de HTTP qui définissent un en-tête « Link », les agents utilisateurs devraient prendre en compte ces en-têtes exactement comme les éléments LINK dans le document. Le protocole HTTP 1.1, tel que défini par le document [RFC2616], ne comprend pas de champs d'en-tête « Link » (voir la section 19.6.3).


Les objets, les images et les applets dans les documents HTML

13 Les objets, les images et les applets

Sommaire

  1. Introduction aux objets, images et applets
  2. L'inclusion d'une image : l'élément IMG
  3. L'inclusion générique : l'élément OBJECT
    1. Les règles de restitution des objets
    2. L'initialisation de l'objet : l'élément PARAM
    3. Les systèmes de nommage globaux des objets
    4. La déclaration et l'instanciation des objets
  4. L'inclusion d'un applet : l'élément APPLET
  5. Remarques sur les documents incorporés
  6. Les images cliquables
    1. Les images cliquables côté client : les éléments MAP et AREA
      • Exemples d'images cliquables côté client
    2. Les images cliquables côté serveur
  7. La présentation visuelle des images, objets et applets
    1. La largeur et la hauteur
    2. L'espace autour des images et des objets
    3. Les bordures
    4. L'alignement
  8. La manière de spécifier un texte de remplacement

13.1 Introduction aux objets, images et applets

Les fonctionnalités multimédias de HTML permettent aux auteurs d'inclure dans leurs pages des images, des applets (des programmes qui sont automatiquement chargés puis lancés sur la machine de l'utilisateur), des séquences vidéo et d'autres documents HTML.

Par exemple, pour inclure une image PNG dans un document, l'auteur peut écrire :

<BODY>
<P>Voici un gros plan sur le Grand Canyon :
<OBJECT data="canyon.png" type="image/png">
Ceci est un <EM>gros plan</EM> sur le Grand Canyon.
</OBJECT>
</BODY>

Les versions antérieures de HTML permettaient aux auteurs d'inclure des images (via l'élément IMG) et des applets (via l'élément APPLET). Ces éléments ont plusieurs limitations :

  • ils ne répondent pas au problème plus général de la manière d'inclure les nouveaux comme les futurs types de média ;
  • l'élément APPLET ne fonctionne qu'avec des applets basés sur le langage Java. Cet élément est déconseillé en faveur de l'élément OBJECT ;
  • ils entraînent des problèmes d'accessibilité.

Pour répondre à ces questions, HTML 4 introduit l'élément OBJECT, qui offre une solution générale aux inclusions d'objets génériques. L'élément OBJECT permet aux auteurs HTML de spécifier tout ce que l'objet requiert pour sa présentation par un agent utilisateur : le code source, les valeurs initiales et les données d'exécution [ndt. run-time data]. Dans cette spécification, on emploie le terme « objet » pour désigner les choses que les personnes mettent dans les documents HTML ; les termes usuels courants pour ces choses sont : les applets, les modules d'extension [ndt. plug-ins], les gestionnaires de média [ndt. media handlers], etc.

Le nouvel élément OBJECT prend donc en charge quelques unes des tâches effectuées par les éléments existants. Considérons le comparatif des fonctionnalités suivant :

Type d'inclusion | Élément spécifique | Élément générique
Image | IMG | OBJECT
Applet | APPLET (déconseillé) | OBJECT
Un autre document HTML | IFRAME | OBJECT

Le comparatif indique que chaque type d'inclusion possède une solution spécifique et une solution générique. L'élément générique OBJECT servira de solution pour l'implémentation des types de média futurs.

Pour inclure des images, les auteurs peuvent utiliser l'élément OBJECT ou bien l'élément IMG.

Pour inclure des applets, les auteurs devraient utiliser l'élément OBJECT puisque l'élément APPLET est déconseillé.

Pour inclure un document HTML dans un autre, les auteurs peuvent utiliser soit le nouvel élément IFRAME, soit l'élément OBJECT. Dans les deux cas, le document incorporé reste indépendant du document principal. Les agents utilisateurs visuels peuvent présenter le document incorporé dans une fenêtre distincte à l'intérieur du document principal. Veuillez consulter les remarques sur les documents incorporés pour une comparaison entre les éléments OBJECT et IFRAME pour l'inclusion d'un document.

Les images et les autres objets inclus peuvent avoir des hyperliens qui leur sont associés, à la fois au travers des mécanismes de liaison standards mais aussi via des images cliquables [ndt. image maps]. Une image cliquable spécifie les régions géométriques actives d'un objet inclus et assigne un lien à chacune d'elles. Quand ils sont activés, ces liens peuvent entraîner la recherche d'un document, lancer un programme sur le serveur, etc.

Dans les sections suivantes, nous abordons les divers mécanismes dont disposent les auteurs pour les inclusions multimédias et pour la création d'images cliquables pour ces inclusions.

13.2 L'inclusion d'une image : l'élément IMG

<!-- Pour éviter les problèmes avec les agents utilisateurs
   en mode texte seul ainsi que pour rendre le contenu d'une image
   compréhensible et navigable pour les utilisateurs d'agents
   utilisateurs non-visuels, il est nécessaire de fournir une
   description avec ALT, et pour éviter les images cliquables
   côté serveur -->
<!ELEMENT IMG - O EMPTY                -- image incorporée -->
<!ATTLIST IMG
  %attrs;                              -- %coreattrs, %i18n, %events --
  src         %URI;          #REQUIRED -- URI de l'image à incorporer --
  alt         %Text;         #REQUIRED -- description brève --
  longdesc    %URI;          #IMPLIED  -- lien vers une description longue
                                          (en complément de l'attribut alt) --
  name        CDATA          #IMPLIED  -- nom de l'image destiné aux scripts --
  height      %Length;       #IMPLIED  -- surclasse la hauteur --
  width       %Length;       #IMPLIED  -- surclasse la largeur --
  usemap      %URI;          #IMPLIED  -- utiliser une image cliquable côté client --
  ismap       (ismap)        #IMPLIED  -- utiliser une image cliquable côté serveur --
  >

Balise ouvrante : obligatoire, balise fermante : interdite

Définition des attributs

src = uri [CT]
Cet attribut spécifie la localisation de la ressource image. Les formats d'image largement répandus comprennent, par exemple, GIF, JPEG et PNG.
longdesc = uri [CT]
Cet attribut spécifie un lien vers une description longue de l'image. Cette description devrait compléter la description brève fournie par l'attribut alt. Quand il s'agit d'une image cliquable, cet attribut devrait fournir des informations à propos du contenu de l'image cliquable. C'est particulièrement important en ce qui concerne les images cliquables côté serveur. Comme l'élément IMG peut apparaître en contenu d'un élément A, le mécanisme dans l'interface utilisateur de l'agent utilisateur pour accéder à la ressource désignée par l'attribut longdesc doit être différent de celui pour accéder à la ressource désignée par l'attribut href de ce dernier.
name = cdata [CI]
Cet attribut nomme l'élément de sorte qu'il puisse être appelé par des feuilles de style ou des scripts. Remarque : Cet attribut a été retenu pour des raisons de rétro-compatibilité. Les applications devraient utiliser l'attribut id pour identifier les éléments.

Attributs définis ailleurs

  • id, class (identifiants internes au document)
  • alt (texte de remplacement)
  • lang (indications de langue), dir (direction du texte)
  • title (titre de l'élément)
  • style (information de style en-ligne)
  • onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (événements intrinsèques)
  • ismap, usemap (images cliquables côté client)
  • align, width, height, border, hspace, vspace (présentation visuelle des objets, images et applets)

L'élément IMG incorpore une image dans le document courant, à l'emplacement de la définition de l'élément. L'élément IMG n'a pas de contenu ; il est généralement remplacé dans la ligne par l'image que désigne l'attribut src, les images alignées à gauche ou à droite qui « flottent » hors de la ligne faisant exception.

Dans un exemple précédent, nous définissions un lien vers une photo familiale. Ici, nous insérons la photo directement dans le document courant :

<BODY>
<P>Je viens de revenir de vacances !
Voici une photo de la famille sur le lac :
<IMG src="http://www.unecompagnie.com/Gens/Ian/vacances/famille.png"
     alt="Une photo de ma famille sur le lac.">
</BODY>

On pourrait également obtenir cette inclusion avec l'élément OBJECT, comme suit :

<BODY>
<P>Je viens de revenir de vacances !
Voici une photo de la famille sur le lac :
<OBJECT data="http://www.unecompagnie.com/Gens/Ian/vacances/famille.png"
        type="image/png">
Une photo de ma famille sur le lac.
</OBJECT>
</BODY>

L'attribut alt spécifie le texte de remplacement qui sera restitué si l'image ne peut s'afficher (voir ci-dessous pour des précisions sur la manière de spécifier un texte de remplacement). Les agents utilisateurs doivent restituer le texte de remplacement quand ceux-ci ne gèrent pas les images, ne reconnaissent pas un certain type d'image ou ne sont pas configurés par afficher les images.

L'exemple suivant montre comment employer l'attribut longdesc pour relier l'image à une description approfondie :

<BODY>
<P>
<IMG src="image-cliquable.gif"
     alt="Plan du site du laboratoire"
     longdesc="plandusite.html">
</BODY>

L'attribut alt fournit une description brève de l'image. Celle-ci devrait être suffisante pour permettre à l'utilisateur de décider s'il va suivre le lien donné par l'attribut longdesc vers la description plus détaillée, ici "plandusite.html".

Veuillez consulter la section sur la présentation visuelle des objets, images et applets pour des précisions sur la taille, l'alignement et les bordures de l'image.

13.3 L'inclusion générique : l'élément OBJECT

<!ELEMENT OBJECT - - (PARAM | %flow;)*  -- objet incorporé générique -->
<!ATTLIST OBJECT
  %attrs;                              -- %coreattrs, %i18n, %events --
  declare     (declare)      #IMPLIED  -- déclare mais n'instancie pas de drapeau --
  classid     %URI;          #IMPLIED  -- identifie l'implémentation --
  codebase    %URI;          #IMPLIED  -- URI de base pour classid, data, archive --
  data        %URI;          #IMPLIED  -- référence aux données de l'objet --
  type        %ContentType;  #IMPLIED  -- type de contenu des données --
  codetype    %ContentType;  #IMPLIED  -- type de contenu pour code code --
  archive     CDATA          #IMPLIED  -- liste d'URI séparés par des espaces --
  standby     %Text;         #IMPLIED  -- message à afficher pendant le chargement --
  height      %Length;       #IMPLIED  -- surclasse la hauteur --
  width       %Length;       #IMPLIED  -- surclasse la largeur --
  usemap      %URI;          #IMPLIED  -- utiliser une image cliquable côté client --
  name        CDATA          #IMPLIED  -- soumettre comme partie d'un formulaire --
  tabindex    NUMBER         #IMPLIED  -- position dans l'ordre de tabulation --
  >

Balise ouvrante : obligatoire, balise fermante : obligatoire

Définition des attributs

classid = uri [CT]
Cet attribut peut être utilisé pour spécifier la localisation de l'implémentation d'un objet via un URI. On peut l'utiliser en même temps que, ou en alternative à, l'attribut data, selon le type de l'objet impliqué.
codebase = uri [CT]
Cet attribut spécifie le chemin de base utilisé pour résoudre les URI relatifs spécifiés par les attributs classid, data et archive. Quand il est absent, sa valeur par défaut correspond à l'URI de base du document courant.
codetype = type-de-contenu [CI]
Cet attribut spécifie le type de contenu des données attendues lors du chargement de l'objet spécifié par l'attribut classid. Cet attribut est optionnel, mais recommandé quand l'attribut classid est spécifié parce qu'il permet à l'agent utilisateur d'éviter le chargement des informations dont les types ne sont pas reconnus. Quand il est absent, sa valeur par défaut est celle de l'attribut type.
data = uri [CT]
Cet attribut peut être utilisé pour spécifier la localisation des données de l'objet, par exemple les données d'image pour les objects définissant des images, ou plus généralement, la forme sérialisée d'un objet qui peut être utilisée pour recréer cet objet. Quand il est donné comme URI relatif, celui-ci devrait être interprété relativement à l'attribut codebase.
type = type-de-contenu [CI]
Cet attribut spécifie le type de contenu des données spécifiées par l'attribut data. Cet attribut est optionnel, mais recommandé quand l'attribut data est spécifié parce qu'il permet à l'agent utilisateur d'éviter le chargement des informations dont les types de contenu ne sont pas reconnus. Si la valeur de cet attribut diffère de l'en-tête HTTP « Content-Type » retourné par le serveur quand l'objet est ramené, alors c'est l'en-tête HTTP « Content-Type » qui a préséance.
archive = liste-uri [CT]
Cet attribut peut être utilisé pour spécifier la liste des URI, séparés par des espaces, des archives contenant les ressources concernant l'objet, liste qui peut inclure les ressources spécifiées par les attributs classid et data. Le préchargement des archives aboutira généralement à des temps de chargement réduits pour les objets. Les archives spécifiées comme URI relatifs devraient être interprétées relativement à l'attribut codebase.
declare [CI]
Quand il est présent, cet attribut booléen fait de la définition de l'élément OBJECT courant seulement une déclaration. L'objet doit être instancié par la suite au travers d'une définition OBJECT qui se réfère à cette déclaration.
standby = texte [CS]
Cet attribut spécifie le message que l'agent utilisateur peut restituer pendant le chargement de l'implémentation et des données de l'objet.

Attributs définis ailleurs

  • id, class (identifiants internes au document)
  • lang (indications de langue), dir (direction du texte)
  • title (titre de l'élément)
  • style (information de style en-ligne)
  • onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (événements intrinsèques)
  • tabindex (navigation par tabulation)
  • usemap (images cliquables côté client)
  • name (soumission de formulaire)
  • align, width, height, border, hspace, vspace (présentation visuelle des objets, images et applets)

La plupart des agents utilisateurs possèdent des mécanismes intégrés pour la restitution des types de données communs, tels que le texte, les images GIF, les couleurs, les polices et une poignée d'éléments graphiques. Pour restituer les types de données qu'ils ne reconnaissent pas nativement, les agents utilisateurs lancent en général des applications externes. L'élément OBJECT permet aux auteurs de mieux contrôler si les données devraient être restituées de manière externe ou par un certain programme, spécifié par l'auteur, qui restitue ces données au sein de l'agent utilisateur.

Dans le cas le plus général, l'auteur peut avoir besoin de spécifier trois types d'informations :

  • L'implémentation de l'objet inclus. Par exemple, si l'objet inclus est un applet d'horloge, l'auteur doit indiquer la localisation du code exécutable de l'applet ;
  • Les données à restituer. Par exemple, si l'objet inclus est un programme pour restituer des données de polices, l'auteur doit indiquer la localisation de ces données ;
  • Les valeurs supplémentaires requises par l'objet à l'exécution. Par exemple, certains applets peuvent demander des valeurs initiales en paramètres.

L'élément OBJECT permet aux auteurs de spécifier tous ces trois types de données, mais il n'est pas nécessaire de toutes les spécifier en une seule fois. Par exemple, certains objets peuvent ne pas requérir de donnés (par exemple, un applet autonome qui effectue une petite animation). D'autres peuvent exiger une initialisation à l'exécution. D'autres encore ne pas avoir besoin d'informations supplémentaires sur l'implémentation, i.e., l'agent utilisateur peut déjà savoir de lui-même comment restituer ce type de données (par exemple, des images GIF).

Les auteurs spécifient l'implémentation d'un objet et la localisation des données à restituer via l'élément OBJECT. Par contre, pour spécifier des valeurs d'exécution, les auteurs utilisent l'élément PARAM, qui est abordé dans la section sur l'initialisation de l'objet.

L'élément OBJECT peut aussi apparaître en contenu de l'ément HEAD. Étant donné que les agents utilisateurs ne restituent généralement pas les éléments placés dans la section HEAD, les auteurs devraient s'assurer qu'aucun élément OBJECT dans la section HEAD ne spécifie un contenu qui peut être restitué. Veuillez consultez la section sur le partage des données entre les cadres pour un exemple d'inclusion de l'élément OBJECT dans l'élément HEAD.

Veuillez consulter la section sur les contrôles des formulaires pour des précisions sur les éléments OBJECT dans les formulaires.

Ce document ne spécifie pas le comportement des éléments OBJECT qui utilisent à la fois l'attribut classid, pour identifier une implémentation, et l'attribut data, pour spécifier les données pour cette implémentation. Afin d'assurer la portabilité, les auteurs devraient employer l'élément PARAM pour indiquer aux implémentations où aller chercher les donnés supplémentaires.

13.3.1 Les règles de restitution des objets

L'agent utilisateur doit interpréter l'élément OBJECT selon les règles de préséance suivantes :

  1. L'agent utilisateur doit en premier essayer de restituer l'objet. Il ne devrait pas restituer le contenu de l'élément, mais il doit l'examiner au cas où l'élément contiendrait d'éventuels enfants directs qui soient des éléments PARAM (voir la section sur l'initialisation de l'objet) ou bien des éléments MAP (voir la section sur les images cliquables côté client) ;
  2. Si l'agent utilisateur est incapable de restituer l'objet, pour une raison ou pour une autre (non configuré pour, absence des ressources, architecture erronée, etc.), il doit essayer de restituer son contenu.

Les auteurs ne devraient pas inclure de contenu dans les éléments OBJECT qui apparaissent dans l'élément HEAD.

Dans l'exemple suivant, nous insérons un applet d'horloge analogique dans un document via l'élément OBJECT. L'applet, écrit dans le langage Python, ne requiert aucune données supplémentaires ni valeurs d'exécution. L'attribut classid spécifie la localisation de l'applet :

<P><OBJECT classid="http://www.miamachina.it/orologioanalogico.py">
</OBJECT>

Remarquez que l'horloge sera restituée dès l'interprétation de la déclaration de l'élément OBJECT par l'agent utilisateur. Il est possible de différer la restitution d'un objet en effectuant une déclaration préalable de cet objet (décrit ci-dessous).

Les auteurs devraient remplir cette déclaration en y incluant un texte de remplacement comme contenu de l'élément OBJECT, pour le cas où l'agent utilisateur ne pourrait pas restituer l'horloge.

<P><OBJECT classid="http://www.miamachina.it/orologioanalogico.py">
Une horloge animée.
</OBJECT>

Une conséquence significative de la conception de l'élément OBJECT, c'est qu'elle offre un mécanisme pour spécifier des restitutions alternatives de l'objet chacune des déclarations des éléments OBJECT imbriqués peut spécifier un type de contenu alternatif. Si l'agent utilisateur ne peut pas restituer l'élément OBJECT le plus externe, il essaye d'en restituer le contenu, qui peut être un autre élément OBJECT, etc.

Dans l'exemple suivant, nous imbriquons plusieurs déclarations d'éléments OBJECT pour illustrer le fonctionnement des restitutions alternatives. L'agent utilisateur essaye d'abord de restituer le premier élément OBJECT qu'il peut, dans l'ordre suivant : (1) un applet représentant un globe terrestre interactif, écrit dans le langage Python, (2) une animation MPEG du globe, (3) une image GIF du globe et (4) un texte de remplacement.

<P>                 <!-- Essayer d'abord l'applet en Python -->
<OBJECT title="La terre vue de l'espace"
        classid="http://www.observer.mars/LaTerre.py">
                    <!-- Sinon, essayer la vidéo MPEG -->
  <OBJECT data="LaTerre.mpeg" type="application/mpeg">
                    <!-- Sinon, essayer l'image GIF -->
    <OBJECT data="LaTerre.gif" type="image/gif">
                    <!-- Sinon, le texte en dernier recours -->
     La <STRONG>Terre</STRONG> vue de l'espace.
    </OBJECT>
  </OBJECT>
</OBJECT>

La déclaration la plus externe spécifie un applet qui ne requiert ni donnée ni valeurs initiales. La deuxième déclaration spécifie une animation MPEG et, puisqu'elle ne définit pas la localisation d'une l'implémentation pour traiter l'animation MPEG, compte sur l'agent utilisateur pour prendre en charge celle-ci. Nous avons également spécifié l'attribut type, de sorte que l'agent utilisateur, qui sait ne pas pouvoir restituer un MPEG, n'essaiera même pas de charger le fichier "LaTerre.mpeg" à partir du réseau. La troisième déclaration spécifie la localisation d'un fichier GIF et fournit un texte de remplacement au cas où tous les autres mécanismes auraient échoué.

Les données internes comparées aux données externes. Les données à restituer peuvent être fournies de deux façons : en interne ou à partir d'une ressource externe. Tandis que la première méthode donnera en général une restitution plus rapide, elle ne conviendra pas quand il s'agira de restituer une grande quantité de données.

Voici un exemple qui illustre la manière dont les données internes peuvent être injectées dans l'élément OBJECT :

<P>
<OBJECT id="horloge1"
        classid="clsid:663C8FEF-1EF9-11CF-A3DB-080036F12502"
        data="data:application/x-oleobject;base64, ...des données en base64...">
    Une horloge.
</OBJECT>

Veuillez consulter la section sur la présentation visuelle des objets, images et applets pour des précisions sur la taille, l'alignement et les bordures d'un objet.

13.3.2 L'initialisation de l'objet : l'élément PARAM

<!ELEMENT PARAM - O EMPTY              -- valeur de propriété nommée -->
<!ATTLIST PARAM
  id          ID             #IMPLIED  -- identifiant unique dans le document --
  name        CDATA          #REQUIRED -- nom de propriété --
  value       CDATA          #IMPLIED  -- valeur de propriété --
  valuetype   (DATA|REF|OBJECT) DATA   -- comment interpréter la valeur --
  type        %ContentType;  #IMPLIED  -- type de contenu pour la valeur
                                          quand valuetype="ref" --
  >

Balise ouvrante : obligatoire, balise fermante : interdite

Définition des attributs

name = cdata
Cet attribut définit le nom d'un paramètre d'exécution censé être connu des objets insérés. La sensibilité à la casse de la propriété dépend de l'implémentation spécifique de l'objet.
value = cdata
Cet attribut spécifie la valeur d'un paramètre d'exécution spécifié par l'attribut name. Les valeurs de propriété n'ont aucune signification pour HTML : leur signification est déterminée par l'objet en question.
valuetype = data|ref|object [CI]
Cet attribut spécifie le type de l'attribut value. Les valeurs possibles sont :
  • data : c'est la valeur par défaut de l'attribut. Elle signifie que la valeur spécifiée par value sera évaluée puis passée à l'implémentation de l'objet sous forme d'une chaîne ;
  • ref : la valeur spécifiée par l'attribut value est un URI qui désigne une ressource dans laquelle les valeurs d'exécution sont stockées. Ceci permet aux outils de gestion d'identifier les URI qui sont donnés en paramètres. L'URI doit être passé à l'objet tel quel, i.e., non résolu ;
  • object : la valeur spécifiée par l'attribut value est un identifiant qui se réfère à la déclaration d'un élément OBJECT dans le même document. L'identifiant doit être la valeur de l'attribut id mis pour l'élément OBJECT déclaré.
type = type-de-contenu [CI]
Cet attribut spécifie le type de contenu de la ressource désignée par l'attribut value seulement dans le cas où l'attribut valuetype a la valeur "ref". Cet attribut indique donc à l'agent utilisateur le type des valeurs qui seront trouvées à l'URI que désigne l'attribut value.

Attributs définis ailleurs

  • id (identifiants internes au document)

Les éléments PARAM spécifient l'ensemble des valeurs qui peuvent être requises à l'exécution par un objet. Il peut y avoir un nombre quelconque d'éléments PARAM dans le contenu d'un élément OBJECT, ou APPLET, dans n'importe quel ordre, mais ceux-ci doivent se placer au début du contenu de l'élément englobant OBJECT, ou APPLET.

La syntaxe des noms et de leurs valeurs est censée comprise par l'implémentation de l'objet. Ce document ne spécifie pas les façons selon lesquelles les agents utilisateurs devraient ramener les couples nom/valeur ni devraient interpréter les noms apparaissant en double.

Nous revenons à l'exemple avec l'horloge pour illustrer l'utilisation de l'élément PARAM : supposons que l'applet admette deux paramètres d'exécution qui définissent sa hauteur et sa largeur initiales. On peut fixer une dimension initiale de 40x40 pixels à l'aide de deux éléments PARAM.

<P><OBJECT classid="http://www.miamachina.it/orologianalogico.py">
<PARAM name="height" value="40" valuetype="data">
<PARAM name="width" value="40" valuetype="data">
L'agent utilisateur ne reconnaît pas les applications Python.
</OBJECT>

Dans l'exemple suivant, les données d'exécution pour le paramètre « Valeurs_initiales » de l'objet sont spécifiées comme étant une ressource externe (un fichier GIF). La valeur de l'attribut valuetype est donc fixée à "ref" et la valeur de l'attribut value est l'URI qui désigne la ressource.

<P><OBJECT classid="http://www.cadeau.com/gifappli"
       standby="Chargement en cours...">
<PARAM name="Valeurs_initiales"
       value="./images/elvis.gif">
       valuetype="ref">
</OBJECT>

Remarquez que nous avons également spécifié l'attribut standby pour que l'agent utilisateur puisse afficher un message pendant le chargement du mécanisme de restitution.

Quand un élément OBJECT est restitué, l'agent utilisateur doit rechercher les seuls contenus des éléments PARAM qui sont des enfants directs et les « injecter » dans l'objet OBJECT.

Ainsi, dans l'exemple suivant, si l'objet identifié par "obj1" est restitué, alors le paramètre "param1" s'applique à "obj1" (et non à "obj2"). Si l'objet "obj1" n'est pas restitué et par contre l'objet "obj2" l'est, alors le paramètre "param1" est ignoré et "param2" s'applique à "obj2". Si ni l'un ni l'autre élément OBJECT n'est restitué, alors ni l'un ni l'autre élément PARAM ne s'applique.

<P>
<OBJECT id="obj1">
   <PARAM name="param1">
   <OBJECT id="obj2">
      <PARAM name="param2">
   </OBJECT>
</OBJECT>

13.3.3 Les systèmes de nommage globaux des objets

La localisation de l'implémentation d'un objet est donnée par un URI. Comme nous l'avons vu dans l'introduction aux URI, le premier segment d'un URI absolu spécifie le système de nommage [ndt. naming scheme] utilisé pour transférer les données désignées par l'URI. Pour les documents HTML, ce système est fréquemment « http ». Certains applets pourraient employer d'autres systèmes de nommage. Par exemple, lors de la spécification d'un applet Java, les auteurs peuvent utiliser des URI qui commencent par « java » et pour les applets ActiveX par « clsid ».

Dans l'exemple suivant, on insère un applet Java dans un document HTML.

<P><OBJECT classid="java:program.start">
</OBJECT>

Par la spécification de l'attribut codetype, l'agent utilisateur peut décider s'il ramène l'application Java en s'appuyant sur sa capacité à le faire.

<OBJECT codetype="application/java-archive"
        classid="java:program.start">
</OBJECT>

Certains systèmes de restitution demandent des informations supplémentaires pour identifier leur implémentation et on doit leur dire où trouver ces informations. Les auteurs peuvent donner une indication de chemin à l'implémentation de l'objet via l'attribut codebase.

<OBJECT codetype="application/java-archive"
        classid="java:program.start">
        codebase="http://foooo.bar.com/java/monimplementation/"
</OBJECT>

L'exemple suivant spécifie (avec l'attribut classid) un objet ActiveX via un URI qui commence par le système de nommage « clsid ». L'attribut data localise les données à restituer (une autre horloge).

<P><OBJECT classid="clsid:663C8FEF-1EF9-11CF-A3DB-080036F12502"
        data="http://www.acme.com/ole/horloge.stm">
Cette application n'est pas reconnue.
</OBJECT>

13.3.4 La déclaration et l'instanciation des objets

Les exemples précédents n'ont illustré, jusqu'à présent, que des définitions d'objet isolées. Quand un document doit contenir plusieurs instances du même objet, il est possible de séparer la déclaration de l'objet de ses instanciations. Cela présente plusieurs avantages :
  • les données peuvent être ramenées du réseau par l'agent utilisateur une seule fois (lors de la déclaration) et réutilisées pour chaque instanciation ;
  • il est possible d'instancier un objet à partir d'un autre endroit que celui de la déclaration de l'objet, par exemple, à partir d'un lien ;
  • il est possible de spécifier des objets comme étant des données d'exécution pour d'autres objets.

Pour déclarer un objet de sorte qu'il ne soit pas exécuté au moment où l'agent utilisateur le lit, il faut placer l'attribut booléen declare dans l'élément OBJECT. Dans le même temps, l'auteur doit identifier cette déclaration, en assignant à l'attribut id dans l'élément OBJECT une valeur unique. Les instanciations ultérieures de l'objet se référeront à cet identifiant.

Un élément OBJECT déclaré doit apparaître dans le document avant la première instance de cet élément OBJECT.

Un objet, défini avec l'attribut declare, est instancié toutes les fois où un élément qui se rapporte à cet objet requiert une restitution de celui-ci (par exemple, un lien qui se réfère à l'objet est activé, un autre objet qui s'y réfère est activé, etc.).

Dans l'exemple suivant, on déclare un élément OBJECT et on induit son instanciation en l'appelant à partir d'un lien. L'objet peut donc être activé, par exemple, en cliquant sur un certain texte mis en surbrillance.

<P><OBJECT declare
        id="terre.declaration"
        data="LaTerre.mpeg"
        type="application/mpeg">
   La <STRONG>Terre</STRONG> vue de l'espace.
</OBJECT>
...plus loin dans le document...
<P>Une <A href="#terre.declaration">animation de la Terre</A> bien faite !

errata-11

L'exemple suivant illustre la manière de spécifier des valeurs d'exécution qui sont d'autres objets. Ici, nous envoyons un texte (plus précisément, un poème) à un mécanisme hypothétique qui permet de visionner les poèmes. L'objet reconnaît un paramètre d'exécution nommé « police » (disons, pour restituer le texte du poème dans une certaine police). La valeur de ce paramètre est elle-même un objet qui insère l'objet police (mais qui ne le restitue pas). La relation entre l'objet police et le visionneur de poème est obtenue (1) en donnant la valeur "tribune" à l'attribut id de l'objet police et (2) en l'appelant à partir de l'élément PARAM de l'objet visionneur de poème (avec les attributs valuetype et value).

<P><OBJECT declare
     id="tribune"
     type="application/x-webfont"
     data="tribune.gif">
</OBJECT>
...ici visionnage du poème dans la police KublaKhan.txt...
<P><OBJECT classid="http://foo.bar.com/visionneur_poeme"
           data="KublaKhan.txt">
<PARAM name="font" valuetype="object" value="#tribune">
<P>Il vous manque le fantastique visionneur de poème...
</OBJECT>

Les agents utilisateurs qui ne reconnaissent pas l'attribut declare doivent restituer le contenu de la déclaration de l'élément OBJECT.

13.4 L'inclusion d'un applet : l'élément APPLET

APPLET est déconseillé (avec tous ses attributs) en faveur de OBJECT.

Voir le DTD transitoire pour la définition formelle.

Définition des attributs

codebase = uri [CT]
Cet attribut spécifie l'URI de base pour l'applet. Si cet attribut n'est pas spécifié, alors il prend par défaut le même URI de base que celui du document courant. Les valeurs de cet attribut ne peuvent se référer qu'aux sous-répertoires du répertoire contenant le document courant. Remarque : Bien que la restriction sur les sous-répertoires constitue un écart par rapport aux pratiques courantes et à la spécification HTML 3.2, le groupe de travail HTML a choisi de conserver celle-ci dans cette version de la spécification pour des raisons de sécurité.
code = cdata [CS]
Cet attribut spécifie soit le nom du fichier de classe, qui contient la sous-classe d'applet compilée de l'applet, soit le chemin pour obtenir la classe, y compris le fichier de classe lui-même. Il est évalué par rapport à l'attribut codebase de l'applet. L'un des attributs code et object doit être présent.
name = cdata [CS]
Cet attribut spécifie le nom de l'instance d'applet, ce qui permet à chacun des applets d'une même page de se trouver (et de communiquer).
archive = liste-uri [CT]
Cet attribut spécifie une liste des URI, séparés par des virgules, des archives contenant les classes et les autres ressources qui seront « préchargées ». Les classes sont chargées en utilisant l'instance d'une classe AppletClassLoader avec la valeur de l'attribut codebase donné. Les URI relatifs s'interprètent par rapport à l'attribut codebase de l'applet. Le préchargement des ressources peut améliorer significativement les performances des applets.
object = cdata [CS]
Cet attribut nomme une ressource contenant une représentation sérialisée de l'état d'un applet. Il est évalué relativement à l'attribut codebase de l'applet. Les données sérialisées contiennent le nom de classe de l'applet mais pas l'implémentation. Le nom de classe est utilisé pour chercher l'implémentation dans un fichier de classe ou dans une archive.

Quand l'applet est « désérialisé », la méthode start() est invoquée mais non la méthode init(). Les attributs valide au moment de la sérialisation de l'objet original ne sont pas réenregistrés. Tous les attributs passés à cet instance APPLET seront disponibles pour l'applet. Les auteurs devraient utiliser cette faculté avec une extrême prudence. Un applet devrait être arrêté avant d'être sérialisé.

L'un des attributs code et object doit être présent. Quand les deux attributs code et object sont donnés, il y aura une erreur s'ils fournissent deux noms de classe différents.

width = longueur [CI]
Cet attribut spécifie la largeur initiale de la zone d'affichage de l'applet (en excluant les fenêtres ou dialogues éventuellement créés par l'applet).
height = longueur [CI]
Cet attribut spécifie la hauteur initiale de la zone d'affichage de l'applet (en excluant les fenêtres ou dialogues éventuellement créés par l'applet).

Attributs définis ailleurs

  • id, class (identifiants internes au document)
  • title (titre de l'élément)
  • style (information de style en-ligne)
  • alt (texte de remplacement)
  • align, hspace, vspace (présentation visuelle des objets, images et applets)

Cet élément, qui est géré par tous les navigateurs compatibles avec Java, permet aux développeurs d'incorporer un applet Java dans un document HTML. Il est déconseillé en faveur de l'élément OBJECT.

Le contenu de l'élément APPLET fais office de support d'informations de remplacement pour les agents utilisateurs qui ne reconnaissent pas cet élément ou qui ne sont pas configurés à cet instant pour gérer les applets. Sinon, les agents utilisateurs doivent ignorer le contenu.

EXEMPLE DÉCONSEILLÉ :
Dans l'exemple suivant, l'élément APPLET inclut un applet Java au document. Comme aucun attribut codebase n'est donné, l'applet est censé se trouver dans le même répertoire que le document courant.

<APPLET code="Bulles.class" width="500" height="500">
Un applet Java qui dessine des bulles anim&eacute;es.
</APPLET>

Cet exemple peut se récrire avec un élément OBJECT, comme suit :

<P><OBJECT codetype="application/java"
        classid="java:Bulles.class"
        width="500" height="500">
Un applet Java qui dessine des bulles anim&eacute;es.
</OBJECT>

Les valeurs initiales peuvent être fournies à l'applet via l'élément PARAM.

EXEMPLE DÉCONSEILLÉ :
L'exemple d'applet Java suivant :

<APPLET code="AudioItem" width="15" height="15">
<PARAM name="son" value="Bonjour.au|Bienvenue.au">
Un applet Java qui joue un son de bienvenue.
</APPLET>

celui-ci peut se récrire avec l'élément OBJECT, commes suit :

<OBJECT codetype="application/java"
        classid="AudioItem"
        width="15" height="15">
<PARAM name="son" value="Bonjour.au|Bienvenue.au">
Un applet Java qui joue un son de bienvenue.
</OBJECT>

13.5 Remarques sur les documents incorporés

Parfois, plutôt qu'une relation vers un document, l'auteur peut vouloir incorporer celui-ci directement dans un document HTML principal. Pour cela, l'auteur peut utiliser soit l'élément IFRAME, soit l'élément OBJECT, mais ces éléments sont différents par certains côtés. Ces deux éléments n'ont pas seulement des modèles de contenu différents, mais l'élément IFRAME peut être un cadre cible (voir la section sur la spécification des informations du cadre cible pour les détails) et peut être « sélectionné » par l'agent utilisateur comme la partie à imprimer, la source HTML à voir, etc. Les agents utilisateurs peuvent restituer les cadres sélectionnés de manière à les distinguer des cadres qui ne le sont pas (par exemple, en dessinant une bordure autour du cadre sélectionné).

Le document incorporé est complètement indépendant du document dont lequel il se loge. Par exemple, les URI relatifs dans le document incorporé se résolvent par rapport à l'URI de base du document incorporé, non celui du document principal. Le document incorporé est simplement restitué à l'intérieur d'un autre document (par exemple, dans une sous-fenêtre) ; il reste indépendant par ailleurs.

Par exemple, la ligne suivante incorpore le contenu de « loge_moi.html » à l'emplacement où la définition de l'élément OBJECT survient.

...texte qui précède...
<OBJECT data="loge_moi.html">
Avertissement : le fichier "loge_moi.html" n'a pu &ecirc;tre incorpor&eacute;.
</OBJECT>
...texte qui suit...

Rappelez-vous que le contenu de l'élément OBJECT ne doit seulement être restitué que si le fichier spécifié par l'attribut data n'a pu être chargé.

Le comportement d'un agent utilisateur pour le cas où un fichier s'auto-inclut n'est pas défini.

13.6 Les images cliquables

Les images cliquables permettent aux auteurs de spécifier des régions dans une image, ou un objet, et d'assigner une action particulière à chacune de ces régions (par exemple, ramener un document, lancer un programme, etc.). Quand l'utilisateur active la région, l'action est exécutée.

Une image cliquable est créée en associant à un objet une spécification de zones géométriques sensibles sur celui-ci.

Il existe deux types d'images cliquables :

  • Côté client. Quand l'utilisateur active une région d'une image cliquable côté client avec une souris, l'agent utilisateur en interprète les coordonnées du pixel. L'agent utilisateur sélectionne le lien spécifié pour la région activée et le suit ;
  • Côté serveur. Quand l'utilisateur active une région d'une image cliquable côté serveur, les coordonnées du pixel du clic sont envoyées à l'agent côté serveur, qui est spécifié par l'attribut href de l'élément A. L'agent côté serveur interprète ces coordonnées et effectue une certaine action.

Les images cliquables côté client sont préférées à celles côté serveur pour au moins deux raisons : elles sont accessibles aux personnes navigant avec des agents utilisateurs non-graphiques et elles renvoient une réponse immédiate pour ce qui est de savoir si le pointeur se trouve sur une région active ou non.

13.6.1 Les images cliquables côté client : les éléments MAP et AREA

<!ELEMENT MAP - - ((%block;) | AREA)+ -- image cliquable côté client -->
<!ATTLIST MAP
  %attrs;                              -- %coreattrs, %i18n, %events --
  name        CDATA          #REQUIRED -- pour appel par l'attribut usemap --
  >

Balise ouvrante : obligatoire, balise fermante : obligatoire

<!ELEMENT AREA - O EMPTY               -- aire d'image cliquable côté client -->
<!ATTLIST AREA
  %attrs;                              -- %coreattrs, %i18n, %events --
  shape       %Shape;        rect      -- contrôle l'interprétation des coordonnées --
  coords      %Coords;       #IMPLIED  -- liste de longueurs séparées par des virgules --
  href        %URI;          #IMPLIED  -- URI de la ressource reliée --
  nohref      (nohref)       #IMPLIED  -- cette région est neutre --
  alt         %Text;         #REQUIRED -- description brève --
  tabindex    NUMBER         #IMPLIED  -- position dans l'ordre de tabulation --
  accesskey   %Character;    #IMPLIED  -- touche de caractère pour l'accessibilité --
  onfocus     %Script;       #IMPLIED  -- l'élément a l'attention --
  onblur      %Script;       #IMPLIED  -- l'élément perd l'attention --
  >

Balise ouvrante : obligatoire, balise fermante : interdite

Définition des attributs pour MAP

name = cdata [CI]
Cet attribut assigne un nom à l'image cliquable définie par un élément MAP.

Définiton des attributs pour AREA

shape = default|rect|circle|poly [CI]
Cet attribut spécifie la forme d'une région. Les valeurs possibles sont :
  • default : spécifie la région entière ;
  • rect : définit une région rectangulaire ;
  • circle : définit une région circulaire ;
  • poly : définit une région polygonale.
coords = coordonnées [CN]
Cet attribut spécifie la position et la forme sur l'écran. Le nombre et l'ordre des valeurs dépend de la forme qui est définie. Les combinaisons possibles sont :
  • rect : gauche-x, haut-y, droite-x, bas-y ;
  • circle : centre-x, centre-y, rayon. Remarque : Quand la valeur du rayon est un pourcentage, l'agent utilisateur devrait calculer le rayon final par rapport à la hauteur et à la largeur de l'objet associé. Le rayon devrait être la plus petite valeur des deux ;
  • poly : x1, y1, x2, y2, ..., xN, yN. Le premier couple de coordonnées « x » et « y » et le dernier devraient être les mêmes pour clore le polygone. Quand ces valeurs de coordonnées ne sont pas les mêmes, l'agent utilisateur devrait inférer un couple de coordonnées supplémentaire pour clore le polygone.

Les coordonnées sont relatives au coin supérieur gauche de l'objet. Toutes les valeurs sont du type longueur. Toutes les valeurs sont séparées par des virgules.

errata-15

nohref [CI]
Quand il est mis, cet attribut booléen spécifie que la région n'a aucun lien associé.

Attribut pour associer une image cliquable à un élément

usemap = uri [CT]
Cet attribut associe une image cliquable à un élément. Cette image cliquable est définie par l'élément MAP. La valeur de l'attribut usemap doit correspondre avec celle de l'attribut name de l'élément MAP associé.

Attributs définis ailleurs

  • id, class (identifiants internes au document)
  • lang (indications de langue), dir (direction du texte)
  • title (titre de l'élément)
  • style (information de style en-ligne)
  • name (soumission d'objets avec un formulaire)
  • alt (texte de remplacement)
  • href (référence d'ancre) target (indication du cadre cible)
  • tabindex (navigation par tabulation)
  • accesskey (clés d'accès)
  • shape (images cliquables)
  • onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup, onfocus, onblur (événements intrinsèques)

L'élément MAP spécifie une image cliquable côté client (ou un autre mécanisme de navigation) qui peut être associée à d'autres éléments (IMG, OBJECT ou INPUT). L'image cliquable est associée à un élément via l'attribut usemap de celui-ci. L'élément MAP peut s'employer sans image associée pour des mécanismes de navigation généraux.

La présence de l'attribut usemap sur un élément OBJECT implique que l'objet qui est inclus est une image. En outre, quand l'élément OBJECT a une image cliquable côté client associée, l'agent utilisateur peut produire une interaction utilisateur avec cet élément OBJECT, uniquement en fonction de l'image cliquable côté client. Ceci permet aux agents utilisateurs (tels un navigateur vocal ou un robot) d'interagir avec l'élément OBJECT sans devoir le traiter ; l'agent utilisateur peut même choisir de ne pas ramener (ou traiter) l'objet. Quand un élément OBJECT a une image cliquable associée, l'auteur ne devrait pas compter sur le fait que l'objet sera ramené ou traité par tous les agents utilisateurs.

Le modèle de contenu de l'élément MAP permet à l'auteur les combinaisons suivantes :

  1. Un ou plusieurs éléments AREA. Ces éléments n'ont aucun contenu mais spécifient les régions géométriques de l'image cliquable et les liens qui sont associés à chaque région. Remarquez que les agents utilisateurs ne restituent pas en général les élément AREA. C'est pourquoi les auteurs doivent fournir un texte de remplacement pour chaque élément AREA avec l'attribut alt (voir ci-dessous pour des renseignements sur la manière de spécifier un texte de remplacement) ;
  2. Un contenu de type bloc. Ce contenu devrait comprendre les éléments A qui spécifient les régions géométriques de l'image cliquable et le lien associé à chaque région. Remarquez que l'agent utilisateur devraient restituer le contenu de type bloc d'un élément MAP. Les auteurs devraient utiliser cette méthode pour créer des documents plus accessibles.

Quand un élément MAP contient un contenu mixte (à la fois des éléments AREA et un contenu de type bloc), les agents utilisateurs doivent ignorer les éléments AREA.

Les auteurs devraient spécifier la géométrie d'une image cliquable entièrement avec des éléments AREA, ou entièrement avec des éléments A, ou entièrement avec les deux si le contenu est mixte. Les auteurs peuvent souhaiter mêler le contenu, de sorte que les agents utilisateurs anciens prendront en charge les cartographies spécifiées par les éléments AREA et les agents utilisateurs récents tireront profit des contenus en bloc plus étoffés.

Si deux régions définies ou plus se chevauchent, l'élément définissant une région qui apparaît en premier dans le document a priorité (i.e., répond aux sollicitations de l'utilisateur).

Les agents utilisateurs et les auteurs devraient offrir des alternatives textuelles aux images cliquables quand les graphiques ne sont pas disponibles ou les utilisateurs ne peuvent y accéder. Par exemple, les agents utilisateurs peuvent utiliser le texte de l'attribut alt pour créer des liens textuels à la place des images cliquables graphiques. De tels liens peuvent être activés de diverses façons (clavier, commande vocale, etc.).

Remarque : L'élément MAP n'est pas rétro-compatible avec les agents utilisateurs HTML 2.0.

Exemples d'images cliquables côté client

Dans l'exemple suivant, nous créons une image cliquable côté client pour l'élément OBJECT. Nous ne voulons pas restituer le contenu d'image cliquable quand l'élément OBJECT est restitué, c'est pourquoi nous « dissimulons » l'élément MAP dans le contenu de l'élément OBJECT. En conséquence, le contenu de l'élément MAP ne sera restitué qui si l'élément OBJECT ne peut pas l'être.

<HTML>
   <HEAD>
      <TITLE>Le site sympa !</TITLE>
   </HEAD>
   <BODY>
     <P><OBJECT data="barrenavigation1.gif" type="image/gif" usemap="#carte1">
     <MAP name="carte1">
       <P>Naviguer dans le site :
       <A href="guide.html" shape="rect" coords="0,0,118,28">Plan d'acc&egrave;s</a> |
       <A href="raccourci.html" shape="rect" coords="118,0,184,28">Entr&eacute;e</A> |
       <A href="recherche.html" shape="circle" coords="184,200,60">Recherche</A> |
       <A href="top10.html" shape="poly" coords="276,0,276,28,100,200,50,50,276,0">
                Les dix premiers du hit-parade</A>
     </MAP>
     </OBJECT>
   </BODY>
</HTML>

On peut vouloir que l'image cliquable soit restituée même si l'agent utilisateur est incapable de restituer l'élément OBJECT. Par exemple, on peut vouloir associer une image cliquable à un élément OBJECT et inclure une barre de navigation textuelle en bas de la page. Pour cela, nous définissons l'élément MAP en dehors de l'élément OBJECT :

<HTML>
   <HEAD>
      <TITLE>Le site sympa !</TITLE>
   </HEAD>
   <BODY>
     <P><OBJECT data="barrenavigation1.gif" type="image/gif" usemap="#carte1">
     </OBJECT>

     ...le reste de la page ici...

     <MAP name="carte1">
       <P>Naviguer dans le site :
       <A href="guide.html" shape="rect" coords="0,0,118,28">Plan d'acc&egrave;s</a> |
       <A href="raccourci.html" shape="rect" coords="118,0,184,28">Entr&eacute;e</A> |
       <A href="recherche.html" shape="circle" coords="184,200,60">Recherche</A> |
       <A href="top10.html" shape="poly" coords="276,0,276,28,100,200,50,50,276,0">
                Les dix premiers du hit-parade</A>
     </MAP>
   </BODY>
</HTML>

Dans l'exemple suivant, nous créons une image cliquable similaire, cette fois en employant l'élément AREA. Remarquez l'utilisation du texte de l'attribut alt :

<P><OBJECT data="barrenavigation1.gif" type="image/gif" usemap="#carte1">
   <P>Voici une barre de navigation.
   </OBJECT>

<MAP name="carte1">
 <AREA href="guide.html"
          alt="Plan d'acc&egrave;s"
          shape="rect"
          coords="0,0,118,28">
 <AREA href="recherche.html"
          alt="Recherche"
          shape="rect"
          coords="184,0,276,28">
 <AREA href="raccourci.html"
          alt="Entr&eacute;e"
          shape="circle"
          coords="184,200,60">
 <AREA href="top10.html"
          alt="Les dix premiers du hit-parade"
          shape="poly"
          coords="276,0,276,28,100,200,50,50,276,0">
</MAP>

Voici une variante utilisant l'élément IMG au lieu de OBJECT (avec la même déclaration MAP) :

<P><IMG src="barrenavigation1.gif" usemap="#carte1" alt="Barre de navigation">

L'exemple suivant illustre la manière dont on peut partager des images cliquables.

Les éléments OBJECT imbriqués sont utiles pour offrir des solutions de repli au cas où l'agent utilisateur ne reconnaîtrait pas certains formats. Par exemple :

<P>
<OBJECT data="barrenavigation.png" type="image/png">
  <OBJECT data="barrenavigation.gif" type="image/gif">
    texte décrivant l'image...
  </OBJECT>
</OBJECT>

Si l'agent utilisateur ne reconnaît pas le format PNG, celui-ci essaye de restituer l'image GIF. Si celui-ci ne reconnaît pas le format GIF (par exemple, parce qu'il s'agit d'un navigateur vocal), il se rabat par défaut sur la description textuelle fournie en contenu de l'élément OBJECT interne. Quand les éléments OBJECT sont imbriqués de cette manière, les auteurs peuvent partager des images cliquables entre eux :

<P>
<OBJECT data="barrenavigation.png" type="image/png" usemap="#carte1">
  <OBJECT data="barrenavigation.gif" type="image/gif" usemap="#carte1">
     <MAP name="carte1">
     <P>Naviguer dans le site :
      <A href="guide.html" shape="rect" coords="0,0,118,28">Plan d'acc&egrave;s</a> |
      <A href="raccourci.html" shape="rect" coords="118,0,184,28">Entr&eacute;e</A> |
      <A href="recherche.html" shape="circle" coords="184,200,60">Recherche</A> |
      <A href="top10.html" shape="poly" coords="276,0,276,28,100,200,50,50,276,0">
               Les dix premiers du hit-parade</A>
     </MAP>
  </OBJECT>
</OBJECT>

L'exemple suivant montre comment on peut spécifier des ancres pour créer des zones inactives dans une image cliquable. La première ancre spécifie une petite région circulaire sans lien associé. La deuxième ancre spécifie une région circulaire plus grande de même centre que le précédent. Les deux combinés forment un anneau dont le centre est inactif et le bord actif. L'ordre des définitions des ancres est important, car le petit cercle doit surclasser le grand cercle.

<MAP name="carte1">
<P>
<A shape="circle" coords="100,200,50">Je suis inactif.</A>
<A href="lien-anneau-externe.html" shape="circle" coords="100,200,250">Je suis actif.</A>
</MAP>

De la même manière, l'attribut nohref de l'élément AREA déclare que la région géométrique n'a pas de lien associé.

13.6.2 Les images cliquables côté serveur

Les images cliquables côté serveur peuvent se révéler intéressantes pour les cas où l'image cliquable serait trop compliquée à réaliser côté client.

On ne peut définir une image cliquable côté serveur que pour les éléments IMG et INPUT. Pour ce qui est de l'élément IMG, celui-ci doit se trouver dans un élément A et l'attribut booléen ismap ([CI]) doit être présent. Pour ce qui est de l'élément INPUT, celui-ci doit être du type "image".

Quand l'utilisateur active le lien, en cliquant sur l'image, les cordonnées de ce clic à l'écran sont directement transmises au serveur qui héberge le document. Les coordonnées à l'écran sont exprimées par des valeurs en pixels d'écran relativement à l'image. Pour des informations normatives sur la définition d'un pixel et sur la manière de le mesurer, veuillez consulter la spécification [CSS1].

Dans l'exemple suivant, la région active définit un lien côté serveur. Ainsi, tout clic sur l'image entraînera la transmission des coordonnés du point cliqué au serveur.

<P><A href="http://www.acme.com/cgi-bin/competition">
        <IMG src="jeu.gif" ismap alt="Cible"></A>

Le point cliqué est transmis au serveur comme suit. L'agent utilisateur dérive un nouvel URI à partir de l'URI spécifié par l'attribut href de l'élément A, en lui rajoutant à la fin le caractère « ? » suivi des coordonnées « x » et « y », séparées par une virgule. Le lien est alors suivi en utilisant le nouvel URI. Par exemple, dans l'exemple donné, si l'utilisateur clique au point « x=10, y=27 », alors l'URI dérivé sera "http://www.acme.com/cgi-bin/competition?10,27".

Les agents utilisateurs, qui n'offrent aucun moyen pour sélectionner des coordonnées spécifiques (par exemple, un agent utilisateur non-graphique qui s'appuie sur une saisie au clavier, un agent utilisateur vocal, etc.), devraient envoyer les coordonnées "0,0" au serveur lors de l'activation du lien.

13.7 La présentation visuelle des images, objets et applets

Tous les attributs des éléments IMG et OBJECT, concernant alignement et présentation visuels, sont déconseillés en faveur des feuilles de style.

13.7.1 La largeur et la hauteur

Définition des attributs

width = longueur [CN]
Surclassement de la largeur d'une image ou d'un objet.
height = longueur [CN]
Surclassement de la hauteur d'une image ou d'un objet.

Quand ils sont spécifiés, les attributs width et height indiquent à l'agent utilisateur de surclasser les dimensions naturelles de l'image, ou de l'objet, par leurs valeurs.

Quand l'objet est une image, elle est mise à l'échelle. L'agent utilisateur devrait faire de son mieux pour changer l'échelle d'un objet ou d'une image pour correspondre à la largeur et la hauteur spécifiées par l'auteur. Remarquez que les longueurs exprimées en pourcentages sont fonction de l'espace horizontal et vertical disponible à cet instant, non des dimensions naturelles de l'image, de l'objet ou de l'applet.

Les attributs height et width donnent à l'agent utilisateur une indication sur les dimensions d'une image ou d'un objet, de sorte qu'il puisse réserver leur place et continuer à restituer le document en attendant les données d'image.

13.7.2 L'espace autour des images et des objets

Définition des attributs

hspace = pixels [CN]
Déconseillé. Cet attribut spécifie la quantité d'espace à insérer à gauche et à droite des éléments IMG, APPLET ou OBJECT. La valeur par défaut n'est pas spécifiée mais il s'agit en général d'une petite longueur non-nulle.
vspace = pixels [CN]
Déconseillé. Cette attribut spécifie la quantité d'espace à insérer au-dessus et en-dessous des éléments IMG, APPLET ou OBJECT. La valeur par défaut n'est pas spécifiée mais il s'agit en général d'une petite longueur non-nulle.

13.7.3 Les bordures

Une image ou un objet peuvent être entourés par une bordure (par exemple, quand l'utilisateur spécifie une bordure ou quand l'image est le contenu d'un élément A).

Définition des attributs

border = pixels [CN]
Déconseillé. Cet attribut spécifie l'épaisseur de la bordure d'un élément IMG, ou OBJECT, en pixels. La valeur par défaut de cet attribut dépend de l'agent utilisateur.

13.7.4 L'alignement

Définition des attributs

align = bottom|middle|top|left|right
Déconseillé. Cet attribut spécifie la position d'un élément IMG, ou OBJECT, ou APPLET, par rapport à son contexte.

Les valeurs suivantes de l'attribut align concernent la position de l'objet par rapport au texte qui l'entoure :

  • bottom : signifie que le bas de l'objet devrait s'aligner verticalement sur la ligne de base courante. C'est la valeur par défaut ;
  • middle : signifie que le centre de l'objet devrait s'aligner verticalement sur la ligne de base courante ;
  • top : signifie que le haut de l'objet devrait s'aligner verticalement sur la ligne de base courante.

Les deux autres valeurs left et right entraînent l'image à flotter vers la marge gauche, ou droite, courante. Ils sont abordés dans la section sur les objets flottants.

Les interprétations divergentes de l'attribut align. Les agents utilisateurs divergent dans leur interprétation de l'attribut align. Certains ne prennent en compte que ce qui s'est passé sur la ligne de texte avant l'élément, d'autres prennent en compte le texte sur les deux côtés de l'élément.

13.8 La manière de spécifier un texte de remplacement

Définition des attributs

alt = texte [CS]
Cet attribut spécifie un texte de remplacement pour les agents utilisateurs qui sont incapables d'afficher les images, les formulaires ou les applets. La langue du texte de remplacement est spécifiée par l'attribut lang.

Plusieurs éléments non-textuels (IMG, AREA, APPLET et INPUT) laissent l'auteur spécifier un texte de remplacement qui sert de contenu quand l'élément ne peut pas être restitué normalement. La spécification d'un texte de remplacement représente une aide pour les utilisateurs ne disposant pas de terminaux d'affichage graphiques, pour les utilisateurs dont les navigateurs ne reconnaissent pas les formulaires, pour les utilisateurs avec des déficiences visuelles, pour ceux qui utilisent des synthétiseurs de parole, ceux qui ont désactivé l'affichage des images de leurs agents utilisateurs graphiques, etc.

On doit spécifier l'attribut alt sur les éléments IMG et AREA. Il est optionnel pour les éléments INPUT et APPLET.

Alors qu'un texte de remplacement peut être très utile, on doit l'employer à bon escient. Les auteurs devraient observer les principes directeurs suivants :

  • Ne pas spécifier un texte de remplacement non pertinent lors de l'inclusion d'images destinées à la mise en forme d'une page par exemple, la définition alt="Puce rouge" serait inadéquate pour une image qui ajoute une puce rouge pour décorer un titre ou un paragraphe. Auquel cas, le texte de remplacement devrait être la chaîne vide (""). De manière générale, on conseille aux auteurs d'éviter l'emploi d'images pour la mise en forme des pages ; les feuilles de style sont prévues à cet effet ;
  • Ne pas spécifier un texte de remplacement dépourvu de signification (par exemple, "texte fictif"). Cela va non seulement frustrer l'utilisateur, mais aussi ralentir les agents utilisateurs qui doivent convertir le texte en parole ou en sortie Braille.

Les développeurs devraient consulter la section sur l'accessibilité pour des renseignements sur la façon de prendre en charge les cas où le texte de remplacement est omis.


Les feuilles de style dans les documents HTML

14 Les feuilles de style

Sommaire

  1. Introduction aux feuilles de style
  2. Le rajout de style à HTML
    1. L'établissement du langage de feuille de style par défaut
    2. Les information de style en-ligne
    3. Les informations de style dans l'en-tête : l'élément STYLE
    4. Les types de média
  3. Les feuilles de style externes
    1. Les feuilles de style préférées et alternatives
    2. La spécification des feuilles de style externes
  4. Les feuilles de style en cascade
    1. Les cascades dépendant du média
    2. L'héritage et la cascade
  5. La dissimulation des données de style à l'agent utilisateur
  6. Le rattachement des feuilles de style avec les en-têtes HTTP

14.1 Introduction aux feuilles de style

Les feuilles de style représentent un progrès majeur pour les concepteurs de pages Web, en développant les possibilités d'améliorer l'aspect de leurs pages. Dans les milieux scientifiques au sein desquels le Web a été conçu, les personnes étaient plus attachées au contenu de leurs documents qu'à leur présentation. Au fur et à mesure de la découverte du Web par des personnes issus d'horizons plus larges, les limitations de HTML devinrent la source de frustrations continues et les auteurs furent forcés de contourner les limitations stylistiques de HTML. Bien que l'intention étaient louable, (améliorer la présentation des pages Web), les techniques employées pour le faire ont eu des effets secondaires malheureux. Ces techniques fonctionnent parfois pour certaines personnes, mais pas tout le temps pour toutes les personnes. Elles comprennent :

  • l'utilisation d'extensions HTML propriétaires ;
  • la conversion du texte en une image ;
  • l'utilisation d'images pour contrôler l'espacement ;
  • l'utilisation des tables pour la mise en page ;
  • l'écriture d'un programme plutôt que d'utiliser HTML.

Ces techniques accroissent considérablement la complexité des pages Web, offrent peu de souplesse, souffrent de problèmes d'interopérabilité et sont une épreuve pour les personnes avec des handicaps.

Les feuilles de style résolvent tous ces problèmes en même temps qu'elles remplacent l'éventail limité des mécanismes de présentation dans HTML. Avec les feuilles de style, il devient facile de spécifier l'espacement entre les lignes de texte, l'indentation des lignes de texte, la couleur utilisée pour le texte et l'arrière-plan, la taille et le style de la police et quantité d'autres détails.

Par exemple, la courte feuille de style CSS suivante (stockée dans le fichier "special.css") définit la couleur du texte d'un paragraphe en vert et l'entoure avec une bordure pleine rouge :

P.special {
color : green;
border: solid red;
}

L'auteur peut relier cette feuille de style à son document HTML source avec l'élément LINK :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
  <HEAD>
    <LINK href="special.css" rel="stylesheet" type="text/css">
    errata-17
  </HEAD>
  <BODY>
    <P class="special">Le texte de ce paragraphe devrait &ecirc;tre vert.
  </BODY>
</HTML>

HTML 4 apporte la gestion des fonctionnalités de feuille de style suivantes :

La souplesse de la mise en place des informations de style

Le placement des feuilles de style dans des fichiers séparés afin de faciliter leur réutilisation. Il est parfois utile d'inclure des instructions de restitution dans le document auquel elles s'appliquent, soit regroupées au début du document, soit dans les attributs des éléments tout au long du corps du document. Afin de faciliter la gestion du style pour un site entier, cette spécification décrit comment utiliser les en-têtes HTTP pour que les feuilles de style s'appliquent à un document.

L'indépendance vis-à-vis des langages de feuille de style

Cette spécification n'attache pas HTML à un langage de style particulier. Cela permet l'utilisation d'un panel de langages, par exemple les plus simples pour la majorité des utilisateurs et les plus complexes pour une minorité d'utilisateurs aux besoins très spécialisés. Les exemples inclus ci-dessous utilisent tous le langage CSS [CSS1], mais d'autres langages de feuille de style seraient possibles.

La cascade

C'est la faculté de certains langages de feuilles de style, tel que CSS, d'assembler les informations de style provenant de plusieurs sources. Celles-ci pourraient être, par exemple, la charte de style d'une entreprise, les styles communs à un groupe de documents et les styles propres à un seul document. En les stockant séparément, les feuilles de style peuvent être réutilisées, ce qui simplifie l'édition et utilise plus efficacement les caches du réseau. La cascade définit une séquence ordonnée de feuilles de style dans laquelle les dernières feuilles de style ont une priorité plus élevée que les premières. Certains langages de feuille de style ne gèrent pas la cascade.

Les dépendances aux médias

HTML permet aux auteurs de spécifier les documents indépendament du média. Cela permet aux utilisateurs l'accès aux pages Web au moyen d'une grande variété d'appareils et de médias, par exemple, les écrans graphiques des ordinateurs tournant sous Windows, Macintosh OS ou X11, les appareils de télévision, les téléphones portables spéciaux et les agendas électroniques, les navigateurs à synthèse vocale et les appareils tactiles Braille.

Les feuilles de style, par contraste, s'applique à un média spécifique ou à un groupe de médias. Une feuille de style prévue pour un écran peut être éventuellement utilisable pour l'impression, mais sera de peu d'utilité pour un navigateur à synthèse vocale. Cette spécification permet de définir les catégories générales de médias pour lesquels une feuille de style donnée peut s'appliquer. Ceci permet aux agents utilisateurs d'éviter la recherche de feuilles de style innapropriées. Les langages de feuilles de style peuvent inclure des mécanismes décrivant les dépendances aux médias dans la même feuille de style.

Les styles alternatifs

Les auteurs peuvent vouloir offrir aux lecteurs plusieurs présentations d'un document. Par exemple, une feuille de style pour la restitution des documents compacts dans une petite taille de police, ou une autre qui spécifie une taille de police plus grande pour une meilleure lisibilité. Cette spécification permet aux auteurs de spécifier une feuille de style préférée tout comme les feuilles alternatives qui visent des utilisateurs ou des médias spécifiques. Les agents utilisateurs devraient donner aux utilisateurs la possibilité de choisir entre plusieurs feuilles de styles alternatives comme de désactiver les feuilles de style.

Le souci de l'efficacité

Certaines personnes ont exprimés des inquiétudes sur l'efficacité des feuilles de style. Par exemple, la recherche d'une feuille de style externe peut retarder la présentation complète à l'utilisateur. Une question similaire surgit pour l'en-tête d'un document qui contient une longue liste de règles de style.

La proposition actuelle répond à ces interrogations en permettant aux auteurs d'inclure des instructions de restitution à l'intérieur de chaque élément HTML. Les indications de restitution sont alors toujours disponibles au moment où l'agent utilisateur veut restituer chacun des éléments.

Dans de nombreux cas, les auteurs bénéficieront d'une feuille de style commune à un groupe de documents. Auquel cas, l'éparpillement des règles de style à travers le document entraînera en réalité une efficacité bien moindre que l'utilisation d'une feuille de style reliée, puisque la feuille de style sera déjà présente dans le cache local pour la plupart des documents. La disponibilité publique de bonnes feuilles de style encouragera cette tendance.

14.2 Le rajout de style à HTML

Remarque : L'exemple de feuille de style par défaut pour HTML 4 qui est donné dans [CSS2] exprime les informations de style par défaut généralement acceptées pour chaque élément. Les auteurs comme les développeurs pourraient considérer utilement cette ressource.

Les documents HTML peuvent contenir directement les règles de feuille de style ou bien peuvent les importer.

N'importe quel langage de feuille de style peut être utilisé avec HTML. Un langage de feuille de style simple peut suffire pour les besoins de la plupart des utilisateurs, mais d'autres langages peuvent mieux convenir pour des besoins très spécialisés. Cette spécification utilise le langage de style CSS ([CSS1]) pour les exemples.

La syntaxe des données de style dépend du langage de feuille de style.

14.2.1 L'établissement du langage de feuille de style par défaut

Les auteurs doivent spécifier le langage de feuille de style des informations de style associées au document HTML.

Les auteurs devraient utiliser l'élément META pour définir le langage de feuille de style par défaut du document. Par exemple, pour définir le langage CSS par défaut, les auteurs devraient inclure la déclaration suivante dans la section HEAD de leurs documents :

<META http-equiv="Content-Style-Type" content="text/css">

On peut aussi définir le langage de feuille de style par défaut avec les en-têtes HTTP. La déclaration META précédente équivaut à l'en-tête HTTP :

Content-Style-Type: text/css

Les agents utilisateurs devraient déterminer le langage de feuille de style par défaut du document en suivant les étapes suivantes (de la plus haute priorité à la plus basse) :

  1. Si plusieurs déclarations META éventuelles spécifient une valeur "Content-Style-Type", c'est la dernière dans le flux de caractères qui détermine le langage de feuille de style par défaut ;
  2. Sinon, quand plusieurs en-têtes HTTP éventuelles spécifient un champs "Content-Style-Type", c'est le dernier dans le flux de caractères qui détermine le langage de la feuille de style par défaut ;
  3. Sinon, le type du langage de feuille de style par défaut est "text/css".

Les documents, qui incluent des éléments spécifiant un attribut style, mais qui ne définissent pas de feuille de style par défaut sont erronés. Les outils d'édition devraient générer une indication de langage de feuille de style par défaut (typiquement une déclaration META), de sorte que les agents utilisateurs ne soient pas obligés de se rabattre sur un "text/css" par défaut.

14.2.2 Les informations de style en-ligne

Définition des attributs

style = style [CN]
Cet attribut spécifie les informations de style pour l'élément courant.

La syntaxe de la valeur de l'attribut style est déterminée par le langage de feuille de style par défaut. Par exemple, pour un style en-ligne [[CSS2]], utilisez la syntaxe de bloc de déclaration décrite dans la section 4.1.8 (sans les accolades délimitrices).

Cet exemple CSS spécifie les informations de couleur et de police du texte dans un paragraphe particulier.

<P style="font-size: 12pt; color: fuchsia">Les feuilles
     de style ne sont-elles pas merveilleuses ?

Dans CSS, les déclarations des propriétés prennent la forme « nom : valeur » et sont séparées par des points-virgules.

Pour spécifier les informations de style de plusieurs éléments, les auteurs devraient utiliser l'élément STYLE. Pour une souplesse optimale, les auteurs devraient définir les styles dans des feuilles de style externes.

14.2.3 Les informations de style dans l'en-tête : l'élément STYLE

<!ELEMENT STYLE - - %StyleSheet        -- info de style -->
<!ATTLIST STYLE
  %i18n;                               -- lang, dir, à utiliser avec title --
  type        %ContentType;  #REQUIRED -- type de contenu du langage de style --
  media       %MediaDesc;    #IMPLIED  -- conçu pour ce média --
  title       %Text;         #IMPLIED  -- titre consultatif --
  >

Balise ouvrante : obligatoire, Balise fermante : obligatoire

Définition des attributs

type = type-de-contenu [CI]
Cet attribut spécifie le langage de feuille de style par défaut du contenu de l'élément et surclasse la feuille de style par défaut. Le langage de feuille de style est spécifié comme un type de contenu (par exemple, "text/css"). Les auteurs doivent fournir une valeur pour cet attribut ; il n'y a pas de valeur par défaut pour celui-ci.
media = descripteurs-de-média [CI]
Cet attribut spécifie le média de destination désiré pour les informations de style. Cela peut être un descripteur de média unique ou une liste de descripteurs, séparés par des virgules. La valeur par défaut de cet attribut est "screen".

Attributs définis ailleurs

  • lang (indications de langue), dir (direction du texte)
  • title (titre de l'élément)

L'élément STYLE permet aux auteurs de placer des règles de style dans l'en-tête du document. HTML autorise un nombre quelconque d'éléments STYLE dans la section HEAD d'un document.

Les agents utilisateurs, qui ne reconnaissent pas les feuilles de style ou bien le langage de feuille de style spécifique utilisé par un élément STYLE, doivent dissimuler le contenu de l'élément STYLE. La restitution du contenu de cet élément en tant que partie du texte du document constitue une erreur. Certains langages de feuilles de style gèrent une syntaxe pour dissimuler le contenu aux agents utilisateurs non conformes.

La syntaxe des données de style dépend du langage de feuille de style.

Certaines implémentations de feuille de style peuvent autoriser une plus grande variété de règles dans l'élément STYLE que dans l'attribut style. Par exemple, avec CSS, on peut déclarer les règles à l'intérieur d'un élément STYLE pour :

  • toutes les instances d'un élément HTML particulier (par exemple, tous les éléments P, tous les éléments H1, etc.) ;
  • toutes les instances d'un élément HTML appartenant à une classe particulière (i.e., les éléments dont l'attribut class possède une valeur) ;
  • les instances uniques d'un élément HTML (i.e., un élément dont l'attribut id possède une valeur).

Les règles de préséance et d'héritage des règles de style dépendent du langage de feuille de style.

La déclaration CSS suivante, avec l'élément STYLE, met une bordure autour de chacun des éléments H1 du document et les centre dans la page.

<HEAD>
 <STYLE type="text/css">
   H1 {border-width: 1; border: solid; text-align: center}
 </STYLE>
</HEAD>

Pour indiquer que ces informations de style ne devraient s'appliquer qu'aux éléments H1 appartenant à une classe particulière, nous modifions la règle de cette façon :

<HEAD>
 <STYLE type="text/css">
   H1.maclasse {border-width: 1; border: solid; text-align: center}
 </STYLE>
</HEAD>
<BODY>
 <H1 class="maclasse"> Cet H1 est touch&eacute; par notre style </H1>
 <H1> Celui-ci ne l'est pas </H1>
</BODY>

Finalement, pour restreindre la portée des informations de style à une instance unique d'élément H1, spécifions l'attribut id :

<HEAD>
 <STYLE type="text/css">
   #monid {border-width: 1; border: solid; text-align: center}
 </STYLE>
</HEAD>
<BODY>
 <H1 class="maclasse"> Cet H1 n'est pas touch&eacute; </H1>
 <H1 id="monid"> Cet H1 est touch&eacute; par le style </H1>
 <H1> Cet H1 n'est pas touch&eacute; </H1>
</BODY>

Tandis qu'on peut définir des informations de style pour pratiquement tous les éléments HTML, deux éléments, DIV et SPAN, sont particulièrement utiles dans la mesure où ils n'imposent aucune sémantique de présentation (en dehors de la distinction type bloc/type en-ligne). Lorsqu'ils sont utilisés conjointement avec les feuilles de style, ces éléments permettent aux utilisateurs un développement HTML illimité, particulièrement quand ils sont utilisés avec les attributs class et id.

Dans l'exemple suivant, nous utilisons l'élément SPAN pour spécifier le style de la police des premiers mots d'un paragraphe en petites capitales.

<HEAD>
 <STYLE type="text/css">
  SPAN.sc-ex { font-variant: small-caps; }
 </STYLE>
</HEAD>
<BODY>
  <P><SPAN class="sc-ex">Les premiers mots</SPAN> de
  ce paragraphe en petites capitales.
</BODY>

Dans l'exemple suivant, nous utilisons l'élément DIV et l'attribut class pour définir la justification du texte d'une succession de paragraphes qui constituent la section de résumé d'un article scientifique. Ces informations de style pourraient être réutilisées pour d'autres sections de résumé en utilisant l'attribut class ailleurs dans le document.

<HEAD>
 <STYLE type="text/css">
   DIV.resume { text-align: justify }
 </STYLE>
</HEAD>
<BODY>
 <DIV class="resume">
   <P>Les outils de gestion de contenu Web
   permettent de r&eacute;soudre la plupart des probl&egrave;mes
   de production li&eacute;s aux sites web tout en jetant
   un pont entre les diff&eacute;rents supports de diffusion
   de l'information.</P>

   <P>Mais l'engouement dont b&eacute;n&eacute;ficient ces
   logiciels ne doit pas faire oublier que leur
   d&eacute;ploiement reste difficile et
   que leur march&eacute; est tr&egrave;s mouvant.</P>
 </DIV>
</BODY>

14.2.4 Les types de média

HTML autorise les auteurs à concevoir des documents qui exploitent les caractéristiques du média sur lequel le document doit être restitué (par exemple, écran graphique, écran de télévision, appareil de poches, navigateur à synthèse vocale, appareil tactile Braille, etc.). En spécifiant l'attribut media, les auteurs permettent aux agents utilisateurs de charger et appliquer les feuilles de style de manière sélective. Veuillez consulter la liste des descripteurs de média reconnus.

Les déclarations des exemples suivants s'appliquent aux éléments H1. Pour une projection dans une réunion de travail, toutes leurs instances apparaîtront en bleu. Pour une impression papier, toutes les instances seront centrées.

<HEAD>
 <STYLE type="text/css" media="projection">
    H1 { color: blue}
 </STYLE>

 <STYLE type="text/css" media="print">
   H1 { text-align: center }
 </STYLE>

Cet exemple ajoute des effets sonores aux ancres pour une sortie vocale :

 <STYLE type="text/css" media="aural">
   A { cue-before: uri(ding.aiff); cue-after: uri(dong.wav)}
 </STYLE>
</HEAD>

La commande du média est particulièrement intéressante quand elle s'applique aux feuilles de style externes, dans la mesure où les agents utilisateurs peuvent économiser du temps en ne chargeant à partir du réseau que celles des feuilles de style qui concernent l'appareil courant. Par exemple, les navigateurs vocaux peuvent s'épargner le chargement des feuilles de style conçues pour une restitution visuelle. Voir la section sur les cascades dépendant du média pour plus de renseignements.

14.3 Les feuilles de style externes

Les auteurs peuvent séparer les feuilles de style des documents HTML. Ce qui offre plusieurs avantages :

  • les auteurs et les gestionnaires de site Web peuvent partager les feuilles de style entre nombre de documents (et de sites) ;
  • les auteurs peuvent changer la feuille de style sans devoir apporter des modifications au document ;
  • les agents utilisateurs peuvent charger les feuilles de style sélectivement (en fonction des descriptions des médias).

14.3.1 Les feuilles de style préférées et alternatives

HTML permet aux auteurs d'associer un nombre quelconque de feuilles de style externes à un document. Le langage de feuille de style définit comment plusieurs feuilles de style externes interagissent (par exemple, les règles de « cascade » de CSS).

Les auteurs peuvent spécifier un certain nombre de feuilles de style mutuellement exclusives appelées feuilles de style alternatives. L'utilisateur peut sélectionner sa feuille de style favorite parmi celles-ci en fonction de ses préférences. Par exemple, l'auteur peut spécifier une feuille de style conçue pour les petits écrans et une autre pour les utilisateurs dont la vision est faible (par exemple, avec une grande taille de police). Les agents utilisateurs devraient permettre aux utilisateurs d'opérer une sélection entre les feuilles de style alternatives.

L'auteur peut spécifier que l'une des feuilles de style alternatives est la préférée. Les agents utilisateurs devraient appliquer la feuille de style préférée de l'auteur, à moins que l'utilisateur n'ait sélectionné une autre alternative.

L'auteur peut regrouper plusieurs feuilles de style alternatives (y compris sa préférée) sous un seul nom de style. Quand un utilisateur sélectionne un style nommé, l'agent utilisateur doit appliquer toutes les feuilles de style de ce nom. Les agents utilisateurs ne doivent pas appliquer les feuilles de style alternatives avec un nom différent. La section sur la spécification des feuilles de style externes explique comment nommer un groupe de feuilles de style.

L'auteur peut aussi spécifier des feuilles de style persistentes que l'agent utilisateur doit appliquer en plus des éventuelles feuilles de style alternatives.

Les agents utilisateurs doivent respecter les descripteurs de média lors de l'application d'une feuille de style.

L'agent utilisateur devrait également permettre aux utilisateurs de désactiver entièrement les feuilles de style de l'auteur, auquel cas l'agent utilisateur ne doit pas appliquer les éventuelles feuilles de style persistentes ou alternatives.

14.3.2 La spécification des feuilles de style externes

Les auteurs spécifient les feuilles de style externes au moyen des attributs suivants de l'élément LINK :

  • Donner comme valeur de l'attribut href la localisation du fichier de la feuille de style. Cette valeur de l'attribut href est un URI.
  • Donner comme valeur de l'attribut type l'indication du langage de la ressource reliée (la feuille de style). Cela évite à l'agent utilisateur de charger une feuille de style dans un langage de feuille de style non reconnu ;
  • Indiquer si la feuille de style est persistente, préférée ou alternative :
    • pour une feuille de style persistente, donner la valeur "stylesheet" à l'attribut rel et ne pas mettre d'attribut title ;
    • pour une feuille de style préférée, donner la valeur "stylesheet" à l'attribut rel et nommer la feuille de style en spécifiant l'attribut title ;
    • pour une feuille de style alternative, donner la valeur "alternate stylesheet" à l'attribut rel et nommer la feuille de style en spécifiant l'attribut title.

Les agents utilisateurs devraient fournir aux utilisateurs les moyens de passer en revue et de choisir les feuilles de style alternatives dans une liste. On recommande la valeur de l'attribut title comme nom pour chaque option.

Dans cet exemple, nous spécifions d'abord une feuille de style persistente qui se trouve dans le fichier "meustilu.css" :

<LINK href="meustilu.css" rel="stylesheet" type="text/css">

En définissant l'attribut title, on en fait la feuille de style préférée de l'auteur :

<LINK href="meustilu.css" title="compact" rel="stylesheet" type="text/css">

En rajoutant le mot-clé "alternate" à la valeur de l'attribut rel, on en fait une feuille de style alternative :

<LINK href="meustilu.css" title="Moyenne" rel="alternate stylesheet" type="text/css">

Pour plus de renseignements sur les feuilles de style externes, veuillez consulter la section sur les liens et les feuilles de style externes.

L'auteur peut aussi utiliser l'élément META pour établir la feuille de style préférée du document. Par exemple, pour mettre « compact » comme feuille de style préférée (ci-dessus), l'auteur peut inclure la ligne suivante dans la section HEAD :

<META http-equiv="Default-Style" content="compact">

On peut encore spécifier la feuille de style préférée au moyen d'un en-tête HTTP. La déclaration META précédente équivaut à l'en-tête HTTP suivant :

Default-Style: "compact"

Si deux ou plus déclarations META, ou en-têtes HTTP, spécifient la feuille de style préférée, c'est la dernière qui sera retenue. Les en-têtes HTTP sont censés survenir avant la section HEAD du document dans ce cas.

Si deux ou plus éléments LINK spécifient une feuille de style préférée, le premier est retenu.

Les feuilles de style préférées au moyen d'éléments META ou d'en-têtes HTTP ont priorité sur celles spécifiées avec l'élément LINK.

14.4 Les feuilles de style en cascade

Les langages de feuille de style en cascade, tel que CSS, autorisent l'assemblage des informations de style provenant de plusieurs sources. Pour définir une cascade, l'auteur spécifie une succession d'éléments LINK et/ou STYLE. Les informations de style se répandent en cascade selon l'ordre d'apparition des éléments dans la section HEAD.

Remarque : Cette spécification ne précise pas la manière dont les feuilles de styles issues de différents langages de style cascadent. Les auteurs devraient éviter de mélanger les langages de feuilles de style.

Dans l'exemple suivant, nous spécifions deux feuilles de style alternatives nommées "compact". Si l'utilisateur sélectionne le style « compact », l'agent utilisateur doit appliquer ces deux feuilles de style, ainsi que la feuille de style persistente "commune.css". Si l'utilisateur sélectionne « imprimer grand », seules la feuille de style alternative "imprimergrand.css" et la feuille de style persistente "commun.css" s'appliqueront.

<LINK rel="alternate stylesheet" title="compact" href="petit-base.css" type="text/css">
<LINK rel="alternate stylesheet" title="compact" href="petit-extras.css" type="text/css">
<LINK rel="alternate stylesheet" title="imprimer grand"
       href="imprimergrand.css" type="text/css">
<LINK rel="stylesheet" href="commun.css" type="text/css">

Voici un exemple de cascade qui fait intervenir les deux éléments LINK et STYLE.

<LINK rel="stylesheet" href="entreprise.css" type="text/css">
<LINK rel="stylesheet" href="rapport-technique.css" type="text/css">
<STYLE type="text/css">
    p.special { color: rgb(230, 100, 180) }
</STYLE>

14.4.1 Les cascades dépendant du média

La cascade peut inclure des feuilles de style qui concernent différents médias. Les éléments éléments LINK et STYLE peuvent tous deux être utilisés avec l'attribut media. L'agent utilisateur est alors responsable de l'élimination des feuilles de style qui ne s'appliquent pas au média courant.

Dans l'exemple suivant, nous définissons une cascade pour laquelle la feuille de style « entreprise » est proposée en plusieurs versions : une convenant pour l'impression, une pour l'écran et une pour les navigateurs vocaux (disons, utile quand on lit ses e-mails en voiture). La feuille de style "rapport-technique.css" convient pour tous les médias. La règle de couleur définie par l'élément STYLE est utilisée pour l'impression et pour l'écran, mais pas pour une restitution sonore.

<LINK rel="stylesheet" media="aural" href="entreprise-sonore.css" type="text/css">
<LINK rel="stylesheet" media="screen" href="entreprise-ecran.css" type="text/css">
<LINK rel="stylesheet" media="print" href="entreprise-impression.css" type="text/css">
<LINK rel="stylesheet" href="rapport-technique.css" type="text/css">
<STYLE media="screen, print" type="text/css">
    p.special { color: rgb(230, 100, 180) }
</STYLE>

14.4.2 L'héritage et la cascade

Quand l'agent utilisateur veut restituer un document, il doit trouver les valeurs des propriétés de style, par exemple, la famille de police, le style de la police, la taille, la hauteur de ligne, la couleur du texte et ainsi de suite. Le mécanisme exact dépend du langage de feuille de style, mais la description suivante est applicable en général :

Le mécanisme de cascade est utilisé quand un certain nombre de règles de style s'appliquent toutes directement à un élément. Le mécanisme permet à l'agent utilisateur de ranger les règles selon leur spécificité, pour déterminer quelle règle s'applique. Si aucune règle n'est trouvée, l'étape suivante va dépendre de la propriété de style, si elle peut s'hériter ou non. Les propriétés ne peuvent pas toutes s'hériter. Auquel cas, le langage de feuille de style fournit des valeurs par défaut qu'il faut utiliser quand il n'y a aucune règle explicite pour un élément particulier.

Si la propriété peut s'hériter, l'agent utilisateur examine l'élément englobant immédiat pour voir si une règle s'y applique. Ce processus continue jusqu'à ce qu'une règle appliquable soit trouvée. Ce mécanisme autorise une spécification compacte des feuilles de style. Par exemple, l'auteur peut spécifier la famille de la police de tous les éléments de BODY par une seule règle appliquée à l'élément BODY.

14.5 La dissimulation des données de style à l'agent utilisateur

Certains langages de feuille de style gère une syntaxe qui permet aux auteurs de dissimuler le contene de l'élément STYLE aux agents utilisateurs non conformes.

Cet exemple montre, dans le cas de CSS, la manière de masquer par un commentaire le contenu de l'élément STYLE pour s'assurer que les agents utilisateurs non conformes ne vont pas le restituer comme du texte.

<STYLE type="text/css">
<!--
   H1 { color: red }
   P  { color: blue}
   -->
</STYLE>

14.6 Le rattachement des feuilles de style avec les en-têtes HTTP

Cette section ne concerne que les agents utilisateurs conformes aux versions de HTTP qui définissent un champs d'en-tête « Link ». Remarquez que le protocole HTTP 1.1, défini par le document [RFC2616], ne comprend pas de champs d'en-tête « Link » (se reporter à la section 19.6.3).

Les gestionnaires de serveur Web peuvent trouver commode de configurer leur serveur de sorte qu'une feuille de style soit appliquée à un groupe de pages. L'en-tête HTTP Link produit le même effet qu'un élément LINK ayant les mêmes attributs et valeurs. Les en-têtes Link multiples correspondent aux multiples éléments LINK qui surviendraient dans le même ordre. Par exemple :

Link: <http://www.acme.com/entreprise.css>; REL=stylesheet

cet en-tête correspond à :

<LINK rel="stylesheet" href="http://www.acme.com/entreprise.css">

Il est possible de spécifier plusieurs feuilles de style alternatives en utilisant plusieurs en-têtes Link, et d'utiliser ensuite l'attribut rel pour déterminer le style par défaut.

Dans l'exemple suivant, le style « compact » s'applique par défaut puisque le mot-clé "alternate" de l'attribut rel est absent.

Link: <compact.css>; rel="stylesheet"; title="compact"
Link: <imprimergrand.css>; rel="alternate stylesheet"; title="imprimer grand"

Ceci devrait également fonctionner pour les documents HTML envoyés par e-mail. Certains agents de courrier peuvent altérer l'ordre des en-têtes [RFC822]. Pour s'en prémunir, car cela agit sur l'ordre de cascade des feuilles de style spécifiées par les en-têtes Link, les auteurs peuvent effectuer une concaténation des en-têtes pour fusionner plusieurs intances du même champs d'en-tête. Les guillemets sont seulement nécessaires quand les valeurs d'attribut contiennent des blancs. Utilisez les entités SGML pour référencer les caractères qui ne seraient pas admis sinon à l'intérieur des en-têtes HTTP ou de courrier, ou qui risquent vraisemblablement d'être altérés lors du transit dans les passerelles.

Les éléments LINK et META impliqués par les en-têtes HTTP sont définis comme survenant avant tous les éléments LINK et META dans la section HEAD du document.


L'alignement, les styles de police et les règles horizontales dans les documents HTML

15 L'alignement, les styles de police et les règles horizontales

Sommaire

  1. Le formatage
    1. La couleur d'arrière-plan
    2. L'alignement
    3. Les objets flottants
      • Faire flotter un objet
      • Faire flotter le texte autour d'un objet
  2. Les polices
    1. Les éléments de style de police : les éléments TT, I, B, BIG, SMALL, STRIKE, S et U
    2. Les éléments modificateurs de police : les éléments FONT et BASEFONT
  3. Les règles : l'élément HR

Cette section de la spécification aborde certains éléments et attributs HTML qui peuvent être utilisés pour la mise en forme visuelle des éléments. Nombre d'entre eux sont déconseillés.

15.1 Le formatage

15.1.1 La couleur d'arrière-plan

Définition des attributs

bgcolor = couleur [CI]
Déconseillé. Cet attribut établit la couleur d'arrière-plan du corps du document ou des cellules des tables.

Cet attribut établit la couleur d'arrière-plan du canevas du corps du document (l'élément BODY) ou des tables (les éléments TABLE, TR, TH et TD). On peut utiliser des attributs supplémentaires avec l'élément BODY pour spécifier la couleur du texte.

Cet attribut est déconseillé en faveur des feuilles de style pour spécifier les informations de couleur d'arrière-plan.

15.1.2 L'alignement

Il est possible d'aligner les éléments de bloc (tables, images, objets, paragraphes, etc.) sur le canevas avec l'attribut align. Bien que cet attribut puisse se placer sur de nombreux éléments HTML, l'éventail des valeurs possibles diffère parfois d'un élément à l'autre. Ici nous abordons seulement la signification de l'attribut align pour le texte.

Définition des attributs

align = left|center|right|justify [CI]
Déconseillé. Cet attribut spécifie l'alignement horizontal de son élément par rapport à son environnement. Les valeurs possibles sont :
  • left : les lignes de texte sont restituées poussées à gauche ;
  • center : les lignes de texte sont centrées ;
  • right: les lignes de texte sont restituées poussées à droite ;
  • justify : les lignes de texte sont justifiées des deux côtés.

La valeur par défaut est tributaire de la direction de base du texte. Pour un texte de gauche-à-droite, la valeur par défaut est align=left, tandis que pour un texte de droite-à-gauche c'est align=right.

EXEMPLE DÉCONSEILLÉ :
Cet exemple centre un titre sur le canevas.

<H1 align="center"> Comment tailler le bois </H1>

En utilisant le langage CSS, par exemple, on pourrait obtenir le même effet par :

<HEAD>
 <TITLE>Comment tailler le bois</TITLE>
 <STYLE type="text/css">
  H1 { text-align: center}
 </STYLE>
<BODY>
 <H1> Comment tailler le bois </H1>

Remarquez que cela centrerait tous les éléments H1. On pourrait réduire la portée du style en plaçant un attribut class sur l'élément :

<HEAD>
 <TITLE>Comment tailler le bois</TITLE>
 <STYLE type="text/css">
  H1.bois {text-align: center}
 </STYLE>
<BODY>
 <H1 class="bois"> Comment tailler le bois </H1>

EXEMPLE DÉCONSEILLÉ :
De la même façon, pour aligner un paragraphe à droite sur le canevas avec l'attribut HTML align, on pourrait avoir :

<P align="right">...Beaucoup de texte...

ce qui donnerait avec CSS :

<HEAD>
 <TITLE>Comment tailler le bois</TITLE>
 <STYLE type="text/css">
  P.monparagraphe {text-align: right}
 </STYLE>
<BODY>
 <P class="monparagraphe">...Beaucoup de texte...

EXEMPLE DÉCONSEILLÉ :
Pour aligner un ensemble de paragraphes à droite, regroupez-les avec un élément DIV :

<DIV align="right">
 <P>...texte du premier paragraphe...
 <P>...texte du deuxième paragraphe...
 <P>...texte du troisième paragraphe...
</DIV>

Avec CSS, la propriété « text-align » est héritée de l'élément parent ; on peut donc utiliser :

<HEAD>
 <TITLE>Comment tailler le bois</TITLE>
 <STYLE type="text/css">
  DIV.mesparagraphes {text-align: right}
 </STYLE>
<BODY>
 <DIV class="mesparagraphes">
  <P>...texte du premier paragraphe...
  <P>...texte du deuxième paragraphe...
  <P>...texte du troisième paragraphe...
 </DIV>

Pour centrer le document entier avec CSS :

<HEAD>
 <TITLE>Comment tailler le bois</TITLE>
 <STYLE type="text/css">
  BODY {text-align: center}
 </STYLE>
<BODY>
 ...le corps est centré...
</BODY>

L'élément CENTER équivaut exactement à la spécification de la valeur "center" sur l'attribut align de l'élément DIV. L'élément CENTER est déconseillé.

15.1.3 Les objets flottants

Les images et les objets peuvent apparaître directement « en-ligne » ou peuvent flotter vers un côté de la page, altérant temporairement les marges du texte qui peut s'écouler sur l'un ou l'autre bord de l'objet.

Faire flotter un objet

L'attribut align des objets, des images, des tables, des cadres, etc., entraîne l'objet à flotter vers la marge gauche ou celle de droite. Les objets flottants commencent en général une nouvelle ligne. Cet attribut admet les valeurs suivantes :

  • left : fait flotter l'objet vers la marge gauche courante. Le texte qui suit s'écoule le long du flanc droit de l'image ;
  • right : fait flotter l'objet vers la marge droite courante. Le texte qui suit s'écoule le long du flanc gauche de l'image.

errata-16

EXEMPLE DÉCONSEILLÉ :
L'exemple suivant montre comment faire flotter un élément IMG vers la marge gauche courante du canevas.

<IMG align="left" src="http://foo.com/animage.gif" alt="mon chat">

Certains attributs d'alignement admettent également la valeur "center", qui n'entraîne aucun flottement, mais centre l'objet à l'intérieur des marges courantes. Cependant, pour les éléments P et DIV, la valeur "center" entraîne le centrage de leur contenu.

Faire flotter le texte autour d'un objet

Un autre attribut, défini sur l'élément BR, contrôle l'écoulement du texte autour des objets flottants.

Définition des attributs

clear = none|left|right|all [CI]
Déconseillé. Spécifie où la prochaine ligne devrait apparaître, dans un navigateur visuel, après le saut de ligne provoqué par cet élément. Cet attribut prend en compte les objets flottants (images, tables, etc.). Les valeurs possibles sont :
  • none : la ligne suivante commencera normalement. C'est la valeur par défaut ;
  • left : la ligne suivante commencera à la ligne la plus proche en-dessous d'éventuels objets flottants sur la marge de gauche ;
  • right : la ligne suivante commencera à la ligne la plus proche en-dessous d'éventuels objets flottants sur la marge de droite ;
  • all : la ligne suivante commencera à la ligne la plus proche en-dessous d'éventuels objets flottants sur l'une ou l'autre marge.

Considérons la situation visuelle suivante, où le texte s'écoule à la droite d'une image juqu'à un saut de ligne provoqué par l'élément BR :

*********  -------
|       |  -------
| image |  --<BR>
|       |
*********

Si la valeur de l'attribut clear est "none", la ligne suivant l'élément BR commencera imédiatement en-dessous de celui-ci, sur la droite de l'image :

*********  -------
|       |  -------
| image |  --<BR>
|       |  ------
*********

EXEMPLE DÉCONSEILLÉ :
Si la valeur de l'attribut clear est "left", ou "all", la ligne suivante apparaîtra comme suit :

*********  -------
|       |  -------
| image |  --<BR clear="left">
|       |
*********
-----------------

En faisant appel aux feuilles de style, on pourrait spécifier que tous les sauts de ligne devraient se comporter de cette façon pour les objets (images, tables, etc.) flottant contre la marge gauche. Avec CSS, on pourrait obtenir cet effet comme suit :

<STYLE type="text/css">
BR { clear: left }
</STYLE>

Pour spécifier ce comportement sur une instance particulière de l'élément BR, on pourrait combiner l'indication de style et l'attribut id :

<HEAD>
...
<STYLE type="text/css">
BR#monbr { clear: left }
</STYLE>
</HEAD>
<BODY>
<P>...
*********  -------
|       |  -------
| table |  --<BR id="monbr">
|       |
*********
-----------------
...
</BODY>

15.2 Les polices

Les éléments HTML suivants spécifient des informations de police. Bien qu'ils ne soient pas tous déconseillés, on décourage leur utilisation en faveur des feuilles de style.

15.2.1 Les éléments de style de police : les éléments TT, I, B, BIG, SMALL, STRIKE, S et U

<!ENTITY % fontstyle
 "TT | I | B | BIG | SMALL">
<!ELEMENT (%fontstyle;|%phrase;) - - (%inline;)*>
<!ATTLIST (%fontstyle;|%phrase;)
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Balise ouvrante : obligatoire, balise fermante : obligatoire

Attribus définis ailleurs

  • id, class (identifiants internes au document)
  • lang (indications de langue), dir (direction du texte)
  • title (titre de l'élément)
  • style (informations de style en-ligne)
  • onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (événements intrinsèques)

La restitution des éléments de style de police dépend de l'agent utilisateur. Ce qui suit n'est qu'une description informative.

TT : restitué sous la forme d'un texte de téléimprimeur ou à chasse fixe [ndt. monospaced].
I : restitué sous la forme d'un texte en italique.
B : restitué sous la forme d'un texte en caractères gras.
BIG : restitue le texte dans une « grande » taille de police.
SMALL : restitue le texte dans une « petite » taille de police.
STRIKE et S : Déconseillé. Restituent un texte barré.
U : Déconseillé. Restitue un texte souligné.

La phrase suivante montre divers types de texte :

<P> <b>gras</b>, <i>italique</i>, <b><i>gras italique</i></b>,
<tt>t&eacute;l&eacute;imprimeur</tt>, texte <big>grand</big> et <small>petit</small>.

Cette phrase pourrait être restituée comme suit :

Un exemple de restitution de divers styles de police

Il est possible d'obtenir une bien plus grande diversité d'effets de police en utilisant les feuilles de style. Pour spécifier un texte italique en bleu dans un paragraphe avec CSS :

<HEAD>
<STYLE type="text/css">
P#mypar {font-style: italic; color: blue}
</STYLE>
</HEAD>
<P id="mypar">...Beaucoup de texte en italique de couleur bleue...

Les éléments de style de police doivent être correctement imbriqués. La restitution des éléments de style de police imbriqués dépend de l'agent utilisateur.

15.2.2 Les éléments modificateurs de police : les éléments FONT et BASEFONT

Les éléments FONT et BASEFONT sont déconseillés.

Voir le DTD transitoire pour leur définition formelle.

Définition des attributs

size = cdata [CN]
Déconseillé. Cet attribut établit la taille de la police. Les valeurs possibles sont :
  • Un entier entre 1 et 7. Cela donne à la police une certaine taille fixe dont la restitution dépend de l'agent utilisateur. Les agents utilisateurs ne peuvent pas tous restituer les sept tailles ;
  • Un accroissement relatif en taille de police. La valeur "+1" signifie la taille au-dessus. La valeur "-3" signifie trois tailles en-dessous. Toutes les tailles se trouve sur une échelle allant de 1 à 7.
color = couleur [CI]
Déconseillé. Cet attribut établit la couleur du texte.
face = cdata [CI]
Déconseillé. Cet attribut définit une liste de noms de police, séparés par des virgules, que l'agent utilisateur devrait chercher par ordre de préférence.

Attribus définis ailleurs

  • id, class (identifiants internes au document)
  • lang (indications de langue), dir (direction du texte)
  • title (titre de l'élément)
  • style (informations de style en-ligne)

L'élément FONT change la taille de la police et la couleur du texte qu'il contient.

L'élément BASEFONT établit la taille de police de base (en utilisant l'attribut size). Les changements de taille de police obtenus avec l'élément FONT sont relatifs à la taille de police de base établie par l'élément BASEFONT. Si l'élément BASEFONT n'est pas présent, alors la taille de police de base vaut "3".

EXEMPLE DÉCONSEILLÉ :
L'exemple suivant illustre les différences entre les sept tailles de police disponibles avec l'élément FONT :

<P><font size=1>size=1</font>
<font size=2>size=2</font>
<font size=3>size=3</font>
<font size=4>size=4</font>
<font size=5>size=5</font>
<font size=6>size=6</font>
<font size=7>size=7</font>

Ceci pourrait être restitué par :

Exemple de restitution de diverses tailles de police

L'illustration suivante montre l'effet des tailles de police relatives par rapport à une taille de police de base valant "3" :

Exemple de restitution de diverses tailles de police avec un élément basefont

La taille de police de base ne s'applique pas aux titres, sauf quand ceux-ci sont modifiés par un élément FONT avec un changement de taille de police relatif.

15.3 Les règles : l'élément HR

<!ELEMENT HR - O EMPTY -- règle horizontal -->
<!ATTLIST HR
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Balise ouvrante : obligatoire, balise fermante : interdite

Définition des attributs

align = left|center|right [CI]
Déconseillé. Cet attribut spécifie l'alignement horizontal de la règle par rapport au contexte englobant. Les valeurs possibles sont :
  • left : la règle est restituée poussée à gauche ;
  • center : la règle est centrée ;
  • right : la règle est restituée poussée à droite.

La valeur par défaut est "align=center".

noshade [CI]
Déconseillé. Quand il est présent, cet attribut booléen demande à l'agent utilisateur de restituer la règle dans une couleur pleine plutôt que la traditionnelle « cannelure » bi-colore.
size = pixels [CI]
Déconseillé. Cet attribut spécifie la hauteur de la règle. La valeur par défaut de cet attribut dépend de l'agent utilisateur.
width = longueur [CI]
Déconseillé. Cet attribut spécifie la largeur de la règle. La largeur par défaut est de 100%, i.e., la règle traverse le canevas entier.

Attribus définis ailleurs

  • id, class (identifiants internes au document)
  • lang (indications de langue), dir (direction du texte)
  • title (titre de l'élément)
  • style (informations de style en-ligne)
  • onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (événements intrinsèques)

L'élément HR entraîne la restitution d'une règle horizontale par l'agent utilisateur.

La quantité d'espace vertical inséré entre une règle et le contenu qui l'entoure dépend de l'agent utilisateur.

EXEMPLE DÉCONSEILLÉ :
Cet exemple centre les règles, en les dimensionnant à la moitié de la largeur disponible entre les marges. La règle du haut a une épaisseur par défaut tandis que les deux du bas sont fixées à 5 pixels. La règle du bas devrait être restituée dans une couleur pleine sans ombrage :

<HR width="50%" align="center">
<HR size="5" width="50%" align="center">
<HR noshade size="5" width="50%" align="center">

La restitution de ces règles pourraient être la suivante :

Exemple de restitution de diverses règles horizontales


Les cadres dans les documents HTML

16 Les cadres

Sommaire

  1. Introduction aux cadres
  2. La disposition des cadres
    1. L'élément FRAMESET
      • Les rangées et les colonnes
      • Les jeux d'encadrement imbriqués
      • Le partage des données entre les cadres
    2. L'élément FRAME
      • L'établissement du contenu initial d'un cadre
      • La restitution visuelle d'un cadre
  3. La spécification des informations du cadre cible
    1. L'établissement de la cible par défaut des liens
    2. La sémantique de cible
  4. Le contenu de remplacement
    1. L'élément NOFRAMES
    2. Les descriptions longues des cadres
  5. Les cadres en-ligne : l'élément IFRAME

16.1 Introduction aux cadres

Les cadres HTML permettent aux auteurs de présenter les documents selon des vues multiples, qui peuvent être des fenêtres indépendantes ou bien des sous-fenêtres. Les vues multiples offrent aux concepteurs les moyens de garder visibles certaines informations, tandis que d'autres vues sont défilées ou remplacées. Par exemple, dans la même fenêtre, un cadre pourrait afficher une bannière statique, un deuxième cadre afficher un menu de navigation et un troisième le document principal qui peut défiler ou être remplacé au gré de la navigation via le deuxième cadre.

Voici un document avec des cadres simple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Un document avec un jeu d'encadrement simple</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%">
  <FRAMESET rows="100, 200">
      <FRAME src="contenu_du_cadre1.html">
      <FRAME src="contenu_du_cadre2.gif">
  </FRAMESET>
  <FRAME src="contenu_du_cadre3.html">
  <NOFRAMES>
      <P>Ce document avec un jeu d'encadrement contient :
      <UL>
         <LI><A href="contenu_du_cadre1.html">Un contenu sympa</A>
         <LI><IMG src="contenu_du_cadre2.gif" alt="Une image sympa">
         <LI><A href="contenu_du_cadre3.html">D'autres contenus sympas</A>
      </UL>
  </NOFRAMES>
</FRAMESET>
</HTML>

ce qui pourrait créer la disposition de cadres suivante :

---------------------------------------
|         |                             |
|         |                             |
| Cadre 1 |                             |
|         |                             |
|         |                             |
|---------|                             |
|         |          Cadre 3            |
|         |                             |
|         |                             |
|         |                             |
| Cadre 2 |                             |
|         |                             |
|         |                             |
|         |                             |
|         |                             |
---------------------------------------

Si l'agent utilisateur ne peut pas afficher les cadres ou bien n'est pas configuré pour le faire, alors il restituera le contenu de l'élément NOFRAMES.

16.2 La disposition des cadres

Le document HTML qui décrit la disposition des cadres (appelé document avec jeu d'encadrement [ndt. frameset document]) obéit à une structure différente de celle du document HTML sans cadres. Le document standard possède une section HEAD et une section BODY. Le document avec jeu d'encadrement possède une section HEAD et une section FRAMESET à la place de BODY.

La section FRAMESET du document spécifie la disposition des vues dans la fenêtre principale de l'agent utilisateur. En outre, la section FRAMESET peut contenir un élément NOFRAMES afin d'offrir un contenu de remplacement aux agents utilisateurs qui ne reconnaissent pas les cadres ou bien ne sont pas configurés pour afficher ces cadres.

Les éléments, qui normalement seraient placés dans la section BODY, ne doivent pas apparaître avant le premier élément FRAMESET, sinon cet élément FRAMESET sera ignoré.

16.2.1 L'élément FRAMESET

<![ %HTML.Frameset; [
<!ELEMENT FRAMESET - - ((FRAMESET|FRAME)+ & NOFRAMES?) -- subdivision de fenêtre -->
<!ATTLIST FRAMESET
  %coreattrs;                          -- id, class, style, title --
  rows        %MultiLengths; #IMPLIED  -- liste de longueurs,
                                          par défaut : 100% (une seule rangée) --
  cols        %MultiLengths; #IMPLIED  -- liste de longueurs,
                                          par défaut : 100% (une seule colonne) --
  onload      %Script;       #IMPLIED  -- tous les cadres ont été chargés  --
  onunload    %Script;       #IMPLIED  -- tous les cadres ont été retirés --
  >
]]>

Définition des attributs

rows = liste-de-longueurs-multiples [CN]
Cet attribut spécifie la disposition des cadres horizontaux. Sa valeur est une liste de longueurs en pixels, en pourcentages ou relatives, séparées par des virgules. La valeur par défaut est "100%", c'est-à-dire une seule rangée.
cols = liste-de-longueurs-multiples [CN]
Cet attribut spécifie la disposition des cadres verticaux. Sa valeur est une liste de longueurs en pixels, en pourcentages ou relatives, séparées par des virgules. La valeur par défaut est "100%", c'est-à-dire une seule colonne.

Attributs définis ailleurs

  • id, class (identifiants internes au document)
  • title (titre de l'élément)
  • style (informations de style en-ligne)
  • onload, onunload (événements intrinsèques)

L'élément FRAMESET spécifie la disposition de la fenêtre principale de l'utilisateur selon des subdivisions rectangulaires.

Les rangées et les colonnes

La spécification de l'attribut rows définit le nombre de subdivisions horizontales dans un jeu d'encadrement. La spécification de l'attribut cols définit le nombre de subdivisions verticales. Les deux attributs peuvent être utilisés simultanément pour créer une grille.

Si l'attribut rows est absent, chaque colonne occupe la hauteur entière de la page. Si l'attribut cols est absent, chaque rangée occupe la largeur entière de la page. Si aucun de ces attributs n'est présent, alors le cadre occupe exactement les dimensions de la page.

Les cadres sont créés de gauche à droite pour les colonnes et de haut en bas pour les rangées. Quand les deux attributs sont spécifiés, les vues sont créées de gauche à droite dans la rangée supérieure, de gauche à droite dans la rangée suivante, etc.

Le premier exemple divise l'écran en deux verticalement (i.e., crée une moitié supérieure et une moitié inférieure).

<FRAMESET rows="50%, 50%">
...le reste de la définition...
</FRAMESET>

L'exemple suivant crée trois colonnes. La deuxième a une largeur fixe de 250 pixels (qui peut servir, par exemple, à contenir une image dont les dimensions sont connues). La première reçoit 25% de l'espace disponible et la troisième les 75% restant.

<FRAMESET cols="1*,250,3*">
...le reste de la définition...
</FRAMESET>

L'exemple suivant crée une grille de 2×3 subdivisions.

<FRAMESET rows="30%,70%" cols="33%,34%,33%">
...le reste de la définition...
</FRAMESET>

Pour l'exemple qui va suivre, on suppose que la fenêtre du navigateur fait 1000 pixels de haut. La première vue se voit allouer 30% de la hauteur totale (300 pixels). La seconde vue est fixée pour avoir exactement 400 pixels de haut. Il reste 300 pixels à répartir entre les deux autres cadres. La hauteur du quatrième cadre est définie comme étant "2*", il est donc deux fois plus haut que le troisième cadre, dont la hauteur n'est que de "*" (équivalant à "1*"). Ainsi, le troisième cadre fera 100 pixels de haut et le quatrième 200 pixels de haut.

<FRAMESET rows="30%,400,*,2*">
...le reste de la définition...
</FRAMESET>

Les longueurs absolues dont le total n'est pas égal à 100% de l'espace disponible réel devraient être ajustées par l'agent utilisateur. Quand ce total est inférieur à 100%, l'espace restant devrait être alloué proportionnellement à chaque vue. Quand il est supérieur, chaque vue devrait être réduite en fonction de la proportion de l'espace total qui lui est spécifiée.

Les jeux d'encadrement imbriqués

Les jeux d'encadrement peuvent s'imbriquer à n'importe quel niveau.

Dans l'exemple suivant, l'élément FRAMESET externe divise l'espace disponible en trois colonnes égales. L'élément FRAMESET interne partage alors la deuxième en deux rangées de hauteur inégale.

<FRAMESET cols="33%, 33%, 34%">
     ...le contenu du premier cadre...
     <FRAMESET rows="40%, 50%">
        ...le contenu du deuxième cadre, première rangée...
        ...le contenu du deuxième cadre, seconde rangée...
     </FRAMESET>
     ...le contenu du troisième cadre...
</FRAMESET>

Le partage des données entre les cadres

Les auteurs peuvent partager des données entre plusieurs cadres en incluant celles-ci au moyen de l'élément OBJECT. Les auteurs devraient inclure l'élément OBJECT dans l'élément HEAD du document avec jeu d'encadrement et nommer cet objet avec un attribut id. Tout document qui est le contenu d'un cadre dans le jeu d'encadrement peut se référer à cet identifiant.

L'exemple suivant illustre la manière dont un script pourrait appeler un élément OBJECT défini pour le jeu d'encadrement entier :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Voici un jeu d'encadrement avec un OBJECT dans HEAD</TITLE>
<!-- Cet OBJECT n'est pas restitué ! -->
<OBJECT id="monobjet" data="data.bar"></OBJECT>
</HEAD>
<FRAMESET>
    <FRAME src="bianca.html" name="bianca">
</FRAMESET>
</HTML>

<!-- Dans le document bianca.html -->
<HTML>
<HEAD>
<TITLE>La page de Bianca</TITLE>
</HEAD>
<BODY>
...le début du document...
<P>
<SCRIPT type="text/javascript">
parent.monobjet.propriété
</SCRIPT>
...le reste du document...
</BODY>
</HTML>

16.2.2 L'élément FRAME

<![ %HTML.Frameset; [
<!-- Les noms de cadre réservés commencent par le caractère souligné « _ »,
     sinon ils commencent par une lettre -->
<!ELEMENT FRAME - O EMPTY              -- sous-fenêtre -->
<!ATTLIST FRAME
  %coreattrs;                          -- id, class, style, title --
  longdesc    %URI;          #IMPLIED  -- lien vers une description longue
                                          (en complément de l'attribut title) --
  name        CDATA          #IMPLIED  -- nom du cadre à viser --
  src         %URI;          #IMPLIED  -- source du contenu du cadre --
  frameborder (1|0)          1         -- bordure de cadre ou non ? --
  marginwidth %Pixels;       #IMPLIED  -- les marges horizontales en pixels --
  marginheight %Pixels;      #IMPLIED  -- les marges verticales en pixels --
  noresize    (noresize)     #IMPLIED  -- autoriser le redimensionnement du cadre ? --
  scrolling   (yes|no|auto)  auto      -- ascenseurs ou non --
  >
]]>

Définition des attributs

name = cdata [CI]
Cet attribut assigne un nom au cadre courant. Ce nom peut être utilisé comme cible pour les liens suivants.
longdesc = uri [CT]
Cet attribut spécifie un lien vers une description longue du cadre. Cette description devrait suppléer à la brève description fournie à l'aide de l'attribut title, elle peut être particulièrement utile aux agents utilisateurs non-visuels.
src = uri [CT]
Cet attribut spécifie la localisation du contenu initial à placer dans le cadre.
noresize [CI]
Quand il est présent, cet attribut booléen indique à l'agent utilisateur que le cadre ne doit pas être redimensionnable.
scrolling = auto|yes|no [CI]
Cet attribut spécifie une indication pour le défilement de la fenêtre du cadre. Les valeurs possibles sont :
  • auto : cette valeur indique à l'agent utilisateur de fournir un mécanisme de défilement pour la fenêtre du cadre quand cela est nécessaire. C'est la valeur par défaut ;
  • yes : cette valeur indique à l'agent utilisateur de toujours fournir un mécanisme de défilement pour la fenêtre de cadre ;
  • no : cette valeur indique à l'agent utilisateur de ne pas fournir de mécanisme de défilement pour la fenêtre du cadre.
frameborder = 1|0 [CN]
Cet attribut donne à l'agent utilisateur une indication sur la bordure du cadre. Les valeurs possibles sont :
  • 1 : cette valeur indique à l'agent utilisateur de dessiner une séparation entre ce cadre et chacun des cadres adjacents. C'est la valeur par défaut ;
  • 0 : cette valeur indique à l'agent utilisateur de ne pas dessiner de séparation entre ce cadre et chacun des cadres adjacents. Remarquez que des séparateurs peuvent néanmoins être dessinés à côté de ce cadre, s'ils sont spécifiés par d'autres cadres.
marginwidth = pixels [CN]
Cet attribut spécifie la quantité d'espace à laisser entre le contenu du cadre et ses marges gauche et droite. La valeur doit être supérieure à zéro (en pixels). La valeur par défaut dépend de l'agent utilisateur.

errata-02

marginheight = pixels [CN]
Cet attribut spécifie la quantité d'espace à laisser entre le contenu du cadre et ses mages haute et basse. La valeur doit être supérieure à zéro (en pixels). La valeur par défaut dépend de l'agent utilisateur.

errata-02

Attributs définis ailleurs

  • id, class (identifiants internes au document)
  • title (titre de l'élément)
  • style (informations de style en-ligne)

L'élément FRAME définit le contenu et l'apparence d'un seul cadre.

L'établissement du contenu initial d'un cadre

L'attribut src spécifie le document initial que le cadre va contenir.

Soit l'exemple de document HTML suivant :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Un document avec jeu d'encadrement</TITLE>
</HEAD>
<FRAMESET cols="33%,33%,33%">
  <FRAMESET rows="*,200">
      <FRAME src="contenu_du_cadre1.html">
      <FRAME src="contenu_du_cadre2.gif">
  </FRAMESET>
  <FRAME src="contenu_du_cadre3.html">
  <FRAME src="contenu_du_cadre4.html">
</FRAMESET>
</HTML>

celui-ci devraient produire une disposition des cadres semblable à :

------------------------------------------
|Cadre 1     |Cadre 3       |Cadre 4       |
|            |              |              |
|            |              |              |
|            |              |              |
|            |              |              |
|            |              |              |
|            |              |              |
|            |              |              |
-------------|              |              |
|Cadre 2     |              |              |
|            |              |              |
|            |              |              |
------------------------------------------

ainsi qu'il va entraîner l'agent utilisateur à charger chaque fichier dans une vue séparée.

Le contenu d'un cadre ne doit pas se trouver dans le même document que la définition de ce cadre.

EXEMPLE ILLÉGAL :
La définition de jeu d'encadrement suivante n'est pas légale pour HTML, parce que le contenu du deuxième cadre se trouve dans le même document que le jeu d'encadrement.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Un document avec jeu d'encadrement</TITLE>
</HEAD>
<FRAMESET cols="50%,50%">
  <FRAME src="contenu_du_cadre1.html">
  <FRAME src="#ancre_dans_le_meme_document">
  <NOFRAMES>
  ...un texte...
  <H2><A name="ancre_dans_le_meme_document">Passage important</A></H2>
  ...un texte...
  </NOFRAMES>
</FRAMESET>
</HTML>

La restitution visuelle d'un cadre

L'exemple suivant illustre l'utilisation des attributs décoratifs de l'élément FRAME. On spécifie que le cadre 1 n'aura pas de barre de défilement. Le cadre 2 laissera un espace autour de son contenu (initialement, un fichier d'image) et ne sera pas redimensionnable. Aucune bordure ne sera dessinée entre les cadres 3 et 4. Des bordures seront dessinées (par défaut) entre les cadres 1, 2 et 3.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Un document avec jeu d'encadrement</TITLE>
</HEAD>
<FRAMESET cols="33%,33%,33%">
  <FRAMESET rows="*,200">
      <FRAME src="contenu_du_cadre1.html" scrolling="no">
      <FRAME src="contenu_du_cadre2.gif"
                marginwidth="10" marginheight="15"
                noresize>
  </FRAMESET>
  <FRAME src="contenu_du_cadre3.html" frameborder="0">
  <FRAME src="contenu_du_cadre4.html" frameborder="0">
</FRAMESET>
</HTML>

16.3 La spécification des informations du cadre cible

Remarque : Pour des renseignements au sujet des pratiques actuelles pour déterminer la cible d'un cadre, veuillez consulter les remarques sur les cadres en appendice.

Définition des attributs

target = cadre-cible [CI]
Cet attribut spécifie le nom du cadre dans lequel ouvrir un document.
En assignant un nom à un cadre via l'attribut name, l'auteur peut s'y référer comme « cible » des liens définis par les autres éléments. L'attribut target peut se placer sur les éléments qui créent des liens (A, LINK), des images cliquables (AREA) et des formulaires (FORM).

Veuillez consulter la section sur les noms des cadres cibles pour des précisions sur les noms de cadre reconnus.

Cet exemple illustre la manière dont l'attribut target autorise la modification dynamique du contenu d'un cadre. Nous définissons d'abord un jeu d'encadrement dans le document "frameset.html suivant :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Un document avec jeu d'encadrement</TITLE>
</HEAD>
<FRAMESET rows="50%,50%">
   <FRAME name="fixe" src="init_fixe.html">
   <FRAME name="dynamique" src="init_dynamique.html">
</FRAMESET>
</HTML>

Ensuite, dans le document "init_dynamique.html" suivant, nous effectuons une liaison vers le cadre nommé « dynamique ».

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Un document ayant des ancres avec des cibles spécifiques</TITLE>
</HEAD>
<BODY>
...commencement du document...
<P>Maintenant vous pouvez aller à la
    <A href="diapo2.html" target="dynamique">diapositive 2.</A>
...more document...
<P>Vous vous débrouillez bien. Allez à la
    <A href="diapo3.html" target="dynamique">diapositive 3.</A>
</BODY>
</HTML>

L'activation de l'un ou l'autre lien entraîne l'ouverture d'un nouveau document dans le cadre nommé « dynamique », tandis que l'autre cadre nommé « fixe » conserve son contenu initial.

Remarque : La définition d'un jeu d'encadrement ne change contrairement au contenu de l'un de ses cadre qui peut changer. Une fois que le contenu initial d'un cadre a changé, la définition du jeu d'encadrement ne reflète plus la situation courante de ses cadres.

Pour l'instant, il n'existe aucun moyen pour coder le statut complet d'un jeu d'encadrement dans un URI. C'est pourquoi, nombre d'agents utilisateurs ne permettent pas de placer un signet [ndt. bookmark] sur un jeu d'encadrement.

Les jeux d'encadrement peuvent rendre la navigation d'avant en arrière, par le biais de l'historique de l'agent utilisateur, plus compliquée pour les utilisateurs.

16.3.1 L'établissement de la cible par défaut des liens

Quand, dans le même document, plusieurs liens désignent la même cible, il est possible de spécifier la cible une seule fois et de se passer de l'attribut target de chaque élément. On réalise ceci en définissant l'attribut target sur l'élément BASE.

Revenons à l'exemple précédent, cette fois par la mise en facteur des informations de cible, en les définissant dans l'élément BASE et en les supprimant des éléments A.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Un document ayant un élément BASE avec une cible particulièret</TITLE>
<BASE href="http://www.mycom.com/diapos" target="dynamique">
</HEAD>
<BODY>
...commencement du document...
<P>Maintenant vous pouvez aller à la <A href="slide2.html">diapositive 2.</A>
...suite du document...
<P>Vous vous débrouillez bien. Allez à la
       <A href="slide3.html">diapositive 3.</A>
</BODY>
</HTML>

16.3.2 La sémantique de cible

Les agents utilisateurs devraient déterminer le cadre cible, dans lequel charger une ressource reliée, selon la préséance suivante (de la priorité la plus élevée à la plus basse) :

  1. Si l'attribut target d'un élément vise un cadre connu, quand l'élément est activé (i.e., un lieu est suivi ou un formulaire est soumis), la ressource désignée par l'élément devrait se charger dans le cadre cible ;
  2. Si cet élément n'a pas d'attribut target et, par contre, l'élément BASE en a un, c'est l'attribut target de l'élément BASE qui détermine le cadre ;
  3. Si ni cet élément ni l'élément BASE ne se réfèrent à une cible, alors la ressource désignée par l'élément devrait se charger dans le cadre qui contient l'élément ;
  4. Si un attribut target se réfère à un cadre « C » inconnu, l'agent utilisateur devrait créer une nouvelle fenêtre et un nouveau cadre, puis assigner le nom « C » au cadre et enfin charger la ressource désignée par l'élément dans le nouveau cadre.

Les agents utilisateurs devraient fournir aux utilisateurs un mécanisme pour surclasser l'attribut target.

16.4 Le contenu de remplacement

Les auteurs devraient fournir un contenu de remplacement pour les agents utilisateurs qui ne reconnaissent pas les cadres ou qui sont configurés pour ne pas les afficher.

16.4.1 L'élément NOFRAMES

<![ %HTML.Frameset; [
<!ENTITY % noframes.content "(BODY) -(NOFRAMES)">
]]>

<!ENTITY % noframes.content "(%flow;)*">

<!ELEMENT NOFRAMES - - %noframes.content;
 -- enveloppe du contenu de remplacement pour une restitution sans cadres -->
<!ATTLIST NOFRAMES
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Attributs définis ailleurs

  • id, class (identifiants internes au document)
  • lang (indications de langue), dir (direction du texte)
  • title (titre de l'élément)
  • style (informations de style en-ligne)
  • onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (événements intrinsèques)

L'élément NOFRAMES spécifie le contenu qui ne devrait être affiché que par les agents utilisateurs ne reconnaissant pas les cadres ou non configurés pour les afficher. Les agents utilisateurs qui reconnaissent les cadres doivent seulement afficher le contenu d'une déclaration NOFRAMES que s'ils sont configurés pour ne pas afficher les cadres. Les agents utilisateurs qui ne reconnaissent pas les cadres doivent afficher le contenu de l'élément NOFRAMES dans tous les cas.

L'élément NOFRAMES fait partie à la fois des DTD transitoire et de jeu d'encadrement. Dans un document qui fait appel au DTD de jeu d'encadrement, l'élément NOFRAMES peut s'utiliser à la fin de la section FRAMESET du document.

Par exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
     "http://www.w3.org/TR/html4/frameset.dtd">
  <HTML>
  <HEAD>
  <TITLE>Un document avec jeu d'encadrement et NOFRAMES</TITLE>
  </HEAD>
  <FRAMESET cols="50%, 50%">
     <FRAME src="principal.html">
     <FRAME src="table_des_matieres.html">
     <NOFRAMES>
     <P>Voici la <A href="principal-noframes.html">
              version sans cadres du document.</A>
     </NOFRAMES>
  </FRAMESET>
  </HTML>

On peut utiliser l'élément NOFRAMES, par exemple, dans un document qui est la source d'un cadre et qui utilise le DTD transitoire. Cela permet aux auteurs d'expliquer l'objet du document, au cas où celui-ci serait vu indépendamment du jeu d'encadrement, ou avec un agent utilisateur qui ne reconnaît pas les cadres.

16.4.2 Les descriptions longues des cadres

L'attribut longdesc permet aux auteurs de rendre les documents avec des cadres plus accessibles aux personnes utilisant des agents utilisateurs non-visuels. Cet attribut désigne une ressource qui fournit une description longue du cadre. Les auteurs devraient remarquer que les longues descriptions associées aux cadres sont attachées aux cadres, et non au contenu de ceux-ci. Étant donné que le contenu peut varier au cours du temps, la description longue initiale va vraisemblablement devenir inadéquate pour les contenus ultérieurs du cadre. En particulier, les auteurs ne devraient pas inclure une image comme seul contenu d'un cadre.

Le document avec jeu d'encadrement suivant décrit deux cadres. Le cadre de gauche contient une table des matières et celui de droite contient initialement l'image d'une autruche :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Un document avec jeu d'encadrement mal fait</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%">
   <FRAME src="table_des_matieres.html">
   <FRAME src="autruche.gif" longdesc="autruche-desc.html">
</FRAMESET>
</HTML>

Remarquez que l'image est incluse dans le cadre indépendamment de tout élément HTML, de sorte que l'auteur n'a pas d'autres moyens pour spécifier un texte de remplacement que l'attribut longdesc. Si le contenu du cadre de droite change (par exemple, l'utilisateur choisi un serpent à sonnettes dans la table des matières), les utilisateurs n'auront aucun accès textuel au nouveau contenu du cadre.

Les auteurs ne devraient donc pas mettre une image directement dans un cadre. L'image devrait plutôt être spécifiée dans un document HTML séparé dans lequel elle sera annotée avec le texte de remplacement adéquat :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Un document avec jeu d'encadrement bien fait</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%">
   <FRAME src="table_des_matieres.html">
   <FRAME src="autruche-conteneur.html">
</FRAMESET>
</HTML>

<!-- Dans le document autruche-conteneur.html: -->
<HTML>
<HEAD>
<TITLE>L'autruche rapide et puissante</TITLE>
</HEAD>
<P>
<OBJECT data="autruche.gif" type="image/gif">
Ces autruches ont vraiment bon go&ucirc;t !
</OBJECT>
</HTML>

16.5 Les cadres en-ligne : l'élément IFRAME

<!ELEMENT IFRAME - - (%flow;)*         -- sous-fenêtre en-ligne -->
<!ATTLIST IFRAME
  %coreattrs;                          -- id, class, style, title --
  longdesc    %URI;          #IMPLIED  -- lien vers une description longue
                                          (complément de l'attribut title) --
  name        CDATA          #IMPLIED  -- nom du cadre pour ciblage --
  src         %URI;          #IMPLIED  -- source du contenu du cadre --
  frameborder (1|0)          1         -- request frame borders? --
  marginwidth %Pixels;       #IMPLIED  -- marges horizontales en pixels --
  marginheight %Pixels;      #IMPLIED  -- marges verticales en pixels --
  scrolling   (yes|no|auto)  auto      -- scrollbar or none --
  align       %IAlign;       #IMPLIED  -- alignement vertical ou horizontal --
  height      %Length;       #IMPLIED  -- hauteur du cadre --
  width       %Length;       #IMPLIED  -- largeur du cadre --
  >

Définition des attributs

longdesc = uri [CT]
Cet attribut spécifie un lien vers une description longue du cadre. Cette description devrait suppléer la brève description fournie à l'aide de l'attribut title, elle est particulièrement utile pour les agents utilisateurs non-visuels.
name = cdata [CI]
Cet attribut assigne un nom au cadre courant. Ce nom peut être utilisé comme cible pour les liens qui suivent.
width = longueur [CN]
La largeur du cadre en-ligne.
height = longueur [CN]
La hauteur du cadre en-ligne.

Attributs définis ailleurs

  • id, class (identifiants internes au document)
  • title (titre de l'élément)
  • style (informations de style en-ligne)
  • name, src, frameborder, marginwidth, marginheight, scrolling (commandes et décoration de cadre)
  • align (alignement)
L'élément IFRAME permet aux auteurs d'insérer un cadre dans un bloc de texte. L'insertion d'un cadre en-ligne dans un passage textuel revient un peu à y insérer un objet via l'élément OBJECT : ces éléments permettent tous deux l'insertion d'un document HTML au sein d'un autre, ils peuvent tous deux être alignés sur le texte environnant, etc.

Les informations qui doivent être insérées en-ligne sont désignées par l'attribut src de cet élément. Par contre, le contenu de l'élément IFRAME ne devraient être affiché que par les agents utilisateurs qui ne reconnaissent pas les cadres ou qui sont configurés pour ne pas les afficher.

Pour les agents utilisateurs qui reconnaissent les cadres, l'exemple suivant placera un cadre en-ligne, entouré par une bordure, au milieu du texte.

  <IFRAME src="foo.html" width="400" height="500"
             scrolling="auto" frameborder="1">
  [Votre agent utilisateur ne reconnaît pas les cadres ou n'est pas
  configuré pour les afficher pour l'instant. Cependant, vous pouvez visiter le
  <A href="foo.html">document concerné.</A>]
  </IFRAME>

Les cadres en-ligne ne peuvent pas être redimensionnés (et donc n'acceptent pas l'attribut noresize).

Remarque : On peut également incorporer un document HTML dans un autre document HTML avec l'élément OBJECT. Voir la section sur les documents incorporés pour des précisions.


Les formulaires dans les documents HTML

17 Les formulaires

Sommaire

  1. Introduction aux formulaires
  2. Les commandes
    1. Les types de commande
  3. L'élément FORM
  4. L'élément INPUT
    1. Les types de commande créés par l'élément INPUT
    2. Exemples de formulaires contenant des commandes INPUT
  5. L'élément BUTTON
  6. Les éléments SELECT, OPTGROUP et OPTION
    1. Les options présélectionnées
  7. L'élément TEXTAREA
  8. L'élément ISINDEX
  9. Les labels
    1. L'élément LABEL
  10. Le rajout d'une structure aux formulaires : les éléments FIELDSET et LEGEND
  11. Donner l'attention à un élément
    1. La navigation par tabulation
    2. Les clés d'accès
  12. Les commandes inactives et en lecture seule
    1. Les commandes inactives
    2. Les commandes en lecture seule
  13. La soumission du formulaire
    1. La méthode de soumission du formulaire
    2. Les commandes réussies
    3. Le traitement des données du formulaire
      • Première étape : identifier les commandes réussies
      • Deuxième étape : construire le jeu des données du formulaire
      • Troisième étape : coder le jeu des données du formulaire
      • Quatrième étape : soumettre le jeu des données du formulaire codé
    4. Les types de contenu du formulaire
      • "application/x-www-form-urlencoded"
      • "multipart/form-data"

17.1 Introduction aux formulaire

Un formulaire HTML est une partie du document constituée d'un contenu normal, d'un balisage, d'éléments spéciaux appelés commandes (cases à cocher, boutons radio, menus, etc.) et de labels sur ces commandes. L'utilisateur « remplit » généralement le formulaire en modifiant ses commandes (en saisissant un texte, en sélectionnant les articles d'un menu, etc.), avant de soumettre le formulaire à un agent pour son traitement (par exemple, à un serveur Web, à un serveur de courrier, etc.).

Voici un formulaire simple qui comprend des labels, des boutons radio et des boutons poussoirs (pour réinitialiser le formulaire ou le soumettre) :

 <FORM action="http://unsite.com/prog/ajoutermembre" method="post">
    <P>
    <LABEL for="prenom">Prénom : </LABEL>
              <INPUT type="text" id="prenom"><BR>
    <LABEL for="nom">Nom : </LABEL>
              <INPUT type="text" id="nom"><BR>
    <LABEL for="email">e-mail : </LABEL>
              <INPUT type="text" id="email"><BR>
    <INPUT type="radio" name="genre" value="homme"> Homme<BR>
    <INPUT type="radio" name="genre" value="femme"> Femme<BR>
    <INPUT type="submit" value="Envoyer"> <INPUT type="reset">
    </P>
 </FORM>

Remarque : Cette spécification comprend des informations plus détaillées concernant les formulaires dans la sous-section traitant des problèmes d'affichage des formulaires.

17.2 Les commandes

Les utilisateurs interagissent avec les formulaires au moyen de commandes nommées.

Le « nom de commande » d'une commande est donné par son attribut name. La portée de l'attribut name d'une commande au sein d'un élément FORM est cet élément FORM.

Chaque command possède à la fois une valeur initiale et une valeur courante, les deux sont des chaînes de caractères. Veuillez consulter la définition de chaque commande pour des précisions sur la valeur initiale et les éventuelles contraintes sur les valeurs imposées par la commande. En général, la « valeur initiale » d'une commande peut être spécifiée avec l'attribut value de l'élément de commande. Cependant, la valeur initiale d'un élément TEXTAREA est donnée par son contenu et la valeur initiale d'un élément OBJECT dans un formulaire est déterminée par l'implémentation de l'objet (i.e., elle n'est pas précisée par cette spécification).

La « valeur courante » d'une commande est d'abord égale à la valeur initiale. Par la suite, la valeur courante de la commande peut être modifiée par les actions de l'utilisateur et par les scripts.

La valeur initiale d'une commande ne change pas. Ainsi, quand un formulaire est réinitialisé, chacune des valeurs courantes des commandes reprend sa valeur initiale. Si la commande n'a pas de valeur initiale, alors l'effet de la réinitialisation du formulaire sur cette commande n'est pas défini.

Lors de la soumission du formulaire pour son traitement, le nom et la valeur courante de certaines commandes sont accouplés et ces couples sont soumis avec le formulaire. On appelle ces commandes, pour lesquelles des couples nom/valeur sont soumis, des commandes réussies [ndt. successful controls].

17.2.1 Les types de commande

HTML défini les types de commande suivants :

Les boutons
Les auteurs peuvent créer trois types de boutons :
  • les boutons de soumission : quand il est actionné, le bouton de soumission soumet le formulaire. Un formulaire peut contenir plusieurs boutons de soumission ;
  • les boutons de réinitialisation : quand il est actionné, le bouton de réinitialisation remet toutes les commandes à leur valeur initiale ;
  • les boutons poussoirs : les boutons poussoirs n'ont pas de comportement par défaut. Chaque bouton poussoir peut avoir des scripts côté client qui sont associés aux attributs d'événement de l'élément. Quand un événement se produit (par exemple, l'utilisateur presse le bouton, le relâche, etc.), le script associé est déclenché.

    Les auteurs devraient spécifier le langage du script du bouton poussoir au moyen d'une déclaration de script par défaut (avec l'élément META).

Les auteurs créent des boutons avec les éléments BUTTON ou INPUT. Veuillez consulter leurs définitions respectives pour des précisions sur la spécification des divers types de bouton.

Remarque : Les auteurs devraient remarquer que l'élément BUTTON offre des possibilités de restitution plus étendues que celles de l'élément INPUT.

Les cases à cocher
Les cases à cocher (et les boutons « radio ») sont des interrupteurs marche/arrêt qui peuvent être actionnés par l'utilisateur. L'interrupteur est sur « marche » quand l'attribut checked de l'élément de commande est spécifié. Lors de la soumission du formulaire, seules les commandes de cases à cocher sur « marche » peuvent devenir des commandes réussies.

Dans un formulaire, plusieurs cases à cocher peuvent partager le même nom de commande. Ainsi, par exemple, les cases à cocher permettent aux utilisateurs de sélectionner plusieurs valeurs pour la même propriété. On utilise l'élément INPUT pour créer une commande de case à cocher.

Les boutons « radio »
Les boutons « radio » sont analogues aux cases à cocher, à la différence que, quand plusieurs boutons partage le même nom de commande, alors ils s'excluent mutuellement : quand l'un est mis sur « marche », tous les autres avec le même nom se mettent sur « arrêt ». On utilise l'élément INPUT pour créer une commande de bouton radio.
Si aucun des boutons radio, dans un jeu partageant le même nom de commande, n'est en position « marche », alors le comportement de l'agent utilisateur, pour le choix de la commande qui est initialement sur « marche », n'est pas défini. Remarque : Comme les implémentations existantes gèrent diversement ce cas, la spécification courante se démarque du document RFC1866 ([RFC1866] section 8.1.2.4), qui déclare :
À tout instant, un seul bouton radio exactement parmi ceux dans un jeu est pressé. Si aucun des éléments dans un jeu de boutons radio ne spécifie un attribut "CHECKED", alors l'agent utilisateur doit activer initialement le premier des boutons radio du jeu en question.

En raison des différences d'interprétation entre les agents utilisateurs, les auteurs devraient s'assurer qu'un des boutons radio dans un jeu soit mis initialement sur « marche ».

Les menus
Les menus proposent des options aux utilisateurs parmi lesquelles faire un choix. L'élément SELECT crée un menu, en conjonction avec les éléments OPTGROUP et OPTION.
La saisie de texte
Les auteurs peuvent créer deux types de commande qui permettent aux utilisateurs la saisie d'un texte. L'élément INPUT crée une commande pour une saisie sur une seule ligne et l'élément TEXTAREA crée une commande pour une saisie sur plusieurs lignes. Dans les deux cas, le texte saisi devient la valeur courante de la commande.
La sélection d'un fichier
Ce type de commande permet à l'utilisateur de sélectionner un fichier de sorte que son contenu puisse être soumis avec le formulaire. On utilise l'élément INPUT pour créer une commande de sélection de fichier.
Les commandes cachées
Les auteurs peuvent créer des commandes qui ne sont pas restituées mais dont les valeurs sont soumises avec le formulaire. Les auteurs utilisent en général ce type de commande pour enregistrer les informations entre les échanges client/serveur, qui seraient perdues sinon du fait de la nature apatride du protocole HTTP (voir le document [RFC2616]). On utilise l'élément INPUT pour créer une commande cachée.
Les commandes d'objets
Les auteurs peuvent insérer des objets génériques dans les formulaires de telle sorte que les valeurs qui leur sont associées soient soumises en même temps que les autres commandes. On utilise l'élément OBJECT pour créer une commande d'objet.

Les éléments utilisés pour créer les commandes apparaissent généralement dans un élément FORM, mais ils peuvent aussi apparaître en dehors de la déclaration de l'élément FORM quand on les utilise pour construire des interfaces utilisateurs. Ceci est abordé dans la section sur les événements intrinsèques. Remarquez que les commandes en dehors d'un formulaire ne peuvent pas être des commandes réussies.

17.3 L'élément FORM

<!ELEMENT FORM - - (%block;|SCRIPT)+ -(FORM) -- formulaire interactif -->
<!ATTLIST FORM
  %attrs;                              -- %coreattrs, %i18n, %events --
  action      %URI;          #REQUIRED -- gestionnaire de formulaire côté serveur --
  method      (GET|POST)     GET       -- méthode HTTP utilisée
                                          pour soumettre le formulaire --
  enctype     %ContentType;  "application/x-www-form-urlencoded"
  accept      %ContentTypes; #IMPLIED  -- liste de types MIME pour le
                                          chargement des fichiers --
  name        CDATA          #IMPLIED  -- nom du formulaire pour les scripts --
  onsubmit    %Script;       #IMPLIED  -- le formulaire a été soumis --
  onreset     %Script;       #IMPLIED  -- le formulaire a été réinitialisé --
  accept-charset %Charsets;  #IMPLIED  -- liste des jeux de caractères reconnus --
  >

Balise ouvrante : obligatoire, balise fermante : obligatoire

Définition des attributs

action = uri [CT]
Cet attribut spécifie l'agent pour le traitement du formulaire. Le comportement de l'agent utilisateur pour une valeur autre qu'un URI HTTP est indéfini.
method = get|post [CI]
Cet attribut spécifie la méthode HTTP qui sera employée pour soumettre le jeu des données de formulaire. Les valeurs possibles (insensibles à la casse) sont "get" (la valeur par défaut) et "post". Voir la section sur la soumission du formulaire pour des informations sur leur utilisation.
enctype = type-de-contenu [CI]
Cet attribut spécifie le type de contenu défini pour soumettre le formulaire au serveur (quand la valeur de la méthode est "post"). La valeur par défaut de cet attribut est "application/x-www-form-urlencoded". La valeur "multipart/form-data" devrait être utilisée en conjonction avec l'élément INPUT, quand celui-ci est défini tel que type="file".
accept-charset = charset list [CI]
Cet attribut spécifie la liste des encodages de caractères des données saisies qui sont acceptés par le serveur traitant ce formulaire. La valeur est une liste de valeurs de jeu de caractère, séparées par des espaces et/ou des virgules. Le client doit interpréter cette liste comme une liste de type « OU exclusif », i.e., le serveur est capable d'accepter un quelconque encodage de caractères seul par entité reçue.

La valeur par défaut de cet attribut est la chaîne réservée "UNKNOWN". Les agents utilisateurs peuvent interpréter cette valeur comme représentant l'encodage de caractères employé pour transmettre le document contenant l'élément FORM en question.

accept = liste-de-types-de-contenu [CI]
Cet attribut spécifie la liste de types de contenu, séparés par des virgules, que le serveur traitant ce formulaire va prendre en charge correctement. L'agent utilisateur peut utiliser ces informations pour éliminer les fichiers non conformes quand il demande à l'utilisateur de sélectionner un fichier à envoyer au serveur (voir l'élément INPUT quand l'attribut type="file").
name = cdata [CI]
Cet attribut nomme l'élément de sorte qu'il puisse être appelé par une feuille de style ou un script. Remarque : Cet attribut est conservé pour la rétro-compatibilité. Les applications devraient utiliser l'attribut id pour identifier les éléments.

Attributs définis ailleurs

  • id, class (identifiants internes au document)
  • lang (indications de langue), dir (direction du texte)
  • style (indication de style en-ligne)
  • title (titre de l'élément)
  • target (indication de cadre cible)
  • onsubmit, onreset, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (événements intrinsèques)

L'élément FORM agit comme conteneur pour les commandes. Il spécifie :

  • la disposition du formulaire (donnée par le contenu de l'élément) ;
  • le programme qui va manipuler le formulaire rempli puis soumis (l'attribut action). Le programme récepteur doit être capable d'analyser les couples nom/valeur afin de les utiliser ;
  • la méthode selon laquelle les données de l'utilisateur seront envoyées au serveur (l'attribut method) ;
  • l'encodage de caractères qui doit être accepté par le serveur pour manipuler ce formulaire (l'attribut accept-charset). Les agents utilisateurs peuvent avertir l'utilisateur de la valeur de l'attribut accept-charset et/ou empêcher que celui-ci n'entre des caractères non reconnus.

Un formulaire peut contenir un texte et un balisage (paragraphes, listes, etc.) en plus des commandes de formulaire.

L'exemple suivant montre un formulaire qui va être traité par le programme « ajoutermembre » une fois soumis. Le formulaire sera envoyé au programme à l'aide de la méthode HTTP "post".

 <FORM action="http://unsite.com/prog/ajoutermembre" method="post">
 ...contenu du formulaire...
 </FORM>

Veuillez consulter la section traitant de la soumission du formulaire pour des renseignements sur la manière dont les agents utilisateurs doivent préparer les données de formulaire pour les serveurs et sur la manière dont les agents utilisateurs devraient interpréter les réponses prévisibles.

Remarque : Les explications complètes concernant le comportement des serveurs lorsqu'ils reçoivent des données de formulaire sont hors de l'objet de cette spécification.

17.4 L'élément INPUT

<!ENTITY % InputType
  "(TEXT | PASSWORD | CHECKBOX |
    RADIO | SUBMIT | RESET |
    FILE | HIDDEN | IMAGE | BUTTON)"
   >

<!ELEMENT INPUT - O EMPTY              -- commande de formulaire -->
<!ATTLIST INPUT
  %attrs;                              -- %coreattrs, %i18n, %events --
  type        %InputType;    TEXT      -- le type de la commande --
  name        CDATA          #IMPLIED  -- soumis en tant que partie du formulaire --
  value       CDATA          #IMPLIED  -- pour les boutons radio et les cases à cocher --
  checked     (checked)      #IMPLIED  -- pour les boutons radio et les cases à cocher --
  disabled    (disabled)     #IMPLIED  -- indisponible dans ce contexte --
  readonly    (readonly)     #IMPLIED  -- pour les types text et passwd --
  size        CDATA          #IMPLIED  -- propre à chaque type de champs --
  maxlength   NUMBER         #IMPLIED  -- caractères maxi pour les champs textuels --
  src         %URI;          #IMPLIED  -- pour les champs et les images --
  alt         CDATA          #IMPLIED  -- brève description --
  usemap      %URI;          #IMPLIED  -- utiliser une image cliquable côté client --
  ismap       (ismap)        #IMPLIED  -- utiliser une image cliquable côté serveur --
  tabindex    NUMBER         #IMPLIED  -- position dans l'ordre de tabulation --
  accesskey   %Character;    #IMPLIED  -- touche de caractère pour accessibilité --
  onfocus     %Script;       #IMPLIED  -- l'élément a l'attention --
  onblur      %Script;       #IMPLIED  -- l'élément perd l'attention --
  onselect    %Script;       #IMPLIED  -- un texte est sélectionné --
  onchange    %Script;       #IMPLIED  -- la valeur de l'élément a changé --
  accept      %ContentTypes; #IMPLIED  -- liste des types MIME pour l'envoi d'un fichier --
  >

Balise ouvrante : obligatoire, balise fermante : interdite

Définition des attributs

type = text|password|checkbox|radio|submit|reset|file|hidden|image|button [CI]
Cet attribut spécifie le type de commande à créer. La valeur par défaut de cet attribut est "text".
name = cdata [CI]
Cet attribut assigne le nom de la commande.
value = cdata [CA]
Cet attribut spécifie la valeur initiale de la commande. Celui-ci est optionnel, sauf quand l'attribut type a la valeur "radio" ou bien "checkbox".
size = cdata [CN]
Cet attribut indique à l'agent utilisateur la largeur initiale de la commande. La largeur est donnée en pixels, sauf quand l'attribut type a la valeur "text" ou bien "password". Auxquels cas, sa valeur correspond au nombre (entier) de caractères.
maxlength = nombre [CN]
Quand l'attribut type a la valeur "text" ou bien "password", cet attribut spécifie le nombre maximum de caractères que l'utilisateur peut saisir. Ce nombre peut excéder la valeur spécifiée pour l'attribut size, auquel cas l'agent utilisateur devrait proposer un mécanisme de défilement. La valeur par défaut de cet attribut est un nombre illimité.
checked [CI]
Quand l'attribut type a la valeur "radio" ou bien "checkbox", cet attribut booléen spécifie que le bouton est sur « marche ». Les agents utilisateurs doivent ignorer cet attribut pour les autres types de commande.
src = uri [CT]
Quand l'attribut type a la valeur "image", cet attribut spécifie la localisation de l'image à utiliser pour décorer le bouton de soumission graphique.

Attributs définis ailleurs

  • id, class (identifiants internes au document)
  • lang (indications de langue), dir (direction du texte)
  • title (titre de l'élément)
  • style (indication de style en-ligne)
  • alt (texte de remplacement)
  • align (alignment)
  • accept (types de contenu légaux pour le serveur)
  • readonly (commandes d'entrée en lecture seule)
  • disabled (commandes d'entrée indisponibles)
  • tabindex (navigation par tabulation)
  • accesskey (clés d'accès)
  • usemap (images cliquables côté client)
  • ismap (images cliquables côté serveur)
  • onfocus, onblur, onselect, onchange, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (événements intrinsèques)

17.4.1 Les types de commande créés par l'élément INPUT

Le type de commande défini par l'élément INPUT est fonction de la valeur de l'attribut type :

text
Crée une commande de saisie de texte sur une seule ligne.
password
Comme pour la valeur "text", mais le texte saisi est restitué de manière à dissimuler les caractères (par exemple, une succession de caractères astérisques « * »). Ce type de commande est souvent employé pour les entrées sensibles comme les mots de passe. Remarquez que la valeur courante est le texte saisi par l'utilisateur, non le texte restitué par l'agent utilisateur.

Remarque : Les développeurs d'applications devraient remarquer que ce mécanisme n'offre qu'une protection légère. Bien qu'il soit masqué par l'agent utilisateur aux yeux d'un éventuel observateur, le mot de passe est transmis au serveur en texte clair et peut être lu par quiconque ayant un accès granulaire au réseau.

checkbox
Crée une case à cocher.
radio
Crée un bouton « radio ».
submit
Crée un bouton de soumission.
image
Crée un bouton de soumission graphique. La valeur de l'attribut src spécifie l'URI de l'image qui va décorer le bouton. Pour des questions d'accessibilité, les auteurs devraient fournir un texte de remplacement pour l'image au moyen de l'attribut alt.

Quand un dispositif de pointage est employé pour cliquer sur l'image, le formulaire est soumis et les coordonnées du clic sont passées au serveur. La coordonnée « x » se mesure en pixels à partir de la gauche de l'image et la coordonnée « y » en pixels à partir du haut de l'image. Les données soumises comprennent les valeurs nom.x=valeur-de-x et nom.y=valeur-de-y, dans lesquelles le « nom » est la valeur de l'attribut name, et « valeur-de-x » et « valeur-de-y » sont les valeurs des coordonnées « x » et « y » respectivement.

Si le serveur entreprend diverses actions en fonction de l'endroit cliqué, l'utilisateur d'un navigateur non-graphique sera désavantagé. Pour cette raison, les auteurs devraient considérer ces approches alternatives :

  • Utiliser plusieurs bouton de soumission (chacun avec sa propre image) au lieu d'un seul bouton de soumission graphique. Les auteurs peuvent employer les feuilles de style pour contrôler le positionnement de ces boutons ;
  • Utiliser une image cliquable côté client en même temps que des scripts.
reset
Crée un bouton de réinitialisation.
button
Crée un bouton poussoir. Les agents utilisateurs devraient utiliser la valeur de l'attribut value comme intitulé du bouton.
hidden
Crée une commande cachée.
file
Crée une commande de sélection de fichier. Les agents utilisateurs peuvent utiliser la valeur de l'attribut value comme nom de fichier initial.

17.4.2 Exemples de formulaires contenant des commandes INPUT

L'exemple de fragment HTML suivant définit un formulaire simple qui permet à l'utilisateur de saisir ses prénom, nom, adresse e-mail et genre. Quand on actionnera le bouton de soumission, le formulaire sera transmis au programme spécifié par l'attribut action.

 <FORM action="http://unsite.com/prog/ajoutermembre" method="post">
    <P>
    Prénom : <INPUT type="text" name="prenom"><BR>
    Nom : <INPUT type="text" name="nom"><BR>
    E-mail: <INPUT type="text" name="email"><BR>
    <INPUT type="radio" name="genre" value="homme"> Homme<BR>
    <INPUT type="radio" name="genre" value="femme"> Femme<BR>
    <INPUT type="submit" value="Envoyer"> <INPUT type="reset">
    </P>
 </FORM>

Ce formulaire pourrait être restitué comme suit :

Un exemple de restitution d'un formulaire.

Dans la section traitant de l'élément LABEL, nous aborderons le balisage des intitulés tel que « Prénom » ici.

Dans l'exemple suivant, la fonction JavaScript « verifier » est déclenchée quand l'événement "onclick" se produit :

<HEAD>
<META http-equiv="Content-Script-Type" content="text/javascript">
</HEAD>
<BODY>
 <FORM action="..." method="post">
    <P>
    <INPUT type="button" value="Cliquez moi" onclick="verifier()">
 </FORM>
</BODY>

Veuillez consulter la section sur les événements intrinsèques pour plus d'informations à propos des scripts et des événements.

L'exemple suivant montre la manière dont le contenu d'un fichier spécifié par l'utilisateur peut être soumis avec le formulaire. L'utilisateur est invité à donner son nom et la liste des noms de fichier dont le contenu devrait être soumis avec le formulaire. En spécifiant la valeur "multipart/form-data" pour l'attribut enctype, chaque contenu de fichier sera conditionné pour soumission dans une section distincte d'un document en plusieurs parties.

<FORM action="http://server.dom/cgi/gestion"
    enctype="multipart/form-data"
    method="post">
 <P>
 Quel est votre nom ? <INPUT type="text" name="nom_expediteur">
 Quels sont les fichiers à envoyer ? <INPUT type="file" name="nom_des_fichiers">
 </P>
</FORM>

17.5 L'élément BUTTON

<!ELEMENT BUTTON - -
     (%flow;)* -(A|%formctrl;|FORM|FIELDSET)
     -- bouton poussoir -->
<!ATTLIST BUTTON
  %attrs;                              -- %coreattrs, %i18n, %events --
  name        CDATA          #IMPLIED
  value       CDATA          #IMPLIED  -- envoyé au serveur à la soumission --
  type        (button|submit|reset) submit -- à utiliser comme bouton de formulaire --
  disabled    (disabled)     #IMPLIED  -- indisponible dans ce contexte --
  tabindex    NUMBER         #IMPLIED  -- position dans l'ordre de tabulation --
  accesskey   %Character;    #IMPLIED  -- touche de caractère pour l'accessibilité --
  onfocus     %Script;       #IMPLIED  -- l'élément a l'attention --
  onblur      %Script;       #IMPLIED  -- l'élément perd l'attention --
  >

Balise ouvrante : obligatoire, balise fermante : obligatoire

Définition des attributs

name = cdata [CI]
Cet attribut assigne le nom de la commande.
value = cdata [CS]
Cet attribute assigne la valeur initiale au bouton.
type = submit|button|reset [CI]
Cet attribut déclare le type du bouton. Les valeurs possibles sont :
  • submit : crée un bouton de soumission. C'est la valeur par défaut ;
  • reset : crée un bouton de réinitialisation ;
  • button : crée un bouton poussoir.

Attributs définis ailleurs

  • id, class (identifiants internes au document)
  • lang (indications de langue), dir (direction du texte)
  • title (titre de l'élément)
  • style (indication de style en-ligne)
  • disabled (commandes d'entrée indisponibles)
  • accesskey (clés d'accès)
  • tabindex (navigation par tabulation)
  • onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (événements intrinsèques)

Les boutons créés par l'élément BUTTON fonctionnent exactement comme ceux créés avec l'élément INPUT, mais ils offrent des possibilités de restitution plus variées : l'élément BUTTON peut avoir un contenu. Par exemple, un élément BUTTON qui contient une image fonctionne de la même façon et peut avoir le même aspect qu'un élément INPUT dont l'attribut type a la valeur "image", sauf que le type d'élément BUTTON admet un contenu.

Les agents utilisateurs visuels peuvent restituer les boutons BUTTON en relief et avec un mouvement de haut en bas quand on les clique, tandis qu'ils peuvent restituer les boutons INPUT comme des images « plates ».

L'exemple suivant reprend et prolonge un exemple précédent en créant des boutons de soumission et de réinitialisation avec l'élément BUTTON au lieu de INPUT. Les boutons contiennent des images par l'intermédiaire d'éléments IMG.

 <FORM action="http://unsite.com/prog/ajoutermembre" method="post">
    <P>
    Prénom : <INPUT type="text" name="prenom"><BR>
    Nom : <INPUT type="text" name="nom"><BR>
    E-mail: <INPUT type="text" name="email"><BR>
    <INPUT type="radio" name="genre" value="homme"> Homme<BR>
    <INPUT type="radio" name="genre" value="femme"> Femme<BR>
    <BUTTON name="submit" value="envoyer" type="submit">
    Envoyer<IMG src="/icons/c-bon.gif" alt=""></BUTTON>
    <BUTTON name="reset" type="reset">
    Effacer<IMG src="/icons/c-pas-bon.gif" alt=""></BUTTON>
    </P>
 </FORM>

Les auteurs doivent se rappeler de fournir un texte de remplacement pour l'élément IMG.

Il est illégal d'associer une image cliquable à un élément IMG apparaissant en contenu d'un élément BUTTON.

EXEMPLE ILLÉGAL :
Ce qui suit n'est pas légal pour HTML.

<BUTTON>
<IMG src="foo.gif" usemap="...">
</BUTTON>

17.6 Les éléments SELECT, OPTGROUP et OPTION

<!ELEMENT SELECT - - (OPTGROUP|OPTION)+ -- sélecteur d'option -->
<!ATTLIST SELECT
  %attrs;                              -- %coreattrs, %i18n, %events --
  name        CDATA          #IMPLIED  -- nom du champs --
  size        NUMBER         #IMPLIED  -- rangées visibles --
  multiple    (multiple)     #IMPLIED  -- une seule sélection par défaut --
  disabled    (disabled)     #IMPLIED  -- indisponible dans ce contexte --
  tabindex    NUMBER         #IMPLIED  -- position dans l'ordre de tabulation --
  onfocus     %Script;       #IMPLIED  -- l'élément a l'attention --
  onblur      %Script;       #IMPLIED  -- l'élément perd l'attention --
  onchange    %Script;       #IMPLIED  -- la valeur de l'élément a changé --
  >

Balise ouvrante : obligatoire, balise fermante : obligatoire

Définition des attributs pour SELECT

name = cdata [CI]
Cet attribut assigne le nom de la commande.
size = nombre [CN]
Quand l'élément SELECT se présente comme une zone de liste défilante [ndt. scrolled list box], cet attribut spécifie le nombre de rangées de cette liste qui devraient être visibles en même temps. Les agents utilisateurs ne sont pas tenus de présenter l'élément SELECT sous forme d'une zone de liste ; ils peuvent faire appel à un autre mécanisme, tel qu'un menu déroulant [ndt. drop-down menu].
multiple [CI]
Quand il est présent, cet attribut booléen permet une sélection multiple. En son absence, l'élément SELECT n'autorise que la sélection simple.

Attributs définis ailleurs

  • id, class (identifiants internes au document)
  • lang (indications de langue), dir (direction du texte)
  • title (titre de l'élément)
  • style (indication de style en-ligne)
  • disabled (commandes d'entrée indisponibles)
  • tabindex (navigation par tabulation)
  • onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (événements intrinsèques)

L'élément SELECT crée un menu. Chaque option offerte par le menu est représentée par un élément OPTION. L'élément SELECT doit contenir au moins un élément OPTION.

L'élément OPTGROUP permet aux auteurs le regroupement logique des options. Cela est particulièrement utile quand l'utilisateur doit effectuer un choix à partir d'une longue liste d'options ; les groupes d'options apparentées sont plus facile à comprendre et à se remémorer qu'une seule longue liste d'options. Dans HTML 4 tous les éléments OPTGROUP doivent être spécifiés directement dans un élément SELECT (i.e., les groupes ne peuvent pas être imbriqués).

17.6.1 Les options présélectionnées

Zéro ou plusieurs options peuvent être présélectionnées pour l'utilisateur. Les agents utilisateurs devraient déterminer les options qui sont préselectionnées comme suit :

  • si aucun élément OPTION ne possède un attribut selected, le comportement de l'agent utilisateur vis-à-vis du choix de l'option sélectionnée initiale est indéfini. Remarque : Étant donné que les implémentations existantes gèrent ce cas diversement, la spécification courante se démarque du document RFC1866 ([RFC1866] section 8.1.3), qui déclare :
    La première option est sélectionnée à l'initialisation, à moins que l'attribut SELECTED ne soit présent sur l'un des éléments <OPTION>.

    Comme le comportement des agents utilisateurs varie, les auteurs devraient s'assurer que chaque menu inclut un élément OPTION présélectionné par défaut ;

  • si un élément OPTION possède un attribut selected, alors celui-ci devrait être présélectionné ;
  • si l'élément SELECT a un attribut multiple spécifié et plusieurs éléments OPTION avec l'attribut selected spécifié, alors ceux-ci devraient tous être présélectionnés ;
  • il s'agit d'une erreur si plusieurs éléments OPTION ont un attribut selected alors que l'attribut multiple n'est pas spécifié sur l'élément SELECT. Les agents utilisateurs peuvent varier dans la prise en charge de cette erreur, mais ils ne devraient pas présélectionner plus d'une option.
<!ELEMENT OPTGROUP - - (OPTION)+ -- regroupement d'option -->
<!ATTLIST OPTGROUP
  %attrs;                              -- %coreattrs, %i18n, %events --
  disabled    (disabled)     #IMPLIED  -- indisponible dans ce contexte --
  label       %Text;         #REQUIRED -- à utiliser dans les menus hiérarchiques --
  >

Balise ouvrante : obligatoire, balise fermante : obligatoire

Définition des attributs pour OPTGROUP

label = texte [CS]
Cet attribut spécifie l'intitulé du groupe d'options.

Attributs définis ailleurs

  • id, class (identifiants internes au document)
  • lang (indications de langue), dir (direction du texte)
  • title (titre de l'élément)
  • style (indication de style en-ligne)
  • disabled (commandes d'entrée indisponibles)
  • onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (événements intrinsèques)

Remarque : Les développeurs sont prévenus de ce que les futures versions de HTML pourraient prolonger le mécanisme de regroupement pour autoriser les groupes imbriqués (i.e., les éléments OPTGROUP pourraient s'imbriquer). Cela permettrait aux auteurs de représenter une hiérarchie d'options plus complète.

<!ELEMENT OPTION - O (#PCDATA)         -- option sélectionnable -->
<!ATTLIST OPTION
  %attrs;                              -- %coreattrs, %i18n, %events --
  selected    (selected)     #IMPLIED
  disabled    (disabled)     #IMPLIED  -- indisponible dans ce contexte --
  label       %Text;         #IMPLIED  -- à utiliser dans les menus hiérarchiques --
  value       CDATA          #IMPLIED  -- le contenu de l'élément par défaut --
  >

Balise ouvrante : obligatoire, balise fermante : optionnelle

Définition des attributs pour OPTION

selected [CI]
Quand il est présent, cet attribut booléen spécifie que l'option est présélectionnée.
value = cdata [CS]
Cet attribut spécifie la valeur initiale de la commande. Si cet attribut n'est pas spécifié, la valeur initiale est alors le contenu de l'élément OPTION.
label = texte [CS]
Cet attribut permet aux auteurs de spécifier un intitulé pour l'option qui est plus court que le contenu de l'élément OPTION. Quand il est spécifié, les agents utlisateurs devraient utiliser la valeur de cet attribut plutôt que le contenu de l'élément OPTION comme intitulé pour l'option.

Attributs définis ailleurs

  • id, class (identifiants internes au document)
  • lang (indications de langue), dir (direction du texte)
  • title (titre de l'élément)
  • style (indication de style en-ligne)
  • disabled (commandes d'entrée indisponibles)
  • onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (événements intrinsèques)

Lors de la restitution de l'option d'un menu, l'agent utilisateur devrait utiliser la valeur de l'attribut label de l'élément OPTION comme intitulé pour l'option. Si cet attribut n'est pas spécifié, l'agent utilisateur devrait utiliser le contenu de l'élément OPTION.

L'attribut label de l'élément OPTGROUP spécifie l'intitulé d'un groupe d'options.

Dans cet exemple, nous créons un menu qui permet à l'utilisateur de sélectionner lequel parmi sept composants logiciels choisir. Le premier et le deuxième composants sont présélectionnés mais ils peuvent être désélectionnés par l'utilisateur. Les composants restants ne sont pas présélectionnés. L'attribut size déclare que le menu ne devrait avoir que quatre rangées, même si l'utilisateur peut effectuer un choix parmi sept options. La mise à disposition des autres options devrait se faire au moyen d'un mécanisme de défilement.

L'élément SELECT est suivi par un bouton de soumission et un de réinitialisation.

<FORM action="http://unsite.com/prog/choisir_composant" method="post">
   <P>
   <SELECT multiple size="4" name="selection_composant">
      <OPTION selected value="composant_1_a">Composant_1</OPTION>
      <OPTION selected value="composant_1_b">Composant_2</OPTION>
      <OPTION>Composant_3</OPTION>
      <OPTION>Composant_4</OPTION>
      <OPTION>Composant_5</OPTION>
      <OPTION>Composant_6</OPTION>
      <OPTION>Composant_7</OPTION>
   </SELECT>
   <INPUT type="submit" value="Envoyer"><INPUT type="reset">
   </P>
</FORM>

Seules les options sélectionnées réussiront (en utilisant le nom de commande "selection_composant"). Si aucune option n'est sélectionnée, la commande n'est pas réussie et ni le nom ni la valeur ne sont envoyés au serveur à la soumission du formulaire. Remarquez que l'attribut value est spécifié, il détermine donc la valeur initiale de la commande, sinon ce serait le contenu de l'élément.

Dans ce exemple, nous employons l'élément OPTGROUP pour regrouper les options. Soit le balisage suivant :

<FORM action="http://unsite.com/prog/unprogramme" method="post">
 <P>
 <SELECT name="ComOS">
     <OPTION selected label="aucun" value="aucun">Aucun</OPTION>
     <OPTGROUP label="PortMaster 3">
       <OPTION label="3.7.1" value="pm3_3.7.1">PortMaster 3 avec ComOS 3.7.1</OPTION>
       <OPTION label="3.7" value="pm3_3.7">PortMaster 3 avec ComOS 3.7</OPTION>
       <OPTION label="3.5" value="pm3_3.5">PortMaster 3 avec ComOS 3.5</OPTION>
     </OPTGROUP>
     <OPTGROUP label="PortMaster 2">
       <OPTION label="3.7" value="pm2_3.7">PortMaster 2 avec ComOS 3.7</OPTION>
       <OPTION label="3.5" value="pm2_3.5">PortMaster 2 avec ComOS 3.5</OPTION>
     </OPTGROUP>
     <OPTGROUP label="IRX">
       <OPTION label="3.7R" value="IRX_3.7R">IRX avec ComOS 3.7R</OPTION>
       <OPTION label="3.5R" value="IRX_3.5R">IRX avec ComOS 3.5R</OPTION>
     </OPTGROUP>
 </SELECT>
</FORM>

celui-ci représenterait le regroupement suivant :

  Aucun
  PortMaster 3
      3.7.1
      3.7
      3.5
  PortMaster 2
      3.7
      3.5
  IRX
      3.7R
      3.5R

Les agents utilisateurs visuels peuvent autoriser les utilisateurs à effectuer une sélection à partir des groupes d'options au moyen d'un menu hiérarchique ou d'un autre mécanisme qui reflète la structure des options.

Un agent utilisateur graphique pourrait restituer ceci par :

Une restitution possible pour OPTGROUP

Cette image montre un élément SELECT qui est restitué par un menu en cascade. L'intitulé supérieur du menu affiche la valeur sélectionnée la nouvelle valeur (PortMaster 2, 3.7). Remarquez que chaque sous-menu affiche l'intitulé d'un élément OPTGROUP, ou d'un élément OPTION.

17.7 L'élément TEXTAREA

<!ELEMENT TEXTAREA - - (#PCDATA)       -- multi-line text field -->
<!ATTLIST TEXTAREA
  %attrs;                              -- %coreattrs, %i18n, %events --
  name        CDATA          #IMPLIED
  rows        NUMBER         #REQUIRED
  cols        NUMBER         #REQUIRED
  disabled    (disabled)     #IMPLIED  -- indisponible dans ce contexte --
  readonly    (readonly)     #IMPLIED
  tabindex    NUMBER         #IMPLIED  -- position dans l'ordre de tabulation --
  accesskey   %Character;    #IMPLIED  -- touche de caractère pour l'accessibilité --
  onfocus     %Script;       #IMPLIED  -- l'élément a l'attention --
  onblur      %Script;       #IMPLIED  -- l'élément perd l'attention --
  onselect    %Script;       #IMPLIED  -- some text was selected --
  onchange    %Script;       #IMPLIED  -- la valeur de l'élément a changé --
  >

Balise ouvrante : obligatoire, balise fermante : obligatoire

Définition des attributs

name = cdata [CI]
Cet attribut assigne le nom de la commande.
rows = nombre [CN]
Cet attribut spécifie le nombre de lignes de texte visibles. Les utilisateurs devraient pouvoir saisir plus de lignes que ce nombre, les agents utilisateurs devraient donc fournir un moyen de faire défiler le contenu de la commande quand celui-ci s'étend au-delà de la zone visible.
cols = nombre [CN]
Cet attribut spécifie la largeur visible en fonction de la chasse moyenne des caractères. Les utilisateurs devraient pouvoir saisir des lignes plus longues que cette largeur. Les agents utilisateurs peuvent couper les textes de ligne visibles afin de garder les longues lignes visibles sans devoir les faire défiler.

Attributs définis ailleurs

  • id, class (identifiants internes au document)
  • lang (indications de langue), dir (direction du texte)
  • title (titre de l'élément)
  • style (indication de style en-ligne)
  • readonly (commandes d'entrée en lecture seule)
  • disabled (commandes d'entrée indisponibles)
  • tabindex (navigation par tabulation)
  • onfocus, onblur, onselect, onchange, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (événements intrinsèques)

L'élément TEXTAREA crée une commande de saisie de texte multilignes. Les agents utilisateurs devraient utiliser le contenu de cet élément comme valeur initiale et restituer initialement ce texte.

Cet exemple crée une commande TEXTAREA qui fait vingt rangées par quatre-vingt colonnes et qui contient initialement deux lignes de texte. La commande TEXTAREA est suivie par un bouton de soumission et un de réinitialisation.

<FORM action="http://unsite.com/prog/lecture-texte" method="post">
   <P>
   <TEXTAREA name="le_texte" rows="20" cols="80">
   Première ligne de texte initial.
   Seconde ligne de texte initial.
   </TEXTAREA>
   <INPUT type="submit" value="Envoyer"><INPUT type="reset">
   </P>
</FORM>

La spécification de l'attribut readonly permet à l'auteur d'afficher un texte non modifiable dans la commande TEXTAREA. Ce n'est pas la même chose que d'utiliser un texte balisé standard dans un document, parce que la valeur de l'élément TEXTAREA est soumise avec le formulaire.

17.8 L'élément ISINDEX

L'élément ISINDEX est déconseillé. Cet élément crée une commande de saisie d'un texte sur une seule ligne. Les auteurs devraient utiliser l'élément INPUT pour créer des commandes de saisie de texte.

Voir le DTD transitoire pour sa définition formelle.

Définition des attributs

prompt = texte [CS]
Déconseillé. Cet attribut spécifie une chaîne d'invite [ndt. prompt string] pour le champs de saisie.

Attributs définis ailleurs

  • id, class (identifiants internes au document)
  • lang (indications de langue), dir (direction du texte)
  • title (titre de l'élément)
  • style (indication de style en-ligne)

L'élément ISINDEX crée une commande de saisie de texte sur une seule ligne, qui admet un nombre quelconque de caractères. Les agents utilisateurs peuvent utiliser la valeur de l'attribut prompt comme titre pour l'invite.

EXEMPLE DÉCONSEILLÉ :
Soit la déclaration ISINDEX suivante :

<ISINDEX prompt="Saisissez le mot à rechercher : ">

celle-ci pourrait se récrire avec l'élément INPUT, comme suit :

<FORM action="..." method="post">
<P>Saisissez le mot à rechercher : <INPUT type="text"></P>
</FORM>

La sémantique de l'élément ISINDEX. Actuellement, la sémantique de l'élément ISINDEX n'est bien définie que quand l'URI de base du document englobant est un URI HTTP. En pratique, la chaîne saisie se limite au jeu de caractères Latin-1 car l'URI ne dispose d'aucun moyen pour spécifier un jeu de caractères différent.

17.9 Les labels

Quelques commandes de formulaire ont des labels qui leur sont automatiquement associés (les boutons poussoirs) tandis que la plupart d'entre elles en sont dépourvues (les champs de texte, les cases à cocher et les boutons radio ainsi que les menus).

Pour celles des commandes qui ont un label implicite, les agents utilisateurs devraient utiliser la valeur de l'attribut value comme chaîne pour le label.

On utilise l'élément LABEL pour spécifier les labels des commandes qui n'ont pas de labels implicites.

17.9.1 L'élément LABEL

<!ELEMENT LABEL - - (%inline;)* -(LABEL) -- texte du label d'un champs de texte -->
<!ATTLIST LABEL
  %attrs;                              -- %coreattrs, %i18n, %events --
  for         IDREF          #IMPLIED  -- correspond à la valeur ID du champs --
  accesskey   %Character;    #IMPLIED  -- touche de caractère pour l'accessibilité --
  onfocus     %Script;       #IMPLIED  -- l'élément a l'attention --
  onblur      %Script;       #IMPLIED  -- l'élément perd l'attention --
  >

Balise ouvrante : obligatoire, balise fermante : obligatoire

Définition des attributs

for = idref [CS]
Cet attribut associe explicitement le label qui est défini à une autre commande. Quand il est présent, la valeur de cet attribut doit être la même que la valeur de l'attribut id d'une certaine commande dans le même document. Quand il est absent, le label qui est défini est associé au contenu de l'élément.

Attributs définis ailleurs

  • id, class (identifiants internes au document)
  • lang (indications de langue), dir (direction du texte)
  • title (titre de l'élément)
  • style (indication de style en-ligne)
  • accesskey (clés d'accès)
  • onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (événements intrinsèques)

L'élément LABEL peut s'utiliser pour attacher des informations aux commandes. Chaque élément LABEL est associé à exactement une commande de formulaire.

L'attribut for associe explicitement un label à une autre commande : la valeur de l'attribut for doit être la même que celle de l'attribut id de l'élément de commande associé. On peut associer plusieurs éléments LABEL à la même commande en créant plusieurs références via l'attribut for.

Cet exemple crée une table qui est utilisée pour aligner deux commandes de saisie de texte et les labels qui leur sont associés. Chaque label est associé explicitement à une commande de saisie de texte :

<FORM action="..." method="post">
<TABLE>
  <TR>
    <TD><LABEL for="label_prenom">Prénom</LABEL>
    <TD><INPUT type="text" name="prenom" id="label_prenom">
  <TR>
    <TD><LABEL for="label_nom">Nom</LABEL>
    <TD><INPUT type="text" name="nom" id="label_nom">
</TABLE>
</FORM>

Cet exemple reprend un exemple de formulaire précédent et y inclut des éléments LABEL.

 <FORM action="http://unsite.com/prog/ajoutermembre" method="post">
    <P>
    <LABEL for="label_prenom">Prénom : </LABEL>
              <INPUT type="text" id="label_prenom"><BR>
    <LABEL for="label_nom">Nom : </LABEL>
              <INPUT type="text" id="label_nom"><BR>
    <LABEL for="label_email">E-mail : </LABEL>
              <INPUT type="text" id="label_email"><BR>
    <INPUT type="radio" name="genre" value="homme"> Homme<BR>
    <INPUT type="radio" name="genre" value="femme"> Femme<BR>
    <INPUT type="submit" value="Envoyer"> <INPUT type="reset">
    </P>
 </FORM>

Pour associer implicitement un label à une autre commmande, l'élément de commande doit se trouver à l'intérieur de l'élément LABEL. Auquel cas, cet élément LABEL ne peut contenir qu'un seul élément de commande. Le label en question peut se placer avant ou après la commande associée.

Dans cet exemple, nous associons implicitement deux labels à deux commandes de saisie de texte :

<FORM action="..." method="post">
<P>
<LABEL>
   Prénom
   <INPUT type="text" name="prenom">
</LABEL>
<LABEL>
   <INPUT type="text" name="nom">
   Nom
</LABEL>
</P>
</FORM>

Remarquez qu'on ne peut pas employer cette technique quand la disposition est assurée par une table, le label étant dans une cellule et la commande associée dans une autre cellule.

Quand un élément LABEL reçoit l'attention, celui-ci communique cette attention à la commande qui lui est associée. Voir la section ci-dessous sur les clés d'accès pour des exemples.

Les agents utilisateurs peuvent restituer les labels de nombreuses façons (par exemple, visuellement, lus par des synthétiseurs de parole, etc.).

17.10 Le rajout d'une structure aux formulaires : les éléments FIELDSET et LEGEND

<!ELEMENT FIELDSET - - (#PCDATA,LEGEND,(%flow;)*) -- form control group -->
<!ATTLIST FIELDSET
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

<!ELEMENT LEGEND - - (%inline;)*       -- fieldset legend -->

<!ATTLIST LEGEND
  %attrs;                              -- %coreattrs, %i18n, %events --
  accesskey   %Character;    #IMPLIED  -- touche de caractère pour l'accessibilité --
  >

Balise ouvrante : obligatoire, balise fermante : obligatoire

Définition des attributs pour LEGEND

align = top|bottom|left|right [CI]
Déconseillé. Cet attribut spécifie la position de la légende par rapport au jeu de champs [ndt. fieldset]. Les valeurs possibles sont :
  • top : la légende est en haut du jeu de champs. C'est la valeur par défaut ;
  • bottom : la légende est en bas du jeu de champs ;
  • left : la légende est à gauche du jeu de champs ;
  • right : la légende est à droite du jeu de champs.

Attributs définis ailleurs

  • id, class (identifiants internes au document)
  • lang (indications de langue), dir (direction du texte)
  • title (titre de l'élément)
  • style (indication de style en-ligne)
  • accesskey (clés d'accès)
  • onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (événements intrinsèques)

L'élément FIELDSET perment aux auteurs de regrouper thématiquement les commandes et les labels apparentés. Le regroupement des commandes rend leur compréhension plus aisée aux utilisateurs, tout en facilitant la navigation par tabulation pour les agents utilisateurs visuels et la navigation vocale pour les agents utilisateurs vocaux. La bonne utilisation de cet élément rend les documents plus accessibles.

L'élément LEGEND permet aux auteurs d'assigner une légende à un élément FIELDSET. La légende renforce l'accessibilité quand l'élément FIELDSET est restituée de manière non-visuelle.

Dans cet exemple, nous créons un formulaire, du genre de ceux que l'on pourrait remplir dans un cabinet médical. Il se divise en trois parties : les informations personnelles, l'historique médical et le traitement courant. Chaque partie contient les commandes pour la saisie des informations concernées.

<FORM action="..." method="post">
 <P>
 <FIELDSET>
  <LEGEND>Informations personnelles</LEGEND>
  Nom : <INPUT name="personnel_nom" type="text" tabindex="1">
  Prénom : <INPUT name="personnel_prenom" type="text" tabindex="2">
  Adresse : <INPUT name="personnel_adresse" type="text" tabindex="3">
  <em>...autres informations personnelles...</em>
 </FIELDSET>
 <FIELDSET>
  <LEGEND>Historique médical</LEGEND>
  <INPUT name="historique_maladie"
         type="checkbox"
         value="variole" tabindex="20"> Variole
  <INPUT name="historique_maladie"
         type="checkbox"
         value="oreillons" tabindex="21"> Oreillons
  <INPUT name="historique_maladie"
         type="checkbox"
         value="vertiges" tabindex="22"> Vertiges
  <INPUT name="historique_maladie"
         type="checkbox"
         value="eternuements" tabindex="23"> Éternuements
  <em>...autres épisodes médicaux...</em>
 </FIELDSET>
 <FIELDSET>
  <LEGEND>Traitement courant</LEGEND>
  Suivez-vous actuellement un traitement ?
  <INPUT name="traitement_actuel"
         type="radio"
         value="oui" tabindex="35">Oui
  <INPUT name="traitement_actuel"
         type="radio"
         value="non" tabindex="35">Non

  Si vous prenez des médicaments, veuillez les
  inscrire dans l'espace ci-dessous :
  <TEXTAREA name="medication_courante"
            rows="20" cols="50"
            tabindex="40">
  </TEXTAREA>
 </FIELDSET>
</FORM>

Remarquez, dans cet exemple, que nous pourrions améliorer la présentation visuelle du formulaire en alignant les éléments à l'intérieur de chaque élément FIELDSET (avec les feuilles de style), en ajoutant de la couleur et des indications de police (avec les feuilles de styles), en ajoutant des scripts (disons, pour n'ouvrir la zone de texte "medication_courante" que si l'utilisateur indique prendre des médicaments), etc.

17.11 Donner l'attention à un élément

Dans un document HTML, un élément doit recevoir l'attention [ndt. focus] par le biais de l'utilisateur afin de devenir actif et de remplir sa fonction. Par exemple, les utilisateurs doivent activer le lien spécifié par l'élément A pour suivre le lien en question. De la même manière, les utilisateurs doivent donner l'attention à l'élément TEXTAREA pour y saisir un texte.

Il y a plusieurs façons de donner l'attention à un élément :

  • en désignant l'élément avec un dispositif de pointage ;
  • en navigant d'un élément à l'autre au clavier. L'auteur du document peut définir un ordre de tabulation qui spécifie l'odre dans lequel les éléments vont recevoir l'attention quand l'utilisateur navigue au clavier dans le document (voir la navigation par tabulation). Une fois sélectionné, l'élément peut être activé par une certaine combinaison de touches ;
  • en sélectionnant l'élément au moyen d'une clé d'accès (appellée aussi parfois « raccourci-clavier » ou « touche rapide »).

17.11.1 La navigation par tabulation

Définition des attributs

tabindex = nombre [CN]
Cet attribut spécifie la position de l'élément en question dans l'ordre de tabulation du document courant. Cette valeur doit être un nombre entre 0 et 32767. Les agents utilisateurs devraient ignorer les zéros de tête.

L'ordre de tabulation définit l'ordre dans lequel les éléments vont recevoir l'attention lorsque l'utilisateur navigue au clavier. L'ordre de tabulation peut comprendre les éléments imbriqués dans d'autres éléments.

Les éléments qui reçoivent l'attention devraient être parcourus par les agents utilisateurs en fonction des règles suivantes :

  1. Ceux des éléments qui reconnaissent l'attribut tabindex et lui assignent une valeur positive sont parcourus en premier. La navigation procède à partir de l'élément avec la plus petite valeur pour l'attribut tabindex vers l'élément avec la valeur la plus élevée. Les valeurs ne se suivent pas forcément ni doivent commencer à une valeur particulière. Les éléments dont les valeurs de l'attribut tabindex sont identiques devraient être parcourus dans l'ordre de leur apparition dans le flux de caractère ;
  2. Ceux des éléments qui ne reconnaissent pas l'attribut tabindex, ou bien le reconnaissent et lui assigne une valeur de "0", sont parcourus ensuite. Ces éléments sont parcourus dans l'ordre de leur apparition dans le flux de caractères ;
  3. Les éléments qui sont inactifs ne participent pas dans l'ordre de tabulation.

Les éléments suivants reconnaissent l'attribut tabindex : A, AREA, BUTTON, INPUT, OBJECT, SELECT, et TEXTAREA.

Dans cet exemple, l'ordre de tabulation sera le suivant : l'élément BUTTON, les éléments INPUT en ordre (remarquez que celui nommé "champs1" partage la même valeur d'attribut tabindex que le bouton, mais "champs1" apparaît plus tard dans le flux de caractères) et finalemnt le lien créé par l'élément A.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Un document avec FORM</TITLE>
</HEAD>
<BODY>
...un texte...
<P>Aller sur le
<A tabindex="10" href="http://www.w3.org/">site Web du W3C.</A>
...suite du texte...
<BUTTON type="button" name="base_de_donnees"
           tabindex="1" onclick="base_de_donnees()">
Obtenir la base de données courante.
</BUTTON>
...suite du texte...
<FORM action="..." method="post">
<P>
<INPUT tabindex="1" type="text" name="champs1">
<INPUT tabindex="2" type="text" name="champs2">
<INPUT tabindex="3" type="submit" name="submit">
</P>
</FORM>
</BODY>
</HTML>

Les clés de tabulation : La combinaison de clés réelle qui produit la navigation par tabulation est fonction de la configuration de l'agent utilisateur (par exemple, la touche « tabulation » est pour la navigation et la touche « entrée » pour l'activation de l'élément sélectionné).

Les agents utilisateurs peuvent également définir des combinaisons de clés pour parcourir l'ordre de tabulation à rebours. Quand la fin (ou le début) de l'ordre de tabulation est atteinte, l'agent utilisateur peut revenir en arrière au début (ou à la fin).

17.11.2 Les clés d'accès

Définition des attributs

accesskey = caractère [CN]
Cet attribut assigne une clé d'accès à un élément. Une clé d'accès est un caractère seul provenant du jeu de caractères du document. Remarque : Les auteurs devraient prendre en considération la méthode de saisie du lecteur supposé lors de la spécification d'une clé d'accès.

La pression de la clé d'accès assignée à un élément lui donne l'attention. L'action qui survient quand l'élément reçoit l'attention est fonction de l'élément. Par exemple, quand l'utilisateur active un lien défini par l'élément A, l'agent utilisateur suit en général le lien. Quand l'utilisateur active un bouton radio, l'agent utilisateur change la valeur du bouton radio. Quand l'utilisateur active un champs de texte, la saisie devient possible, etc.

Les éléments suivants reconnaissent l'attribut accesskey : A, AREA, BUTTON, INPUT, LABEL et LEGEND, ainsi que TEXTAREA.

Cet exemple assigne la clé d'accès « U » au label associé à une commande INPUT. Le fait d'appuyer sur la clé d'accès donne l'attention au label, qui à son tour la transmet à la commande associée. L'utilisateur peut alors saisir un texte dans la zone INPUT.

<FORM action="..." method="post">
<P>
<LABEL for="label_utilisateur" accesskey="U">
User Name
</LABEL>
<INPUT type="text" name="utilisateur" id="label_utilisateur">
</P>
</FORM>

Dans cet exemple, nous assignons une clé d'accès à un lien défini par l'élément A. La frappe de cette clé d'accès conduit l'utilisateur vers un autre document, ici une table des matières.

<P><A accesskey="T"
      rel="contents"
      href="http://quelquepart.com/specification/table_des_matieres.html">
    Table des matières</A>

L'invocation des clés d'accès est fonction du système sous-jacent. Par exemple, sur les machines faisant tourner le système MS Windows, on devra en général presser la touche « alt » en plus de la clé d'accès. Sur les systèmes Apple, ce sera la touche « cmd » qu'il faudra appuyer en plus de la clé d'accès.

La restitution des clés d'accès est fonction de l'agent utilisateur. Nous recommandons aux auteurs d'inclure la clé d'accès dans le texte du label ou partout où la clé d'accès doit s'appliquer. Les agents utilisateurs devraient restituer la valeur d'une clé d'accès de sorte à mettre en évidence son rôle et à la distinguer des autres caractères (par exemple, en la soulignant).

17.12 Les commandes inactives et en lecture seule

Dans les situations pour lesquelles les entrées de l'utilisateur sont soit indésirables, soit hors de propos, il importe de pouvoir rendre une commande inactive ou de la restituer en lecture seule. Par exemple, on peut vouloir que le bouton de soumission d'un formulaire reste inactif tant que l'utilisateur n'a pas entré certaines données obligatoires. De la même manière, l'auteur peut vouloir inclure un bout de texte en lecture seule, qui doit être soumis comme valeur en même temps que le formulaire. Les sections suivantes décrivent les commandes inactives et celles en lecture seule.

17.12.1 Les commandes inactives

Définition des attributs

disabled [CI]
Quand il est placé sur une commande de formulaire, cet attribut booléen inactive la commande vis-à-vis d'une entrée de l'utilisateur.

Quand il est présent, l'attribut disabled produit l'effet suivant sur un élément :

  • les commandes inactives ne reçoivent pas l'attention ;
  • les commandes inactives sont sautées au cours d'une navigation par tabulation ;
  • les commandes inactives ne peuvent pas réussir.

Les éléments suivants reconnaissent l'attribut disabled : BUTTON, INPUT, OPTGROUP, OPTION, SELECT, et TEXTAREA.

Cet attribut est hérité mais les déclarations locales surclassent la valeur héritée.

La manière dont les éléments inactifs sont restitutés est fonction de l'agent utilisateur. Par exemple, certains agents utilisateurs restituent en « grisé » les articles de menu, les labels de bouton, etc. qui sont inactifs.

Dans cet exemple, l'élément INPUT est inactif. C'est pourquoi il ne peut pas recevoir l'entrée de l'utilisateur et sa valeur ne peut pas être soumise avec le formulaire.

<INPUT disabled name="fred" value="stone">

Remarque : Seul un script peut modifier dynamiquement la valeur de l'attribut disabled.

17.12.2 Les commandes en lecture seule

Définition des attributs

readonly [CI]
Quand il est placé sur une commande de formulaire, cet attribut booléen interdit les changements sur la commande.

L'attribut readonly spécifie si la commande peut être modifiée ou non par l'utilisateur.

Quand il est présent, l'attribut readonly produit les effets suivants sur l'élément :

  • les éléments en lecture seule reçoivent l'attention mais les utilisateurs ne peuvent pas les modifier ;
  • les éléments en lecture seule sont inclus dans la navigation par tabulation ;
  • les éléments en lecture seule peuvent réussir.

Les éléments suivants reconnaissent l'attribut readonly : INPUT et TEXTAREA.

La manière dont les éléments en lecture seule sont restitués est fonction de l'agent utilisateur.

Remarque : Seul un script peut modifier dynamiquement la valeur de l'attribut readonly.

17.13 La soumission du formulaire

Les sections suivantes expliquent la manière dont les agents utilisateurs soumettent les données de formulaire aux agents de traitement des formulaires.

17.13.1 La méthode de soumission du formulaire

L'attribut method de l'élément FORM spécifie la méthode HTTP employée pour envoyer le formulaire à l'agent de traitement. Cet attribut admet deux valeurs :

  • get : avec la méthode HTTP "get", l'ensemble des donnés de formulaire est rajouté à l'URI spécifié par l'attribut action (avec un caractère point d'interrogation « ? » comme séparateur) et ce nouvel URI est envoyé à l'agent de traitement ;
  • post : avec la méthode HTTP "post", l'ensemble des donnés de formulaire est inclus dans le corps du formulaire et envoyé à l'agent de traitement.

On devrait employer la méthode "get" quand le formulaire est idempotent (i.e., ne produit aucun effet secondaires). Nombre de recherches dans les bases de données n'ont pas d'effets secondaires visibles et font des applications idéales pour la méthode "get".

Si le service associé au traitement d'un formulaire entraîne des effets secondaires (par exemple, si le formulaire modifie une base de données ou l'abonnement à un service), on devrait alors employer la méthode "post".

Remarque : La méthode "get" restreint les valeurs du jeu des données du formulaire [ndt. form data set] aux caractères ASCII. Seule la méthode "post" (avec l'attribut enctype="multipart/form-data") est spécifiée comme recouvrant le jeu de caractères [ISO10646] entier.

17.13.2 Les commandes réussies

Une commande réussie est « valable » pour une soumission. Toute les commandes réussies ont leur nom de commande accouplé à leur valeur courante et font partie du jeu des données du formulaire qui est soumis. Une commande réussie doit être définie dans un élément FORM et doit avoir un nom de commande.

Cependant :

  • les commandes qui sont inactives ne peuvent pas réussir ;
  • si le formulaire contient plusieurs boutons de soumission, seul le bouton de soumission actif réussira ;
  • toutes les cases à cocher sur « marche » peuvent réussir ;
  • pour les boutons radio qui partagent la même valeur d'attribut name, seul le bouton radio sur « marche » peut réussir ;
  • pour les menus, le nom de commande est donné par l'élément SELECT et les valeurs sont fournies par les éléments OPTION. Seules les options sélectionnées peuvent réussir. Quand aucune option n'est sélectionnée, la commande ne réussit pas et ni le nom ni aucune valeur ne sont soumis au serveur avec le formulaire ;
  • la valeur courante d'une sélection de fichier est une liste d'un ou plusieurs noms de fichiers. Lors de la soumission du formulaire, le contenu de chaque fichier est soumis avec le restant des données du formulaire. Les contenus des fichiers sont conditionnés en fonction du type de contenu du formulaire ;
  • la valeur courante d'une commande d'objet est déterminée par l'implémentatin de l'objet.

Si une commande n'a pas de valeur courante au moment de la soumission du formulaire, les agents utilisateurs ne sont pas obligés de la traiter comme une commande réussie.

De surcroît, les agents utilisateurs ne devraient pas considérer les commandes suivantes comme étant réussies :

  • les boutons de réinitialisation ;
  • les éléments OBJECT dont l'attribut declare n'est pas spécifié.

Les commandes cachées et les commandes qui ne sont pas restituées en raison de l'effet d'une feuille de style peuvent quand même réussir. Par exemple :

<FORM action="..." method="post">
<P>
<INPUT type="password" style="display:none"
          name="mot_de_passe_invisible"
          value="mon_mot_de_passe">
</FORM>

cela entraînera malgré tout l'accouplement de la valeur au nom "mot_de_passe_invisible" et leur soumission avec le formulaire.

17.13.3 Le traitement des données du formulaire

Quand l'utilisateur soumet le formulaire (par exemple, en activant un bouton de soumission), l'agent utilisateur le traite de la manière suivante.

Première étape : identifier les commandes réussies

Deuxième étape : construire le jeu des données du formulaire

Le jeu des données du formulaire est la séquence des couples nom de commande/valeur courante construite à partir des commandes réussies.

Troisième étape : coder le jeu des données du formulaire

Le jeu des données du formulaire est alors codé en fonction du type de contenu spécifié par l'attribut enctype de l'élément FORM.

Quatrième étape : soumettre le jeu des données du formulaire codé

Enfin, les données codées sont envoyées à l'agent de traitement désigné par l'attribut action, en utilisant le protocole spécifié par l'attribut method.

Cette spécification ne définit pas toutes les méthodes de soumissions valides ni les types de contenu qui peuvent être utilisés avec les formulaires. Cependant, les agents utilisateur HTML 4 doivent obéir aux conventions établies dans les cas suivants s:

  • si la valeur de l'attribut method est "get" et la valeur de l'attribut action est un URI HTTP, alors l'agent utilisateur prend la valeur de l'attribut action, lui rajoute un caractère « ? » et enfin le jeu des données du formulaire, codé en utilisant le type de contenu "application/x-www-form-urlencoded". L'agent utilisateur traverse alors le lien vers cet URI. Dans ce scénario, les données du formulaire se limitent aux codes ASCII ;
  • si la valeur de l'attribut method est "post" et la valeur de l'attribut action est un URI HTTP, alors l'agent utilisateur conduit une transaction HTTP "post" en utilisant la valeur de l'attribut action et un message créé en fonction du type de contenu spécifié par l'attribut enctype.

Pour toute autre valeur de l'attribut action ou method, le comportement n'est pas spécifié.

Les agents utilisateurs devraient restituer les réponses des transactions HTTP "get" et "post".

17.13.4 Les types de contenu du formulaire

L'attribut enctype de l'élément FORM spécifie le type de contenu utilisé pour coder le jeu des données du formulaire en vue de sa soumission au serveur. Les agents utilisateurs doivent reconnaître les types de contenu listés ci-dessous. Le comportement pour d'autres types de contenu n'est pas spécifié.

Veuillez consulter également la section sur l'échappement [ndt. escaping] des esperluettes dans les valeurs d'attribut des URI.

"application/x-www-form-urlencoded"

C'est le type de contenu par défaut. Les formulaires soumis avec ce type de contenu doivent être codés commes suit :

  1. Les noms de commandes et les valeurs sont échappées. Les caractères « espace » sont remplacés par des caractères plus « + » puis les caractères réservés sont échappés comme décrit dans le document [RFC1738], section 2.2 : Les caractères non-alphanumériques sont remplacés par une séquence de la forme « %HH », un caractère pourcentage et deux chiffres hexadécimaux qui représentent le code ASCII du caractère en question. Les sauts de ligne sont représentés par des couples de caractères "CR LF" (i.e., "%0D%0A") ;
  2. Les couples nom/valeur des commandes sont listés selon leur ordre d'apparition dans le document. Le nom est séparé de la valeur par un caractère égal « = », et les couples nom/valeur sont séparés les uns des autres par des caractères esperluettes « & ».

"multipart/form-data"

Remarque : Veuillez consulter le document [RFC2388] pour des informations supplémentaires sur le chargement des fichiers, y compris les problèmes de rétro-compatibilité, la relation entre "multipart/form-data" et les autres types de contenu, les questions d'efficacité, etc.

Veuillez consulter l'appendice pour des informations concernant les problèmes de sécurité des formulaires.

Le type de contenu "application/x-www-form-urlencoded" est inefficace pour l'envoi de grandes quantités de données binaires ou de texte contenant des caractères non-ASCII. C'est le type de contenu "multipart/form-data" qui devrait être utilisé pour la soumission de formulaires contenant des fichiers, des données non-ASCII et des données binaires.

Le contenu "multipart/form-data" observe les règles de tous les flux de données MIME en plusieurs parties, comme indiqué dans le document [RFC2045]. La définition du type "multipart/form-data" est disponible dans les registres de l'[IANA].

Un message "multipart/form-data" contient une succession de parties, chacune d'elles représentant une commande réussie. Les parties sont envoyées à l'agent de traitement dans le même ordre selon lequel les commandes correspondantes apparaissent dans le flux du document. Les bornes de ces parties ne devraient pas survenir au milieu des données cette spécification ne définit pas la façon dont cela est fait.

Comme pour tous les types MIME en plusieurs parties, chaque partie possède en option un en-tête « Content-Type » dont la valeur par défaut est "text/plain". Les agents utilisateurs devraient produire l'en-tête « Content-Type », accompagné d'un paramètre "charset".

Chaque partie est censée contenir :

  1. un en-tête « Content-Disposition » dont la valeur est "form-data" ;
  2. un attribut name spécifiant le nom de commande de la commande correspondante. Les noms de commande, qui sont codés originellement dans des jeux de caractères non-ASCII, peuvent être codé à l'aide de la méthode indiquée dans le document [RFC2045].

Ainsi, par exemple, pour une commande nommée "macommande", la partie correspondante serait spécifiée par :

Content-Disposition: form-data; name="macommande"

Comme pour toutes les transmissions MIME, on utilise les caractères "CR LF" (i.e., "%0D%0A") pour séparer les lignes de données.

Chaque partie peut être codée et l'en-tête « Content-Transfer-Encoding » peut être fourni, si la valeur de cette partie n'est pas conforme à l'encodage par défaut (7BIT) (voir le document [RFC2045], section 6)

Si le contenu d'un fichier est soumis avec un formulaire, l'entrée du fichier devrait être identifiée par le type de contenu adéquat (par exemple, "application/octet-stream"). Si plusieurs fichiers doivent être retournés en résultat d'une seule entrée de formulaire, ils devraient être retournés comme type "multipart/mixed" imbriqué dans le "multipart/form-data".

L'agent utilisateur devrait essayer de fournir un nom de fichier pour chaque fichier soumis. Le nom du fichier peut être spécifié avec le paramètre "filename" dans un en-tête 'Content-Disposition: form-data' ou, au cas où il y aurait plusieurs fichiers, dans un en-tête 'Content-Disposition: file' de la sous-partie. Si le nom de fichier du système d'exploitation du client n'est pas en US-ASCII, le nom de fichier pourrait être approximé ou codé en utilisant la méthode décrite dans le document [RFC2045]. Cela est commode pour les cas où, par exemple, les fichiers téléchargés vers le serveur pourraient contenir des références les uns vers les autres (par exemple, un fichier TeX et sa description de style auxilliaire ".sty").

L'exemple suivant illustre le codage "multipart/form-data". Supposons le formulaire suivant :

 <FORM action="http://server.com/cgi/gestion"
       enctype="multipart/form-data"
       method="post">
   <P>
   Quel est votre nom ? <INPUT type="text" name="nom_soumis"><BR>
   Quels sont les fichiers à envoyer ? <INPUT type="file" name="fichiers"><BR>
   <INPUT type="submit" value="Envoyer"> <INPUT type="reset">
 </FORM>

Si l'utilisateur saisit "Martin" dans la commande de texte et sélectionne le fichier textuel "fichier1.txt", l'agent utilisateur pourrait envoyer en retour les données suivantes :

   Content-Type: multipart/form-data; boundary=AaB03x

   --AaB03x
   Content-Disposition: form-data; name="nom_soumis"

   Martin
   --AaB03x
   Content-Disposition: form-data; name="fichiers"; filename="fichier1.txt"
   Content-Type: text/plain

   ... contenu de fichier1.txt ...
   --AaB03x--

Si l'utilisateur avait sélectionné un second fichier (image) "fichier2.gif", l'agent utilisateur pourrait assembler les parties comme suit :

   Content-Type: multipart/form-data; boundary=AaB03x

   --AaB03x
   Content-Disposition: form-data; name="nom_soumis"

   Martin
   --AaB03x
   Content-Disposition: form-data; name="fichiers"
   Content-Type: multipart/mixed; boundary=BbC04y

   --BbC04y
   Content-Disposition: file; filename="fichier1.txt"
   Content-Type: text/plain

   ... contenu de fichier1.txt ...

   --BbC04y
   Content-Disposition: file; filename="fichier2.gif"
   Content-Type: image/gif
   Content-Transfer-Encoding: binary

   ...contenu de fichier2.gif...

                        errata-10
   --BbC04y--
   --AaB03x--


Les scripts dans les documents HTML

18 Les scripts

Sommaire

  1. Introduction aux scripts
  2. La conception des documents pour les agents utilisateurs qui gèrent les scripts
    1. L'élément SCRIPT
    2. La spécification du langage de script
      • Le langage de script par défaut
      • La déclaration locale du langage de script
      • L'appel des éléments HTML à partir d'un script
    3. Les événements intrinsèques
    4. La modification dynamique des documents
  3. La conception des documents pour les agents utilisateurs qui ne gèrent pas les scripts
    1. L'élément NOSCRIPT
    2. La dissimulation des données de script aux agents utilisateurs

18.1 Introduction aux scripts

Un script côté client est un programme pouvant accompagner le document HTML ou bien y être directement incorporé. Le programme s'exécute sur la machine cliente au chargement du document ou à tout autre moment comme l'activation d'un lien. La gestion des scripts de HTML est indépendante du langage de script.

Les scripts offrent aux auteurs le moyen d'accroître les documents HTML de manière à les rendre très réactifs et interactifs. Par exemple :

  • des scripts peuvent être évalués au chargement du document et modifier le contenu de celui-ci dynamiquement ;
  • des scripts peuvent accompagner un formulaire et en traiter les entrées au fur et à mesure. Les concepteurs peuvent remplir dynamiquement des parties du formulaire en fonction des valeurs des autres champs. Ils peuvent aussi s'assurer que les données entrées appartiennent à un éventail prédéterminé de valeurs, que les champs soient cohérents les uns avec les autres, etc. ;
  • des scripts peuvent être déclenchés par les événements qui affectent le document, tels que le chargement, le déchargement, l'attention d'un élément [ndt. element focus], le mouvement de la souris, etc. ;
  • des scripts peuvent être attachés aux commandes d'un formulaire (par exemple, les boutons) et produire les éléments d'une interface utilisateur graphique.

Il existe deux types de script que les auteurs peuvent attacher à un document HTML :

  • ceux qui sont exécutés une seule fois quand le document est chargé par l'agent utilisateur. Les scripts qui apparaissent à l'intérieur d'un élémnet SCRIPT s'exécutent quand le document est chargé. Pour les agents utilisateurs qui ne peuvent pas ou ne pourront pas gérer les scripts, l'auteur peut inclure un contenu de remplacement via l'élément NOSCRIPT ;
  • ceux qui sont exécutés toutes les fois où un événement particulier se produit. Ces scripts peuvent être assignés à un certain nombre d'éléments au moyen des attributs d'événement intrinsèque.

Remarque : Cette spécification comprend des précisions supplémentaires dans la section sur les macrocommandes de script.

18.2 La conception des documents pour les agents utilisateurs qui gèrent les scripts

Les sections suivantes abordent les questions concernant les agents utilisateurs qui gèrent les scripts.

18.2.1 L'élément SCRIPT

<!ELEMENT SCRIPT - - %Script;          -- déclartions du script -->
<!ATTLIST SCRIPT
  charset     %Charset;      #IMPLIED  -- encodage de caractères de la ressource reliée --
  type        %ContentType;  #REQUIRED -- type de contenu du langage de script --
  src         %URI;          #IMPLIED  -- URI d'un script externe --
  defer       (defer)        #IMPLIED  -- différer l'exécution du script --
  >

Balise ouvrante: obligatoire, balise fermante : obligatoire

Définition des attributs

src = uri [CT]
Cet attribut spécifie la localisation d'un script externe.
type = type-de-contenu [CI]
Cet attribut spécifie le langage de script du contenu de l'élément et prend le pas sur le langage de script par défaut. Le langage de script est spécifié comme type de contenu (par exemple, "text/javascript"). Les auteurs doivent fournir une valeur pour cet attribut. Celui-ci n'a pas de valeur par défaut
language = cdata [CI]
Déconseillé. Cet attribut spécifie le langage de script du contenu de cet élément. Sa valeur est un identifiant du langage, mais comme ces identifiants ne sont pas normalisés, l'attribut est déconseillé en faveur de l'attribut type.
defer [CI]
Quand il est présent, cet attribut booléen indique à l'agent utilisateur que le script ne va générer aucun contenu de document (par exemple, aucune instruction « document.write » en Javascript), l'agent utilisateur peut donc poursuivre l'analyse et la restitution.

Attributs définis ailleurs

  • charset(encodages de caractères)

L'élément SCRIPT installe un script dans le document. Cet élément peut apparaître un nombre quelconque de fois dans les éléments HEAD ou BODY d'un document HTML.

Le script peut être défini en contenu de l'élément SCRIPT ou dans un fichier externe. Si l'attribut src n'est pas spécifié, alors l'agent utilisateur doit interpréter le contenu de l'élément comme étant le script. Si l'attribut src a une valeur d'URI, alors l'agent utilisateur doit ignorer le le contenu de l'élément et ramener le script désigné par l'URI. Remarquez que l'attribut charset se réfère à l'encodage de caractères du script désigné par l'attribut src ; cela ne concerne pas le contenu de l'élément SCRIPT.

Les scripts sont évalués par les moteurs de script, qui doivent être connus de l'agent utilisateur.

La syntaxe des données du script dépend du langage de script.

18.2.2 La spécification du langage de script

Comme HTML ne dépend pas d'un langage de script particulier, les auteurs des documents doivent indiquer explicitement aux agents utilisateurs le langage de chaque script. Cela peut être fait soit au travers d'une déclaration par défaut, soit par une déclaration locale.

Le langage de script par défaut

Les auteurs devraient spécifier le langage de script par défaut pour tous les scripts d'un document, en incluant la déclaration META suivante dans l'élément HEAD :

<META http-equiv="Content-Script-Type" content="un_certain_type">

dans laquelle la valeur "un_certain_type" représente le type de contenu nommant le langage de script. En exemple de telles valeurs : "text/tcl", "text/javascript", "text/vbscript".

En l'absence d'une déclaration META, le langage par défaut peut être fixé par un en-tête HTTP « Content-Script-Type ».

    Content-Script-Type: un_certain_type

dans lequel la valeur "un_certain_type" représente encore le type de contenu nommant le langage de script.

Les agents utilisateurs devraient déterminer le langage de script par défaut du document selon les étapes suivantes (de la priorité la plus grande à la plus faible) :

  1. Si d'éventuelles déclarations META spécifient une valeur "Content-Script-Type", c'est la dernière dans le flux de caractères qui détermine le langage de script par défaut ;
  2. Sinon, si d'éventuels en-têtes HTTP spécifie "Content-Script-Type", c'est le dernier dans le flux de caractères qui détermine le langage de script par défaut.

Les documents, qui ne spécifient pas de langage de script par défaut et qui contiennent des éléments spécifiant un script d'événement intrinsèque, sont erronés. Les agents utilisateurs peuvent toujours essayer d'interpréter les scripts spécifiés incorrectement mais ils ne sont pas obligés de le faire. Les outils d'édition devraient générer une indication de langage de script par défaut pour aider les auteurs à créer des documents corrects.

La déclaration locale du langage de script

On doit spécifier l'attribut type pour chaque instance de l'élément SCRIPT dans le document. La valeur de l'attribut type d'un élément SCRIPT surclasse le langage de script par défaut de cet élément.

Dans cet exemple, nous déclarons le langage de script par défaut comme étant "text/tcl". Nous incluons dans l'en-tête du document un élément SCRIPT, dont le script en question est localisé dans un fichier externe, tel quel et écrit dans le langage de script "text/vbscript". Nous incluons également dans le corps du document un élément SCRIPT, lequel contient son propre script écrit dans le langage "text/javascript".

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Un document avec SCRIPT</TITLE>
<META http-equiv="Content-Script-Type" content="text/tcl">
<SCRIPT type="text/vbscript" src="http://quelquepart.com/progs/vbcalc">
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT type="text/javascript">
...un code JavaScript...
</SCRIPT>
</BODY>
</HTML>

L'appel des éléments HTML à partir d'un script

Chaque langage de script obéit à ses propres règles pour appeler des objets HTML à partir d'un script. Cette spécification ne définit pas de mécanisme standard pour appeler les objets HTML.

Néanmoins, les scripts devraient se référer à un élément en fonction du nom qui lui est assigné. Les moteurs de scripts devraient observer les règles de préséance suivantes dans l'identification d'un élément : l'attribut name est prioritaire sur l'attribut id, quand tous les deux sont spécifiés. Sinon, on peut utiliser l'un ou l'autre.

18.2.3 Les événements intrinsèques

Remarque : Les auteurs de documents HTML sont prévenus que des changements vont vraisemblablement intervenir dans le domaine des événements intrinsèques (par exemple, la manière dont les scripts sont rattachés aux événements. Les recherches dans ce domaine sont menées par les membres du groupe de travail sur le modèle objet de document du W3C (voir le site Web du W3C à http://www.w3.org/ pour plus de renseignements).

Définition des attributs

onload = script [CT]
L'événement onload se produit quand l'agent utilisateur finit de charger une fenêtre ou bien tous les cadres dans un jeu d'encadrement FRAMESET. Cet attribut peut s'utiliser avec les éléments BODY et FRAMESET.
onunload = script [CT]
L'événement onunload se produit quand l'agent utilisateur retire le document d'une fenêtre ou d'un cadre. Cet attribut peut s'utiliser avec les éléments BODY et FRAMESET.
onclick = script [CT]
L'événement onclick se produit quand le bouton du dispositif de pointage est cliqué au-dessus d'un élément. Cet attribut peut s'utiliser avec la plupart des éléments.
ondblclick = script [CT]
L'événement ondblclick se produit quand le bouton du dispositif de pointage est double-cliqué au-dessus d'un élément. Cet attribut peut s'utiliser avec la plupart des éléments.
onmousedown = script [CT]
L'événement onmousedown se produit quand le bouton du dispositif de pointage est appuyé au-dessus d'un élément. Cet attribut peut s'utiliser avec la plupart des éléments.
onmouseup = script [CT]
L'événement onmouseup se produit quand le bouton du dispositif de pointage est relâché au-dessus d'un élément. Cet attribut peut s'utiliser avec la plupart des éléments.
onmouseover = script [CT]
L'événement onmouseover se produit quand le dispositif de pointage est déplacé sur un élément. Cet attribut peut s'utiliser avec la plupart des éléments.
onmousemove = script [CT]
L'événement onmousemove se produit quand le dispositif de pointage est déplacé alors qu'il est au-dessus d'un élément. Cet attribut peut s'utiliser avec la plupart des éléments.
onmouseout = script [CT]
L'événement onmouseout se produit quand le dispositif de pointabe est déplacé en dehors d'un élément. Cet attribut peut s'utiliser avec la plupart des éléments.
onfocus = script [CT]
L'événement onfocus se produit quand un élément reçoit l'attention, soit par le biais du dispositif de pointage, soit au travers d'une navigation par tabulation. Cet attribut peut s'utiliser avec les éléments suivants : A, AREA, LABEL, INPUT, SELECT, TEXTAREA et BUTTON.
onblur = script [CT]
L'événement onblur se produit quand un élément perd l'attention, soit par le biais du dispositif de pointage, soit au travers d'une navigation par tabulation. On peut l'utiliser avec les mêmes éléments que l'événement onfocus.
onkeypress = script [CT]
L'événement onkeypress se produit quand une touche est pressée puis relâchée au-dessus d'un élément. Cet attribut peut s'utiliser avec la plupart des éléments.
onkeydown = script [CT]
L'événement onkeydown se produit quand une touche est gardée appuyée au-dessus d'un élément. Cet attribut peut s'utiliser avec la plupart des éléments.
onkeyup = script [CT]
L'événement onkeyup se produit quand une touche est relâchée au-dessus d'un élément. Cet attribut peut s'utiliser avec la plupart des éléments.
onsubmit = script [CT]
L'événement onsubmit se produit quand un formulaire est soumis. Il ne s'applique qu'à l'élément FORM.
onreset = script [CT]
L'événement onreset se produit quand un formulaire est réinitialisé. Il ne s'applique qu'à l'élément FORM.
onselect = script [CT]
L'événement onselect se produit quand l'utilisateur sélectionne un certain texte dans un champs textuel. Cet attribut peut s'utiliser avec les éléments INPUT et TEXTAREA.
onchange = script [CT]
L'événement onchange se produit quand une commande perd l'attention de saisie et quand sa valeur a été modifiée depuis l'instant où elle avait reçu l'attention. Cet attribut s'applique aux éléments suivants : INPUT, SELECT et TEXTAREA.

Il est possible d'associer une action à un certain nombre d'événements, qui se produisent quand l'utilisateur interagit avec l'agent utilisateur. Chacun des « événements intrinsèques » listés ci-dessus prend comme valeur un script. Le script s'exécute toutes les fois où l'événement se produit pour cet élément. La syntaxe des données de script dépend du langage de script.

Les éléments de commande, à savoir INPUT, SELECT, BUTTON, TEXTAREA et LABEL, répondent tous à certains événements intrinsèques. Quand ces éléments n'apparaissent pas dans un formulaire, on peut les employer pour augmenter l'interface utilisateur graphique du document.

Par exemple, l'auteur peut vouloir inclure des boutons poussoirs dans son document, ceux-ci ne soumettant pas de formulaire mais commnuniquant quand même avec un serveur quand ils sont activés.

Les exemples suivants montrent quelques commandes et comportements d'interface utilisateur possibles réalisés à partir d'événements intrinsèques.

Dans l'exemple suivant, la commande nommée "nomUtilisateur" est un champs obligatoire. Quand l'utilisateur quitte le champs, l'événement onblur appelle une fonction JavaScript qui confirme la validité de "nomUtilisateur".

<INPUT NAME="nomUtilisateur" onblur="verifNomUtilisateur(this.value)">

Voici un autre exemple en JavaScript :

<INPUT NAME="nombre"
    onchange="if (!verifNombre(this.value, 1, 10))
        {this.focus();this.select();} else {remercier()}"
    VALUE="0">

Voici l'exemple en VBScript d'un gestionnaire d'événement pour un champs textuel :

    <INPUT name="edit1" size="50">
    <SCRIPT type="text/vbscript">
      Sub edit1_changed()
        If edit1.value = "abc" Then
          button1.enabled = True
        Else
          button1.enabled = False
        End If
      End Sub
    </SCRIPT>

Voici le même exemple utilisant cette fois Tcl :

    <INPUT name="edit1" size="50">
    <SCRIPT type="text/tcl">
      proc edit1_changed {} {
        if {[edit value] == abc} {
          button1 enable 1
        } else {
          button1 enable 0
        }
      }
      edit1 onChange edit1_changed
    </SCRIPT>

Voici un exemple en JavaScript d'une relation d'événement [ndt. event binding] à l'intérieur d'un script. Tout d'abord, voici un gestionnaire de clic simple :

<BUTTON type="button" name="mon_bouton" value="10">
<SCRIPT type="text/javascript">
      function mon_onclick() {
         . . .
      }
    document.form.mybutton.onclick = mon_onclick
 </SCRIPT>
 </BUTTON>

Voici un gestionnaire de fenêtre plus intéressant :

<SCRIPT type="text/javascript">
      function mon_onload() {
         . . .
      }

      var win = window.open("un/autre/URI")
      if (win) win.onload = mon_onload
</SCRIPT>

En Tcl, ça donnerait :

 <SCRIPT type="text/tcl">
     proc mon_onload {} {
       . . .
     }
     set win [window open "un/autre/URI"]
     if {$win != ""} {
         $win onload mon_onload
     }
 </SCRIPT>

Remarquez qu'une déclaration "document.write", ou une déclaration équivalente, dans les gestionnaires d'événement intrinsèque, crée et écrit vers un nouveau document plutôt que modifie le document courant.

18.2.4 La modification dynamique des documents

Les scripts qui s'exécutent quand le document est chargé sont capables de modifier dynamiquement le contenu du document. Ces capacités sont fonction du langage de script en question (par exemple, la déclaration "document.write" dans le modèle objet de HTML reconnue par certains éditeurs de logiciels).

On peut modéliser la modification dynamique d'un document comme suit :

  1. Tous les éléments SCRIPT sont évalués dans l'ordre au fur et à mesure du chargement du document ;
  2. Toutes les structures de script à l'intérieur d'un élément SCRIPT donné, qui génèrent des valeurs SGML de type CDATA, sont évaluées. Leur texte généré combiné est inséré dans le document à la place de l'élément SCRIPT ;
  3. Les données générées de type CDATA sont ré-évaluées.

Les documents HTML sont contraints de se conformer au DTD HTML avant comme après le traitement de chaque élément SCRIPT.

L'exemple suivant illustre la manière dont les scripts peuvent modifier un document dynamiquement. Soit le script suivant :

 <TITLE>Document de test</TITLE>
 <SCRIPT type="text/javascript">
     document.write("<p><b>Bonjour tout le monde !<\/b>")
 </SCRIPT>

celui-ci produit le même effet que ce balisage HTML :

 <TITLE>Document de test</TITLE>
 <P><B>Bonjour tout le monde !</B>

18.3 La conception des documents pour les agents utilisateurs qui ne gèrent pas les scripts

Les sections suivantes expliquent comment les auteurs peuvent créer des documents qui fonctionnent auprès des agents utilisateurs ne reconnaissant pas les scripts.

18.3.1 L'élément NOSCRIPT

<!ELEMENT NOSCRIPT - - (%block;)+
  -- contenu de remplacement pour une restitution sans les scripts -->
<!ATTLIST NOSCRIPT
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Balise ouvrante: obligatoire, balise fermante : obligatoire

L'élément NOSCRIPT permet aux auteurs de fournir un contenu de remplacement quand un script n'est pas exécuté. Le contenu de l'élément NOSCRIPT ne devrait être restitué par un agent utilisateur reconnaissant les scripts que dans les cas suivants :
  • l'agent utilisateur est configuré pour ne pas évaluer les scripts ;
  • l'agent utilisateur ne reconnaît pas le langage de script invoqué par un élément SCRIPT apparu plus tôt dans le document.

Les agents utilisateurs qui ne gèrent pas les scripts côté client doivent restituer le contenu de cet élément.

Dans l'exemple suivant, l'agent utilisateur qui interprète l'élément SCRIPT va inclure certaines données créées dynamiquement dans le document. Si l'agent utilisateur ne reconnaît pas les scripts, l'utilisateur peut toujours obtenir les données au travers d'un lien.

<SCRIPT type="text/tcl">
 ...un script Tcl qui insère des données...
</SCRIPT>
<NOSCRIPT>
 <P>Acc&eacute;der aux <A href="http://quelquepart.com/data">donn&eacute;es.</A>
</NOSCRIPT>

18.3.2 La dissimulation des données de script aux agents utilisateurs

Les agents utilisateurs qui ne reconnaissent pas l'élément SCRIPT vont vraisemblablement restituer le contenu de cet élément comme un texte. Certains moteurs de script, dont ceux des langages JavaScript, VBScript et Tcl, autorisent la délimitation des déclarations d'un script par un commentaire SGML. Les agents utilisateurs, qui ne reconnaissent pas l'élément SCRIPT, ignoreront donc le commentaire alors que les moteurs de script intelligents comprendront que le script dans le commentaire devrait être exécuté.

Une autre solution à ce problème, c'est de placer les scripts dans des documents externes et de les appeler avec l'attribut src.

Commenter les scripts en JavaScript
Le moteur JavaScript autorise l'apparition de la chaîne « <!-- » au début de l'élément SCRIPT et ignore les caractères suivants jusqu'à la fin de la ligne. JavaScript interprète la chaîne « // » comme le début d'un commentaire qui s'étend jusqu'à la fin de la ligne courante. Elle est nécessaire pour dissimuler la chaîne « --> » à l'analyseur JavaScript.

<SCRIPT type="text/javascript">
<!-- pour dissimuler le contenu du script aux navigateurs anciens
  function square(i) {
    document.write("L'appel a pass&eacute; ", i ," &agrave; la fonction.","<BR>")
    return i * i
  }
  document.write("La fonction a renvoy&é ",square(i),".")
// fin de la dissimulation du contenu aux navigateurs anciens -->
</SCRIPT>

Commenter les scripts en VBScript
En VBScript, le caractère guillemet simple fait que le reste de la ligne courante est traité comme un commentaire. On peut dont l'utiliser pour dissimuler la chaîne « --> » à VBScript, par exemple :

   <SCRIPT type="text/vbscript">
     <!--
       Sub foo()
        ...
       End Sub
     ' -->
    </SCRIPT>

Commenter les scripts en TCL
En Tcl, le caractère dièse « # » annonce le reste de la ligne comme un commentaire :

<SCRIPT type="text/tcl">
<!--  pour dissimuler le contenu du script aux navigateurs anciens
  proc square {i} {
    document write "L'appel a pass&eacute; $i &agrave; la fonction.<BR>"
    return [expr $i * $i]
  }
  document write "La fonction a renvoy&eacute; [square 5]."
# fin de la dissimulation du contenu aux navigateurs anciens -->
</SCRIPT>

Remarque : Certains navigateurs referment les commentaires au premier caractère « > » rencontré, ainsi, pour dissimuler le contenu du script à ces navigateurs, vous pouvez transposer les opérandes des opérateurs relationnels et de décalage [ndt. shift] (par exemple, écrire « y < x » au lieu de « x > y ») ou bien utiliser le mécanisme d'échappement du langage de script pour le caractère « > ».


Les informations de référence SGML pour HTML

19 Les informations de référence SGML pour HTML

Sommaire

  1. La validation du document
  2. Un exemple de catalogue SGML

Les sections suivantes contiennent la définition SGML formelle de HTML 4. Cela comprend la déclaration SGML, la définition du type de document (DTD) et les références des entités de caractères, ainsi qu'un exemple de catalogue SGML.

Ces fichiers sont également disponible au format ASCII comme listés ci-dessous :

DTD par défaut :
strict.dtd
DTD transitoire :
loose.dtd
DTD de jeu d'encadrement :
frameset.dtd
Déclaration SGML :
HTML4.decl
Fichiers des définitions des entités :
HTMLspecial.ent
HTMLsymbol.ent
HTMLlat1.ent
Un exemple de catalogue :
HTML4.cat

19.1 La validation du document

Nombre d'auteurs compte sur un éventail réduit de navigateurs pour y vérifier les documents qu'ils produisent, en partant du principe que si ces navigateurs peuvent restituer leurs documents, alors c'est qu'ils sont valides. Malheureusement, c'est un moyen très inefficace de vérifier la validité d'un document, précisément parce que les navigateurs sont conçus pour s'accomoder des documents invalides, en les restituant aussi bien qu'ils le peuvent pour ne pas frustrer les utilisateurs..

Pour une meilleure validation, vous pouvez contrôler votre document auprès d'un analyseur SGML, tel que nsgmls (voir [SP]), afin de vérifier que celui-ci est conforme au DTD HTML 4. Si la déclaration de type de document pour votre document inclut un URI et que votre analyseur SGML gère ce type d'identifiant de système, celui-ci obtiendra le DTD directement. Sinon, vous pouvez utiliser l'exemple de catalogue SGML suivant. Il suppose que le DTD est enregistré avec le nom "strict.dtd" et que les entités se trouvent dans les fichiers "HTMLlat1.ent", "HTMLsymbol.ent" et "HTMLspecial.ent". En tout cas, assurez-vous que votre analyseur SGML soit capable de gérer le jeu de caractères [ISO10646]. Voir la documentation de votre outil de validation pour des précisions.

Sachez qu'une telle validation, bien qu'utile et fortement recommandée, ne garantit pas qu'un document soit entièrement conforme à la spécification HTML 4. C'est parce qu'un analyseur SGML repose seulement sur le DTD SGML donné, qui n'exprime pas tous les aspects d'un document HTML 4 valide. Spécifiquement, un analyseur SGML s'assure que la syntaxe, la structure, la liste des éléments et leurs attributs sont valides. Mais, par exemple, il ne peut pas relever les erreurs comme une valeur d'attribut width pour l'élément IMG invalide (i.e., "truc" ou "12.5"). Même si la spécification restreint la valeur de cet attribut à un « entier » représentant une longueur en pixels, le DTD le définit seulement comme étant du type CDATA, ce qui autorise en fait n'importe quelle valeur. Seul un programme spécialisé pourrait capturer la spécification de HTML 4 en entier.

Néanmoins, ce type de validation est fortement recommandé puisqu'il permet la détection d'une grande partie des erreurs qui invalident les documents.

19.2 Un exemple de catalogue SGML

Ce catalogue comprend la directive de surclassement pour assurer que le programme de traitement, tel que nsgmls, utilise les identifiants publiques de préférence aux identifiants de système. Cela signifie que les utilisateurs ne sont pas obligés de se connecter au Web pour ramener les identifiants de système basés sur un URI.

OVERRIDE YES

PUBLIC "-//W3C//DTD HTML 4.01//EN" strict.dtd
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" loose.dtd
PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" frameset.dtd
PUBLIC "-//W3C//ENTITIES Latin1//EN//HTML" HTMLlat1.ent
PUBLIC "-//W3C//ENTITIES Special//EN//HTML" HTMLspecial.ent
PUBLIC "-//W3C//ENTITIES Symbols//EN//HTML" HTMLsymbol.ent


La déclaration SGML de HTML 4

20 La déclaration SGML de HTML 4

Remarque : Le nombre total des points de code autorisés dans le jeu de caractères du document de cette déclaration SGML comprend les dix-sept premiers plans de [ISO10646] (17 fois 65536). Cette restriction a été apportée parce que ce nombre se limite à une longueur de huit chiffres dans la version courante de la norme SGML. Il ne s'agit pas d'une déclaration sur la faisabilité d'une restriction à long terme des caractères du jeu UCS aux dix-sept premiers plans. Il y a de fortes probabilités pour que la limitation à huit chiffres dans SGML soit levée, et que cette spécification soit mise à jour, avant la première assignation d'un caractère au-delà des dix-sept premiers plans.

Remarque : Strictement parlant, l'enregistrement ISO numéro 177 se rapporte à la situation originale de la norme [ISO10646] en 1993. Les changements intervenus depuis 1993 ont consisté dans le rajout de caractères et dans la ré-allocation d'un grand nombre de points de code pour l'écriture coréenne Hangul (cinquième amendement). Les révisions de la spécification HTML 4 pourront mettre à jour la référence à ISO 10646 et inclure d'autres changements.

20.1 La déclaration SGML

<!SGML  "ISO 8879:1986 (WWW)"
    --
         Déclaration SGML pour le langage de balisage hypertexte HTML 4

         Avec la gestion des 17 premiers plans de ISO 10646 et des limites
         accrues pour les longueurs des balises et des littéraux, etc.
    --

    CHARSET
          BASESET  "ISO Registration Number 177//CHARSET
                    ISO/IEC 10646-1:1993 UCS-4 with
                    implementation level 3//ESC 2/5 2/15 4/6"
         DESCSET 0       9       UNUSED
                 9       2       9
                 11      2       UNUSED
                 13      1       13
                 14      18      UNUSED
                 32      95      32
                 127     1       UNUSED
                 128     32      UNUSED
                 160     55136   160
                 55296   2048    UNUSED  -- REMPLAÇANTS --
                 57344   1056768 57344

CAPACITY        SGMLREF
                TOTALCAP        150000
                GRPCAP          150000
                ENTCAP          150000

SCOPE    DOCUMENT
SYNTAX
         SHUNCHAR CONTROLS 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
           17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 127
         BASESET  "ISO 646IRV:1991//CHARSET
                   International Reference Version
                   (IRV)//ESC 2/8 4/2"
         DESCSET  0 128 0

         FUNCTION
                  RE            13
                  RS            10
                  SPACE         32
                  TAB SEPCHAR    9

         NAMING   LCNMSTRT ""
                  UCNMSTRT ""
                  LCNMCHAR ".-_:"
                  UCNMCHAR ".-_:"
                  NAMECASE GENERAL YES
                           ENTITY  NO
         DELIM    GENERAL  SGMLREF
                  HCRO "&#38;#x" -- 38 est le numéro pour l'esperluette « & » --
                  SHORTREF SGMLREF
         NAMES    SGMLREF
         QUANTITY SGMLREF
                  ATTCNT   60      -- augmenté --
                  ATTSPLEN 65536   -- Ce sont les valeurs les plus grandes --
                  LITLEN   65536   -- autorisées dans la déclaration --
                  NAMELEN  65536   -- Évitez les limites fixes dans l'implémentation --
                  PILEN    65536   -- effective de HTML des agents utilisateurs --
                  TAGLVL   100
                  TAGLEN   65536
                  GRPGTCNT 150
                  GRPCNT   64

FEATURES
  MINIMIZE
    DATATAG  NO
    OMITTAG  YES
    RANK     NO
    SHORTTAG YES
  LINK
    SIMPLE   NO
    IMPLICIT NO
    EXPLICIT NO
  OTHER
    CONCUR   NO
    SUBDOC   NO
    FORMAL   YES
  APPINFO NONE
>


La définition de type de document HTML 4

21 La définition de type de document

<!--
    Ceci est le DTD HTML 4.01 Strict, qui exclut les attributs et les
    éléments de présentation que le W3C entend supprimer
    graduellement avec la gestion croissante des feuilles de style.
    Les auteurs devraient employer le DTD strict autant que possible,
    mais ils peuvent employer le DTD transitoire si la reconnaissance
    des attributs et éléments de présentation est exigée.

    HTML 4 inclut des mécanismes pour les feuilles de style,
    les scripts, l'incorporation des objets, la gestion accrue des
    sens d'écriture de droite à gauche et mixtes et
    l'amélioration des formulaires pour favoriser l'accessibilité
    pour les personnes avec des déficiences physiques.

          Projet : $Date: 1999/12/24 22:40:35 $

          Auteurs :
              Dave Raggett <dsr@w3.org>
              Arnaud Le Hors <lehors@w3.org>
              Ian Jacobs <ij@w3.org>

    On peut avoir plus d'informations sur HTML 4.01 à :

        http://www.w3.org/TR/1999/REC-html401-19991224

    La spécification HTML 4.01 comprend des contraintes
    syntaxique supplémentaires qui ne peuvent pas être
    exprimées dans les DTD.

-->
<!--
    Utilisation typique :

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    ...
    </head>
    <body>
    ...
    </body>
    </html>

    L'URI utilisé comme un identifiant de système avec l'identifiant
    public permet à l'agent utilisateur de télécharger le DTD
    et les jeux d'entités au besoin.

    Le FPI pour le DTD HTML 4.01 Transitional est :

        "-//W3C//DTD HTML 4.01 Transitional//EN"

    Cette version du DTD transitoire est :

        http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd

    Si vous écrivez un document qui comprend des cadres, utilisez
    le FPI suivant :

        "-//W3C//DTD HTML 4.01 Frameset//EN"

    Cette version du DTD avec jeu d'encadrement est :

        http://www.w3.org/TR/1999/REC-html401-19991224/frameset.dtd

    Utilisez les URI (relatifs) suivants pour se référer
    aux DTD et aux définitions d'entités de cette spécification :

    "strict.dtd"
    "loose.dtd"
    "frameset.dtd"
    "HTMLlat1.ent"
    "HTMLsymbol.ent"
    "HTMLspecial.ent"

-->

<!--================== Noms importés ====================================-->
<!-- Interrupteur de fonctionnalité pour les documents avec jeu d'encadrement -->
<!ENTITY % HTML.Frameset "IGNORE">

<!ENTITY % ContentType "CDATA"
    -- type de média, selon [RFC2045]
    -->

<!ENTITY % ContentTypes "CDATA"
    -- liste de types de média, séparés par des virgules, selon [RFC2045]
    -->

<!ENTITY % Charset "CDATA"
    -- encodage de caractères, selon [RFC2045]
    -->

<!ENTITY % Charsets "CDATA"
    -- liste d'encodages de caractères, séparés par des virgules, selon [RFC2045]
    -->

<!ENTITY % LanguageCode "NAME"
    -- un code de langue, selon [RFC1766]
    -->

<!ENTITY % Character "CDATA"
    -- un caractère seul issu de [ISO10646]
    -->

<!ENTITY % LinkTypes "CDATA"
    -- liste de types de lien, séparés par des espaces
    -->

<!ENTITY % MediaDesc "CDATA"
    -- descripteur de média seul ou liste de descripteurs, séparés par des espaces
    -->

<!ENTITY % URI "CDATA"
    -- un identifiant de ressource uniforme (URI),
       voir [URI]
    -->

<!ENTITY % Datetime "CDATA" -- informations de date et d'heure. Format de date ISO -->

<!ENTITY % Script "CDATA" -- expression de script -->

<!ENTITY % StyleSheet "CDATA" -- données de feuille de style -->

<!ENTITY % Text "CDATA">

<!-- Entités paramètres -->

<!ENTITY % head.misc "SCRIPT|STYLE|META|LINK|OBJECT" -- éléments d'en-tête répétables -->

<!ENTITY % heading "H1|H2|H3|H4|H5|H6">

<!ENTITY % list "UL | OL">

<!ENTITY % preformatted "PRE">

<!--================ Entités de caractères mnémoniques =========================-->

<!ENTITY % HTMLlat1 PUBLIC
   "-//W3C//ENTITIES Latin1//EN//HTML"
   "HTMLlat1.ent">
%HTMLlat1;

<!ENTITY % HTMLsymbol PUBLIC
   "-//W3C//ENTITIES Symbols//EN//HTML"
   "HTMLsymbol.ent">
%HTMLsymbol;

<!ENTITY % HTMLspecial PUBLIC
   "-//W3C//ENTITIES Special//EN//HTML"
   "HTMLspecial.ent">
%HTMLspecial;
<!--=================== Attributs génériques ===============================-->

<!ENTITY % coreattrs
 "id          ID             #IMPLIED  -- id unique au document --
  class       CDATA          #IMPLIED  -- liste de classes, séparées par des espaces --
  style       %StyleSheet;   #IMPLIED  -- info de style associé --
  title       %Text;         #IMPLIED  -- titre consultatif --"
  >

<!ENTITY % i18n
 "lang        %LanguageCode; #IMPLIED  -- code de langue --
  dir         (ltr|rtl)      #IMPLIED  -- direction du texte lâche/neutre --"
  >

<!ENTITY % events
 "onclick     %Script;       #IMPLIED  -- le bouton d'un pointeur est cliqué --
  ondblclick  %Script;       #IMPLIED  -- le bouton d'un pointeur est double-cliqué --
  onmousedown %Script;       #IMPLIED  -- le bouton d'un pointeur est appuyé  --
  onmouseup   %Script;       #IMPLIED  -- le bouton d'un pointeur est relâché --
  onmouseover %Script;       #IMPLIED  -- le bouton d'un pointeur est déplacé sur --
  onmousemove %Script;       #IMPLIED  -- le bouton d'un pointeur est à l'intérieur --
  onmouseout  %Script;       #IMPLIED  -- le bouton d'un pointeur est déplacé ailleurs --
  onkeypress  %Script;       #IMPLIED  -- une touche est pressée puis relâchée --
  onkeydown   %Script;       #IMPLIED  -- une touche est pressée --
  onkeyup     %Script;       #IMPLIED  -- une touche est relâcée --"
  >

<!-- Interrupteur de fonctionnalité réservé -->
<!ENTITY % HTML.Reserved "IGNORE">

<!-- Les attributs suivants sont réservés pour un usage futur -->
<![ %HTML.Reserved; [
<!ENTITY % reserved
 "datasrc     %URI;          #IMPLIED  -- un source de données seule ou tabulaire --
  datafld     CDATA          #IMPLIED  -- le nom de la propriété ou de la colonne --
  dataformatas (plaintext|html) plaintext -- format texte ou html --"
  >
]]>

<!ENTITY % reserved "">

<!ENTITY % attrs "%coreattrs; %i18n; %events;">

<!--=================== Balisage de texte ======================================-->

<!ENTITY % fontstyle
 "TT | I | B | BIG | SMALL">

<!ENTITY % phrase "EM | STRONG | DFN | CODE |
                   SAMP | KBD | VAR | CITE | ABBR | ACRONYM" >

<!ENTITY % special
   "A | IMG | OBJECT | BR | SCRIPT | MAP | Q | SUB | SUP | SPAN | BDO">

<!ENTITY % formctrl "INPUT | SELECT | TEXTAREA | LABEL | BUTTON">

<!-- %inline; couvre les éléments en-ligne ou "de niveau texte" -->
<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">

<!ELEMENT (%fontstyle;|%phrase;) - - (%inline;)*>
<!ATTLIST (%fontstyle;|%phrase;)
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

<!ELEMENT (SUB|SUP) - - (%inline;)*    -- écriture en lettres inférieures ou supérieures -->
<!ATTLIST (SUB|SUP)
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

<!ELEMENT SPAN - - (%inline;)*         -- conteneur générique de langue/style -->
<!ATTLIST SPAN
  %attrs;                              -- %coreattrs, %i18n, %events --
  %reserved;                   -- réservé pour un usage futur --
  >

<!ELEMENT BDO - - (%inline;)*          -- surclassement de l'algorithme I18N BiDi -->
<!ATTLIST BDO
  %coreattrs;                          -- id, class, style, title --
  lang        %LanguageCode; #IMPLIED  -- code de langue --
  dir         (ltr|rtl)      #REQUIRED -- directionnalité --
  >

<!ELEMENT BR - O EMPTY                 -- saut de ligne forcé -->
<!ATTLIST BR
  %coreattrs;                          -- id, class, style, title --
  >

<!--================== Modèles de contenu HTML ===============================-->

<!--
    HTML a deux modèles de contenu principaux :

        %inline;     éléments au niveau du caractère et chaînes de texte
        %block;      éléments de type bloc, par exemple, paragraphes et listes
-->

<!ENTITY % block
     "P | %heading; | %list; | %preformatted; | DL | DIV | NOSCRIPT |
      BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS">

<!ENTITY % flow "%block; | %inline;">

<!--=================== Corps du document ====================================-->

<!ELEMENT BODY O O (%block;|SCRIPT)+ +(INS|DEL) -- corps du document -->
<!ATTLIST BODY
  %attrs;                              -- %coreattrs, %i18n, %events --
  onload          %Script;   #IMPLIED  -- le document est chargé --
  onunload        %Script;   #IMPLIED  -- le document est retiré --
  >

<!ELEMENT ADDRESS - - (%inline;)* -- informations sur l'auteur -->
<!ATTLIST ADDRESS
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

<!ELEMENT DIV - - (%flow;)*            -- conteneur générique de langue/style -->
<!ATTLIST DIV
  %attrs;                              -- %coreattrs, %i18n, %events --
  %reserved;                           -- réservé pour possible utilisation future --
  >

<!--================== Élément ancre ================================-->

<!ENTITY % Shape "(rect|circle|poly|default)">
<!ENTITY % Coords "CDATA" -- liste de longueurs, séparées par des virgules -->

<!ELEMENT A - - (%inline;)* -(A)       -- ancre -->
<!ATTLIST A
  %attrs;                              -- %coreattrs, %i18n, %events --
  charset     %Charset;      #IMPLIED  -- encodage de caractères de la ressource reliée --
  type        %ContentType;  #IMPLIED  -- type de contenu consultatif --
  name        CDATA          #IMPLIED  -- extrêmité de lien nommée --
  href        %URI;          #IMPLIED  -- URI de la ressource reliée --
  hreflang    %LanguageCode; #IMPLIED  -- code de langue --
  rel         %LinkTypes;    #IMPLIED  -- types de lien progressif --
  rev         %LinkTypes;    #IMPLIED  -- types de lien régressif --
  accesskey   %Character;    #IMPLIED  -- touche de caractère pour l'accessibilité --
  shape       %Shape;        rect      -- utiliser avec les images cliquables côté client --
  coords      %Coords;       #IMPLIED  -- utiliser avec les images cliquables côté client --
  tabindex    NUMBER         #IMPLIED  -- position dans l'ordre de tabulation --
  onfocus     %Script;       #IMPLIED  -- l'élément a l'attention --
  onblur      %Script;       #IMPLIED  -- l'élément perd l'attention --
  >

<!--================== Images cliquables côté client ============================-->

<!-- On peut les placer dans le même document ou les regrouper dans un
     document séparé, bien que ce ne soit pas encore largement reconnu -->

<!ELEMENT MAP - - ((%block;) | AREA)+ -- image cliquable côté client -->
<!ATTLIST MAP
  %attrs;                              -- %coreattrs, %i18n, %events --
  name        CDATA          #REQUIRED -- pour appel par usemap --
  >

<!ELEMENT AREA - O EMPTY               -- zone d'image cliquable côté client -->
<!ATTLIST AREA
  %attrs;                              -- %coreattrs, %i18n, %events --
  shape       %Shape;        rect      -- contrôle l'interprétation des coordonnées --
  coords      %Coords;       #IMPLIED  -- liste de longueurs, séparées par des virgules --
  href        %URI;          #IMPLIED  -- URI de la ressource reliée --
  nohref      (nohref)       #IMPLIED  -- cette région n'a pas d'action --
  alt         %Text;         #REQUIRED -- brève description --
  tabindex    NUMBER         #IMPLIED  -- position dans l'ordre de tabulation --
  accesskey   %Character;    #IMPLIED  -- touche de caractère pour l'accessibilité --
  onfocus     %Script;       #IMPLIED  -- l'élément a l'attention --
  onblur      %Script;       #IMPLIED  -- l'élément perd l'attention --
  >

<!--================== Élément LINK ==================================-->

<!--
  Les valeurs de relation peuvent en principe être utilisée :

   a) pour les barres d'outils/menus propres au document, quand elles sont utilisés
      avec l'élément LINK dans l'en-tête du document
      par exemple, start, contents, previous, next, index, end, help
   b) pour relier une feuille de style séparée (rel=stylesheet)
   c) pour établir un lien vers un script (rel=script)
   d) par les feuilles de style pour contrôler comment les collections
      de nœuds HTML sont restituées en documents imprimés
   e) pour établir un lien vers une version imprimable du document
      par exemple, une version postscript ou pdf (rel=alternate media=print)
-->

<!ELEMENT LINK - O EMPTY               -- a media-independent link -->
<!ATTLIST LINK
  %attrs;                              -- %coreattrs, %i18n, %events --
  charset     %Charset;      #IMPLIED  -- encodage de caractères de la ressource reliée --
  href        %URI;          #IMPLIED  -- URI de la ressource reliée --
  hreflang    %LanguageCode; #IMPLIED  -- code de langue --
  type        %ContentType;  #IMPLIED  -- type de contenu consultatif --
  rel         %LinkTypes;    #IMPLIED  -- types de lien progressif --
  rev         %LinkTypes;    #IMPLIED  -- types de lien régressif --
  media       %MediaDesc;    #IMPLIED  -- pour restitution sur ces médias --
  >

<!--=================== Images ===========================================-->

<!-- Longueur définie dans le DTD strict pour cellpadding/cellspacing -->
<!ENTITY % Length "CDATA" -- longueur nn pour des pixels ou nn% pour un pourcentage -->
<!ENTITY % MultiLength "CDATA" -- en pixels, en pourcentage ou relative -->

<![ %HTML.Frameset; [
<!ENTITY % MultiLengths "CDATA" -- liste de longueurs multiples, séparées par des virgules -->
]]>

<!ENTITY % Pixels "CDATA" -- entier représentant la longueur en pixels -->

<!-- Pour éviter les problèmes avec les agents utilisateurs en
   mode texte seul comme pour rendre compréhensible et navigable le contenu des images
   pour l'utilisateur d'un agent utilisateur non-visuel, vous devez fournir
   une description via l'attribut ALT et éviter les images cliquables côté serveur -->
<!ELEMENT IMG - O EMPTY                -- Embedded image -->
<!ATTLIST IMG
  %attrs;                              -- %coreattrs, %i18n, %events --
  src         %URI;          #REQUIRED -- URI de l'image à incorporer --
  alt         %Text;         #REQUIRED -- brève description --
  longdesc    %URI;          #IMPLIED  -- lien vers une description longue
                                          (en complément de l'attribut alt) --
  name        CDATA          #IMPLIED  -- nom de l'image pour les scripts --
  height      %Length;       #IMPLIED  -- surclasse la hauteur --
  width       %Length;       #IMPLIED  -- surclasse la largeur --
  usemap      %URI;          #IMPLIED  -- utiliser une image cliquable côté client --
  ismap       (ismap)        #IMPLIED  -- utiliser une image cliquable côté serveur --
  >

<!-- l'attribut USEMAP pointe vers un élément MAP qui peut
  se trouver dans le document ou dans un document externe, biens que le dernier
  ne soit pas largement reconnu -->

<!--==================== OBJECT ======================================-->
<!--
  L'élément OBJECT s'utiliser pour incorporer des objets comme
  parties des pages HTML, les éléments PARAM devraient précéder
  un autre contenu. La technicité du modèle de contenu mixte de SGML
  empêche de spécifier ceci formellement...
-->

<!ELEMENT OBJECT - - (PARAM | %flow;)*
 -- objet incorporé générique -->
<!ATTLIST OBJECT
  %attrs;                              -- %coreattrs, %i18n, %events --
  declare     (declare)      #IMPLIED  -- déclare mais n'instancie pas de drapeau --
  classid     %URI;          #IMPLIED  -- identifie une implémentation --
  codebase    %URI;          #IMPLIED  -- URI de base pour classid, data, archive --
  data        %URI;          #IMPLIED  -- référence aux données de l'objet --
  type        %ContentType;  #IMPLIED  -- type de contenu pour l'attribut data --
  codetype    %ContentType;  #IMPLIED  -- type de contenu pour l'attribut code --
  archive     CDATA          #IMPLIED  -- liste d'URI séparés par des espaces --
  standby     %Text;         #IMPLIED  -- message à montrer pendant le chargement --
  height      %Length;       #IMPLIED  -- surclasse la hauteur --
  width       %Length;       #IMPLIED  -- surclasse la largeur --
  usemap      %URI;          #IMPLIED  -- utiliser une image cliquable côté client --
  name        CDATA          #IMPLIED  -- soumettre comme partie d'un formulaire --
  tabindex    NUMBER         #IMPLIED  -- position dans l'ordre de tabulation --
  %reserved;                           -- réservé pour possible utilisation future --
  >

<!ELEMENT PARAM - O EMPTY              -- valeur de propriété nommée -->
<!ATTLIST PARAM
  id          ID             #IMPLIED  -- id unique au document --
  name        CDATA          #REQUIRED -- nom de propriété --
  value       CDATA          #IMPLIED  -- valeur de propriété --
  valuetype   (DATA|REF|OBJECT) DATA   -- How to interpret value --
  type        %ContentType;  #IMPLIED  -- type de contenu pour l'attribut value
                                          quand valuetype=ref --
  >

<!--=================== Règle horizontale ==================================-->

<!ELEMENT HR - O EMPTY -- règle horizontale -->
<!ATTLIST HR
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

<!--=================== Paragraphes =======================================-->

<!ELEMENT P - O (%inline;)*            -- paragraphe -->
<!ATTLIST P
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

<!--=================== Titres =========================================-->

<!--
  Il y a six niveaux de titrage partant de H1 (le plus important)
  jusqu'à H6 (le moins important).
-->

<!ELEMENT (%heading;)  - - (%inline;)* -- titre -->
<!ATTLIST (%heading;)
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

<!--=================== Texte préformaté ================================-->

<!-- Exclut le balisage des images et les changements dans la taille de la police -->
<!ENTITY % pre.exclusion "IMG|OBJECT|BIG|SMALL|SUB|SUP">

<!ELEMENT PRE - - (%inline;)* -(%pre.exclusion;) -- texte préformaté -->
<!ATTLIST PRE
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

<!--===================== Citations en-ligne ==================================-->

<!ELEMENT Q - - (%inline;)*            -- brè citation en-ligne -->
<!ATTLIST Q
  %attrs;                              -- %coreattrs, %i18n, %events --
  cite        %URI;          #IMPLIED  -- URI du document ou message sources --
  >

<!--=================== Citations en bloc ================================-->

<!ELEMENT BLOCKQUOTE - - (%block;|SCRIPT)+ -- longue citation -->
<!ATTLIST BLOCKQUOTE
  %attrs;                              -- %coreattrs, %i18n, %events --
  cite        %URI;          #IMPLIED  -- URI du document ou message sources --
  >

<!--=================== Texte inséré/supprimé ============================-->

<!-- INS/DEL are handled by inclusion on BODY -->
<!ELEMENT (INS|DEL) - - (%flow;)*      -- texte inséré, ou supprimé -->
<!ATTLIST (INS|DEL)
  %attrs;                              -- %coreattrs, %i18n, %events --
  cite        %URI;          #IMPLIED  -- info sur le motif du changement --
  datetime    %Datetime;     #IMPLIED  -- date et heure du changement --
  >

<!--=================== Listes ============================================-->

<!-- Listes de définitions - DT pour le terme, DD pour sa définition -->

<!ELEMENT DL - - (DT|DD)+              -- liste de définitions -->
<!ATTLIST DL
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

<!ELEMENT DT - O (%inline;)*           -- terme de définition -->
<!ELEMENT DD - O (%flow;)*             -- définition en question -->
<!ATTLIST (DT|DD)
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

<!ELEMENT OL - - (LI)+                 -- liste ordonnée -->
<!ATTLIST OL
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

<!-- Styles de puce des listes non-ordonnées (UL) -->
<!ELEMENT UL - - (LI)+                 -- liste non-ordonnée -->
<!ATTLIST UL
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

<!ELEMENT LI - O (%flow;)*             -- item de liste -->
<!ATTLIST LI
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

<!--================ Formulaires ===============================================-->
<!ELEMENT FORM - - (%block;|SCRIPT)+ -(FORM) -- formulaire interactif -->
<!ATTLIST FORM
  %attrs;                              -- %coreattrs, %i18n, %events --
  action      %URI;          #REQUIRED -- gestionnaire de formulaire côté serveur --
  method      (GET|POST)     GET       -- méthode HTTP utilisée pour soumettre le formulaire --
  enctype     %ContentType;  "application/x-www-form-urlencoded"
  accept      %ContentTypes; #IMPLIED  -- liste de types MIME
                                          pour chargement de fichier sur serveur --
  name        CDATA          #IMPLIED  -- nom du formulaire pour les scripts --
  onsubmit    %Script;       #IMPLIED  -- le formulaire a été soumis --
  onreset     %Script;       #IMPLIED  -- le formulaire a été réinitialisé --
  accept-charset %Charsets;  #IMPLIED  -- liste des jeux de caractères reconnus --
  >

<!-- Chaque label doit contenir plus d'UN champs -->
<!ELEMENT LABEL - - (%inline;)* -(LABEL) -- texte de label d'un champs de formulaire -->
<!ATTLIST LABEL
  %attrs;                              -- %coreattrs, %i18n, %events --
  for         IDREF          #IMPLIED  -- correspond à la valeur ID d'un champs --
  accesskey   %Character;    #IMPLIED  -- touche de caractère pour l'accessibilité --
  onfocus     %Script;       #IMPLIED  -- l'élément a l'attention --
  onblur      %Script;       #IMPLIED  -- l'élément perd l'attention --
  >

<!ENTITY % InputType
  "(TEXT | PASSWORD | CHECKBOX |
    RADIO | SUBMIT | RESET |
    FILE | HIDDEN | IMAGE | BUTTON)"
   >

<!-- Nom d'attribut requis pour tous, sauf submit et reset -->
<!ELEMENT INPUT - O EMPTY              -- commande de formulaire -->
<!ATTLIST INPUT
  %attrs;                              -- %coreattrs, %i18n, %events --
  type        %InputType;    TEXT      -- le type de gadget nécessaire --
  name        CDATA          #IMPLIED  -- soumettre comme partie du formulaire --
  value       CDATA          #IMPLIED  -- spécifier pour les boutons radio
                                          et les cases à cocher --
  checked     (checked)      #IMPLIED  -- pour les boutons radio et les cases à cocher --
  disabled    (disabled)     #IMPLIED  -- indisponible dans ce contexte --
  readonly    (readonly)     #IMPLIED  -- pour les types text et passwd --
  size        CDATA          #IMPLIED  -- propre à chaque type de champs --
  maxlength   NUMBER         #IMPLIED  -- nombre de caractères maxi des champs textuels --
  src         %URI;          #IMPLIED  -- pour les champs avec des images --
  alt         CDATA          #IMPLIED  -- brève description --
  usemap      %URI;          #IMPLIED  -- utiliser une image cliquable côté client --
  ismap       (ismap)        #IMPLIED  -- utiliser une image cliquable côté serveur --
  tabindex    NUMBER         #IMPLIED  -- position dans l'ordre de tabulation --
  accesskey   %Character;    #IMPLIED  -- touche de caractère pour l'accessibilité --
  onfocus     %Script;       #IMPLIED  -- l'élément a l'attention --
  onblur      %Script;       #IMPLIED  -- l'élément perd l'attention --
  onselect    %Script;       #IMPLIED  -- un certain texte a été sélectionné --
  onchange    %Script;       #IMPLIED  -- la valeur de l'élément a changé --
  accept      %ContentTypes; #IMPLIED  -- liste de types MIME
                                          pour chargement de fichier sur serveur --
  %reserved;                           -- réservé pour possible utilisation future --
  >

<!ELEMENT SELECT - - (OPTGROUP|OPTION)+ -- sélecteur d'option -->
<!ATTLIST SELECT
  %attrs;                              -- %coreattrs, %i18n, %events --
  name        CDATA          #IMPLIED  -- nom du champs --
  size        NUMBER         #IMPLIED  -- rangées visibles --
  multiple    (multiple)     #IMPLIED  -- une seule sélection par défaut --
  disabled    (disabled)     #IMPLIED  -- indisponible dans ce contexte --
  tabindex    NUMBER         #IMPLIED  -- position dans l'ordre de tabulation --
  onfocus     %Script;       #IMPLIED  -- l'élément a l'attention --
  onblur      %Script;       #IMPLIED  -- l'élément perd l'attention --
  onchange    %Script;       #IMPLIED  -- la valeur de l'élément a changé --
  %reserved;                           -- réservé pour possible utilisation future --
  >

<!ELEMENT OPTGROUP - - (OPTION)+ -- groupe d'options -->
<!ATTLIST OPTGROUP
  %attrs;                              -- %coreattrs, %i18n, %events --
  disabled    (disabled)     #IMPLIED  -- indisponible dans ce contexte --
  label       %Text;         #REQUIRED -- à utiliser dans les menus hiérarchiques --
  >

<!ELEMENT OPTION - O (#PCDATA)         -- option sélectionnable -->
<!ATTLIST OPTION
  %attrs;                              -- %coreattrs, %i18n, %events --
  selected    (selected)     #IMPLIED  errata-05
  disabled    (disabled)     #IMPLIED  -- indisponible dans ce contexte --
  label       %Text;         #IMPLIED  -- à utiliser dans les menus hiérarchiques --
  value       CDATA          #IMPLIED  -- defaults to element content --
  >

<!ELEMENT TEXTAREA - - (#PCDATA)       -- champs textuel multilignes -->
<!ATTLIST TEXTAREA
  %attrs;                              -- %coreattrs, %i18n, %events --
  name        CDATA          #IMPLIED
  rows        NUMBER         #REQUIRED
  cols        NUMBER         #REQUIRED
  disabled    (disabled)     #IMPLIED  -- indisponible dans ce contexte --
  readonly    (readonly)     #IMPLIED
  tabindex    NUMBER         #IMPLIED  -- position dans l'ordre de tabulation --
  accesskey   %Character;    #IMPLIED  -- touche de caractère pour l'accessibilité --
  onfocus     %Script;       #IMPLIED  -- l'élément a l'attention --
  onblur      %Script;       #IMPLIED  -- l'élément perd l'attention --
  onselect    %Script;       #IMPLIED  -- un certain texte a été sélectionné --
  onchange    %Script;       #IMPLIED  -- la valeur de l'élément a changé --
  %reserved;                           -- réservé pour possible utilisation future --
  >

<!--
  Le type #PCDATA est pour résoudre le problème du contenu mixte,
  selon la spécification seuls les blancs sont autorisés ici !
 -->
<!ELEMENT FIELDSET - - (#PCDATA,LEGEND,(%flow;)*) -- groupe de commandes de formulaire -->
<!ATTLIST FIELDSET
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

<!ELEMENT LEGEND - - (%inline;)*       -- légende du groupe de commandes -->

<!ATTLIST LEGEND
  %attrs;                              -- %coreattrs, %i18n, %events --
  accesskey   %Character;    #IMPLIED  -- touche de caractère pour l'accessibilité --
  >

<!ELEMENT BUTTON - -
     (%flow;)* -(A|%formctrl;|FORM|FIELDSET)
     -- bouton poussoir -->
<!ATTLIST BUTTON
  %attrs;                              -- %coreattrs, %i18n, %events --
  name        CDATA          #IMPLIED
  value       CDATA          #IMPLIED  -- envoyé au serveur à la soumission --
  type        (button|submit|reset) submit -- à utiliser comme bouton de formulaire --
  disabled    (disabled)     #IMPLIED  -- indisponible dans ce contexte --
  tabindex    NUMBER         #IMPLIED  -- position dans l'ordre de tabulation --
  accesskey   %Character;    #IMPLIED  -- touche de caractère pour l'accessibilité --
  onfocus     %Script;       #IMPLIED  -- l'élément a l'attention --
  onblur      %Script;       #IMPLIED  -- l'élément perd l'attention --
  %reserved;                           -- réservé pour possible utilisation future --
  >

<!--======================= Tables =======================================-->

<!-- Norme des tables HTML IETF, voir [RFC1942] -->

<!--
 L'attribut BORDER fixe l'épaisseur du cadre autour de la table.
 L'unité par défaut est le pixel.

 L'attribut FRAME spécifie quelles parties du cadre autour de la table
 devraient être restituées. Les valeurs ne sont pas les même que pour
 COLS pour éviter un conflit de nom avec l'attribut VALIGN.

 La valeur "border" est incluses pour rétro-compatibilité avec <TABLE BORDER>
 ce qui produit frame=border et border=implied.
 Pour <TABLE BORDER=1>, on a border=1 et frame=implied. Dans ce cas, il vaut mieux traiter
 cela comme frame=border pour rétro-compatibilité avec les navigateurs actuels.
-->
<!ENTITY % TFrame "(void|above|below|hsides|lhs|rhs|vsides|box|border)">

<!--
 L'attribut RULES définit quelles règles dessiner entre les cellules :

 si RULES est absent alors supposer :
     "none" si BORDER est absent ou BORDER=0, sinon "all"
-->

<!ENTITY % TRules "(none | groups | rows | cols | all)">

<!-- Placement horizontal de la table par rapport au document -->
<!ENTITY % TAlign "(left|center|right)">

<!-- Attributs d'alignement horizontal pour le contenu de la cellule -->
<!ENTITY % cellhalign
  "align      (left|center|right|justify|char) #IMPLIED
   char       %Character;    #IMPLIED  -- caractère d'alignement, e.g. char=':' --
   charoff    %Length;       #IMPLIED  -- décalage pour caractère d'alignement --"
  >

<!-- Attributs d'alignement vertical pour le contenu de la cellule -->
<!ENTITY % cellvalign
  "valign     (top|middle|bottom|baseline) #IMPLIED"
  >

<!ELEMENT TABLE - -
     (CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)>
<!ELEMENT CAPTION  - - (%inline;)*     -- légende de la table -->
<!ELEMENT THEAD    - O (TR)+           -- en-tête de la table -->
<!ELEMENT TFOOT    - O (TR)+           -- pied de la table -->
<!ELEMENT TBODY    O O (TR)+           -- corps de la table -->
<!ELEMENT COLGROUP - O (COL)*          -- groupe de colonnes de table -->
<!ELEMENT COL      - O EMPTY           -- colonne de table -->
<!ELEMENT TR       - O (TH|TD)+        -- rangée de table -->
<!ELEMENT (TH|TD)  - O (%flow;)*       -- cellule de rubrique ou de données de la table -->

<!ATTLIST TABLE                        -- l'élément table --
  %attrs;                              -- %coreattrs, %i18n, %events --
  summary     %Text;         #IMPLIED  -- objet/structure pour sortie vocale --
  width       %Length;       #IMPLIED  -- largeur de la table --
  border      %Pixels;       #IMPLIED  -- l'épaisseur du cadre autour de la table --
  frame       %TFrame;       #IMPLIED  -- quelles parties du cadre restituer --
  rules       %TRules;       #IMPLIED  -- règles entre rangées et colonnes --
  cellspacing %Length;       #IMPLIED  -- espacement entre cellules --
  cellpadding %Length;       #IMPLIED  -- espacement à l'intérieur des cellules --
  %reserved;                           -- réservé pour possible utilisation future --
  datapagesize CDATA         #IMPLIED  -- réservé pour possible utilisation future --
  >

<!ATTLIST CAPTION
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

<!--
COLGROUP regroupe un jeu d'éléments COL. Il permet de
rassembler plusieurs colonnes sémantiquement liées.
-->
<!ATTLIST COLGROUP
  %attrs;                              -- %coreattrs, %i18n, %events --
  span        NUMBER         1         -- nombre de colonne par défaut dans le groupe --
  width       %MultiLength;  #IMPLIED  -- largeur par défaut des COL contenues --
  %cellhalign;                         -- alignement horizontal dans les cellules --
  %cellvalign;                         -- alignement vertical dans les cellules --
  >

<!--
 Les éléments COL définissent les propriétés
 d'alignement des cellules dans une ou plusieurs colonnes.

 L'attribut WIDTH spécifie la largeur des colonnes, par exemple :

     width=64        largeur en pixels à l'écran
     width=0.5*      largeur relative de 0.5

 L'attribut SPAN amène les attributs d'un élément COL à
 s'appliquer sur plusieurs colonnes.
-->
<!ATTLIST COL                          -- groupes et propriétés de colonne --
  %attrs;                              -- %coreattrs, %i18n, %events --
  span        NUMBER         1         -- les attributs de COL affectent N colonnes --
  width       %MultiLength;  #IMPLIED  -- spécification de la largeur de colonne --
  %cellhalign;                         -- alignement horizontal dans les cellules --
  %cellvalign;                         -- alignement vertical dans les cellules --
  >

<!--
    Utilisez THEAD pour dupliquer les en-têtes lors de la rupture
    d'une table hors des limites de la page, ou pour avoir des en-têtes
    statique quand les sections TBODY sont restituées en panneaux
    défilants.

    Utilisez TFOOT pour dupliquer les pieds lors de la rupture d'une table
    hors des limites de la page, ou pour avoir des en-têtes statiques
    quand les sections TBODY sont restituées en panneaux défilants.

    Utilisez plusieurs sections TBODY quand il est besoin de règles entre
    des groupes de rangées de table.
-->
<!ATTLIST (THEAD|TBODY|TFOOT)          -- section de table --
  %attrs;                              -- %coreattrs, %i18n, %events --
  %cellhalign;                         -- alignement horizontal dans les cellules --
  %cellvalign;                         -- alignement vertical dans les cellules --
  >

<!ATTLIST TR                           -- rangée de table --
  %attrs;                              -- %coreattrs, %i18n, %events --
  %cellhalign;                         -- alignement horizontal dans les cellules --
  %cellvalign;                         -- alignement vertical dans les cellules --
  >

<!-- L'attribut scope est plus simple que l'attribut headers pour les tables communes -->
<!ENTITY % Scope "(row|col|rowgroup|colgroup)">

<!-- TH est pour une rubrique, TD pour des données,
   mais pour les cellules ambivalentes, utilisez TD -->
<!ATTLIST (TH|TD)                      -- cellule de rubrique ou de données --
  %attrs;                              -- %coreattrs, %i18n, %events --
  abbr        %Text;         #IMPLIED  -- abréviation pour cellule de rubrique --
  axis        CDATA          #IMPLIED  -- liste des rubriques en relation,
                                          séparées par des virgules --
  headers     IDREFS         #IMPLIED  -- liste d'id pour les cellules de rubrique --
  scope       %Scope;        #IMPLIED  -- portée couverte par les cellules de rubrique --
  rowspan     NUMBER         1         -- nombre de rangées couvertes par la cellule --
  colspan     NUMBER         1         -- nombre de colonnes couvertes par la cellule --
  %cellhalign;                         -- alignement horizontal dans les cellules --
  %cellvalign;                         -- alignement vertical dans les cellules --
  >

<!--================ En-tête du document =======================================-->
<!-- %head.misc; défini plus tôt comme "SCRIPT|STYLE|META|LINK|OBJECT" -->
<!ENTITY % head.content "TITLE & BASE?">

<!ELEMENT HEAD O O (%head.content;) +(%head.misc;) -- en-tête du document -->
<!ATTLIST HEAD
  %i18n;                               -- lang, dir --
  profile     %URI;          #IMPLIED  -- dictionnaire nommé de méta-informations --
  >

<!-- L'élément TITLE n'est pas censé faire partie du flux de texte.
       Il devrait s'afficher, par exemple, comme en-tête de la page ou titre de la fenêtre.
       Il ne peut y avoir qu'un titre exactement par document.
    -->
<!ELEMENT TITLE - - (#PCDATA) -(%head.misc;) -- titre du document -->
<!ATTLIST TITLE %i18n>

<!ELEMENT BASE - O EMPTY               -- URI de base du document -->
<!ATTLIST BASE
  href        %URI;          #REQUIRED -- URI qui fait office d'URI de base --
  >

<!ELEMENT META - O EMPTY               -- méta-information générique -->
<!ATTLIST META
  %i18n;                               -- lang, dir, à utiliser avec l'attribut content --
  http-equiv  NAME           #IMPLIED  -- nom de l'en-tête HTTP de réponse --
  name        NAME           #IMPLIED  -- nom de méta-information --
  content     CDATA          #REQUIRED -- informations associées --
  scheme      CDATA          #IMPLIED  -- sélectionne la forme du contenu --
  >

<!ELEMENT STYLE - - %StyleSheet        -- indication de style -->
<!ATTLIST STYLE
  %i18n;                               -- lang, dir, à utiliser avec l'attribut title --
  type        %ContentType;  #REQUIRED -- type de contenu du langage de style --
  media       %MediaDesc;    #IMPLIED  -- conçu pour ces médias --
  title       %Text;         #IMPLIED  -- titre consultatif --
  >

<!ELEMENT SCRIPT - - %Script;          -- déclarations de script -->
<!ATTLIST SCRIPT
  charset     %Charset;      #IMPLIED  -- encodage de caractères de la ressource reliée --
  type        %ContentType;  #REQUIRED -- type de contenu du langage de script --
  src         %URI;          #IMPLIED  -- URI d'un script externe --
  defer       (defer)        #IMPLIED  -- l'agent utilisateur peut différer
                                          l'exécution du script --
  event       CDATA          #IMPLIED  -- réservé pour possible utilisation future --
  for         %URI;          #IMPLIED  -- réservé pour possible utilisation future --
  >

<!ELEMENT NOSCRIPT - - (%block;)+
  -- conteneur du contenu de remplacement pour une restitution sans scripts -->
<!ATTLIST NOSCRIPT
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

<!--================ Structure du document ==================================-->
<!ENTITY % html.content "HEAD, BODY">

<!ELEMENT HTML O O (%html.content;)    -- élément racine du document -->
<!ATTLIST HTML
  %i18n;                               -- lang, dir --
  >


La d&ecute;finition de type de document HTML 4 transitoire

22 La définition de type de document transitoire

<!--
    Ceci est le DTD HTML 4.01 Transitional, qui inclut les attributs et
    les éléments de présentation que le W3C prévoit
    de supprimer graduellement au fur et à mesure de la gestion
    accrue des feuilles de style. Les auteurs devraient employer le DTD strict
    autant que possible, mais ils peuvent employer le DTD transitoire quand
    la gestion des attributs et éléments de présentation est exigée.

    HTML 4 comprend des mécanismes pour les feuilles de style, les scripts,
    l'incorporation des objets, l'amélioration de la gestion des textes
    de droite à gauche et mixtes, et l'amélioration des formulaires
    pour accroître l'accessibilit&eacut;e des personnes avec des
    déficiences physiques.

          Projet : $Date: 1999/12/24 22:40:35 $

          Auteurs :
              Dave Raggett <dsr@w3.org>
              Arnaud Le Hors <lehors@w3.org>
              Ian Jacobs <ij@w3.org>

    On trouvera plus d'informations sur HTML 4.01 à :

        http://www.w3.org/TR/1999/REC-html401-19991224

    La spécification HTML 4.01 inclut des contraintes syntaxiques supplémentaires
    qui ne peuvent pas s'exprimer dans les DTD.

-->
<!ENTITY % HTML.Version "-//W3C//DTD HTML 4.01 Transitional//EN"
  -- Utilisation typique :

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    ...
    </head>
    <body>
    ...
    </body>
    </html>

    L'URI utilisé comme identifiant de système avec l'identifiant public
    permet à l'agent utilisateur de télécharger le DTD et les
    jeux d'entités au besoin.

    Le FPI du DTD HTML 4.01 Strict :

        "-//W3C//DTD HTML 4.01//EN"

    Cette version du DTD strict :

        http://www.w3.org/TR/1999/REC-html401-19991224/strict.dtd

    Les auteurs devraient employer le DTD Strict à moins qu'ils n'aient besoin
    d'un contrôle de la présentation pour les agents utilisateurs
    qui ne reconnaissent pas (de manière adéquate) les feuilles de style.

    Si vous écrivez un document qui comprend des cadres, employez le FPI suivant :

        "-//W3C//DTD HTML 4.01 Frameset//EN"

    Cette version du DTD avec jeu d'encadrement :

        http://www.w3.org/TR/1999/REC-html401-19991224/frameset.dtd

    Utilisez les URI (relatifs) suivant pour se
    référer aux DTD et définitions d'entité de cette spécification :

    "strict.dtd"
    "loose.dtd"
    "frameset.dtd"
    "HTMLlat1.ent"
    "HTMLsymbol.ent"
    "HTMLspecial.ent"

-->

<!--================== Noms importés ====================================-->
<!-- Interrupteur de fonctionnalité pour les documents avec jeu d'encadrement -->
<!ENTITY % HTML.Frameset "IGNORE">

<!ENTITY % ContentType "CDATA"
    -- type de média, selon [RFC2045]
    -->

<!ENTITY % ContentTypes "CDATA"
    -- liste de types de média, séparés par des virgules, selon [RFC2045]
    -->

<!ENTITY % Charset "CDATA"
    -- un encodage de caractères, selon [RFC2045]
    -->

<!ENTITY % Charsets "CDATA"
    -- une liste d'encodages de caractères, séparés par des virgules, selon [RFC2045]
    -->

<!ENTITY % LanguageCode "NAME"
    -- un code de langue, selon [RFC1766]
    -->

<!ENTITY % Character "CDATA"
    -- un seul caractère issu du jeu [ISO10646]
    -->

<!ENTITY % LinkTypes "CDATA"
    -- liste de types de lien, séparés par des espaces
    -->

<!ENTITY % MediaDesc "CDATA"
    -- un descripteur de média seul, ou une liste de descripteurs, séparés par des virgules
    -->

<!ENTITY % URI "CDATA"
    -- un identifiant de ressource uniforme (URI),
       voir [URI]
    -->

<!ENTITY % Datetime "CDATA" -- informations de date et d'heure. Format de date ISO -->

<!ENTITY % Script "CDATA" -- expression de script -->

<!ENTITY % StyleSheet "CDATA" -- données de feuille de style -->

<!ENTITY % FrameTarget "CDATA" -- restituer dans ce cadre -->

<!ENTITY % Text "CDATA">

<!-- Entités paramètres -->

<!ENTITY % head.misc "SCRIPT|STYLE|META|LINK|OBJECT" -- éléments d'en-tête répétables -->

<!ENTITY % heading "H1|H2|H3|H4|H5|H6">

<!ENTITY % list "UL | OL |  DIR | MENU">

<!ENTITY % preformatted "PRE">

<!ENTITY % Color "CDATA" -- une couleur utilisant sRGB : #RRGGBB en valeur hexadécimales -->

<!-- Il y a aussi 16 noms de couleur largement répandus, avec leur valeur sRGB :

    Black  = #000000    Green  = #008000
    Silver = #C0C0C0    Lime   = #00FF00
    Gray   = #808080    Olive  = #808000
    White  = #FFFFFF    Yellow = #FFFF00
    Maroon = #800000    Navy   = #000080
    Red    = #FF0000    Blue   = #0000FF
    Purple = #800080    Teal   = #008080
    Fuchsia= #FF00FF    Aqua   = #00FFFF
 -->

<!ENTITY % bodycolors "
  bgcolor     %Color;        #IMPLIED  -- couleur d'arrière-plan du document --
  text        %Color;        #IMPLIED  -- couleur du texte du document --
  link        %Color;        #IMPLIED  -- couleur des liens --
  vlink       %Color;        #IMPLIED  -- couleur des liens visités --
  alink       %Color;        #IMPLIED  -- couleur des liens sélectionnés --
  ">

<!--================ Entités de caractères mnémoniques =========================-->

<!ENTITY % HTMLlat1 PUBLIC
   "-//W3C//ENTITIES Latin1//EN//HTML"
   "HTMLlat1.ent">
%HTMLlat1;

<!ENTITY % HTMLsymbol PUBLIC
   "-//W3C//ENTITIES Symbols//EN//HTML"
   "HTMLsymbol.ent">
%HTMLsymbol;

<!ENTITY % HTMLspecial PUBLIC
   "-//W3C//ENTITIES Special//EN//HTML"
   "HTMLspecial.ent">
%HTMLspecial;
<!--=================== Attributs génériques ===============================-->

<!ENTITY % coreattrs
 "id          ID             #IMPLIED  -- id unique au document --
  class       CDATA          #IMPLIED  -- liste de classes, séparées par des espaces --
  style       %StyleSheet;   #IMPLIED  -- indication de style associé --
  title       %Text;         #IMPLIED  -- titre consultatif --"
  >

<!ENTITY % i18n
 "lang        %LanguageCode; #IMPLIED  -- code de langue --
  dir         (ltr|rtl)      #IMPLIED  -- direction de texte lâche/neutre --"
  >

<!ENTITY % events
 "onclick     %Script;       #IMPLIED  -- un bouton du pointeur a été cliqué --
  ondblclick  %Script;       #IMPLIED  -- un bouton du pointeur a été double-cliqué --
  onmousedown %Script;       #IMPLIED  -- un bouton du pointeur a été appuyé --
  onmouseup   %Script;       #IMPLIED  -- un bouton du pointeur a été relâché --
  onmouseover %Script;       #IMPLIED  -- le pointeur a été déplacé sur --
  onmousemove %Script;       #IMPLIED  -- le pointeur a été déplacé dans --
  onmouseout  %Script;       #IMPLIED  -- le pointeur a été déplacé ailleurs --
  onkeypress  %Script;       #IMPLIED  -- une touche a été pressée puis relâchée --
  onkeydown   %Script;       #IMPLIED  -- une touche a été appuyée --
  onkeyup     %Script;       #IMPLIED  -- une touche a été relâchée --"
  >

<!-- Interrupteur de fonctionnalité réservé -->
<!ENTITY % HTML.Reserved "IGNORE">

<!-- Les attributs suivants sont réservés pour une possible utilisation future -->
<![ %HTML.Reserved; [
<!ENTITY % reserved
 "datasrc     %URI;          #IMPLIED  -- une source de données seule ou tabulaire --
  datafld     CDATA          #IMPLIED  -- le nom de la propriété ou de la colonne --
  dataformatas (plaintext|html) plaintext -- format texte ou html --"
  >
]]>

<!ENTITY % reserved "">

<!ENTITY % attrs "%coreattrs; %i18n; %events;">

<!ENTITY % align "align (left|center|right|justify)  #IMPLIED"
                   -- par défaut, c'est left pour une direction ltr et right pour rtl --
  >

<!--=================== Balisage du texte ======================================-->

<!ENTITY % fontstyle
 "TT | I | B | U | S | STRIKE | BIG | SMALL">

<!ENTITY % phrase "EM | STRONG | DFN | CODE |
                   SAMP | KBD | VAR | CITE | ABBR | ACRONYM" >

<!ENTITY % special
   "A | IMG | APPLET | OBJECT | FONT | BASEFONT | BR | SCRIPT |
    MAP | Q | SUB | SUP | SPAN | BDO | IFRAME">

<!ENTITY % formctrl "INPUT | SELECT | TEXTAREA | LABEL | BUTTON">

<!-- %inline; couvre les éléments en-ligne ou de "niveau texte" -->
<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">

<!ELEMENT (%fontstyle;|%phrase;) - - (%inline;)*>
<!ATTLIST (%fontstyle;|%phrase;)
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

<!ELEMENT (SUB|SUP) - - (%inline;)*    -- écriture en lettres inférieures ou supérieures -->
<!ATTLIST (SUB|SUP)
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

<!ELEMENT SPAN - - (%inline;)*         -- conteneur de langue/style générique -->
<!ATTLIST SPAN
  %attrs;                              -- %coreattrs, %i18n, %events --
  %reserved;                   -- réservé pour une possible utilisation future --
  >

<!ELEMENT BDO - - (%inline;)*          -- surclassement algorithme I18N BiDi -->
<!ATTLIST BDO
  %coreattrs;                          -- id, class, style, title --
  lang        %LanguageCode; #IMPLIED  -- code de langue --
  dir         (ltr|rtl)      #REQUIRED -- directionnalité --
  >

<!ELEMENT BASEFONT - O EMPTY           -- taille de police de base -->
<!ATTLIST BASEFONT
  id          ID             #IMPLIED  -- id unique au document --
  size        CDATA          #REQUIRED -- taille de police de base pour élément FONT --
  color       %Color;        #IMPLIED  -- couleur du texte --
  face        CDATA          #IMPLIED  -- liste de noms de police, séparés par des virgules --
  >

<!ELEMENT FONT - - (%inline;)*         -- changement local de la police -->
<!ATTLIST FONT
  %coreattrs;                          -- id, class, style, title --
  %i18n;                       -- lang, dir --
  size        CDATA          #IMPLIED  -- [+|-]nn e.g. size="+1", size="4" --
  color       %Color;        #IMPLIED  -- couleur du texte --
  face        CDATA          #IMPLIED  -- liste de noms de police, séparés par des virgules --
  >

<!ELEMENT BR - O EMPTY                 -- saut de ligne forcé -->
<!ATTLIST BR
  %coreattrs;                          -- id, class, style, title --
  clear       (left|all|right|none) none -- contr&orcirc;le de l'écoulement du texte --
  >

<!--================== Modèles de contenu HTML ===============================-->

<!--
    HTML suit deux modèles de contenu principaux :

        %inline;     éléments au niveau du caractère et les chaînes textuelles
        %block;      élément de type bloc e.g., paragraphse et listes
-->

<!ENTITY % block
     "P | %heading; | %list; | %preformatted; | DL | DIV | CENTER |
      NOSCRIPT | NOFRAMES | BLOCKQUOTE | FORM | ISINDEX | HR |
      TABLE | FIELDSET | ADDRESS">

<!ENTITY % flow "%block; | %inline;">

<!--=================== Corps du document ====================================-->

<!ELEMENT BODY O O (%flow;)* +(INS|DEL) -- corps du document -->
<!ATTLIST BODY
  %attrs;                              -- %coreattrs, %i18n, %events --
  onload          %Script;   #IMPLIED  -- le document a été chargé --
  onunload        %Script;   #IMPLIED  -- le document a été retiré --
  background      %URI;      #IMPLIED  -- texture en mosaïque pour
                                          l'arrière-plan du document --
  %bodycolors;                         -- bgcolor, text, link, vlink, alink --
  >

<!ELEMENT ADDRESS - - ((%inline;)|P)*  -- informations sur l'auteur -->
<!ATTLIST ADDRESS
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

<!ELEMENT DIV - - (%flow;)*            -- conteneur de langue/style générique -->
<!ATTLIST DIV
  %attrs;                              -- %coreattrs, %i18n, %events --
  %align;                              -- alignement, alignement du texte --
  %reserved;                           -- réservé pour une possible utilisation future --
  >

<!ELEMENT CENTER - - (%flow;)*         -- raccourci pour DIV align=center -->
<!ATTLIST CENTER
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

<!--================== Élément ancre ================================-->

<!ENTITY % Shape "(rect|circle|poly|default)">
<!ENTITY % Coords "CDATA" -- liste de longueurs, séparées par des virgules -->

<!ELEMENT A - - (%inline;)* -(A)       -- ancre -->
<!ATTLIST A
  %attrs;                              -- %coreattrs, %i18n, %events --
  charset     %Charset;      #IMPLIED  -- encodage de caractères de la ressource reliée --
  type        %ContentType;  #IMPLIED  -- type de contenu consultatif --
  name        CDATA          #IMPLIED  -- extrêmité du lien nommée --
  href        %URI;          #IMPLIED  -- URI de la ressource reliée --
  hreflang    %LanguageCode; #IMPLIED  -- code de langue --
  target      %FrameTarget;  #IMPLIED  -- restituer dans ce cadre --
  rel         %LinkTypes;    #IMPLIED  -- types de lien progressifs --
  rev         %LinkTypes;    #IMPLIED  -- types de lien régressifs --
  accesskey   %Character;    #IMPLIED  -- touche de caractère pour l'accessibilité --
  shape       %Shape;        rect      -- à utiliser avec les images cliquables côté client --
  coords      %Coords;       #IMPLIED  -- à utiliser avec les images cliquables côté client --
  tabindex    NUMBER         #IMPLIED  -- position dans l'ordre de tabulation --
  onfocus     %Script;       #IMPLIED  -- l'élément a l'attention --
  onblur      %Script;       #IMPLIED  -- l'élément perd l'attention --
  >

<!--================== Images cliquables côté client ============================-->

<!-- Celles-ci peuvent se placer dans le même document ou regroupées
     dans un document spéparé, bien que ce ne soit pas encore très répandu -->

<!ELEMENT MAP - - ((%block;) | AREA)+ -- image cliquable côté client -->
<!ATTLIST MAP
  %attrs;                              -- %coreattrs, %i18n, %events --
  name        CDATA          #REQUIRED -- pour appel par l'attribut usemap --
  >

<!ELEMENT AREA - O EMPTY               -- zone d'image cliquable côté client -->
<!ATTLIST AREA
  %attrs;                              -- %coreattrs, %i18n, %events --
  shape       %Shape;        rect      -- contrôle l'interprétation des coordonnées --
  coords      %Coords;       #IMPLIED  -- liste de longueurs, séparées par des virgules --
  href        %URI;          #IMPLIED  -- URI de la ressource reliée --
  target      %FrameTarget;  #IMPLIED  -- restituer dans ce cadre --
  nohref      (nohref)       #IMPLIED  -- cette région n'a aucune action --
  alt         %Text;         #REQUIRED -- brève description --
  tabindex    NUMBER         #IMPLIED  -- position dans l'ordre de tabulation --
  accesskey   %Character;    #IMPLIED  -- touche de caractère pour l'accessibilité --
  onfocus     %Script;       #IMPLIED  -- l'élément a l'attention --
  onblur      %Script;       #IMPLIED  -- l'élément perd l'attention --
  >

<!--================== Élément LINK ==================================-->

<!--
  Les valeurs de relation peuvent en principe être utilisées :

   a) pour les barres d'outils/menus spécifiques au document, quand ceux-ci sont
   utilisés avec l'élément LINK dans l'en-tête du document,
   par exemple, start, contents, previous, next, index, end, help
   b) pour relier une feuille de style séparée (rel=stylesheet)
   c) pour faire un lien vers un script (rel=script)
   d) par les feuilles de style pour contrôler la manière dont les
      collections de nœuds HTML sont restituées dans les
      document imprimés
   e) pour faire un lien vers une version imprimable du document
      par exemple, une version postscript ou pdf (rel=alternate media=print)
-->

<!ELEMENT LINK - O EMPTY               -- un lien indépendant du média -->
<!ATTLIST LINK
  %attrs;                              -- %coreattrs, %i18n, %events --
  charset     %Charset;      #IMPLIED  -- encodage de caractères de la ressource reliée --
  href        %URI;          #IMPLIED  -- URI de la ressource reliée --
  hreflang    %LanguageCode; #IMPLIED  -- code de langue --
  type        %ContentType;  #IMPLIED  -- type de contenu consultatif --
  rel         %LinkTypes;    #IMPLIED  -- types de lien progressifs --
  rev         %LinkTypes;    #IMPLIED  -- types de lien régressifs --
  media       %MediaDesc;    #IMPLIED  -- pour restitution sur ces médias --
  target      %FrameTarget;  #IMPLIED  -- restituer dans ce cadre --
  >

<!--=================== Images ===========================================-->

<!-- Le type de valeur Length est défini dans le DTD strict pour cellpadding/cellspacing -->
<!ENTITY % Length "CDATA" -- longueur nn en pixels ou nn% en pourcentage -->
<!ENTITY % MultiLength "CDATA" -- valeur en pixel, en pourcentage ou relative -->

<![ %HTML.Frameset; [
<!ENTITY % MultiLengths "CDATA" -- liste de valeur MultiLength, séparées par des virgules -->
]]>

<!ENTITY % Pixels "CDATA" -- entier représentant une longueur en pixels -->

<!ENTITY % IAlign "(top|middle|bottom|left|right)" -- center? -->

<!-- Pour éviter les problèmes avec les agents utilisateurs
   en mode texte seul ainsi que pour rendre le contenu de l'image compréhensible
   et navigable aux utilisanteurs d'un agent utilisateur non-visuel, vous devez
   fournir une description avec l'attribut ALT et éviter les images cliquables
   côté serveur -->
<!ELEMENT IMG - O EMPTY                -- Image incorporée -->
<!ATTLIST IMG
  %attrs;                              -- %coreattrs, %i18n, %events --
  src         %URI;          #REQUIRED -- URI de l'image à incorporer --
  alt         %Text;         #REQUIRED -- brève description --
  longdesc    %URI;          #IMPLIED  -- lien vers une description longue
                                          (en complément de l'attribut alt) --
  name        CDATA          #IMPLIED  -- nom de l'image pour les scripts --
  height      %Length;       #IMPLIED  -- surclasse la hauteur --
  width       %Length;       #IMPLIED  -- surclasse la largeur --
  usemap      %URI;          #IMPLIED  -- utiliser une image cliquable côté client --
  ismap       (ismap)        #IMPLIED  -- utiliser une image cliquable côté serveur --
  align       %IAlign;       #IMPLIED  -- alignement vertical ou horizontal --
  border      %Pixels;       #IMPLIED  -- épaisseur de la bordure du lien --
  hspace      %Pixels;       #IMPLIED  -- gouttière horizontale --
  vspace      %Pixels;       #IMPLIED  -- gouttière verticale --
  >

<!-- L'attribut USEMAP pointe vers un élément MAP qui peut se trouver
  dans le document ou dans un document externe, bien que le dernier ne soit pas
  largement reconnu -->

<!--==================== Élément OBJECT ======================================-->
<!--
  On utiliser l'élément OBJECT pour incorporer des objets en tant que
  parties des pages HTML. Les éléments PARAM devraient précéder
  un autre contenu. La technicité du modèle de contenu mixte de SGML
  empêche de spécifier ceci formellement...
-->

<!ELEMENT OBJECT - - (PARAM | %flow;)*
 -- objet incorporé générique -->
<!ATTLIST OBJECT
  %attrs;                              -- %coreattrs, %i18n, %events --
  declare     (declare)      #IMPLIED  -- déclare mais n'instancie pas de drapeau --
  classid     %URI;          #IMPLIED  -- identifie une implémentation --
  codebase    %URI;          #IMPLIED  -- URI de base pour classid, data, archive--
  data        %URI;          #IMPLIED  -- référence aux données de l'objet --
  type        %ContentType;  #IMPLIED  -- type de contenu pour l'attribut data --
  codetype    %ContentType;  #IMPLIED  -- type de contenu pour l'attribut code --
  archive     CDATA          #IMPLIED  -- liste d'URI spéparés par des espaces --
  standby     %Text;         #IMPLIED  -- message à montrer pendant le chargement --
  height      %Length;       #IMPLIED  -- surclasse la hauteur --
  width       %Length;       #IMPLIED  -- surclasse la largeur --
  usemap      %URI;          #IMPLIED  -- utiliser une image cliquable côté client --
  name        CDATA          #IMPLIED  -- soumettre comme partie d'un formulaire --
  tabindex    NUMBER         #IMPLIED  -- position dans l'ordre de tabulation --
  align       %IAlign;       #IMPLIED  -- alignement vertical ou horizontal --
  border      %Pixels;       #IMPLIED  -- épaisseur de la bordure du lien --
  hspace      %Pixels;       #IMPLIED  -- gouttière horizontale --
  vspace      %Pixels;       #IMPLIED  -- gouttière verticale --
  %reserved;                           -- réservé pour une possible utilisation future --
  >

<!ELEMENT PARAM - O EMPTY              -- valeur de propriété nommée -->
<!ATTLIST PARAM
  id          ID             #IMPLIED  -- id unique au document --
  name        CDATA          #REQUIRED -- nom de propriété --
  value       CDATA          #IMPLIED  -- valeur de propriété --
  valuetype   (DATA|REF|OBJECT) DATA   -- comment interpréter la valeur --
  type        %ContentType;  #IMPLIED  -- type de contenu pour l'attribut value
                                          when valuetype=ref --
  >

<!--=================== Java APPLET ==================================-->
<!--
  One of code or object attributes must be present.
  Place PARAM elements before other content.
-->
<!ELEMENT APPLET - - (PARAM | %flow;)* -- applet Java -->
<!ATTLIST APPLET
  %coreattrs;                          -- id, class, style, title --
  codebase    %URI;          #IMPLIED  -- URI de base optionnel pour l'applet --
  archive     CDATA          #IMPLIED  -- liste d'archives spéparées par des virgules --
  code        CDATA          #IMPLIED  -- fichier de class de l'applet --
  object      CDATA          #IMPLIED  -- fichier d'applet sérialisé --
  alt         %Text;         #IMPLIED  -- brève description --
  name        CDATA          #IMPLIED  -- permet aux applets de se trouver les unes les autres --
  width       %Length;       #REQUIRED -- largeur initiale --
  height      %Length;       #REQUIRED -- hauteur initiale --
  align       %IAlign;       #IMPLIED  -- alignement vertical ou horizontal --
  hspace      %Pixels;       #IMPLIED  -- gouttière horizontale --
  vspace      %Pixels;       #IMPLIED  -- gouttière verticale --
  >

<!--=================== Règle horizontale ==================================-->

<!ELEMENT HR - O EMPTY -- règle horizontale -->
<!ATTLIST HR
  %attrs;                              -- %coreattrs, %i18n, %events --
  align       (left|center|right) #IMPLIED
  noshade     (noshade)      #IMPLIED
  size        %Pixels;       #IMPLIED
  width       %Length;       #IMPLIED
  >

<!--=================== Paragraphes =======================================-->

<!ELEMENT P - O (%inline;)*            -- paragraphe -->
<!ATTLIST P
  %attrs;                              -- %coreattrs, %i18n, %events --
  %align;                              -- alignement, alignement du texte --
  >

<!--=================== Titrages =========================================-->

<!--
  Il y a six niveaux de titrage à partir de H1 (le plus important)
  jusqu'à H6 (le moins important).
-->

<!ELEMENT (%heading;)  - - (%inline;)* -- titrage -->
<!ATTLIST (%heading;)
  %attrs;                              -- %coreattrs, %i18n, %events --
  %align;                              -- alignement, alignement du texte --
  >

<!--=================== Texte préformaté ================================-->

<!-- exclut le balisage des images et les changements dans la taille de police -->
<!ENTITY % pre.exclusion "IMG|OBJECT|APPLET|BIG|SMALL|SUB|SUP|FONT|BASEFONT">

<!ELEMENT PRE - - (%inline;)* -(%pre.exclusion;) -- texte préformaté -->
<!ATTLIST PRE
  %attrs;                              -- %coreattrs, %i18n, %events --
  width       NUMBER         #IMPLIED
  >

<!--===================== Citations en-ligne ==================================-->

<!ELEMENT Q - - (%inline;)*            -- courte citation en-ligne -->
<!ATTLIST Q
  %attrs;                              -- %coreattrs, %i18n, %events --
  cite        %URI;          #IMPLIED  -- URI du document ou message sources --
  >

<!--=================== Citations en bloc ================================-->

<!ELEMENT BLOCKQUOTE - - (%flow;)*     -- citation longue -->
<!ATTLIST BLOCKQUOTE
  %attrs;                              -- %coreattrs, %i18n, %events --
  cite        %URI;          #IMPLIED  -- URI du document ou message sources --
  >

<!--=================== Texte inséré/supprimé ============================-->

<!-- Les éléments INS/DEL sont gérés par inclusion sur BODY -->
<!ELEMENT (INS|DEL) - - (%flow;)*      -- texte inséré, supprimé -->
<!ATTLIST (INS|DEL)
  %attrs;                              -- %coreattrs, %i18n, %events --
  cite        %URI;          #IMPLIED  -- info sur le motif du changement --
  datetime    %Datetime;     #IMPLIED  -- date et heure du changement --
  >

<!--=================== Listes ============================================-->

<!-- Listes de définitions - DT pour le terme, DD pour sa définition -->

<!ELEMENT DL - - (DT|DD)+              -- liste de définitions -->
<!ATTLIST DL
  %attrs;                              -- %coreattrs, %i18n, %events --
  compact     (compact)      #IMPLIED  -- espacement entre les items réduit --
  >

<!ELEMENT DT - O (%inline;)*           -- terme de définition -->
<!ELEMENT DD - O (%flow;)*             -- description de la définition -->
<!ATTLIST (DT|DD)
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

<!-- Style de numérotage des listes ordonnées (OL)

    1   en chiffres arabes              1, 2, 3, ...
    a   alphabetique minuscule          a, b, c, ...
    A   alphabetique majuscule          A, B, C, ...
    i   en chiffres romains minuscules  i, ii, iii, ...
    I   en chiffres romains majuscules  I, II, III, ...

    Le style s'applique à la succession de numéros qui, par défaut,
    est réinitialisée à 1 pour le premier item d'une liste ordonnée.

    On ne peut pas l'exprimer directement dans SGML en raison de l'emballage de la casse.
-->

<!ENTITY % OLStyle "CDATA"      -- contraint à : "(1|a|A|i|I)" -->

<!ELEMENT OL - - (LI)+                 -- liste ordonnée -->
<!ATTLIST OL
  %attrs;                              -- %coreattrs, %i18n, %events --
  type        %OLStyle;      #IMPLIED  -- style de numérotage --
  compact     (compact)      #IMPLIED  -- espacement entre item réduit --
  start       NUMBER         #IMPLIED  -- début de la séquence de numéros --
  >

<!-- Styles des pastilles des listes non-ordonnées (UL) -->
<!ENTITY % ULStyle "(disc|square|circle)">

<!ELEMENT UL - - (LI)+                 -- liste non-ordonnée -->
<!ATTLIST UL
  %attrs;                              -- %coreattrs, %i18n, %events --
  type        %ULStyle;      #IMPLIED  -- style de pastille --
  compact     (compact)      #IMPLIED  -- espacement entre item réduit --
  >

<!ELEMENT (DIR|MENU) - - (LI)+ -(%block;) -- liste de type répertoire, liste de type menu -->
<!ATTLIST DIR
  %attrs;                              -- %coreattrs, %i18n, %events --
  compact     (compact)      #IMPLIED -- espacement entre item réduit --
  >
<!ATTLIST MENU
  %attrs;                              -- %coreattrs, %i18n, %events --
  compact     (compact)      #IMPLIED -- espacement entre item réduit --
  >

<!ENTITY % LIStyle "CDATA" -- contraint à : "(%ULStyle;|%OLStyle;)" -->

<!ELEMENT LI - O (%flow;)*             -- item de liste -->
<!ATTLIST LI
  %attrs;                              -- %coreattrs, %i18n, %events --
  type        %LIStyle;      #IMPLIED  -- style d'item de liste --
  value       NUMBER         #IMPLIED  -- numéro de séquence réinitialisé --
  >

<!--================ Formulaires ===============================================-->
<!ELEMENT FORM - - (%flow;)* -(FORM)   -- formulaire interactif -->
<!ATTLIST FORM
  %attrs;                              -- %coreattrs, %i18n, %events --
  action      %URI;          #REQUIRED -- gestionnaire de formulaire côté serveur --
  method      (GET|POST)     GET       -- méthode HTTP utilisée pour soumettre le formulaire --
  enctype     %ContentType;  "application/x-www-form-urlencoded"
  accept      %ContentTypes; #IMPLIED  -- liste de types MIME pour le chargement d'un fichier sur un serveur --
  name        CDATA          #IMPLIED  -- nom du formulaire pour les scripts --
  onsubmit    %Script;       #IMPLIED  -- le formulaire a été soumis --
  onreset     %Script;       #IMPLIED  -- le formulaire a été réinitialisé --
  target      %FrameTarget;  #IMPLIED  -- restituer dans ce cadre --
  accept-charset %Charsets;  #IMPLIED  -- liste des jeux de caractères reconnus --
  >

<!-- Chaque label ne doit pas contenir plus d'UN champs -->
<!ELEMENT LABEL - - (%inline;)* -(LABEL) -- texte du label d'un champs de formulaire -->
<!ATTLIST LABEL
  %attrs;                              -- %coreattrs, %i18n, %events --
  for         IDREF          #IMPLIED  -- correspond à la valeur ID d'un champs --
  accesskey   %Character;    #IMPLIED  -- touche de caractère pour l'accessibilité --
  onfocus     %Script;       #IMPLIED  -- l'élément a l'attention --
  onblur      %Script;       #IMPLIED  -- l'élément perd l'attention --
  >

<!ENTITY % InputType
  "(TEXT | PASSWORD | CHECKBOX |
    RADIO | SUBMIT | RESET |
    FILE | HIDDEN | IMAGE | BUTTON)"
   >

<!-- Le nom de l'attribut est obligatoire pour tous les types, sauf submit et reset -->
<!ELEMENT INPUT - O EMPTY              -- form control -->
<!ATTLIST INPUT
  %attrs;                              -- %coreattrs, %i18n, %events --
  type        %InputType;    TEXT      -- quel est le gadget nécessaire --
  name        CDATA          #IMPLIED  -- soumettre comme partie d'un formulaire --
  value       CDATA          #IMPLIED  -- spécifier pour les boutons radio et les cases à cocher --
  checked     (checked)      #IMPLIED  -- pour les boutons radio et les cases à cocher  --
  disabled    (disabled)     #IMPLIED  -- indisponible dans ce contexte --
  readonly    (readonly)     #IMPLIED  -- pour les types text et passwd --
  size        CDATA          #IMPLIED  -- propre à chaque type de champs --
  maxlength   NUMBER         #IMPLIED  -- nombre de caractères maxi pour champs textuels --
  src         %URI;          #IMPLIED  -- pour les champs avec des images --
  alt         CDATA          #IMPLIED  -- brève description --
  usemap      %URI;          #IMPLIED  -- utiliser une image cliquable côté client --
  ismap       (ismap)        #IMPLIED  -- utiliser une image cliquable côté serveur --
  tabindex    NUMBER         #IMPLIED  -- position dans l'ordre de tabulation --
  accesskey   %Character;    #IMPLIED  -- touche de caractère pour l'accessibilité --
  onfocus     %Script;       #IMPLIED  -- l'élément a l'attention --
  onblur      %Script;       #IMPLIED  -- l'élément perd l'attention --
  onselect    %Script;       #IMPLIED  -- un certain texte a été sélectionné --
  onchange    %Script;       #IMPLIED  -- la valeur de l'élément a été changée --
  accept      %ContentTypes; #IMPLIED  -- liste de types MIME pour le chargement d'un fichier sur un serveur --
  align       %IAlign;       #IMPLIED  -- alignement vertical ou horizontal --
  %reserved;                           -- réservé pour une possible utilisation future --
  >

<!ELEMENT SELECT - - (OPTGROUP|OPTION)+ -- sélecteur d'option -->
<!ATTLIST SELECT
  %attrs;                              -- %coreattrs, %i18n, %events --
  name        CDATA          #IMPLIED  -- nom de champs --
  size        NUMBER         #IMPLIED  -- rangées visibles --
  multiple    (multiple)     #IMPLIED  -- sélection simple par défaut --
  disabled    (disabled)     #IMPLIED  -- indisponible dans ce contexte --
  tabindex    NUMBER         #IMPLIED  -- position dans l'ordre de tabulation --
  onfocus     %Script;       #IMPLIED  -- l'élément a l'attention --
  onblur      %Script;       #IMPLIED  -- l'élément perd l'attention --
  onchange    %Script;       #IMPLIED  -- la valeur de l'élément a été changée --
  %reserved;                           -- réservé pour une possible utilisation future --
  >

<!ELEMENT OPTGROUP - - (OPTION)+ -- groupe d'options -->
<!ATTLIST OPTGROUP
  %attrs;                              -- %coreattrs, %i18n, %events --
  disabled    (disabled)     #IMPLIED  -- indisponible dans ce contexte --
  label       %Text;         #REQUIRED -- à utiliser dans les menus hiérarchiques --
  >

<!ELEMENT OPTION - O (#PCDATA)         -- option sélectionnable -->
<!ATTLIST OPTION
  %attrs;                              -- %coreattrs, %i18n, %events --
  selected    (selected)     #IMPLIED
  disabled    (disabled)     #IMPLIED  -- indisponible dans ce contexte --
  label       %Text;         #IMPLIED  -- à utiliser dans les menus hiérarchiques --
  value       CDATA          #IMPLIED  -- contenu de l'élément par défaut --
  >

<!ELEMENT TEXTAREA - - (#PCDATA)       -- champs de texte multilignes -->
<!ATTLIST TEXTAREA
  %attrs;                              -- %coreattrs, %i18n, %events --
  name        CDATA          #IMPLIED
  rows        NUMBER         #REQUIRED
  cols        NUMBER         #REQUIRED
  disabled    (disabled)     #IMPLIED  -- indisponible dans ce contexte --
  readonly    (readonly)     #IMPLIED
  tabindex    NUMBER         #IMPLIED  -- position dans l'ordre de tabulation --
  accesskey   %Character;    #IMPLIED  -- touche de caractère pour l'accessibilité --
  onfocus     %Script;       #IMPLIED  -- l'élément a l'attention --
  onblur      %Script;       #IMPLIED  -- l'élément perd l'attention --
  onselect    %Script;       #IMPLIED  -- un certain texte a été sélectionné --
  onchange    %Script;       #IMPLIED  -- la valeur de l'élément a été changée --
  %reserved;                           -- réservé pour une possible utilisation future --
  >

<!--
  Le type #PCDATA est pour résoudre le problème du contenu mixte,
  selon la spécification, seuls les blancs sont autorisés à cet endroit !
 -->
<!ELEMENT FIELDSET - - (#PCDATA,LEGEND,(%flow;)*) -- groupe de commandes de formulaire -->
<!ATTLIST FIELDSET
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

<!ELEMENT LEGEND - - (%inline;)*       -- légende du jeu de champs -->
<!ENTITY % LAlign "(top|bottom|left|right)">

<!ATTLIST LEGEND
  %attrs;                              -- %coreattrs, %i18n, %events --
  accesskey   %Character;    #IMPLIED  -- touche de caractère pour l'accessibilité --
  align       %LAlign;       #IMPLIED  -- par rapport au jeu de champs --
  >

<!ELEMENT BUTTON - -
     (%flow;)* -(A|%formctrl;|FORM|ISINDEX|FIELDSET|IFRAME)
     -- bouton poussoir -->
<!ATTLIST BUTTON
  %attrs;                              -- %coreattrs, %i18n, %events --
  name        CDATA          #IMPLIED
  value       CDATA          #IMPLIED  -- envoyé au serveur à la soumission --
  type        (button|submit|reset) submit -- pour utiliser comme bouton de formulaire --
  disabled    (disabled)     #IMPLIED  -- indisponible dans ce contexte --
  tabindex    NUMBER         #IMPLIED  -- position dans l'ordre de tabulation --
  accesskey   %Character;    #IMPLIED  -- touche de caractère pour l'accessibilité --
  onfocus     %Script;       #IMPLIED  -- l'élément a l'attention --
  onblur      %Script;       #IMPLIED  -- l'élément perd l'attention --
  %reserved;                           -- réservé pour une possible utilisation future --
  >

<!--======================= Tables =======================================-->

<!-- Norme des tables HTML IETF, voir [RFC1942] -->

<!--
 L'attribut BORDER fixe l'épaisseur du cadre autour de la table.
 Les unités par défaut sont en pixels écran.

 L'attribut FRAME spécifie quelles parties du cadre autour
 de la table devraient être restituées. Les valeurs ne sont pas
 les mêmes que COLS pour éviter un conflit de nom avec l'attribut VALIGN.

 La valeur "border" est incluse pour rétro-compatibilité avec
 <TABLE BORDER> qui produit frame=border et border=implied.
 Pour <TABLE BORDER=1>, on a border=1 et frame=implied.
 Auquel cas, il vaut mieux traiter cela comme frame=border
 pour rétro-compatibilité avec; les navigateurs existants.
-->
<!ENTITY % TFrame "(void|above|below|hsides|lhs|rhs|vsides|box|border)">

<!--
 L'attribut RULES définit quelles règles dessiner entre les cellules :

 Si l'attribut RULES est absent, alors supposer :
     "none" si l'attribut BORDER est absent ou bien BORDER=0, sinon "all"
-->

<!ENTITY % TRules "(none | groups | rows | cols | all)">

<!-- Placement horizontal de la table relativement au document -->
<!ENTITY % TAlign "(left|center|right)">

<!-- Attributs d'alignement horizontal pour le contenu des cellules -->
<!ENTITY % cellhalign
  "align      (left|center|right|justify|char) #IMPLIED
   char       %Character;    #IMPLIED  -- caractère d'alignement, e.g. char=':' --
   charoff    %Length;       #IMPLIED  -- décalage pour le caractère d'alignement --"
  >

<!-- Attributs d'alignement vertical pour le contenu des cellules -->
<!ENTITY % cellvalign
  "valign     (top|middle|bottom|baseline) #IMPLIED"
  >

<!ELEMENT TABLE - -
     (CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)>
<!ELEMENT CAPTION  - - (%inline;)*     -- légende de la table -->
<!ELEMENT THEAD    - O (TR)+           -- en-tête de la table -->
<!ELEMENT TFOOT    - O (TR)+           -- pied de la table -->
<!ELEMENT TBODY    O O (TR)+           -- corps de la table -->
<!ELEMENT COLGROUP - O (COL)*          -- groupe de colonnes de table -->
<!ELEMENT COL      - O EMPTY           -- colonne de table -->
<!ELEMENT TR       - O (TH|TD)+        -- rangée de table -->
<!ELEMENT (TH|TD)  - O (%flow;)*       -- cellule de rubrique ou de données de table -->

<!ATTLIST TABLE                        -- élément table --
  %attrs;                              -- %coreattrs, %i18n, %events --
  summary     %Text;         #IMPLIED  -- objet/structure pour sortie vocale --
  width       %Length;       #IMPLIED  -- largeur de la table --
  border      %Pixels;       #IMPLIED  -- épaisseur du cadre autour de la table --
  frame       %TFrame;       #IMPLIED  -- quelles parties du cadre restituer --
  rules       %TRules;       #IMPLIED  -- règles entre rangées et colonnes --
  cellspacing %Length;       #IMPLIED  -- espacement entre cellules --
  cellpadding %Length;       #IMPLIED  -- espacement à l'intérieur des cellules --
  align       %TAlign;       #IMPLIED  -- position de la table par rapport à la fenêtre --
  bgcolor     %Color;        #IMPLIED  -- couleur d'arrière-plan des cellules --
  %reserved;                           -- réservé pour une possible utilisation future --
  datapagesize CDATA         #IMPLIED  -- réservé pour une possible utilisation future --
  >

<!ENTITY % CAlign "(top|bottom|left|right)">

<!ATTLIST CAPTION
  %attrs;                              -- %coreattrs, %i18n, %events --
  align       %CAlign;       #IMPLIED  -- relativement à la table --
  >

<!--
COLGROUP regroupe un jeu d'éléments COL. Il permet de regrouper
plusieurs colonnes en relation sémantique.
-->
<!ATTLIST COLGROUP
  %attrs;                              -- %coreattrs, %i18n, %events --
  span        NUMBER         1         -- nombre de colonnes par défaut dans le groupe --
  width       %MultiLength;  #IMPLIED  -- largeur par défaut des éléments COL contenus --
  %cellhalign;
  %cellvalign;                         -- alignement vertical dans les cellules --
  >

<!--
 Les éléments COL définissent les propriétés d'alignement
 des cellules dans une ou plusieurs colonnes.

 L'attribut WIDTH spécifie la largeur des colonnes, par exemple :

     width=64        largeur en pixelx écran
     width=0.5*      largeur relative de 0.5

 L'attribut SPAN entraîne l'application des attributs d'un élément COL
 sur plus d'une colonne.
-->
<!ATTLIST COL                          -- groupes et propriétés de colonnes --
  %attrs;                              -- %coreattrs, %i18n, %events --
  span        NUMBER         1         -- les attributs de COL affectent N colonnes --
  width       %MultiLength;  #IMPLIED  -- spécification de largeur de colonne --
  %cellhalign;                         -- alignement horizontal dans les cellules --
  %cellvalign;                         -- alignement vertical dans les cellules --
  >

<!--
    Utiliser THEAD pour dupliquer les en-têtes lors d'une rupture de la table
    hors des limites de la page, ou pour avoir des en-têtes statiques quand
    les sections TBODY sont restituées en panneau défilant.

    Utiliser TFOOT pour dupliquer les pieds lors d'une rupture de la table
    hors des limites de la page, ou pour avoir des pieds statiques quand
    les sections TBODY sont restituées en panneau défilant.

    Utiliser plusieurs sections TBODY quand il y a besoin de règles entre
    les groupes de rangées de table.
-->
<!ATTLIST (THEAD|TBODY|TFOOT)          -- section de table --
  %attrs;                              -- %coreattrs, %i18n, %events --
  %cellhalign;                         -- alignement horizontal dans les cellules --
  %cellvalign;                         -- alignement vertical dans les cellules --
  >

<!ATTLIST TR                           -- rangée de table --
  %attrs;                              -- %coreattrs, %i18n, %events --
  %cellhalign;                         -- alignement horizontal dans les cellules --
  %cellvalign;                         -- alignement vertical dans les cellules --
  bgcolor     %Color;        #IMPLIED  -- couleur d'arrière-plan pour une rangée --
  >

<!-- L'attribut scope est plus simple que l'attribut headers pour les tables communes -->
<!ENTITY % Scope "(row|col|rowgroup|colgroup)">

<!-- TH est pour les rubriques, TD pour les données, mais pour les cellules ambivalentes, utiliser TD -->
<!ATTLIST (TH|TD)                      -- cellule de rubrique, ou de données --
  %attrs;                              -- %coreattrs, %i18n, %events --
  abbr        %Text;         #IMPLIED  -- abréviation pour une cellule de rubrique --
  axis        CDATA          #IMPLIED  -- liste de rubriques en relation, séparées par des virgules --
  headers     IDREFS         #IMPLIED  -- liste des id des cellules de rubrique --
  scope       %Scope;        #IMPLIED  -- portée couverte par les cellules de rubrique --
  rowspan     NUMBER         1         -- nombre de rangées couvertes par la cellule --
  colspan     NUMBER         1         -- nombre de colonnes couvertes par la cellule --
  %cellhalign;                         -- alignement horizontal dans les cellules --
  %cellvalign;                         -- alignement vertical dans les cellules --
  nowrap      (nowrap)       #IMPLIED  -- supprime le saut de ligne --
  bgcolor     %Color;        #IMPLIED  -- couleur d'arrière-plan de la cellule --
  width       %Length;       #IMPLIED  -- largeur de la cellule --
  height      %Length;       #IMPLIED  -- hauteur de la cellule --
  >

<!--================== Cadres du document ===================================-->

<!--
  Le modèle de contenu des documents HTML dépend de ce qui suit
  la section HEAD, un élément FRAMESET ou bien BODY. L'absence
  courante de la balise ouvrante de BODY fait qu'il est irréaliste de
  définir le modèle de contenu sans utiliser une section marquée.
-->

<![ %HTML.Frameset; [
<!ELEMENT FRAMESET - - ((FRAMESET|FRAME)+ & NOFRAMES?) -- subdivision de fenêtre -->
<!ATTLIST FRAMESET
  %coreattrs;                          -- id, class, style, title --
  rows        %MultiLengths; #IMPLIED  -- liste de longueurs,
                                          par défaut : 100% (1 rangée) --
  cols        %MultiLengths; #IMPLIED  -- liste de longueurs,
                                          par défaut : 100% (1 colonne) --
  onload      %Script;       #IMPLIED  -- tous les cadres ont été chargés  --
  onunload    %Script;       #IMPLIED  -- tous les cadres ont été retirés --
  >
]]>

<![ %HTML.Frameset; [
<!-- Les noms de cadre réservés commencent par un caractère "_",
sinon ils commencent par une lettre -->
<!ELEMENT FRAME - O EMPTY              -- sous-fenêtre -->
<!ATTLIST FRAME
  %coreattrs;                          -- id, class, style, title --
  longdesc    %URI;          #IMPLIED  -- lien vers une description longue
                                          (complément de l'attribut title) --
  name        CDATA          #IMPLIED  -- nom du cadre pour ciblage --
  src         %URI;          #IMPLIED  -- source du contenu du cadre --
  frameborder (1|0)          1         -- bordure du cadre ou non --
  marginwidth %Pixels;       #IMPLIED  -- largeur des marges horizontales en pixels --
  marginheight %Pixels;      #IMPLIED  -- hauteur des marges verticales en pixels --
  noresize    (noresize)     #IMPLIED  -- autoriser le redimentionnement des cadres --
  scrolling   (yes|no|auto)  auto      -- barre de défilement ou pas --
  >
]]>

<!ELEMENT IFRAME - - (%flow;)*         -- sous-fenêtre en-ligne -->
<!ATTLIST IFRAME
  %coreattrs;                          -- id, class, style, title --
  longdesc    %URI;          #IMPLIED  -- lien vers une description longue
                                          (complément de l'attribut title) --
  name        CDATA          #IMPLIED  -- nom du cadre pour ciblage --
  src         %URI;          #IMPLIED  -- source du contenu du cadre --
  frameborder (1|0)          1         -- bordure du cadre ou non --
  marginwidth %Pixels;       #IMPLIED  -- largeur des marges horizontales en pixels --
  marginheight %Pixels;      #IMPLIED  -- hauteur des marges verticales en pixels --
  scrolling   (yes|no|auto)  auto      -- barre de défilement ou pas --
  align       %IAlign;       #IMPLIED  -- alignement vertical ou horizontal --
  height      %Length;       #IMPLIED  -- hauteur du cadre --
  width       %Length;       #IMPLIED  -- largeur du cadre --
  >

<![ %HTML.Frameset; [
<!ENTITY % noframes.content "(BODY) -(NOFRAMES)">
]]>

<!ENTITY % noframes.content "(%flow;)*">

<!ELEMENT NOFRAMES - - %noframes.content;
 -- conteneur de contenu de remplacement pour une restitution sans cadres -->
<!ATTLIST NOFRAMES
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

<!--================ En-tête du document =======================================-->
<!-- %head.misc; defined earlier on as "SCRIPT|STYLE|META|LINK|OBJECT" -->
<!ENTITY % head.content "TITLE & ISINDEX? & BASE?">

<!ELEMENT HEAD O O (%head.content;) +(%head.misc;) -- en-tête du document -->
<!ATTLIST HEAD
  %i18n;                               -- lang, dir --
  profile     %URI;          #IMPLIED  -- dictionnaire nommé de méta-informations --
  >

<!-- L'élément TITLE n'est pas considéré faire partie
       du flux de texte. Il devrait être restituté, par exemple, comme titre
       de la page ou titre de fenêtre. Il ne peut y avoir qu'un titre exactement par document.
    -->
<!ELEMENT TITLE - - (#PCDATA) -(%head.misc;) -- titre du document -->
<!ATTLIST TITLE %i18n>

<!ELEMENT ISINDEX - O EMPTY            -- invite sur une seule ligne -->
<!ATTLIST ISINDEX
  %coreattrs;                          -- id, class, style, title --
  %i18n;                               -- lang, dir --
  prompt      %Text;         #IMPLIED  -- message d'invite -->

<!ELEMENT BASE - O EMPTY               -- URI de base du document -->
<!ATTLIST BASE
  href        %URI;          #IMPLIED  -- URI qui fait office d'URI de base --
  target      %FrameTarget;  #IMPLIED  -- restituer dans ce cadre --
  >

<!ELEMENT META - O EMPTY               -- méta-information générique -->
<!ATTLIST META
  %i18n;                               -- lang, dir, à utiliser avec l'attribut content --
  http-equiv  NAME           #IMPLIED  -- nom de l'en-tête de réponse HTTP --
  name        NAME           #IMPLIED  -- nom de la méta-information --
  content     CDATA          #REQUIRED -- information associée --
  scheme      CDATA          #IMPLIED  -- selectionne la forme du contenu --
  >

<!ELEMENT STYLE - - %StyleSheet        -- info de style -->
<!ATTLIST STYLE
  %i18n;                               -- lang, dir, à utiliser avec l'attribut title --
  type        %ContentType;  #REQUIRED -- type de contenu du langage de style --
  media       %MediaDesc;    #IMPLIED  -- conçu pour ces médias --
  title       %Text;         #IMPLIED  -- titre consultatif --
  >

<!ELEMENT SCRIPT - - %Script;          -- déclarations de script -->
<!ATTLIST SCRIPT
  charset     %Charset;      #IMPLIED  -- encodage de caractères de la ressource reliée --
  type        %ContentType;  #REQUIRED -- type de contenu du langage de script --
  language    CDATA          #IMPLIED  -- nom de langage de script prédéfini --
  src         %URI;          #IMPLIED  -- URI d'un script externe --
  defer       (defer)        #IMPLIED  -- l'agent utilisateur peut différer l'exécution du script --
  event       CDATA          #IMPLIED  -- réservé pour une possible utilisation future --
  for         %URI;          #IMPLIED  -- réservé pour une possible utilisation future --
  >

<!ELEMENT NOSCRIPT - - (%flow;)*
  -- conteneur du contenu de remplacement pour une restitution sans scripts -->
<!ATTLIST NOSCRIPT
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

<!--================ Structure du document ==================================-->
<!ENTITY % version "version CDATA #FIXED '%HTML.Version;'">

<![ %HTML.Frameset; [
<!ENTITY % html.content "HEAD, FRAMESET">
]]>

<!ENTITY % html.content "HEAD, BODY">

<!ELEMENT HTML O O (%html.content;)    -- élément racine du document -->
<!ATTLIST HTML
  %i18n;                               -- lang, dir --
  %version;
  >


La définiton de type de document avec jeu d'encadrement HTML 4

23 La définition de type de document avec jeu d'encadrement

<!--
    Ceci est le DTD Frameset HTML 4.01, qui devrait être
    utilisé pour les documents avec cadres. Ce DTD est
    identique au DTD Transitional HTML 4.01, sauf pour le
    modèle de contenu de l'élément "HTML" :
    dans les documents avec jeu d'encadrement, l'élément
    "FRAMESET" remplace "BODY".

          Projet : $Date: 1999/12/24 23:20:08 $

          Auteurs :
              Dave Raggett <dsr@w3.org>
              Arnaud Le Hors <lehors@w3.org>
              Ian Jacobs <ij@w3.org>

    On trouvera plus d'informations sur HTML 4.01 à :

          http://www.w3.org/TR/1999/REC-html401-19991224.
-->
<!ENTITY % HTML.Version "-//W3C//DTD HTML 4.01 Frameset//EN"
  -- Typical usage:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
            "http://www.w3.org/TR/html4/frameset.dtd">
    <html>
    <head>
    ...
    </head>
    <frameset>
    ...
    </frameset>
    </html>
-->

<!ENTITY % HTML.Frameset "INCLUDE">
<!ENTITY % HTML4.dtd PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
%HTML4.dtd;


Les références des entités de caractères dans HTML 4

24 Les références des entités de caractères dans HTML 4

Sommaire

  1. Introduction aux références des entités de caractères
  2. Les références des entités de caractères pour les caractères ISO 8859-1
    1. La liste des caractères
  3. Les références des entités de caractères pour les symboles, les symboles mathématiques et les lettres grecques
    1. La liste des caractères
  4. Les références des entités de caractères des caractères qui sont significatifs pour le balisage et des caractères pour l'internationalisation
    1. La liste des caractères

24.1 Introduction aux références des entités de caractères

Une référence d'entité de caractère est une structure SGML qui appelle un caractère du jeu de caractères du document.

Cette version de HTML reconnaît plusieurs jeux de références d'entités de caractères :

  • les caractères ISO 8859-1 (Latin-1). Conformément à la section 14 du document [RFC1866], le jeu des entités Latin-1 a été prolongé par cette spécification pour couvrir la partie droite entière de ISO-8859-1 (toutes les positions de code avec le bit de niveau supérieur mis), y compris les entités couramment employées « &nbsp; », « &copy; » et « &reg; ». Les noms des entités sont issus des annexes de SGML (définis dans [ISO8879]) ;
  • les symboles, les symboles mathématiques et les lettres grecques. Ces caractères peuvent être représentés par des glyphes dans la police « Symbol » d'Adobe ;
  • les caractères significatifs pour le balisage et pour l'internationalisation (par exemple, pour un texte bi-directionnel).

Les sections suivantes présentent les listes complètes des références des entités de caractères. Bien que, par convention avec [ISO10646], les commentaires qui suivent chaque entrée soient habituellement écrits en lettres majuscules, nous les avons convertis en minuscules dans cette spécification pour des questions de lisibilité.

24.2 Les références des entités de caractères pour les caractères ISO 8859-1

Les références des entités de caractères dans cette section produisent les caractères dont les équivalents numériques devraient déjà être reconnus par les agent utilisateurs conformes à HTML 2.0. Ainsi, la référence d'entité de caractère « &divide; » est une forme plus commode que « &#247; » pour obtenir le signe de division.

Pour la gestion de ces entités nommées, les agents utilisateurs n'ont besoin que de reconnaître les noms des entités et de les convertir en caractères dans le répertoire [ISO88591].

Le caractère « 65533 » (FFFD en hexadécimal) est le dernier caractère valide dans UCS-2. Le caractère « 65534 » (FFFE en hexadécimal), qui n'est pas assigné, est réservé comme la version avec octet permuté du caractère ESPACE INSÉCABLE SANS CHASSE pour les besoins de la détection de l'ordre des octets. Le caractère « 65535 » (FFFF en hexadécimal) n'est pas assigné.

24.2.1 La liste des caractères

<!-- Certaines parties font l'objet d'un copyright de
     l'International Organization for Standardization 1986.
     La pemission de faire une copie, quelle que soit la forme de celle-ci,
     est accordée pour une utilisation avec les systèmes et les applications SGML,
     tels que définis dans la norme ISO 8879, pourvu que cet avis
     soit inclus dans toutes les copies.
-->
<!-- Le jeu des entités de caractères. Invocation typique :
     <!ENTITY % HTMLlat1 PUBLIC
       "-//W3C//ENTITIES Latin 1//EN//HTML">
     %HTMLlat1;
-->

<!ENTITY nbsp   CDATA "&#160;" -- espace insécable, U+00A0 ISOnum -->
<!ENTITY iexcl  CDATA "&#161;" -- point d'exclamation renversé, U+00A1 ISOnum -->
<!ENTITY cent   CDATA "&#162;" -- symbole centime, U+00A2 ISOnum -->
<!ENTITY pound  CDATA "&#163;" -- symbole livre, U+00A3 ISOnum -->
<!ENTITY curren CDATA "&#164;" -- symbole monétaire, U+00A4 ISOnum -->
<!ENTITY yen    CDATA "&#165;" -- symbole yen, U+00A5 ISOnum -->
<!ENTITY brvbar CDATA "&#166;" -- barre verticale discontinue, U+00A6 ISOnum -->
<!ENTITY sect   CDATA "&#167;" -- paragraphe, U+00A7 ISOnum -->
<!ENTITY uml    CDATA "&#168;" -- tréma, U+00A8 ISOdia -->
<!ENTITY copy   CDATA "&#169;" -- symbole copyright, U+00A9 ISOnum -->
<!ENTITY ordf   CDATA "&#170;" -- indicateur ordinal féminin, U+00AA ISOnum -->
<!ENTITY laquo  CDATA "&#171;" -- guillemet gauche, U+00AB ISOnum -->
<!ENTITY not    CDATA "&#172;" -- signe négation, U+00AC ISOnum -->
<!ENTITY shy    CDATA "&#173;" -- trait d'union virtuel, U+00AD ISOnum -->
<!ENTITY reg    CDATA "&#174;" -- symbole marque déposée, U+00AE ISOnum -->
<!ENTITY macr   CDATA "&#175;" -- macron, U+00AF ISOdia -->
<!ENTITY deg    CDATA "&#176;" -- symbole degré, U+00B0 ISOnum -->
<!ENTITY plusmn CDATA "&#177;" -- signe plus-ou-moins, U+00B1 ISOnum -->
<!ENTITY sup2   CDATA "&#178;" -- exposant deux, U+00B2 ISOnum -->
<!ENTITY sup3   CDATA "&#179;" -- exposant trois, U+00B3 ISOnum -->
<!ENTITY acute  CDATA "&#180;" -- accent aigu, U+00B4 ISOdia -->
<!ENTITY micro  CDATA "&#181;" -- symbole micro, U+00B5 ISOnum -->
<!ENTITY para   CDATA "&#182;" -- pied de mouche, U+00B6 ISOnum -->
<!ENTITY middot CDATA "&#183;" -- point médian, U+00B7 ISOnum -->
<!ENTITY cedil  CDATA "&#184;" -- cédille, U+00B8 ISOdia -->
<!ENTITY sup1   CDATA "&#185;" -- exposant un, U+00B9 ISOnum -->
<!ENTITY ordm   CDATA "&#186;" -- indicateur ordinal masculin, U+00BA ISOnum -->
<!ENTITY raquo  CDATA "&#187;" -- guillemet droite, U+00BB ISOnum -->
<!ENTITY frac14 CDATA "&#188;" -- fraction un quart, U+00BC ISOnum -->
<!ENTITY frac12 CDATA "&#189;" -- fraction un demi, U+00BD ISOnum -->
<!ENTITY frac34 CDATA "&#190;" -- fraction trois quarts, U+00BE ISOnum -->
<!ENTITY iquest CDATA "&#191;" -- point d'interrogation renversé, U+00BF ISOnum -->
<!ENTITY Agrave CDATA "&#192;" -- lettre majuscule latine A accent grave,
                                  U+00C0 ISOlat1 -->
<!ENTITY Aacute CDATA "&#193;" -- lettre majuscule latine A accent aigu,
                                  U+00C1 ISOlat1 -->
<!ENTITY Acirc  CDATA "&#194;" -- lettre majuscule latine A accent circonflexe,
                                  U+00C2 ISOlat1 -->
<!ENTITY Atilde CDATA "&#195;" -- lettre majuscule latine A tilde,
                                  U+00C3 ISOlat1 -->
<!ENTITY Auml   CDATA "&#196;" -- lettre majuscule latine A tréma,
                                  U+00C4 ISOlat1 -->
<!ENTITY Aring  CDATA "&#197;" -- lettre majuscule latine A rond en chef,
                                  U+00C5 ISOlat1 -->
<!ENTITY AElig  CDATA "&#198;" -- lettre majuscule latine AE,
                                  U+00C6 ISOlat1 -->
<!ENTITY Ccedil CDATA "&#199;" -- lettre majuscule latine C cédille,
                                  U+00C7 ISOlat1 -->
<!ENTITY Egrave CDATA "&#200;" -- lettre majuscule latine E accent grave,
                                  U+00C8 ISOlat1 -->
<!ENTITY Eacute CDATA "&#201;" -- lettre majuscule latine E accent aigu,
                                  U+00C9 ISOlat1 -->
<!ENTITY Ecirc  CDATA "&#202;" -- lettre majuscule latine E accent circonflexe,
                                  U+00CA ISOlat1 -->
<!ENTITY Euml   CDATA "&#203;" -- lettre majuscule latine E tréma,
                                  U+00CB ISOlat1 -->
<!ENTITY Igrave CDATA "&#204;" -- lettre majuscule latine I accent grave,
                                  U+00CC ISOlat1 -->
<!ENTITY Iacute CDATA "&#205;" -- lettre majuscule latine I accent aigu,
                                  U+00CD ISOlat1 -->
<!ENTITY Icirc  CDATA "&#206;" -- lettre majuscule latine I accent circonflex,
                                  U+00CE ISOlat1 -->
<!ENTITY Iuml   CDATA "&#207;" -- lettre majuscule latine I tréma,
                                  U+00CF ISOlat1 -->
<!ENTITY ETH    CDATA "&#208;" -- lettre majuscule latine ED, U+00D0 ISOlat1 -->
<!ENTITY Ntilde CDATA "&#209;" -- lettre majuscule latine N tilde,
                                  U+00D1 ISOlat1 -->
<!ENTITY Ograve CDATA "&#210;" -- lettre majuscule latine O accent grave,
                                  U+00D2 ISOlat1 -->
<!ENTITY Oacute CDATA "&#211;" -- lettre majuscule latine O accent aigu,
                                  U+00D3 ISOlat1 -->
<!ENTITY Ocirc  CDATA "&#212;" -- lettre majuscule latine O accent circonflexe,
                                  U+00D4 ISOlat1 -->
<!ENTITY Otilde CDATA "&#213;" -- lettre majuscule latine O tilde,
                                  U+00D5 ISOlat1 -->
<!ENTITY Ouml   CDATA "&#214;" -- lettre majuscule latine O tréma,
                                  U+00D6 ISOlat1 -->
<!ENTITY times  CDATA "&#215;" -- signe multiplication, U+00D7 ISOnum -->
<!ENTITY Oslash CDATA "&#216;" -- lettre majuscule latine O barré obliquement,
                                  U+00D8 ISOlat1 -->
<!ENTITY Ugrave CDATA "&#217;" -- lettre majuscule latine U accent grave,
                                  U+00D9 ISOlat1 -->
<!ENTITY Uacute CDATA "&#218;" -- lettre majuscule latine U accent aigu,
                                  U+00DA ISOlat1 -->
<!ENTITY Ucirc  CDATA "&#219;" -- lettre majuscule latine U accent circonflexe,
                                  U+00DB ISOlat1 -->
<!ENTITY Uuml   CDATA "&#220;" -- lettre majuscule latine U tréma,
                                  U+00DC ISOlat1 -->
<!ENTITY Yacute CDATA "&#221;" -- lettre majuscule latine Y accent aigu,
                                  U+00DD ISOlat1 -->
<!ENTITY THORN  CDATA "&#222;" -- lettre majuscule latine THORN,
                                  U+00DE ISOlat1 -->
<!ENTITY szlig  CDATA "&#223;" -- lettre minuscule latine s dur,
                                  U+00DF ISOlat1 -->
<!ENTITY agrave CDATA "&#224;" -- lettre minuscule latine a accent grave,
                                  U+00E0 ISOlat1 -->
<!ENTITY aacute CDATA "&#225;" -- lettre minuscule latine a accent aigu,
                                  U+00E1 ISOlat1 -->
<!ENTITY acirc  CDATA "&#226;" -- lettre minuscule latine a accent circonflexe,
                                  U+00E2 ISOlat1 -->
<!ENTITY atilde CDATA "&#227;" -- lettre minuscule latine a tilde,
                                  U+00E3 ISOlat1 -->
<!ENTITY auml   CDATA "&#228;" -- lettre minuscule latine a tréma,
                                  U+00E4 ISOlat1 -->
<!ENTITY aring  CDATA "&#229;" -- lettre minuscule latine a rond en chef,
                                  U+00E5 ISOlat1 -->
<!ENTITY aelig  CDATA "&#230;" -- lettre minuscule latine ae, U+00E6 ISOlat1 -->
<!ENTITY ccedil CDATA "&#231;" -- lettre minuscule latine c cédille,
                                  U+00E7 ISOlat1 -->
<!ENTITY egrave CDATA "&#232;" -- lettre minuscule latine e accent grave,
                                  U+00E8 ISOlat1 -->
<!ENTITY eacute CDATA "&#233;" -- lettre minuscule latine e accent aigu,
                                  U+00E9 ISOlat1 -->
<!ENTITY ecirc  CDATA "&#234;" -- lettre minuscule latine e accent circonflexe,
                                  U+00EA ISOlat1 -->
<!ENTITY euml   CDATA "&#235;" -- lettre minuscule latine e tréma,
                                  U+00EB ISOlat1 -->
<!ENTITY igrave CDATA "&#236;" -- lettre minuscule latine i accent grave,
                                  U+00EC ISOlat1 -->
<!ENTITY iacute CDATA "&#237;" -- lettre minuscule latine i accent aigu,
                                  U+00ED ISOlat1 -->
<!ENTITY icirc  CDATA "&#238;" -- lettre minuscule latine i accent circonflexe,
                                  U+00EE ISOlat1 -->
<!ENTITY iuml   CDATA "&#239;" -- lettre minuscule latine i tréma,
                                  U+00EF ISOlat1 -->
<!ENTITY eth    CDATA "&#240;" -- lettre minuscule latine ed, U+00F0 ISOlat1 -->
<!ENTITY ntilde CDATA "&#241;" -- lettre minuscule latine n tilde,
                                  U+00F1 ISOlat1 -->
<!ENTITY ograve CDATA "&#242;" -- lettre minuscule latine o accent grave,
                                  U+00F2 ISOlat1 -->
<!ENTITY oacute CDATA "&#243;" -- lettre minuscule latine o accent aigu,
                                  U+00F3 ISOlat1 -->
<!ENTITY ocirc  CDATA "&#244;" -- lettre minuscule latine o accent circonflexe,
                                  U+00F4 ISOlat1 -->
<!ENTITY otilde CDATA "&#245;" -- lettre minuscule latine o tilde,
                                  U+00F5 ISOlat1 -->
<!ENTITY ouml   CDATA "&#246;" -- lettre minuscule latine o tréma,
                                  U+00F6 ISOlat1 -->
<!ENTITY divide CDATA "&#247;" -- signe division, U+00F7 ISOnum -->
<!ENTITY oslash CDATA "&#248;" -- lettre minuscule latine o barré obliquement,
                                  U+00F8 ISOlat1 -->
<!ENTITY ugrave CDATA "&#249;" -- lettre minuscule latine u accent grave,
                                  U+00F9 ISOlat1 -->
<!ENTITY uacute CDATA "&#250;" -- lettre minuscule latine u accent aigu,
                                  U+00FA ISOlat1 -->
<!ENTITY ucirc  CDATA "&#251;" -- lettre minuscule latine u accent circonflexe,
                                  U+00FB ISOlat1 -->
<!ENTITY uuml   CDATA "&#252;" -- lettre minuscule latine u tréma,
                                  U+00FC ISOlat1 -->
<!ENTITY yacute CDATA "&#253;" -- lettre minuscule latine y accent aigu,
                                  U+00FD ISOlat1 -->
<!ENTITY thorn  CDATA "&#254;" -- lettre minuscule latine thorn,
                                  U+00FE ISOlat1 -->
<!ENTITY yuml   CDATA "&#255;" -- lettre minuscule latine y tréma,
                                  U+00FF ISOlat1 -->

24.3 Les références des entités de caractères pour les symboles, les symboles mathématiques et les lettres grecques

Les références des entités de caractères dans cette section produisent des caractères qui peuvent être représentés par des glyphes dans la police « Symbol » d'Adobe très répandue, y compris des caractères grecs, divers symboles de délimitation et une sélection d'opérateurs mathématiques tels que les symboles gradient, produit et somme.

Pour la gestion de ces entités, les agents utilisateurs peuvent gérer entièrement le jeu [ISO10646] ou employer d'autres moyens. Il est possible d'obtenir l'affichage des glyphes de ces caractères par la capacité d'afficher les caractères [ISO10646] concernés ou par d'autres moyens, comme en faisant correspondre de façon interne les entités, les références de caractère numériques et les caractères, qui sont listés, à la position adéquate dans une certaine police contenant les glyphes requis.

Quand utiliser les entités grecques. Ce jeu d'entités contient toutes les lettres utilisées en grec moderne. Cependant, il ne comprend pas la ponctuation, les caractères accentués pré-composés ni les accents sans chasse (tonos, dialytika) requis pour composer ces derniers. Il n'y a pas de lettres archaïques, de lettres coptes uniquement ou de lettres pré-composées pour le grec polytonique. Les entités définies ici ne sont pas destinées à la représentation d'un texte en grec moderne, celle-ci ne serait pas efficace ; elles se destinent plutôt aux lettres grecques occasionnelles utilisées dans les travaux techniques et mathématiques.

24.3.1 La liste des caractères

<!-- Les caractères symboliques, grecs et mathématiques pour HTML -->

<!-- Jeu d'entités de caractères. Invocation typique :
     <!ENTITY % HTMLsymbol PUBLIC
       "-//W3C//ENTITIES Symbols//EN//HTML">
     %HTMLsymbol; -->

<!-- Certaines parties font l'objet d'un copyright de
     l'International Organization for Standardization 1986.
     La pemission de faire une copie, quelle que soit la forme de celle-ci,
     est accordée pour une utilisation avec les systèmes et les applications SGML,
     tels que définis dans la norme ISO 8879, pourvu que cet avis
     soit inclus dans toutes les copies.
-->

<!-- On donne le jeu d'entités ISO concerné, à moins que
     les noms n'aient été récemment introduits.
     Les nouveaux noms (i.e., ceux qui ne sont pas dans la liste ISO 8879)
     n'entrent en conflit avec aucun nom d'entité ISO 8879 existant.
     On donne les numéros des caractères ISO 10646 en
     hexadécimal pour chaque caractère. Les valeurs de type
     CDATA sont les conversions décimales des valeurs ISO 10646 et
     se rapporte au jeu de caractères du document. Les noms sont
     des noms ISO 10646.

-->

<!-- Latin Extended-B -->
<!ENTITY fnof     CDATA "&#402;" -- lettre minuscule latine f hameçon,
                                    U+0192 ISOtech -->

<!-- Grec -->
<!ENTITY Alpha    CDATA "&#913;" -- lettre majuscule grecque alpha, U+0391 -->
<!ENTITY Beta     CDATA "&#914;" -- lettre majuscule grecque beta, U+0392 -->
<!ENTITY Gamma    CDATA "&#915;" -- lettre majuscule grecque gamma,
                                    U+0393 ISOgrk3 -->
<!ENTITY Delta    CDATA "&#916;" -- lettre majuscule grecque delta,
                                    U+0394 ISOgrk3 -->
<!ENTITY Epsilon  CDATA "&#917;" -- lettre majuscule grecque epsilon, U+0395 -->
<!ENTITY Zeta     CDATA "&#918;" -- lettre majuscule grecque zeta, U+0396 -->
<!ENTITY Eta      CDATA "&#919;" -- lettre majuscule grecque eta, U+0397 -->
<!ENTITY Theta    CDATA "&#920;" -- lettre majuscule grecque theta,
                                    U+0398 ISOgrk3 -->
<!ENTITY Iota     CDATA "&#921;" -- lettre majuscule grecque iota, U+0399 -->
<!ENTITY Kappa    CDATA "&#922;" -- lettre majuscule grecque kappa, U+039A -->
<!ENTITY Lambda   CDATA "&#923;" -- lettre majuscule grecque lambda,
                                    U+039B ISOgrk3 -->
<!ENTITY Mu       CDATA "&#924;" -- lettre majuscule grecque mu, U+039C -->
<!ENTITY Nu       CDATA "&#925;" -- lettre majuscule grecque nu, U+039D -->
<!ENTITY Xi       CDATA "&#926;" -- lettre majuscule grecque xi, U+039E ISOgrk3 -->
<!ENTITY Omicron  CDATA "&#927;" -- lettre majuscule grecque omicron, U+039F -->
<!ENTITY Pi       CDATA "&#928;" -- lettre majuscule grecque pi, U+03A0 ISOgrk3 -->
<!ENTITY Rho      CDATA "&#929;" -- lettre majuscule grecque rho, U+03A1 -->
<!-- Il n'y pas de caractère Sigmaf ni U+03A2 non plus -->
<!ENTITY Sigma    CDATA "&#931;" -- lettre majuscule grecque sigma,
                                    U+03A3 ISOgrk3 -->
<!ENTITY Tau      CDATA "&#932;" -- lettre majuscule grecque tau, U+03A4 -->
<!ENTITY Upsilon  CDATA "&#933;" -- lettre majuscule grecque upsilon,
                                    U+03A5 ISOgrk3 -->
<!ENTITY Phi      CDATA "&#934;" -- lettre majuscule grecque phi,
                                    U+03A6 ISOgrk3 -->
<!ENTITY Chi      CDATA "&#935;" -- lettre majuscule grecque chi, U+03A7 -->
<!ENTITY Psi      CDATA "&#936;" -- lettre majuscule grecque psi,
                                    U+03A8 ISOgrk3 -->
<!ENTITY Omega    CDATA "&#937;" -- lettre majuscule grecque omega,
                                    U+03A9 ISOgrk3 -->

<!ENTITY alpha    CDATA "&#945;" -- lettre minuscule grecque alpha,
                                    U+03B1 ISOgrk3 -->
<!ENTITY beta     CDATA "&#946;" -- lettre minuscule grecque beta, U+03B2 ISOgrk3 -->
<!ENTITY gamma    CDATA "&#947;" -- lettre minuscule grecque gamma,
                                    U+03B3 ISOgrk3 -->
<!ENTITY delta    CDATA "&#948;" -- lettre minuscule grecque delta,
                                    U+03B4 ISOgrk3 -->
<!ENTITY epsilon  CDATA "&#949;" -- lettre minuscule grecque epsilon,
                                    U+03B5 ISOgrk3 -->
<!ENTITY zeta     CDATA "&#950;" -- lettre minuscule grecque zeta, U+03B6 ISOgrk3 -->
<!ENTITY eta      CDATA "&#951;" -- lettre minuscule grecque eta, U+03B7 ISOgrk3 -->
<!ENTITY theta    CDATA "&#952;" -- lettre minuscule grecque theta,
                                    U+03B8 ISOgrk3 -->
<!ENTITY iota     CDATA "&#953;" -- lettre minuscule grecque iota, U+03B9 ISOgrk3 -->
<!ENTITY kappa    CDATA "&#954;" -- lettre minuscule grecque kappa,
                                    U+03BA ISOgrk3 -->
<!ENTITY lambda   CDATA "&#955;" -- lettre minuscule grecque lambda,
                                    U+03BB ISOgrk3 -->
<!ENTITY mu       CDATA "&#956;" -- lettre minuscule grecque mu, U+03BC ISOgrk3 -->
<!ENTITY nu       CDATA "&#957;" -- lettre minuscule grecque nu, U+03BD ISOgrk3 -->
<!ENTITY xi       CDATA "&#958;" -- lettre minuscule grecque xi, U+03BE ISOgrk3 -->
<!ENTITY omicron  CDATA "&#959;" -- lettre minuscule grecque omicron, U+03BF (NOUVEAU) -->
<!ENTITY pi       CDATA "&#960;" -- lettre minuscule grecque pi, U+03C0 ISOgrk3 -->
<!ENTITY rho      CDATA "&#961;" -- lettre minuscule grecque rho, U+03C1 ISOgrk3 -->
<!ENTITY sigmaf   CDATA "&#962;" -- lettre minuscule grecque final sigma,
                                    U+03C2 ISOgrk3 -->
<!ENTITY sigma    CDATA "&#963;" -- lettre minuscule grecque sigma,
                                    U+03C3 ISOgrk3 -->
<!ENTITY tau      CDATA "&#964;" -- lettre minuscule grecque tau, U+03C4 ISOgrk3 -->
<!ENTITY upsilon  CDATA "&#965;" -- lettre minuscule grecque upsilon,
                                    U+03C5 ISOgrk3 -->
<!ENTITY phi      CDATA "&#966;" -- lettre minuscule grecque phi, U+03C6 ISOgrk3 -->
<!ENTITY chi      CDATA "&#967;" -- lettre minuscule grecque chi, U+03C7 ISOgrk3 -->
<!ENTITY psi      CDATA "&#968;" -- lettre minuscule grecque psi, U+03C8 ISOgrk3 -->
<!ENTITY omega    CDATA "&#969;" -- lettre minuscule grecque omega,
                                    U+03C9 ISOgrk3 -->
<!ENTITY thetasym CDATA "&#977;" -- lettre minuscule grecque theta symbol,
                                    U+03D1 (NOUVEAU) -->
<!ENTITY upsih    CDATA "&#978;" -- symbole grec upsilon crochet,
                                    U+03D2 (NOUVEAU) -->
<!ENTITY piv      CDATA "&#982;" -- symbole grec pi, U+03D6 ISOgrk3 -->

<!-- Ponctuation générale -->
<!ENTITY bull     CDATA "&#8226;" -- puce, U+2022 ISOpub  -->
<!-- Ce N'EST PAS la même chose que l'opérateur puce, U+2219 -->
<!ENTITY hellip   CDATA "&#8230;" -- points de suspension,
                                     U+2026 ISOpub  -->
<!ENTITY prime    CDATA "&#8242;" -- prime, U+2032 ISOtech -->
<!ENTITY Prime    CDATA "&#8243;" -- double prime, U+2033 ISOtech -->
<!ENTITY oline    CDATA "&#8254;" -- tiret en chef, U+203E (NOUVEAU) -->
<!ENTITY frasl    CDATA "&#8260;" -- barre de fraction, U+2044 (NOUVEAU) -->

<!-- Symboles ressemblant à des lettres -->
<!ENTITY weierp   CDATA "&#8472;" -- fonction elliptique de Weierstrass,
                                     U+2118 ISOamso -->
<!ENTITY image    CDATA "&#8465;" -- majuscule I gothique = partie imaginaire,
                                     U+2111 ISOamso -->
<!ENTITY real     CDATA "&#8476;" -- majuscule R gothique = partie réelle,
                                     U+211C ISOamso -->
<!ENTITY trade    CDATA "&#8482;" -- symbole marque commerciale, U+2122 ISOnum -->
<!ENTITY alefsym  CDATA "&#8501;" -- symbole alef = premier nombre transfini,
                                     U+2135 (NOUVEAU) -->
<!-- Le symbole alef N'EST PAS pareil à la lettre hébreue alef,
     U+05D0 même si on pourrait utiliser le même glyphe pour représenter
     les deux caractères -->

<!-- Flèches -->
<!ENTITY larr     CDATA "&#8592;" -- flèche vers la gauche, U+2190 ISOnum -->
<!ENTITY uarr     CDATA "&#8593;" -- flèche vers le haut, U+2191 ISOnum-->
<!ENTITY rarr     CDATA "&#8594;" -- flèche vers la droite, U+2192 ISOnum -->
<!ENTITY darr     CDATA "&#8595;" -- flèche vers le bas, U+2193 ISOnum -->
<!ENTITY harr     CDATA "&#8596;" -- flèche bilatérale, U+2194 ISOamsa -->
<!ENTITY crarr    CDATA "&#8629;" -- flèche vers le bas avec coin vers la gauche
                                     = retour de chariot, U+21B5 (NOUVEAU) -->
<!ENTITY lArr     CDATA "&#8656;" -- double flèche vers la gauche, U+21D0 ISOtech -->
<!-- ISO 10646 ne dit pas que lArr est la même chose que la flèche 'est impliqué par'
    et n'a pas non plus d'autre caractère pour cette fonction. Alors ?
    On peut utiliser lArr pour 'est impliqué par' comme le suggère ISOtech -->
<!ENTITY uArr     CDATA "&#8657;" -- double flèche vers le haut, U+21D1 ISOamsa -->
<!ENTITY rArr     CDATA "&#8658;" -- double flèche vers la droite,
                                     U+21D2 ISOtech -->
<!-- ISO 10646 ne dit pas qu'il s'agit du caractère 'implique' et n'a pas non plus
     d'autre caractère avec cette fonction. Alors ? On peut utiliser rArr pour 'implique'
     comme le suggère ISOtech -->
<!ENTITY dArr     CDATA "&#8659;" -- double flèche vers le bas, U+21D3 ISOamsa -->
<!ENTITY hArr     CDATA "&#8660;" -- double flèche bilatérale
                                     U+21D4 ISOamsa -->

<!-- Opérateurs mathématiques -->
<!ENTITY forall   CDATA "&#8704;" -- pour tous, U+2200 ISOtech -->
<!ENTITY part     CDATA "&#8706;" -- dérivée partielle, U+2202 ISOtech  -->
<!ENTITY exist    CDATA "&#8707;" -- il existe, U+2203 ISOtech -->
<!ENTITY empty    CDATA "&#8709;" -- ensemble vide = symbole diamètre,
                                     U+2205 ISOamso -->
<!ENTITY nabla    CDATA "&#8711;" -- nabla, U+2207 ISOtech -->
<!ENTITY isin     CDATA "&#8712;" -- appartient à, U+2208 ISOtech -->
<!ENTITY notin    CDATA "&#8713;" -- n'appartient pas à, U+2209 ISOtech -->
<!ENTITY ni       CDATA "&#8715;" -- contient comme élément, U+220B ISOtech -->
<!-- Est-ce qu'il ne pourrait pas y avoir un nom plus parlant que 'ni' ? -->
<!ENTITY prod     CDATA "&#8719;" -- produit de la famille = signe produit,
                                     U+220F ISOamsb -->
<!-- prod N'EST PAS le même caractère que U+03A0 'lettre capitale grecque pi'
     même si le même glyphe peut s'utiliser pour les deux -->
<!ENTITY sum      CDATA "&#8721;" -- sommation de la famille, U+2211 ISOamsb -->
<!-- sum N'EST PAS le même caractère que U+03A3 'ettre capitale grecque sigma'
     même si le même glyphe peut s'utiliser pour les deux -->
<!ENTITY minus    CDATA "&#8722;" -- signe moins, U+2212 ISOtech -->
<!ENTITY lowast   CDATA "&#8727;" -- opérateur astérisque, U+2217 ISOtech -->
<!ENTITY radic    CDATA "&#8730;" -- racine carrée = signe radical,
                                     U+221A ISOtech -->
<!ENTITY prop     CDATA "&#8733;" -- proportionnel à, U+221D ISOtech -->
<!ENTITY infin    CDATA "&#8734;" -- infini, U+221E ISOtech -->
<!ENTITY ang      CDATA "&#8736;" -- angle, U+2220 ISOamso -->
<!ENTITY and      CDATA "&#8743;" -- ET logique, U+2227 ISOtech -->
<!ENTITY or       CDATA "&#8744;" -- OU logique, U+2228 ISOtech -->
<!ENTITY cap      CDATA "&#8745;" -- intersection = cap, U+2229 ISOtech -->
<!ENTITY cup      CDATA "&#8746;" -- union = cup, U+222A ISOtech -->
<!ENTITY int      CDATA "&#8747;" -- intégrale, U+222B ISOtech -->
<!ENTITY there4   CDATA "&#8756;" -- par conséquent, U+2234 ISOtech -->
<!ENTITY sim      CDATA "&#8764;" -- opérateur tilde = varie avec = similaire à,
                                     U+223C ISOtech -->
<!-- L'opérateur tilde N'EST PAS le même caractère que le tilde U+007E,
     même si le même glyphe peut s'utiliser pour les deux -->
<!ENTITY cong     CDATA "&#8773;" -- approximativement égal à, U+2245 ISOtech -->
<!ENTITY asymp    CDATA "&#8776;" -- presque égal à = asymptotique à,
                                     U+2248 ISOamsr -->
<!ENTITY ne       CDATA "&#8800;" -- pas égal à, U+2260 ISOtech -->
<!ENTITY equiv    CDATA "&#8801;" -- identique à, U+2261 ISOtech -->
<!ENTITY le       CDATA "&#8804;" -- plus petit ou égal à, U+2264 ISOtech -->
<!ENTITY ge       CDATA "&#8805;" -- plus grand ou égal à,
                                     U+2265 ISOtech -->
<!ENTITY sub      CDATA "&#8834;" -- sous-ensemble de, U+2282 ISOtech -->
<!ENTITY sup      CDATA "&#8835;" -- sur-ensemble de, U+2283 ISOtech -->
<!-- Remarquez que nsup 'pas un sur-ensemble de', U+2285, n'est pas couvert par
     le codage de la police Symbol. Devrait-il l'être par symétrie ?
     Il est dans ISOamsn  -->
<!ENTITY nsub     CDATA "&#8836;" -- pas un sous-ensemble de, U+2284 ISOamsn -->
<!ENTITY sube     CDATA "&#8838;" -- sous-ensemble ou égal à, U+2286 ISOtech -->
<!ENTITY supe     CDATA "&#8839;" -- sur-ensemble de ou égal à,
                                     U+2287 ISOtech -->
<!ENTITY oplus    CDATA "&#8853;" -- plus cerclé = somme directe,
                                     U+2295 ISOamsb -->
<!ENTITY otimes   CDATA "&#8855;" -- multiplié par cerclé = produit vectoriel,
                                     U+2297 ISOamsb -->
<!ENTITY perp     CDATA "&#8869;" -- taquet vers le haut = orthogonal à = perpendiculaire,
                                     U+22A5 ISOtech -->
<!ENTITY sdot     CDATA "&#8901;" -- opérateur point, U+22C5 ISOamsb -->
<!-- L'opérateur point N'EST PAS le même caractère que le 'point médian', U+00B7 -->

<!-- Techniques divers -->
<!ENTITY lceil    CDATA "&#8968;" -- plafond à gauche = anglet gauche,
                                     U+2308 ISOamsc  -->
<!ENTITY rceil    CDATA "&#8969;" -- plafond à droite, U+2309 ISOamsc  -->
<!ENTITY lfloor   CDATA "&#8970;" -- plancher à gauche,
                                     U+230A ISOamsc  -->
<!ENTITY rfloor   CDATA "&#8971;" -- plancher à droite, U+230B ISOamsc  -->
<!ENTITY lang     CDATA "&#9001;" -- chevron vers la gauche,
                                     U+2329 ISOtech -->
<!-- lang N'EST PAS le même caractère que U+003C 'inférieur à'
     ou U+2039 'guillemet simple vers la gauche' -->
<!ENTITY rang     CDATA "&#9002;" -- chevron vers la droite,
                                     U+232A ISOtech -->
<!-- rang iN'EST PAS le même caractère que U+003E 'supérieur à'
     ou U+203A 'guillemet simple vers la droite' -->

<!-- Formes géométriques -->
<!ENTITY loz      CDATA "&#9674;" -- losange, U+25CA ISOpub -->

<!-- Symboles divers -->
<!ENTITY spades   CDATA "&#9824;" -- pique noir, U+2660 ISOpub -->
<!-- Noir semble dire ici rempli par opposition à ajouré -->
<!ENTITY clubs    CDATA "&#9827;" -- trèfle noir,
                                     U+2663 ISOpub -->
<!ENTITY hearts   CDATA "&#9829;" -- cœur noir,
                                     U+2665 ISOpub -->
<!ENTITY diams    CDATA "&#9830;" -- carreau noir, U+2666 ISOpub -->

24.4 Les références des entités de caractères des caractères qui sont significatifs pour le balisage et des caractères pour l'internationalisation

Les références des entités de caractères dans cette section concernent l'échappement des caractères significatifs pour le balisage (ce sont les mêmes que ceux dans HTML 2.0 et dans HTML 3.2) et l'indication des espaces et tirets. D'autres caractères dans la section concernent les questions d'internationalisation, telle que la levée de l'ambiguïté dans un texte bi-directionnel (voir la section sur le texte bi-directionnel pour des précisions).

Des entités ont également été ajoutées pour les caractères restants qui apparaissent dans le jeu CP-1252 mais pas dans les jeux d'entités HTMLlat1 ou HTMLsymbol. Tous ceux-ci se trouvent dans l'intervalle de 128 à 159 dans le jeu de caractères CP-1252. Ces entités permettent aux caractères d'apparaître indépendamment de la plate-forme.

Pour la gestion de ces entités, les agents utilisateurs peuvent gérer entièrement le jeu [ISO10646] ou employer d'autres moyens. Il est possible d'obtenir l'affichage des glyphes de ces caractères par la capacité d'afficher les caractères [ISO10646] concernés ou par d'autres moyens, comme en faisant correspondre de façon interne les entités, les références de caractère numériques et les caractères, qui sont listés, à la position adéquate dans une certaine police contenant les glyphes requis.

24.4.1 La liste des caractères

<!-- Caractères spéciaux pour HTML -->

<!-- Jeu d'entités de caractères. Invocation typique :
     <!ENTITY % HTMLspecial PUBLIC
       "-//W3C//ENTITIES Special//EN//HTML">
     %HTMLspecial; -->

<!-- Certaines parties font l'objet d'un copyright de
     l'International Organization for Standardization 1986.
     La pemission de faire une copie, quelle que soit la forme de celle-ci,
     est accordée pour une utilisation avec les systèmes et les applications SGML,
     tels que définis dans la norme ISO 8879, pourvu que cet avis
     soit inclus dans toutes les copies.
-->

<!-- On donne le jeu d'entités ISO concerné, à moins que
     les noms n'aient été récemment introduits.
     Les nouveaux noms (i.e., ceux qui ne sont pas dans la liste ISO 8879)
     n'entrent en conflit avec aucun nom d'entité ISO 8879 existant.
     On donne les numéros des caractères ISO 10646 en
     hexadécimal pour chaque caractère. Les valeurs de type
     CDATA sont les conversions décimales des valeurs ISO 10646 et
     se rapporte au jeu de caractères du document. Les noms sont
     des noms ISO 10646.

-->

<!-- Contrôles C0 et Latin de base -->
<!ENTITY quot    CDATA "&#34;"   -- guillemet anglais = guillemet APL,
                                    U+0022 ISOnum -->
<!ENTITY amp     CDATA "&#38;"   -- esperluette, U+0026 ISOnum -->
<!ENTITY lt      CDATA "&#60;"   -- signe inférieur à, U+003C ISOnum -->
<!ENTITY gt      CDATA "&#62;"   -- signe supérieur à, U+003E ISOnum -->

<!-- Latin Extended-A -->
<!ENTITY OElig   CDATA "&#338;"  -- ligature majuscule latine OE,
                                    U+0152 ISOlat2 -->
<!ENTITY oelig   CDATA "&#339;"  -- ligature minuscule latine oe, U+0153 ISOlat2 -->
<!-- Le mot ligature est malvenu, c'est un caractère distinct dans certaines langues -->
<!ENTITY Scaron  CDATA "&#352;"  -- lettre majuscule latine S caron,
                                    U+0160 ISOlat2 -->
<!ENTITY scaron  CDATA "&#353;"  -- lettre minuscule latine s caron,
                                    U+0161 ISOlat2 -->
<!ENTITY Yuml    CDATA "&#376;"  -- lettre majuscule latine Y tréma,
                                    U+0178 ISOlat2 -->

<!-- Lettres modificatives de l'espacement -->
<!ENTITY circ    CDATA "&#710;"  -- lettre modificative accent circonflexe,
                                    U+02C6 ISOpub -->
<!ENTITY tilde   CDATA "&#732;"  -- petit tilde, U+02DC ISOdia -->

<!-- Ponctuation générale -->
<!ENTITY ensp    CDATA "&#8194;" -- espace demi-cadratin, U+2002 ISOpub -->
<!ENTITY emsp    CDATA "&#8195;" -- espace cadratin, U+2003 ISOpub -->
<!ENTITY thinsp  CDATA "&#8201;" -- espace fine, U+2009 ISOpub -->
<!ENTITY zwnj    CDATA "&#8204;" -- antiliant sans chasse,
                                    U+200C (NOUVEAU) RFC 2070 -->
<!ENTITY zwj     CDATA "&#8205;" -- liant sans chasse, U+200D (NOUVEAU) RFC 2070 -->
<!ENTITY lrm     CDATA "&#8206;" -- marque gauche-à-droite, U+200E (NOUVEAU) RFC 2070 -->
<!ENTITY rlm     CDATA "&#8207;" -- marque droite-à-gauche, U+200F (NOUVEAU) RFC 2070 -->
<!ENTITY ndash   CDATA "&#8211;" -- tiret demi-cadratin, U+2013 ISOpub -->
<!ENTITY mdash   CDATA "&#8212;" -- tiret cadratin, U+2014 ISOpub -->
<!ENTITY lsquo   CDATA "&#8216;" -- guillemet-apostrophe culbuté,
                                    U+2018 ISOnum -->
<!ENTITY rsquo   CDATA "&#8217;" -- guillemet-apostrophe,
                                    U+2019 ISOnum -->
<!ENTITY sbquo   CDATA "&#8218;" -- guillemet-virgule inférieur, U+201A (NOUVEAU) -->
<!ENTITY ldquo   CDATA "&#8220;" -- guillemet-apostrophe double culbuté,
                                    U+201C ISOnum -->
<!ENTITY rdquo   CDATA "&#8221;" -- guillemet-apostrophe double,
                                    U+201D ISOnum -->
<!ENTITY bdquo   CDATA "&#8222;" -- guillemet-virgule double inférieur, U+201E (NOUVEAU) -->
<!ENTITY dagger  CDATA "&#8224;" -- obèle, U+2020 ISOpub -->
<!ENTITY Dagger  CDATA "&#8225;" -- double obèle, U+2021 ISOpub -->
<!ENTITY permil  CDATA "&#8240;" -- symbole pour mille, U+2030 ISOtech -->
<!ENTITY lsaquo  CDATA "&#8249;" -- guillemet simple vers la gauche,
                                    U+2039 proposé ISO -->
<!-- lsaquo est proposé mais pas encore normalisé par l'ISO -->
<!ENTITY rsaquo  CDATA "&#8250;" -- guillemet simple vers la droite,
                                    U+203A proposé ISO -->
<!-- rsaquo est proposé mais pas encore normalisé par l'ISO -->
<!ENTITY euro   CDATA "&#8364;"  -- symbole euro, U+20AC (NOUVEAU) -->


Les changements par rapport à HTML 4

Appendice A : Changements

Sommaire

  1. Les changements survenus entre la version HTML 4 du 24 avril 1998 et la version HTML 4.01 du 24 décembre 1999
    1. Les changements apportés à la spécification
      • Les changements généraux
      • À propos de SGML et HTML
      • La représentation du document HTML
      • Les types de données HTML de base
      • La structure globale du document HTML
      • Les indications de langue et la direction du texte
      • Les tables
      • Les liens
      • Les objets, les images et les applets
      • Les feuilles de style dans les documents HTML
      • Les cadres
      • Les formulaires
      • La déclaration SGML
      • Le DTD strict
      • Remarques
      • Références
    2. Les erreurs corrigées
    3. Les erreurs typographiques mineures corrigées
    4. Les éclaircissements
    5. Les problèmes connus des navigateurs
  2. Les changements survenus entre la version du 18 décembre1997 et celle du 24 avril 1998
    1. Les erreurs corrigées
    2. Les erreurs typographiques mineures corrigées
  3. Les changements survenus entre HTML 3.2 et HTML 4 (18 décembre 1997)
    1. Les changements sur les éléments
      • Les nouveaux éléments
      • Les éléments déconseillés
      • Les éléments obsolètes
    2. Les changements sur les attributs
    3. Les changements pour l'accessibilité
    4. Les changements pour les métadonnées
    5. Les changements pour le texte
    6. Les changements pour les liens
    7. Les changements pour les tables
    8. Les changements pour les images, les objets et les images cliquables
    9. Les changements pour les formulaires
    10. Les changements pour les feuilles de style
    11. Les changements pour les cadres
    12. Les changements pour les scripts
    13. Les changements pour l'internationalisation

A.1 Les changements survenus entre la version HTML 4 du 24 avril 1998 et la version HTML 4.01 du 24 décembre 1999

Cette section décrit en quoi la version du 24 décembre 1999 de la spécification HTML 4.01 diffère de la version du 24 avril 1990 de la spécification HTML 4

A.1.1 Les changements apportés à la spécification

Les changements généraux

  • Des nouvelles feuilles de style pour le document, fondées sur les styles des documents techniques du W3C ;
  • Ajout d'une table des matières abrégée ;
  • Mise à jour du copyright ;
  • Réparation des scripts du document pour retirer le balisage entraînant le plantage de certains navigateurs ;
  • Remerciements à Shane McCarron ajoutés dans la liste des remerciements ;
  • Dans la section 1.4, retrait des détails sur le copyright qui sont reportés sur le site du W3C à la place ;
  • Les références au jeu de caractères du document sont toutes vers ISO 10646 (et une seule fois à UNICODE pour signaler l'équivalence). Les références à UNICODE se rapportent seulement à l'algorithme bi-directionnel ;
  • Les exemples utilisent maintenant des FPI datés.

À propos de SGML et HTML

  • Section 3.2.2: Les valeurs des attributs peuvent tout aussi bien contenir des caractères deux-points « : » et soulignés « _ ».

La représentation du document HTML

  • Le jeu de caractères du document : on utilise désormais l'appellation [ISO10646] seulement pour les références au jeu de caractères du document. Le terme [UNICODE] est réservé aux références en relation avec l'algorithme bidi.

Les types de données HTML de base

  • Les descripteurs de média : tous les caractères dans les exemples sont maintenant décrits en utilisant une notation hexadécimale (et une référence à la norme ISO 10646 plutôt qu'à Unicode).

La structure globale du document HTML

  • 7.2 L'indication de version HTML : comporte une remarque du groupe de travail HTML qui s'engage sur les points suivants :
    • aucun changement effectué sur les DTD de HTML 4 ne viendra invalider les documents qui sont conformes aux DTD de la présente spécification. Le groupe de travail HTML se réserve le droit de corriger les erreurs connues ;
    • un logiciel conforme aux DTD de la présente spécification peut ignorer les fonctionnalités des DTD de HTML 4 futurs qu'il ne reconnaît pas.
  • 7.2 L'indication de version HTML : utilise des URI HTML 4 pour les identifiants de système. On utilise aussi ces URI globalement dans tous les exemples ;
  • 7.4.4 Les métadonnées : retiré une remarque à propos des travaux en cours sur les métadonnées au W3C et remplacé celle-ci par une remarque sur RDF ;
  • 7.4.4.2 Les métadonnées : à la fin de la section sur les en-têtes HTTP, supprimé l'exemple de rafraîchissement automatique (car cela ne fait pas partie de la recommandation) et ajouté une remarque sur l'utilisation des redirections côté serveur.

Les indications de langue et la direction du texte

  • L'attribut dir : un éclaircissement pour dire que l'attribut dir s'applique au contenu de l'élément, aux valeurs des attributs et à la direction des tables.

Les tables

  • 11.2.6 Les cellules de la table : les définitions des attributs rowspan et colspan ont changé. Maintenant les couvertures [ndt. spans] sont bornées par les groupes (groupes de rangées ou de colonnes) ;
  • 11.3.2 Les cellules de la table : quand la déclaration "char=align" n'est pas reconnue par l'agent utilisateur, le comportement n'est pas défini.

Les liens

  • 12.2 L'élément A : la description de l'attribut type des éléments A et (et LINK) a été modifiée pour mettre en évidence son côté consultatif ;
  • 12.2.3 Les ancres avec un attribut id : les attributs name et id peuvent légalement apparaître dans la même balise ouvrante quand ils sont tous deux définis pour un élément. Ils doivent avoir des valeurs identiques ;
  • 12.3.3 Les liens et les moteurs de recherche : retiréla référence à l'attribut dir dans l'exemple, car celui-ci ne s'applique qu'aux ressources reliées (au contenu de l'élément et aux valeurs textuelles des attributs seulement) ;
  • 12.4.1 La résolution des URI relatifs : étant donné que le document RFC 2616 n'inclut aucun champs d'en-tête « Link », la déclaration suivante est qualifiée pour les versions précédentes de HTTP 1.1 : « Les éléments "Link" spécifiés par les en-têtes HTTP sont gérés exactement comme les éléments "LINK" qui apparaissent explicitement dans un document ».

Les objets, les images et les applets

  • 13.2 L'élément IMG : rajout de l'attribut name pour la rétro-compatibilité ;
  • 13.2 L'élément IMG : ajouté une remarque selon laquelle les agents utilisateurs doivent fournir des mécanismes distincts pour accéder à l'URI de l'attribut longdesc (IMG) et à celui de l'attribut src (A), quand l'élément IMG est contenu dans l'élément A ;
  • 13.3 L'élément OBJECT : ajouté une remarque selon laquelle, quand la valeur de l'attribut type de l'élément OBJECT et l'en-tête HTTP « Content-Type » diffèrent, c'est ce dernier qui a priorité ;
  • 13.3 L'élément OBJECT : ajouté une déclaration selon laquelle il faut utiliser l'élément PARAM plutôt que les attributs data et classid ensemble avec l'élément OBJECT ;
  • 13.4 L'élément APPLET : ajouté une remarque selon laquelle, pour des raisons de sécurité, seuls les sous-répertoires sont explorés pour l'attribut codebase de l'élément APPLET ;
  • 13.6.1 Les images cliquables côté client : la définition de l'attribut poly a été clarifiée. Une remarque précise que si le polygone n'est pas clos par l'auteur, ce sont les agents utilisateurs qui doivent le clore pour l'attribut coords de l'élément AREA ;
  • 13.6.1 Les images cliquables côté client :
    • le modèle de contenu de l'élément MAP autorise maintenant l'auteur à mélanger le contenu d'un élément AREA et le contenu d'un élément de type bloc ;
    • les agents utilisateurs devraient restituer le contenu d'un élément de bloc (auparavant, c'était « peuvent ») ;
    • l'élément MAP peut s'utiliser sans image pour les outils de navigation universels ;
    • les agents utilisateurs doivent ignorer les éléments AREA quand le contenu est mixte (éléments AREA et de type bloc) ;
    • les auteurs devraient spécifier entièrement les géométries, soit avec des éléments AREA, soit avec des éléments A en contenu d'un élément de type bloc, soit avec les deux.
  • 13.7.2 et 13.7.3 : les définitions des attributs vspace et hspace ressemblent maintenant à celles des autres attributs ;
  • 13.7.2 et 13.7.3 : le type des valeurs des attributs vspace, hspace et border a été changé de « length » à « pixels » ;
  • 13.8 Le texte de remplacement : la dernière phrase de la section est maintenant reliée aux remarques sur la gestion du texte vide d'un attribut alt par l'agent utilisateur.

Les feuilles de style dans les documents HTML

  • 14.6 Le rattachement des feuilles de style avec les en-têtes HTTP : comme le document RFC 2616 ne comprend pas de champs d'en-tête « Link », la section entière ne s'applique qu'aux versions précédentes de HTTP 1.1.

Les cadres

  • 16.4.1 L'élément NOFRAMES : ajouté une remarque à la description de l'élément NOFRAMES à propos de la restitution (1) quand les cadres sont inactivés et (2) quand ils ne sont pas reconnus ;
  • 16.4.1 L'élément NOFRAMES : ajouté une remarque à propos des DTD qui admettent l'élément NOFRAMES (jeu d'encadrement et transitoire).

Les formulaires

  • 17.2.1 Les types de commande : dans la description des boutons radio, quand aucun bouton radio n'est initialement sélectionné, le comportement de l'agent utilisateur n'est pas défini. Ce qui diffère du document RFC 1866 ;
  • 17.3 L'élément FORM : rajout de l'attribut name pour la rétro-compatibilité ;
  • 17.3 L'élément FORM : retiré la référence à l'URI « mailto » dans la définition de l'attribut action ;
  • 17.3 L'élément FORM : retiré l'exemple « mailto » vers la fin de la section, car le comportement n'est pas défini dans cette spécification ;
  • 17.3 L'élément FORM : l'attribut accept est ajouté au fragment de DTD. La description de l'attribut accept-charset est également amendée ;
  • 17.4 L'élément INPUT : ajouté l'attribut ismap manquant pour l'élément INPUT. Également, dans la définition de l'attribut value, ajouté la valeur "checkbox" à celles pour l'attribut type qui requiert une valeur ;
  • 17.6.1: quand aucune option n'est sélectionnée, le comportement de l'agent utilisateur n'est pas défini. Les auteurs devraient fournir une option par défaut pour tenir compte de ce cas. Ce comportement diffère par rapport au document RFC 1866.

La déclaration SGML

  • La déclaration SGML de HTML 4 : retiré le texte concernant les références à jour à la norme ISO 10646. Remplacé par : « Les révision de la spécification HTML 4 peuvent mettre à jour la référence à la norme ISO 10646 pour inclure des changements supplémentaires. »

Le DTD strict

  • les valeurs des attributs vspace, hspace et border des élément IMG, OBJECT et APPLET sont en pixels ;
  • changé le modèle de contenu de l'élément MAP pour ((%block;) | AREA)+ ;
  • ajouté l'attribut ismap à l'élément INPUT ;
  • l'attribut accept est ajouté au fragment de DTD de l'élément FORM ;
  • le commentaire de l'attribut axis a été changé pour se reférer à une liste dont les valeurs sont séparées par des virgules ;
  • l'attribut archive de l'élément OBJECT prend une valeur de type CDATA au lieu de type %URI, parce que la valeur est une liste d'URI, séparés par des espaces.

Remarques

  • Remarques sur l'accessibilité : remarques mises à jour pour pointer les principes directeurs pour l'accessibilité du contenu Web (WCAG).

Références

  • liens vers les documents RFC mis à jour pour utiliser l'adresse « http://www.ietf.org/rfc » ;
  • placé des liens dans les titres ;
  • ajouté la date révisée du 27 janvier 1998 pour [DATETIME] ;
  • ajouté la date révisée du 11 janvier 1999 pour [CSS1] ;
  • date de publication de [CSS2] corrigée ;
  • [UNICODE] a été mis à jour en version 3.0 ;
  • [ISO10646] a été mis à jour pour autoriser l'assignement de nouveaux caractères. Remarquez que le cinquième amendement est spécifiquement pris en compte ;
  • [RFC1766] censé être mis à jour ;
  • [RFC2279] remplace [RFC2044] ;
  • [RFC2616] remplace [RFC2068] ;
  • [RFC2388] ajouté en complément de [RFC1867] ;
  • [LEXHTML] adresse mise à jour, date ajoutée ;
  • [DCORE] adresse mise à jour ;
  • mis à jour [WEBSGML] ;
  • [HTML3STYLE] adresse mise à jour ;
  • ajouté [RDF10] (remplacé l'ancien RDF) ;
  • changé [WAIGUIDE] pour [WAI] ;
  • ajouté les références informatives [WCGL], [UAGL] et [ATGL] ;
  • mis à jour la référence d'URI vers [URI] (RFC 2396).

A.1.2 Les erreurs corrigées

Section 13.6.1
Les exemples d'images cliquables utilisant l'attribut poly ont été corrigés pour former un polygone fermé. Également, le dernier couple de coordonnées est identique au premier pour clore le polygone.
Section 14.4.1
Dans l'exemple final, l'assignement d'attribut "media=screen, print" manquait dans l'élément STYLE.
Section 15.2.1
Dans l'exemple avec "mypar", la règle CSS devrait être :
  P#mypar {font-style: italic; color: blue}

Dans CSS, le caractère dièse « # » se rapporte à un nom de type ID, alors que le caractère point « . » se rapporte à un nom de classe. Cet exemple illustre l'attribut id.

Section 16.2.2
Les valeurs des attributs marginwidth et marginheight doivent être de 0 pixel ou plus, non 1 pixel ou plus.
Section 16.2.2
L'élément FRAME ne prend pas l'attribut target.
Section 16.5
L'élément IFRAME ne prend pas l'attribut target.
Section 17.2.1
Dans la description des « cases à cocher », changer « selected » pour« checked » dans « quand l'attribut selected de l'élément de commande est spécifié ».
Section 17.6.1
Dans la section « Attributs définis ailleurs » de l'élément OPTGROUP, les attributs onfocus, onblur et onchange ne devraient pas y être.
Section 18.2.3
Dans la liste des éléments qui admettent les attributs onfocus et onblur, ajouter les éléments A et AREA.
Section 20
On doit modifier légèrement la déclaration SGML de HTML 4 pour la gestion des références de caractères numériques hexadécimales. Changer la ligne :
        DELIM
               GENERAL SGMLREF
               SHORTREF SGMLREF

pour celle-ci :

        DELIM
               GENERAL SGMLREF
               HCRO "&#38;#x" -- 38 est le numéro de l'esperluette --
               SHORTREF SGMLREF

Et la partie initiale <!SGML "ISO 8879:1986" doit être changée pour <!SGML "ISO 8879:1986 (WWW)".

Section 21
L'élément HR devrait également prendre les attributs lang et dir. Ceux-ci sont notés comme étant définis ailleurs, dans la définition de l'élément, mais ont été oubliés dans les DTD.
Section 21
L'attribut archive de l'élément OBJECT est défini dans le DTD comme ayant une valeur de type %URI. C'est inexact : la valeur peut être une liste d'URI séparés par des espaces (comme indiqué dans la définition de l'attribut et dans le commentaire du DTD).
Le fragment de DTD de l'élément FORM devrait inclure une définition pour l'attribut accept, qui est listé dans la définition de l'élément. Cette définition devrait être la suivante :
 accept  %ContentTypes;  #IMPLIED  -- liste de types MIME
                                      pour le chargement de fichier sur un serveur --
Section B.4.1
À la fin de la section, les phrases suivantes sont inexactes : « La liste des termes dans l'attribut content est ALL, INDEX, NOFOLLOW, NOINDEX. Le nom et les valeurs de l'attribut content sont insensibles à la casse ». En fait, la définition META spécifie que les valeurs des attributs name et content sont sensibles à la casse.
Section B.4.1.1
La spécification dit : « Les lignes blanches ne sont pas autorisées ». Les lignes blanches sont autorisées dans le fichier robots.txt, et pas seulement dans un seul « enregistrement ». Remarquer que la spécification ne définit pas enregistrement.

Plus loin dans la page, la spécification dit : « Il doit n'y avoir qu'un seul champs "User-agent" par enregistrement ». En fait, il peut y avoir plusieurs champs « User-agent » dans le fichier robots.txt, et non pas plus d'un par enregistrement.

Pour des informations sur les robots de recherche, veuillez consulter, par exemple, les adresses suivantes :

  • http://www.kollar.com/robots.html
  • http://info.webcrawler.com/mak/projects/robots/norobots-rfc.html
  • http://info.webcrawler.com/mak/projects/robots/robots.html
Références
  • l'entrée [URI] devrait être mise à jour selon le document RFC 2396 d'août 1998. « »Uniform Resource Identifiers (URI) : Generic Syntax", T. Berners-Lee, R. Fielding, L. Masinter, août 1998. RFC 2396 met à jour [RFC1738] et [RFC1808].

A.1.3 Les erreurs typographiques mineures corrigées

Section 2.1.1
La phrase « accessible via le chemin "/TR/REC-html4/" » devrait se terminer par « /TR/REC-html40/ ».
Section 2.1.3
Dans la troisième puce, le mot « applets » devrait être « applet ».
Section 3.3
Dans la deuxième puce, la phrase « Que la balise fermante de l'élément soit optionnelle ou non » devrait être « Que les balises de l'élément soient optionnelles ou non »
Section 3.2.1
Dans le paragraphe commençant par « Veuillez consulter la norme SGML », la phrase « une balise fermante referme toutes les balises ouvrantes manquantes jusqu'à la balise ouvrante correspondante » devrait être « une balise fermante referme, en remontant jusqu'à la balise ouvrante correspondante, toutes les balises ouvrantes intermédiaires avec des balises fermantes manquantes ».
Section 3.2.2
Il manque un point final à la phrase « Les noms des attributs sont toujours insensibles à la casse ».
Section 3.3.4.2
L'exemple avec l'élément OPTION montre une balise fermante erronée ; ce devrait être « </OPTION> ».

Plus loin dans la section, la phrase qui commence par « Les auteurs devraient avoir connaissance... » [ndt. coquille intraduisible].

Section 5.2.2
Changer « caractères ASCII » en « octets en valeurs ASCII ».
Section 5.3.1
La deuxième puce... [ndt. coquille intraduisible].
Section 6.5.1
La première phrase... [ndt. coquille intraduisible].
Section 6.10
La première phrase... [ndt. coquille intraduisible].
Section 6.12
Dans la définition de « Next », ... [ndt. coquille intraduisible].
Section 6.16
Changer... [ndt. coquille intraduisible].
Section 7.4.4.3
Dans le paragraphe commençant par « L'attribut scheme », remplacer la valeur "Month-Date-Year" par "Month-Day-Year".
Section 7.5.4
Dans la phrase après l'exemple,... [ndt. coquille intraduisible].
Section 7.5.6
Pour l'élément ADDRESS, dans la section « Attributs définis ailleurs » element, les attributs style et title sont manquants.

Également, après cette section,... [ndt. coquille intraduisible].

Section 8.2.3
Dans la phrase « Les auteurs peuvent aussi utiliser des caractères spéciaux... » [ndt. coquille intraduisible].
Section 11.2.4.1
La phrase commençant par « Le premier élément COL se rapporte aux 39 premières colonnes... », [ndt. coquille intraduisible].
Section 11.2.5
Pour l'élément TR, dans la section « Attributs définis ailleurs », l'attribut bgcolor est manquant.
Section 11.2.6
Pour les éléments TH et TD, le type des attributs width et height change de "%Pixels;" pour "%Length;", pour admettre les valeurs en pourcentage.
Section 11.3.1
Dans la première phrase de la définition de l'attribut frame, utiliser « entourant » plutôt que « qui entoure ».
Section 11.4.1
Première puce, troisième phrase,... [ndt. coquille intraduisible].
Section 12.1.2
La dernière phrase... [ndt. coquille intraduisible].
Section 12.2.2
Le dernier paragraphe... [ndt. coquille intraduisible].
Section 12.2.3
Juste avant la section 12.2.4,... [ndt. coquille intraduisible].
Section 13.3.4
Dans le paragraphe qui commence par « Dans l'exemple suivant... »,... [ndt. coquille intraduisible].
Section 13.4
Juste après l'exemple déconseillé... [ndt. coquille intraduisible].
Section 13.6.1
Sous l'attribut « coords »,... [ndt. coquille intraduisible].
Section 13.7.1
Dans la définition de l'attribut height,... [ndt. coquille intraduisible].
Section 15.1.3.1
Sous le sous-titre « Faire flotter un objet », dans le premier paragraphe, la première apparition du mot « objet » devrait être au pluriel.
Section 15.1.3.2
Dans l'exemple déconseillé,... [ndt. coquille intraduisible].
Section 15.3
L'attribut align de l'élément HR n'est pas défini ailleurs.
Section 16.1
Dans la dernière phrase du premier paragraphe,...[ndt. coquille intraduisible].
Section 16.3.1
Dans la deuxième phrase,... [ndt. coquille intraduisible].
Section 16.4.1
La liste des « attributs définis ailleurs » a été oubliée de la définition de l'élément NOFRAMES. Il s'agit des attributs : class, id, lang, dir, title, style et des attributs de type %events;.
Section 17.1
[ndt. coquille intraduisible].
Section 17.5
Dans le paragraphe qui commence par « Les agents visuels peuvent restituer... »,... [ndt. coquille intraduisible].
Section 17.12.1
Il faudrait ajouter une virgule entre BUTTON et INPUT dans la liste des éléments qui reconnaissent l'attribut disabled.
Section 17.13.4.2
Dans les exemples à la fin de la section, changer "Content-Disposition: attachment" pour "Content-Disposition: file". Dans un exemple précédent également, changer "serveur.dom" pour "serveur.com".
Section 18.2.2.1
Après le premier exemple,... [ndt. coquille intraduisible].
Section 18.2.3
Dans la premiegrave;re phrase de la première remarque,... [ndt. coquille intraduisible].
Section 18.3.1
Dans la deuxième phrase du premier paragraphe,... [ndt. coquille intraduisible].
Section 21
  • dans tous les DTD, sous l'élément COLGROUP, le modèle de contenu devrait indiquer "COL", et non "col" ;
  • dans le commentaire sur l'entité %Scope, changer l'attribut "axes" pour "headers".
Section 24.2.1
à la fin de la définition de l'entité "thorn", retirer le mot final égaré.
Section 24.4
Changer "cp-1252" pour "CP-1252".
Appendice : Les changements pour les tables
Dans le paragraphe sur l'élément COLGROUP, la dernière phrase devrait être : « La sémantique de l'élément COLGROUP a été clarifiée par rapport aux projets précédents et la déclaration rules="basic" a été remplacée par rules="groups" ».
Les changements pour les éléments
La liste des éléments déconseillés devrait comprendre l'élément S.
Section B.3.2
Dans « délimiteur suivi par un caractère de nom », changer par « délimiteur suivi par un caractère de commencement de nom ».
Section B.4
En-dessous de « Fournir des mots-cl&eacutes; et des descriptions », le milieu de la phrase « La valeur de l'attribut name cherchée par un attribut de recherche n'est pas définie par cette spécification." » devrait plutôt être « moteur de recherche ».
Section B.4
Dans l'exemple pour indiquer le début d'une collection, remplacer rel="begin" par rel="start".
Section B.4.1
Retirer la phrase « Les valeurs des attributs name et content sont insensibles à la casse »
Section B.5.1.2
Il manque une parenthèse fermante dans la dernière phrase du dernier paragraphe.
Section B.7.1.1
Dans l'exemple déconseillé :
<BODY bgcolor='&{randomrgb};'>

le mot "randomrbg" devrait être "randomrgb".

A.1.4 Les éclaircissements

Section 3.2.1
Dans le septième paragraphe, ajouté « en remontant jusqu'à la balise ouvrante correspondante » à « (par exemple, ils doivent être correctement imbriqués, c'est-à-dire, une balise fermante referme, en remontant jusqu'à la balise ouvrante correspondante, toutes les balises ouvrantes intermédiaires avec des balises fermantes manquantes (section 7.5.1), etc.) »
Section 3.2.4
Ajouté une explication selon laquelle les commentaires sont un balisage.
Section 3.3.3
Dans le deuxième item de liste, changer « si la balise fermante de l'élément est ou non optionnelle » pour « si les balises de l'élément sont ou non optionnelles ».
Section 3.3.3.1
Dans la définition d'un modèle de contenu, un « A » signifie que « A » doit être présent une fois seulement. Ajouté également « +(A) » et « -(A) » à la section sur la syntaxe du modèle de contenu.
Section 7.4.2
Précisé que l'élément TITLE ne peut pas inclure de commentaire.
Section 10.3
Toutes les utilisations du mot « cracker », dans cette section et ses sous-sections, sont remplacés par « hacker ». Les définitions de « hacker » et de « nerd » proviennent de « The Hacker's Dictionary ».
Section 13.7.2
Les attributs hspace et vspace sont déconseillés.
Section 13.7.4
L'attribut align est déconseillé pour les éléments IMG, OBJECT et APPLET.

A.1.5 Les problèmes connus des navigateurs

  • Certaines versions de Netscape Navigator 4.0X se plantaient lors de la lecture du chapitre 3 des versions précédentes de cette spécification. Netscape a connaissance de ce bogue et l'a résolu dans la version 4.5. Pour contourner ce bogue, aller dans le sous-menu Éditer/Préférences/Avancé et inactiver les feuilles de style (et éventuellement JavaScript).

A.2 Les changements survenus entre la version du 18 décembre1997 et celle du 24 avril 1998

Cette section décrit les différences entre les versions de HTML 4 du 24 avril 1998 et du 18 décembre 1997.

A.2.1 Les erreurs corrigées

Section 2.1.1
L'URI "http://www.w3.org/TR/PR-html4/cover.html" était censé désigner la spécification HTML courante. La spécification HTML courante se trouve en réalité à http://www.w3.org/TR/REC-html40.
Section 7.5.2
Le lien hypertexte sur l'attribut name était inexact. Il pointe maintenant vers types.html#type-name.
Section 7.5.4
L'attribut href était listé comme attribut des éléments DIV et SPAN. Ce n'est pas le cas.
Section 7.5.6
On utilisait un élément P dans l'exemple. Celui-ci est invalide dans l'élément ADDRESS.
Section 8.1
Dans le premier exemple commençant par « Ses super-pouvoirs... », il y avait un guillemet double en trop avant le mot « Ses ».
Section 9.3.4
L'attribut width n'était pas mentionné comme étant déconseillé.
Section 11.2.4 : Le calcul de la largeur des colonnes
La phrase « Nous avons fixé la valeur de l'attribut align à "center", dans le troisième groupe de colonnes », c'était « deuxième » avant « troisième ».
Section 11.2.6 : Les cellules qui couvrent plusieurs rangées ou colonnes
Le deuxième paragraphe était « Dans la définition de cette table, nous spécifions que la cellule en rangée 4 et colonne 2 devrait occuper un total de trois colonnes, y compris la rangée courante. » Il se termine maintenant par « y compris la colonne courante ».
Section 13.2
La phrase commençant par... [ndt. coquille intraduisible].
Section 13.6.2
La dernière phrase du deuxième paragraphe s'appliquait aux deux éléments IMG et INPUT. Cependant, l'attribut ismap n'est pas défini pour INPUT. La phrase ne s'applique maintenant qu'à l'élément IMG.
Section 14.2.3
L'attribut title de l'élément STYLE ne faisait pas partie de la liste des attributs définis ailleurs.
Section 14.3.2
Le deuxième exemple mettait title="Compact". Il met maintenant title="compact".
Section 15.1.2
La phrase se terminant par « l'attribut align » se lisait « l'élément align ».
Section 15.1.3.2
La règle de style CSS "BR.monbr { clear: left }" était inexacte, car elle se rapportait à la classe "monbr" et non à la valeur id. La syntaxe exacte est : "BR#monbr {clear: left }".
Section 16
Tous les exemples contenant une déclaration de type de document utilisaient quelque chose comme "LA_DERNIERE_VERSION_/frameset.dtd" ou "LA_DERNIERE_VERSION" comme identifiant du système pour le DTD avec jeu d'encadrement. Ils utilisent désormais la déclaration de type de document exacte indiquée dans la section 7.2
Section 16.3 et Section 16.3.1
Le deuxième exemple de la section 16.3 et l'exemple de la section 16.3.1 utilisaient un DTD erroné ; ils utilisent maintenant le DTD transitoire.
Section 17.5
Dans les « attributs définis ailleurs » pour l'élément BUTTON, il manquait les attributs id, class, lang, dir, title, style et tabindex. Également, l'attribut usemap a été supprimé.
Section 17.6/17.6.1
Les « attributs définis ailleurs » des éléments OPTION et OPTGROUP mentionnaient par erreur les attributs onfocus, onblur et onchange. La section « Attributs définis ailleurs » manquait pour l'élément SELECT (veuillez consulter le DTD pour la liste complète des attributs).
Section 17.9.1
L'attribut tabindex était annoncé comme défini pour l'élément LABEL. Ce n'est pas le cas.
Section 17.12.2
La phrase « Les éléments suivants reconnaissent l'attribut readonly : INPUT et TEXTAREA » se lisait « Les éléments suivants reconnaissent l'attribut readonly : INPUT, TEXT, PASSWORD et TEXTAREA ».
Section 18.2.2 : La déclaration locale du langage de script
Le premier paragraphe disait : « Il est également possible de spécifier le langage de script dans chaque élément SCRIPT via l'attribut type. En l'absence de la spécification d'un langage de script par défaut, cet attribut doit être défini pour chaque élément SCRIPT ». Comme l'attribut type est obligatoire pour l'élément SCRIPT, ce paragraphe est maintenant : « On doit spécifier l'attribut type pour chaque instance de l'élément SCRIPT dans le document. La valeur de l'attribut type d'un élément SCRIPT surclasse le langage de script par défaut de cet élément ».
Section 21
Ajouté une remarque selon laquelle la spécification inclut certaines contraintes syntaxiques qui ne peuvent s'exprimer dans le DTD.
Section 24.2.1 et fichier HTMLlat1.ent
Le commentaire pour la référence de caractère « non » disait « = tiret conditionnel ». Il a été supprimé.
Le FPI dans le commentaire disait "-//W3C//ENTITIES Full Latin 1//EN//HTML", maintenant c'est plutôt "-//W3C//ENTITIES Latin1//EN//HTML".
Section 24.3.1 et fichier HTMLsymbol.ent
Le FPI dans le commentaire disait "-//W3C//ENTITIES Symbolic//EN//HTML", maintenant c'est plutôt "-//W3C//ENTITIES Symbols//EN//HTML".
Section A.1.1 : Les nouveaux éléments (précédemment A.1.1) et Section A.1.1 : Les éléments déconseillés (précédemment A.1.2)
L'élément S, qui est déconseillé, était listé comme faisant partie des changements intervenus entre HTML 3.2 et HTML 4. Cet élément n'était en réalité pas listé dans HTML 3.2. Il est maintenant dans la liste des nouveaux éléments.
Section A.1.3 (précédemment A.3)
L'attribut longdesc était censé défini pour les tables. Ce n'est pas le cas. C'est plutôt l'attribut summary qui permet aux auteurs de donner une description plus longue des tables.
Section B.4
La phrase « Vous pouvez assister les moteurs de recherche en utilisant l'élément LINK avec une déclaration rel="start" en même temps que l'attribut title... » était « Vous pouvez assister les moteurs de recherche en utilisant l'élément LINK avec une déclaration rel="begin" en même temps que l'attribut title... ». Même chose pour l'exemple d'accompagnement.
Section B.5.1
La phrase « Celle-ci peut être altérée par la spécification de l'attribut width de l'élément TABLE. » était « Celle-ci peut être altérée par la spécification de l'attribut width-TABLE de l'élément TABLE. »
Section B.5.2
Dans la phrase « Les règles de prise en charge des objets trop grands pour une colonne s'appliquent quand l'alignement explicite ou implicite aboutit à une situation dans laquelle les données excèdent la largeur assignée à la colonne. », il était dit « trop grands pour des colonnes ». Le sens de la phrase était confus parce qu'elle se rapportait aux « règles » régissant les situations d'erreur ; le comportement de l'agent utilisateur en situation d'erreur ne fait pas l'objet de la spécification.
Index des attributs
L'attribut href de l'élément BASE était marqué comme déconseillé. Ce n'est pas le cas. En outre, il n'est pas non plus défini dans le DTD strict.

L'attribut language de l'élément SCRIPT n'était pas marqué comme déconseillé. C'est le cas maintenant et il n'est plus défini dans le DTD strict.

A.2.2 Les erreurs typographiques mineures corrigées

Section 2.1.3
« Les URI relatifs se résolvent... »... [ndt. coquille intraduisible]
Section 2.2.1
Le deuxième mot... [ndt. coquille intraduisible].
Section 3.3.3
La phrase... [ndt. coquille intraduisible].
Section 3.3.4
Dans la section... [ndt. coquille intraduisible].
Section 6.3
La phrase... [ndt. coquille intraduisible].
Section 6.6
Dans la première phrase... [ndt. coquille intraduisible].
Section 7.4.1
Le premier mot... [ndt. coquille intraduisible].
Section 7.4.4
Le dernier mot... [ndt. coquille intraduisible].
Section 7.5.2
Dans l'exemple, « Variable déclarée deux fois » était « Variable déclaré deux fois ».
Section 9.2.2
La langue de la citation était "en" au lieu de "en-us", alors que, en anglais britannique, ce serait un guillemet simple qui délimiterait la citation extérieure.
Section 9.3.2
Dans la première ligne, le sixième caractère dans « &#x000A » était la lettre « O » au lieu d'un zéro.
Section 10.3.1
[ndt. coquille intraduisible].
Section 12.1.1
Dans la phrase... [ndt. coquille intraduisible].
Section 12.1.2
La phrase... [ndt. coquille intraduisible].
Section 12.1.5
Le deuxième paragraphe... [ndt. coquille intraduisible].
Section 13.3.2
Dans la phrase commençant par... [ndt. coquille intraduisible].
Section 14.2.2
Il y avait un mot « style » erroné au début de la phrase « L'attribut style spécifie... ».
Section 17.2
[ndt. coquille intraduisible].
Section 17.10
Il y avait une expression « /samp » erronée juste avant la section 17.11.
Section 17.11
La première phrase... [ndt. coquille intraduisible].
Section 18.2.2
Juste avant la section 18.2.3,... [ndt. coquille intraduisible].
Section 19.1
Le titre de la section indiquait... [ndt. coquille intraduisible].
Section 21
Il manquait un guillemet double fermant dans le FPI du DTD HTML 4.0 transitoire.
Section B.5.1/B.5.2
Ces sections se référaient à un attribut cols inexistant. Cet attribut n'appartient pas à HTML 4.0. Le calcul du nombre de colonnes dans une table est décrit dans la section 11.2.4.3, dans le chapitre sur les tables. Dans les sections B.5.1 et B.5.2, les occurences de cols ont été remplacées par « le nombre de colonnes spécifiées par les éléments COL et COLGROUP ».
Section B.5.2
Dans la phrase « Les valeurs de l'attribut frame ont été choisies pour éviter les conflits avec les attributs rules, align et valign. », il manquait un espace entre « attribut » et « frame », et le dernier attribut était « valign-COLGROUP ».
Section B.10.1
La dernière phrase... [ndt. coquille intraduisible].
Index des éléments
[ndt. coquille intraduisible].

A.3 Les changements survenus entre HTML 3.2 et HTML 4 (18 décembre 1997)

Cette section décrit les différences entre la spécification HTML 4.0 du 18 décembre 1997 et la spécification HTML 3.2 ([HTML32]).

A.3.1 Les changements pour les éléments

Les nouveaux éléments

Les nouveaux éléments dans HTML 4.0 sont les suivants : ABBR, ACRONYM, BDO, BUTTON, COL, COLGROUP, DEL, FIELDSET, FRAME, FRAMESET, IFRAME, INS, LABEL, LEGEND, NOFRAMES, NOSCRIPT, OBJECT, OPTGROUP, PARAM, S (déconseillé), SPAN, TBODY, TFOOT, THEAD et Q.

Les éléments déconseillés

Les éléments suivants sont déconseillés : APPLET, BASEFONT, CENTER, DIR, FONT, ISINDEX, MENU, S, STRIKE et U.

Les éléments obsolètes

Les éléments suivants sont obsolètes : LISTING, PLAINTEXT et XMP. Pour tous ceux-ci, les auteurs devraient plutôt utiliser l'élément PRE.

A.3.2 Les changements pour les attributs

  • Presque tous les attributs spécifiant la présentation d'un document HTML (par exemple, les couleurs, l'alignement, les polices, les graphiques, etc.) sont déconseillés en faveur des feuilles de style. La liste de attributs en appendice indique ceux des attributs qui sont déconseillés ;
  • les attributs id et class permettent aux auteurs d'assigner des informations de nom et de classe aux éléments pour les feuilles de style, comme ancres pour les scripts, les déclarations d'objets, le traitement universel du document, etc.

A.3.3 Les changements pour l'accessibilité

HTML 4.0 apporte de nombreux changements pour améliorer l'accessibilité, à savoir :

  • l'attribut title peut maintenant se placer sur pratiquement tous les éléments ;
  • les auteurs peuvent fournir des descriptions longues pour les tables (voir l'attribut summary), les images et les cadres (voir l'attribut longdesc).

A.3.4 Les changements pour les métadonnées

Les auteurs peuvent maintenant spécifier des profils qui fournissent des explications sur les métadonnées spécifiées à l'aide des éléments META ou LINK.

A.3.5 Les changements pour le texte

  • Les nouvelles fonctionnalités pour l'internationalisation permettent aux auteurs de spécifier la direction et la langue du texte ;
  • les éléments INS et DEL permettent aux auteurs de marquer les changements dans leurs documents ;
  • les éléments ABBR et ACRONYM permettent aux auteurs de marquer les abréviations et les acronymes dans leurs documents.

A.3.6 Les changements pour les liens

  • L'attribut id transforme n'importe quel élément en ancre de destination pour un lien.

A.3.7 Les changements pour les tables

Le modèle de la table HTML 4.0 a émergé des travaux préliminaires sur HTML+ et l'avant-projet de la spécification HTML3.0. Le modèle préliminaire a été étendu en réponse aux sollicitations suivantes des fournisseurs d'information :

  • Les auteurs doivent pouvoir spécifier des tables qui peuvent s'afficher progressivement au fur et à mesure que l'agent utilisateur reçoit les données ;
  • les auteurs doivent pouvoir spécifier des tables qui soient plus accessibles aux utilisateurs avec des agents utilisateurs non-visuels ;
  • les auteurs doivent pouvoir spécifier des tables avec un en-tête et un pied fixes. Les agents utilisateurs peuvent en tirer avantage lors du défilement de grandes tables ou pour la restitution des tables sur un média paginé.

Le modèle de la table HTML 4.0 satisfait également aux demandes concernant une présentation en colonnes par défaut optionnelle, une plus grande souplesse dans la spécification des cadres et des règles de la table et la possibilité d'un alignement sur un caractère désigné. On prévoit néanmoins que les feuilles de style prendront en charge la restitution des tables dans un futur proche.

De surcroît, un des objectifs principaux était la rétro-compatibilité avec l'implémentation des tables de Netscape qui est largement répandue. Un autre objectif était la simplification de l'importation des tables conformes au modèle CALS de SGML. Le dernier projet rend l'attribut align compatible avec les dernières versions des navigateurs les plus répandus. Quelques éclaircissements ont été apportés sur le rôle de l'attribut dir et le comportement recommandé quand des largeurs de colonne absolues et relatives sont mélangées.

Le nouvel élément COLGROUP a été introduit pour permettre le regroupement de jeux de colonnes, avec des propriétés de largeur et d'alignement différentes qui sont spécifiées par un ou plusieurs éléments COL. La sémantique de l'élément COLGROUP a été clarifiée au cours des précédents brouillons et la déclaration rules="basic" a été remplacée par rules="groups".

L'attribut style est inclus comme un moyen d'enrichir les propriétés associées aux bords et aux intérieurs des groupes de cellules. Par exemple, le style du trait, en pointillés, double, mince/épais, etc., la couleur/le motif de remplissage de l'intérieur, les indications des marges et de la police des cellules. Ceci fera l'objet d'une spécification d'accompagnement sur les feuilles de style.

Les attribut frame et rules ont été modifiés pour éviter les conflits de nom SGML entre eux et pour éviter les conflits avec les attributs align et valign. En outre, ces changements ont été motivés par la volonté d'éviter des problèmes ultérieurs au cas où cette spécification serait augmentée pour autoriser les attributs frame et rules avec d'autres éléments de table.

A.3.8 Les changements pour les images, les objets et les images cliquables

  • L'élément OBJECT permet l'inclusion générique des objets ;
  • les éléments IFRAME et OBJECT permettent aux auteurs de créer des documents incorporés ;
  • l'attribut alt est obligatoire sur les éléments IMG et AREA ;
  • le mécanisme pour créer des images cliquables permet maintenant aux auteurs de réaliser des images cliquables plus accessibles. Le modèle de contenu de l'élément MAP a changé pour cette raison.

A.3.9 Les changements pour les formulaires

Cette spécification introduit plusieurs nouveaux attributs et éléments qui affectent les formulaires :

  • L'attribut accesskey permet aux auteurs de spécifier l'accès direct aux commandes du formulaire par le clavier ;
  • l'attribut disabled permet aux auteurs de rendre une commande de formulaire initialement inactive ;
  • l'attribut readonly permet aux auteurs d'interdire les changements sur une commande de formulaire ;
  • l'élément LABEL associe une étiquette à une commande de formulaire particulière ;
  • l'élément FIELDSET regroupe les champs en rapport et, en association avec l'élément LEGEND, peut s'utiliser pour nommer le groupe. Ces deux nouveaux éléments autorisent une meilleure restitution et une meilleur interactivité. Les navigateurs vocaux peuvent mieux décrire le formulaire et les navigateurs graphiques peuvent faire que les étiquettes soient réactives ;
  • un nouveau jeu d'attributs, en combinaison avec des scripts, permet aux fournisseurs d'information de vérifier les données entrées par l'utilisateur ;
  • on peut utiliser l'élément BUTTON ou l'élément INPUT dont la valeur de l'attribut type est fixée à "button", combinés à des scripts, pour créer des formulaires plus riches ;
  • l'élément OPTGROUP permet aux auteurs de regrouper les options de menu dans un élément SELECT, ce qui est particulièrement important pour ce qui est de l'accessibilité du formulaire ;
  • des changements supplémentaires pour l'internationalisation.

A.3.10 Les changements pour les feuilles de style

HTML 4.0 gère un plus grand jeu de descripteurs de média, de sorte que les auteurs puissent écrire des feuilles de styles propres à un type d'appareil.

A.3.11 Les changements pour les cadres

HTML 4.0 gère les documents avec des cadres et les cadres en-ligne.

A.3.12 Les changements pour les scripts

Nombre d'éléments présentent maintenant des attributs d'événement qui peuvent être couplés à des scripts : le script s'exécute quand l'événement se produit (par exemple, quand le document est chargé, quand la souris est cliquée, etc.).

A.3.13 Les changements pour l'internationalisation

HTML 4.0 intègre les recommandations du document [RFC2070] pour l'internationalisation de HTML.

Néanmoins, cette spécification et le document [RFC2070] divergent sur ces points :

  • L'attribut accept-charset a été défini pour l'élément FORM plutôt que sur les éléments TEXTAREA et INPUT ;
  • la spécification HTML 4.0 apporte des éclaircissements supplémentaires vis-à-vis de l'algorithme bi-directionnel ;
  • l'utilisation du type CDATA pour définir les éléments SCRIPT et STYLE n'empêche pas le transcodage des documents, comme décrit dans la section 2.1 de [RFC2070].


Remarques sur les performances, l'implémentation et la conception

Appendice B : Remarques sur les performances, l'implémentation et la conception

Sommaire

  1. Remarques sur les documents invalides
  2. Les caractères spéciaux dans les valeurs d'attribut URI
    1. Les caractères non-ASCII dans les valeur d'attribut URI
    2. Les esperluettes dans les valeurs d'attribut URI
  3. Remarques pour les implémentation SGML
    1. Les sauts de ligne
    2. La spécification de données non-HTML
      • Comme contenu d'élément
      • Comme valeurs d'attributs
    3. Les fonctionnalités SGML dont la gestion est limitée
    4. Les attributs booléens
    5. Les sections marquées
    6. Les instructions de traitement
    7. Le balisage raccourci
  4. Remarques pour aider les moteurs de recherche à indexer votre site Web
    1. Les robots d'exploration
      • Le fichier robots.txt
      • Les robots et l'élément META
  5. Remarques sur les tables
    1. Les justifications de conception
      • Le reformatage dynamique
      • L'affichage progressif
      • La structure et la présentation
      • Les groupes de rangées et de colonnes
      • L'accessibilité
    2. Les algorithmes de disposition recommandés
      • L'algorithme de disposition fixe
      • L'algorithme de disposition automatique
  6. Remarques sur les formulaires
    1. L'affichage progressif
    2. Les évolutions futures
  7. Remarques sur les scripts
    1. La syntaxe réservée pour les macrocommandes de script futures
      • Les pratiques courantes pour les macrocommandes de script
  8. Remarques sur les cadres
  9. Remarques sur l'accessibilité
  10. Remarques sur la sécurité
    1. Les problèmes de sécurité des formulaires

Les remarques suivantes sont informatives, non normatives. Malgré l'apparition de mots tels que « doivent » et « devrait », toutes les obligations dans cette section sont traitées ailleurs dans la spécification.

B.1 Remarques sur les documents invalides

Cette spécification ne définit pas la manière dont les agents utilisateurs conformes prennent en charge les situations d'erreur générales ni le comportement des agents utilisateurs en face d'éléments, d'attributs, de valeurs d'attribut ou d'entités qui ne sont pas spécifiés dans ce document.

Néanmoins, afin de faciliter la mise en œuvre et l'interopérabilité entre les implémentations de diverses versions de HTML, nous recommandons le comportement suivant :

  • Si l'agent utilisateur rencontre un élément qu'il ne reconnaît pas, il devrait essayer de restituer le contenu de l'élément ;
  • si l'agent utilisateur rencontre un attribut qu'il ne reconnaît pas, il devrait ignorer en entier la spécification de l'attribut (i.e., l'attribut et sa valeur) ;
  • si l'agent utilisateur rencontre une valeur d'attribut qu'il ne reconnaît pas, il devrait utiliser la valeur par défaut de l'attribut ;
  • s'il rencontre une entité non déclarée, l'entité devrait alors être traitée comme une donnée textuelle.

Nous recommandons également que les agents utilisateurs offrent les moyens de signaler ces erreurs aux utilisateurs.

Étant donné que les agents utilisateurs peuvent varier dont leurs façons de gérer les conditions d'erreur, les auteurs et les utilisateurs ne devraient pas compter sur un comportement spécifique de reprise sur incident [ndt. error recovery].

La spécification HTML 2.0 ([RFC1866]) observe que nombre d'agents utilisateurs HTML 2.0 considèrent un document qui ne commence pas par une déclaration de type de document comme se rapportant à la spécification HTML 2.0. Comme l'expérience le montre, c'est une supposition pour le moins faible, et la spécification courante ne recommande pas ce comportement.

Pour des raisons d'interopérabilité, les auteurs ne doivent pas « augmenter » HTML par le biais des mécanismes SGML disponibles (par exemple, en augmentant le DTD, en ajoutant un nouveau jeu de définitions d'entités, etc.).

B.2 Les caractères spéciaux dans les valeurs d'attribut URI

B.2.1 Les caractères non-ASCII dans les valeur d'attribut URI

Bien que les URI ne contiennent pas de valeur non-ASCII (voir [URI], section 2.1), les auteurs les spécifient parfois avec une valeur d'attribut attendant un URI (i.e., définies par %URI; dans le DTD). Par exemple, la valeur de l'attribut href suivante est illégale :

<A href="http://foo.org/Håkon">...</A>

Nous recommandons que les agents utilisateurs adoptent les conventions suivantes pour gérer les caractères non-ASCII dans de tels cas :

  1. Représenter chaque caractère dans le jeu UTF-8 (voir [RFC2279]) en un ou plusieurs octets ;
  2. échapper ces octets par le biais du mécanisme d'échappement d'URI (i.e., en convertissant chaque octet dans la forme « %HH », où « HH » représente la notation hexadécimale de la valeur d'octet).

Cette procédure aboutit à un URI syntaxiquement légal (comme défini dans les documents [RFC1738], section 2.2 ou [RFC2141], section 2) qui est indépendant de l'encodage de caractères dans lequel le document HTML porteur de l'URI peut avoir été codé.

Remarque : Certains agents utilisateurs anciens traitent les URI de manière triviale en HTML, en utilisant les octets de l'encodage de caractères selon lequel le document a été reçu. Certains documents HTML anciens s'appuient sur cette pratique et ne fonctionnent plus quand ils sont transcodés. Les agents utilisateurs qui veulent tenir compte de ces vieux documents devraient, à la réception d'un URI contenant des caractères hors du jeu légal, d'abord utiliser la conversion basée sur UTF-8. Ils ne devraient essayer de construire un URI, en fonction des octets de l'encodage de caractères dans lequel le document a été reçu, que si la résolution de l'URI obtenu par la première méthode n'aboutissait pas.

Remarque : La même conversion basée sur UTF-8 devrait être appliquée à la valeur de l'attribut name de l'élément A.

B.2.2 Les esperluettes dans les valeurs d'attribut URI

L'URI qui est construit lors de la soumission d'un formulaire peut être utilisé comme un lien du genre ancre (par exemple, l'attribut href de l'élément A). Malheureusement, l'utilisation du caractère esperluette « & » pour séparer les champs du formulaire se confond avec son utilisation pour délimiter les références des entités de caractères dans les valeurs d'attribut SGML. Par exemple, pour utiliser l'URI "http://host/?x=1&y=2" comme URI reliant, celui-ci doit être écrit <A href="http://host/?x=1&#38;y=2"> ou <A href="http://host/?x=1&amp;y=2">.

Nous recommandons que les développeurs de serveurs HTTP et, en particulier, les développeurs de programmes CGI gèrent l'utilisation du caractère point-virgule « ; » à la place du caractère esperluette « & » pour épargner aux auteurs le souci d'échapper les caractères « & » de cette façon.

B.3 Remarques pour les implémentation SGML

B.3.1 Les sauts de ligne

SGML (voir [ISO8879], section 7.6.1) spécifie que le saut de ligne qui suit immédiatement une balise ouvrante doit être ignoré, tout comme le saut de ligne immédiatement avant une balise fermante. Ceci s'applique à tous les éléments HTML sans exception.

Les deux exemples HTML suivants doivent être restitués de manière identique :

<P>Thomas regarde la télé.</P>

<P>
Thomas regarde la télé.
</P>

De même pour les deux exemples suivants :

<A>Mon site favori</A>

<A>
Mon site favori
</A>

B.3.2 La spécification de données non-HTML

Les données de script et de style peuvent apparaître en contenu d'un élément ou en valeurs d'attribut. Les sections suivantes décrivent les limites entre le balisage HTML et les données étrangères.

Remarque : Le DTD définit les données de script et celles de style comme étant du type CDATA, à la fois comme contenu d'un élément et comme valeur d'attribut. Les règles SGML n'autorisent pas les références de caractères dans le contenu de type CDATA d'un élément mais les autorisent dans les valeurs de type CDATA des attributs. Les auteurs devraient faire particulièrement attention lors du copier-coller des données de script ou de style entre le contenu d'un élément et les valeurs d'attribut.

Cette asymétrie signifie aussi que, lors du transcodage à partir d'un encodage de caractères plus riche vers un autre moins riche, le transcodeur ne peut pas simplement remplacer les caractères non convertibles dans les données de script ou de style par les références de caractères numériques correspondantes : il doit analyser le document HTML et connaître la syntaxe de chaque langage de script ou de style pour traiter correctement les données.

Comme contenu d'élément

Quand des données de script ou de style se trouvent en contenu d'un élément (SCRIPT et STYLE), les données commencent immédiatement après la balise ouvrante de l'élément et s'achèvent au premier d&eaute;limiteur ETAGO (« </ ») suivi par un caractère de début de nom ([a-zA-Z]) ; remarquez qu'il ne s'agira pas forcément de la balise fermante de l'élément. C'est pourquoi les auteurs devraient échapper les occurences de « </ » qui font partie du contenu. Les mécanismes d'échappement sont propres à chaque langage de script ou de feuille de style.

EXEMPLE ILLÉGAL :
Les données de script suivantes contiennent de manière erronée une séquence « </ » (par le biais de « </EM> ») avant la balise fermante de l'élément SCRIPT :

    <SCRIPT type="text/javascript">
      document.write ("<EM>Code qui ne fonctionne pas</EM>")
    </SCRIPT>

En JavaScript, on peut exprimer ce code de manière légale en dissimulant le délimiteur ETAGO avant un caractère de début de nom SGML :

    <SCRIPT type="text/javascript">
      document.write ("<EM>Code qui fonctionne<\/EM>")
    </SCRIPT>

En Tcl, on peut le faire comme suit :

    <SCRIPT type="text/tcl">
      document write "<EM>Ce code fonctionne<\/EM>"
    </SCRIPT>

En VBScript, on peut éviter le problème à l'aide de la fonction Chr() :

    "<EM>Ce code fonctionne<" & Chr(47) & "EM>"

Comme valeurs d'attributs

Quand les données d'un script ou d'un style sont la valeur d'un attribut (qu'il s'agisse de l'attribut style ou des attributs d'événement intrinsèque), les auteurs devraient échapper les occurrences des guillemets délimiteurs simples ou doubles, dans la valeur, en fonction des conventions du langage de script ou de feuille de style. Les auteurs devraient également échapper les occurences des caractères esperluettes « & » si ceux-ci n'ont pas pour vocation de commencer une référence de caractère.

  • Le caractère « " » devrait s'écrire « &quot; » ou bien « &#34; » ;
  • le caractère « & » devrait s'écrire « &amp; » ou bien « &#38; ».

On pourrait donc, par exemple, écrire :

 <INPUT name="num" value="0"
 onchange="if (compare(this.value, &quot;aide&quot;)) {assistance()}">

B.3.3 Les fonctionnalités SGML dont la gestion est limitée

Les systèmes SGML conformes à la norme [ISO8879] sont censés reconnaître un certains nombres de fonctionnalités qui sont rarement gérées par les agents utilisateurs HTML. Nous recommandons aux auteurs d'éviter de faire appel à toutes ces fonctionnalités.

B.3.4 Les attributs booléens

Les auteurs devraient garder à l'esprit que nombre d'agents utilisateurs ne reconnaissent que la forme minimisée des attributs booléens et non la forme complète.

Par exemple, l'auteur peut vouloir spécifier :

<OPTION selected>

au lieu de :

<OPTION selected="selected">

B.3.5 Les sections marquées

Les sections marquées jouent un rôle similaire à la structure « #ifdef » reconnue par les pré-processeurs C.

<![INCLUDE[
 <!-- Ceci sera inclus -->
]]>

<![IGNORE[
 <!-- Ceci sera ignoré -->
]]>

SGML définit également l'utilisation de sections marquées pour un contenu de type CDATA, pour lequel le caractère « < » n'est pas considéré comme le début d'une balise, par exemple :

<![CDATA[
 <Un> exemple de balisage <sgml> qui n'est pas
 <fastidieux> à écrire avec < et autres.
]]>

Le signe révélateur qu'un agent utilisateur ne reconnaît pas une section marquée est l'apparition de la séquence « ]]> », qui est visible quand l'agent utilisateur prend par erreur le premier caractère « > » pour la fin de la balise commençant par la séquence « <![ ».

B.3.6 Les instructions de traitement

Les instructions de traitement sont le mécanisme par lequel capturer les idiomes propres de la plate-forme. Une instruction de traitement commence par la séquence « <? » et se termine par « > ».

<?instruction >

Par exemple :

<?>
<?style tt = font courier>
<?saut de page>
<?experience> ... <?/experience>

Les auteurs devraient garder à l'esprit que nombre d'agents utilisateurs restituent les instructions de traitement comme faisant partie du texte du document.

B.3.7 Le balisage raccourci

Certaines structures SHORTTAG SGML épargnent de la saisie mais n'ajoutent pas de capacité expressive à l'application SGML. Même si ces structures n'introduisent techniquement aucune ambiguïté, elles réduisent la robustesse des documents, particulièrement quand il s'agit d'un langage amélioré pour inclure de nouveaux éléments. Ainsi, alors que les structures SHORTTAG de SGML relatives aux attributs sont largement utilisées et implémentées, celles relatives aux éléments ne le sont pas. Les documents qui les utilisent sont bien des documents SGML conformes mais ils ne vont vraisemblablement pas fonctionner avec nombre d'outils HTML existants.

Les structures SHORTTAG en question sont les suivantes :

  • Les balises NET :
    <nom/.../
  • les balises ouvrantes fermées :
    <nom1<nom2>
  • la balise ouvrante vide :
    <>
  • la balise fermante vide :
    </>

B.4 Remarques pour aider les moteurs de recherche à indexer votre site Web

Cette section fait quelques suggestions simples qui vont rendre vos documents plus accessibles aux moteurs de recherche.

Définir la langue du document
Dans le contexte global du Web, il est important de savoir dans quelle langue la page est écrite. Ceci est expliqué dans la section traitant des indications de langue.
Spécifier les variantes de langue du document
Si vous avez préparé des traductions du document en d'autres langues, vous devriez utiliser l'élément LINK pour les référencer. Cela permet au moteur d'indexation d'offrir à l'utilisateur un résultat de recherche dans sa langue préférée, indépendamment de la manière dont la requête a été écrite. Par exemple, les liens suivants proposent des alternatives en français et en allemand au moteur de recherche :
<LINK rel="alternate"
         type="text/html"
         href="mondoc-fr.html" hreflang="fr"
         lang="fr" title="La vie souterraine">
<LINK rel="alternate"
         type="text/html"
         href="mondoc-de.html" hreflang="de"
         lang="de" title="Das Leben im Untergrund">
Fournir des mots-clés et des descriptions
Certains moteurs d'indexation cherchent les éléments META qui définissent une liste de mots-clés/phrases, séparés par des virgules, ou qui donnent une brève description. Les moteurs de recherche peuvent présenter ces mots-clés comme résultat de la recherche. La valeur de l'attribut name cherchée par le moteur de recherche n'est pas définie par cette spécification. Considérez ces exemples :
<META name="keywords" content="vacances,Grèce,soleil">
<META name="description" content="Vacances de rêve en Europe">
Indiquer le commencement d'une série
Les séries de documents ou de présentations issus de programmes de traitement de texte sont couramment traduites en séries de documents HTML. Il est peut être utile dans les résultats des recherches de signaler le début d'une série en supplément à la page atteinte par la recherche. Vous pouvez assister les moteurs de recherche en utilisant l'élément LINK avec une déclaration rel="start" en même temps que l'attribut title, comme dans :
 <LINK rel="start"
         type="text/html"
         href="page1.html"
         title="Théorie de la relativité générale">
Fournir aux robots des instructions d'indexation
Les personnes sont parfois surprises de constater que leurs sites ont été indexés par un robot d'indexation alors que le robot n'aurait pas du avoir la permission de visiter une partie sensible du site. Nombre de robots Web offrent des facilités aux gestionnaires de site Web et aux fournisseurs d'information pour limiter l'action du robot. On obtient ceci au moyen de deux mécanismes, le fichier « robots.txt » et l'élément META dans les documents HTML, qui sont décrits ci-dessous.

B.4.1 Les robots d'exploration

Le fichier robots.txt

Quand un robot visite un site Web, disons « http://www.trucmuche.com/ », il vérifie d'abord l'adresse « http://www.trucmuche.com/robots.txt ». S'il peut trouver ce document, il analysera alors son contenu pour voir s'il est autorisé à ramener le document. On peut personnaliser le fichier « robots.txt » afin qu'il s'applique seulement à des robots particuliers et qu'il interdise l'accès à des répertoires ou des fichiers spécifiques.

Voici un exemple de fichier « robots.txt » qui empêche la visite du site entier à tous les robots.

        User-agent: *    # s'applique à tous les robots
        Disallow: /      # inactive l'indexation de toutes les pages

Le robot cherchera simplement un URI avec "/robots.txt" sur votre site, lequel site est défini comme un serveur HTTP fonctionnant sur un hôte et un numéro de port particuliers. Voici quelques exemples d'emplacements pour le fichier robots.txt :

URI du site | URI du fichier robots.txt
http://www.w3.org/ | http://www.w3.org/robots.txt
http://www.w3.org:80/ | http://www.w3.org:80/robots.txt
http://www.w3.org:1234/ | http://www.w3.org:1234/robots.txt
http://w3.org/ | http://w3.org/robots.txt

Il ne peut y avoir qu'un seul « /robots.txt » sur un site. Spécifiquement, vous ne devriez pas placer de fichiers « robots.txt » dans les répertoires des utilisateurs, parce qu'un robot n'y regardera jamais. Si vous souhaitez que vos utilisateurs puissent créer leur propre fichier « robots.txt », il vous faudra tous les fusionner en un seul « /robots.txt ». Si vous ne souhaitez pas faire comme cela, vos utilisateurs pourraient employer la balise META pour les robots à la place.

Quelques trucs : les URI sont sensibles à la casse et la chaîne « /robots.txt » doit être entièrement en minuscules. Les lignes blanches ne sont pas admises au sein d'un seul enregistrement dans le fichier « robots.txt ».

Il ne doit y avoir qu'un seul champs « User-agent » exactement par enregistrement. Le robot devrait avoir une interprétation libre de ce champs. On recommande une correspondance sur la sous-chaîne du nom, insensible à la casse, sans l'indication de la version.

Si la valeur est « * », l'enregistrement décrit la politique des accès par défaut pour tout robot qui ne trouve pas de correspondance avec l'un des autres enregistrements. Il est interdit d'avoir plusieurs enregistrements de ce type dans le fichier « /robots.txt ».

Le champs « Disallow » spécifie un URI partiel qui ne doit pas être visité. Cela peut être un chemin complet ou un chemin partiel : aucun URI commençant par cette valeur ne sera ramené. Par exemple :

    Disallow: /aide inactive à la fois /aide.html et /aide/index.html, alors que
    Disallow: /aide/ inactiverait /aide/index.html mais pas /aide.html.

Une valeur vide pour «Disallow » indique que tous les URI peuvent être ramenés. Il doit y avoir au moins un champs «Disallow » dans le fichier « robots.txt ».

Les robots et l'élément META

L'élément META permet aux auteurs HTML de dire aux robots en visite si le document peut être indexé ou utilisé pour récolter plus de liens. Aucune action de l'administrateur du serveur n'est nécessaire.

Dans l'exemple suivant, le robot ne pourrait ni indexer le document ni le parcourir à la recherche de liens.

<META name="ROBOTS" content="NOINDEX, NOFOLLOW">

L'attribut content admet les valeurs suivantes : ALL, INDEX, NOFOLLOW et NOINDEX.

Remarque : Au début de 1997, seuls quelques robots respectaient ces valeurs, mais on s'attend à ce que cela change avec la publicité accrue sur le contrôle des robots d'indexation.

B.5 Remarques sur les tables

B.5.1 Les justifications de conception

Le modèle de la table HTML a pris forme à partir de l'étude des modèles de table SGML existants, du traitement des tables dans les suites de traitement de texte courantes et du large éventail des techniques de disposition tabulaire des magazines, des livres et des autres documents ayant un rapport avec le papier. Le modèle a été déterminé pour autoriser l'expression facile des tables simples en gardant une complexité supplémentaire si besoin était. Il permet une création réaliste du balisage des tables HTML à l'aide des éditeurs de texte courants et une courbe d'apprentissage réduite. Cette caractéristique a été un élément déterminant du succès de HTML jusqu'à ce jour.

De plus en plus, les personnes créent des tables par conversion à partir d'autres formats de document ou par création directe avec des éditeurs WYSIWYG. Il importe que le modèle de la table HTML corresponde parfaitement à ces outils d'édition. Celui-ci affecte la manière dont les cellules qui couvrent plusieurs rangées ou colonnes sont représentées et la manière dont l'alignement et les autres propriétés de présentation sont associés aux groupes de cellules.

Le reformatage dynamique

Un aspect capital du modèle de la table HTML c'est que l'auteur ne contrôle pas la manière dont l'utilisateur va dimensionner la table, les polices que celui-ci utilisera, etc. C'est pourquoi il est risqué de compter sur des largeurs de colonne spécifiées en unités de pixels absolues. Au contraire, les tables doivent pouvoir changer de dimensions dynamiquement pour correspondre aux dimensions et aux polices de la fenêtre courante. Les auteurs peuvent fournir des indications sur les largeurs relatives des colonnes, mais les agents utilisateurs devraient s'assurer que les colonnes soient suffisamment grandes pour restituer en largeur le plus grand élément du contenu de la cellule. Si les spécifications de l'auteur devaient être surclassées, les largeurs relatives des colonnes individuelles ne devraient pas changer radicalement.

L'affichage progressif

Pour les grandes tables ou les connexions au réseau lentes, l'affichage progressif de la table est un élément important de la satisfaction de l'utilisateur. Les agents utilisateurs devraient pouvoir commencer l'affichage de la table avant que toutes les données ne soient reçues. La largeur par défaut de la fenêtre pour la plupart des agents utilisateurs représente à peu près 80 caractères et les graphiques de nombreuses pages HTML sont conçus pour cette dimension. En spécifiant le nombre de colonnes et en incluant un matériel pour le contrôle de la largeur de la table et celles de différentes colonnes, l'auteur peut donner à l'agent utilisateur des indications qui permettent l'affichage progressif du contenu de la table.

Pour l'affichage progressif, le navigateur a besoin du nombre de colonnes et des largeurs de celles-ci. La largeur de la table par défaut vaut la taille de la fenêtre courante (width="100%"). Celle-ci peut être altérée par la spécification de l'attribut width de l'élément TABLE. Par défaut, toutes les colonnes ont la même largeur, mais vous pouvez spécifier les largeurs des colonnes au moyen d'un ou plusieurs éléments COL avant que les données proprement dites de la table n'arrivent.

Le problème qui subsiste c'est le nombre des colonnes. Certaines personnes ont suggéré d'attendre la réception de la première rangée de la table, mais cela pourrait prendre pas mal de temps si les cellules ont beaucoup de contenu. Globalement, il semble plus logique, pour un affichage progressif, d'obtenir des auteurs qu'ils spécifient explicitement le nombre des colonnes dans l'élément TABLE.

Les auteurs ont toujours besoin d'un moyen de signifier aux agents utilisateurs si ceux-ci doivent employer un affichage progressif ou bien redimensionner la table automatiquement pour loger le contenu des cellules. Dans le mode auto-ajusté en deux passes [ndt. two pass auto-sizing mode], le nombre des colonnes est déterminé par la première passe. Dans le mode progressif, le nombre de colonnes doit être déclaré avant (avec des éléments COL ou COLGROUP).

La structure et la présentation

HTML distingue le balisage structurel, tels que les paragraphes et les citations, des idiomes de restitution, telles que les marges, les polices, les couleurs, etc. Dans quelle mesure cette distinction affecte-t-elle les tables ? Du point de vue du puriste, l'alignement du texte au sein des cellules de la table et les bordures entre les cellules sont des questions de restitution, non de structure. En pratique, cependant, il est utile de regrouper ces indications avec les informations structurelles, car ces caractéristiques sont facilement portables d'une application à l'autre. Le modèle de la table HTML reporte la plupart des indications de restitution sur les feuilles de style associées. Le modèle présenté dans cette spécification est conçu pour tirer partie de ces feuilles de style mais il ne les requiert pas.

Les logiciels de PAO courants offrent un contrôle approfondi de la restitution des tables et il serait irréaliste de vouloir le reproduire en HTML, sans transformer HTML en un format de texte enrichi encombrant comme RTF ou MIF. Cette spécification offre cependant aux auteurs la possibilité de choisir parmi un ensemble de classes couramment employées de style de bordure. L'attribut frame contrôle l'apparence du bord du cadre autour de la table, alors que l'attribut rules détermine le choix des règles à l'intérieur de la table. Un contrôle plus fin sera géré via des annotations de restitution. L'attribut style peut s'utiliser pour spécifier les indications de restitution des éléments individuels. On peut donner des indications de restitution supplémentaires avec l'élément STYLE dans l'en-tête du document ou via des feuilles de style reliées.

Au cours du développement de cette spécification, un certain nombre de voies ont été explorées pour définir les motifs des règles des tables. Une difficulté concerne les genres de déclarations qui peuvent être faites. L'inclusion d'une gestion de la soustraction des bords comme de leur addition conduit à des algorithmes relativement complexes. Par exemple, le travail permettant à l'ensemble complet des éléments de table d'inclure les attributs frame et rules a produit un algorithme faisant intervenir 24 étapes pour déterminer si un bord particulier d'une cellule devrait avoir une règle ou non. Cette complexité supplémentaire n'offre même pas un contrôle de la restitution suffisant pour répondre à l'éventail complet des besoins des tables. La spécification courante se cantonne délibérément à un modèle intuitif simple qui suffit pour la plupart des cas. Des travaux expérimentaux supplémentaires sont encore nécessaires avant qu'une approche plus sophistiquée ne soit normalisée.

Les groupes de rangées et de colonnes

Cette spécification représente un sur-ensemble du modèle plus simple présenté dans les travaux précédents sur HTML+. Les tables sont considérées comme étant formées à partir d'une légende optionnelle en même temps que d'une succession de rangées, qui à leur tour sont constituées d'une succession de cellules de table. Le modèle fait en plus une distinction entre cellules de rubriques et cellules de données, et autorise les cellules à couvrir plusieurs rangées et colonnes.

Suivant en cela le modèle de la table CALS (voir [CALS]), cette spécification autorise le regroupement des rangées de la table en sections d'en-tête, de corps et de pied. Celui-ci simplifie la représentation des indications de restitution et il peut s'utiliser pour répéter les rangées d'en-tête et de pied lors de la rupture des tables hors des limites de la page ou pour donner un en-tête fixe au-dessus d'un panneau de corps défilant. Dans le balisage, la section de pied se place avant les sections de corps. C'est une optimisation partagée avec le modèle CALS pour traiter les très longues tables. Elle permet la restitution du pied sans devoir attendre le traitement entier de la table.

L'accessibilité

Pour les déficients visuels, HTML apporte l'espoir de corriger les dommages causés par l'adoption d'interfaces utilisateurs graphiques basées sur des fenêtres. Le modèle de la table HTML comprend des attributs pour l'étiquetage de chaque cellule, pour gérer une conversion du texte vers la parole de qualité supérieure. On peut également employer les mêmes attributs pour gérer l'import et l'export des données de la table entre une base de données ou une feuille de calcul.

B.5.2 Les algorithmes de disposition recommandés

Si les éléments COL ou COLGROUP sont présents, alors ils spécifient le nombre des colonnes et la table peut être restituée à l'aide d'une disposition fixe. Sinon, c'est l'algorithme de disposition automatique, décrit ci-dessous, qui devrait être utilisé.

Si l'attribut width n'est pas spécifié, les agents utilisateurs visuels devraient supposer une valeur par défaut de 100% pour la mise en forme.

On recommande que les agents utilisateurs accroissent la largeur de la table au-delà de la valeur spécifiée par l'attribut width dans les cas où, sinon, le contenu de la cellule déborderait. Les agents utilisateurs qui passent outre la largeur spécifiée devrait le faire à dessein. Les agents utilisateurs peuvent choisir de répartir les mots sur plusieurs lignes pour éviter d'avoir un défilement horizontal excessif ou quand ce défilement est irréaliste ou non souhaitable.

Pour les besoins de la disposition, les agents utilisateurs devraient considérer que les légendes des tables (spécifiées par l'élément CAPTION) se comportent comme des cellules. Toute légende est une cellule qui couvre toutes les colonnes de la table, si elle se trouve en haut ou en bas de la table, ou toutes les rangées de la table, si elle se trouve à gauche ou à droite de la table.

L'algorithme de disposition fixe

Pour cet algorithme, le nombre de colonnes est censé être connu. Les largeurs de colonne par défaut devraient avoir la même taille. Les auteurs peuvent surclasser ceci en spécifiant des largeurs de colonne relatives ou absolues, en utilisant les éléments COLGROUP ou COL. La largeur par défaut de la table correspond à l'espace entre les marges gauche et droite courantes, mais celle-ci peut être surclassée par l'attribut width sur l'élément TABLE, ou bien déterminée à partir des largeurs de colonne absolues. Pour traiter les mélanges de largeurs de colonne absolues et relatives, la première étape consiste à allouer un espace, provenant de la largeur de la table, aux colonnes qui ont des largeurs absolues. Ensuite, l'espace restant est réparti entre les colonnes qui ont des largeurs relatives.

La seule syntaxe de la table ne suffit pas à garantir la cohérence des valeurs des attributs. Par exemple, le nombre des éléments COL et COLGROUP peut être incompatible avec avec le nombre de colonnes impliqué par les cellules de la table. Un problème supplémentaire survient quand les colonnes sont trop étroites pour éviter le débordement du contenu des cellules. La largeur de la table, telle qu'elle est spécifiée par l'élément TABLE ou par les éléments COL, peut entraîner le débordement du contenu des cellules. On recommande que les agents utilisateurs essayent de se sortir de ces situations avec élégance, par exemple en effectuant la césure des mots et en recourant à la coupure des mots si les points de césure sont inconnus.

Au cas où un élément indivisible entraînerait le débordement de la cellule, l'agent utilisateur peut envisager le ré-ajustement des largeurs de colonne et le rafraîchissement de la table. Dans le pire des cas, le rognage peut être envisagé si les ajustements des largeurs de colonne et/ou le défilement du contenu de la cellule n'étaient pas faisables. Dans tous les cas, si le contenu de la cellule est séparé ou rogné, cela devrait être signalé à l'utilisateur de manière adéquate.

L'algorithme de disposition automatique

Si le nombre de colonnes n'est pas spécifié par les éléments COL et COLGROUP, alors l'agent utilisateur devrait employer l'algorithme de disposition automatique suivant. Il utilise deux passes dans les données de la table et s'ajuste linéairement à la taille de la table.

Au cours de la première passe, la coupure de ligne est inactivée et l'agent utilisateur garde en mémoire la largeur minimum et maximum de chaque cellule. La largeur maximum est déterminée par la ligne la plus longue. Comme la coupure de ligne est inactive, les paragraphes sont considérés comme des longues lignes, à moins d'une rupture du fait d'un élément BR. La largeur minimum est déterminée par l'élément de texte le plus large (mot, image, etc.) en prenant en compte les indentations de tête et les puces des listes, etc. En d'autres termes, il est nécessaire de déterminer la largeur minimum dont aurait besoin une cellule placée dans sa propre fenêtre, avant que la cellule ne commence à déborder. Le fait d'autoriser l'agent utilisateur à séparer les mots diminuera le besoin de faire appel à un défilement horizontal ou, dans le pire des cas, à un rognage du contenu de la cellule.

Ce processus concerne également les éventuelles tables imbriquées qui apparaîtraient dans le contenu des cellules. Les largeurs minimum et maximum des cellules dans les tables imbriquées sont utilisées pour déterminer les largeurs minimum et maximum de ces tables et, de ce fait, de la cellule parente de la table elle-même. L'algorithme est linéaire avec un contenu de cellule composé et il est, généralement parlant, indépendant de la profondeur d'imbrication.

Pour venir à bout du caractère d'alignement du contenu des cellules, l'agent utilisateur garde en continu trois sommes min/max pour chaque colonne : à gauche du caractère d'alignement, à droite du caractère d'alignement et non aligné. La largeur minimum d'une colonne est alors : max(min_gauche + min_droite, min_non-aligné).

Les largeurs minimum et maximum des cellules sont alors utilisées pour déterminer les largeurs minimum et maximum correspondantes des colonnes. Celles-ci sont à leur tour utilisées pour trouver les largeurs minimum et maximum de la table. Remarquez que les cellules peuvent contenir des tables imbriquées, mais cela ne complique pas le code de manière significative. L'étape suivante consiste à assigner les largeurs aux colonnes en fonction de l'espace disponible (i.e., l'espace entre les marges gauche et droite courantes).

Pour les cellules qui couvrent plusieurs colonnes, une approche simple consisterait à proportionner équitablement les largeurs min/max entre chacune des colonnes constitutives. Une approche légèrement plus complexe serait d'utiliser les largeurs min/max des cellules non couvertes pour évaluer la manière dont les largeurs couvertes sont proportionnées. L'expérimentation suggère qu'un mélange de ces deux approches donne de bons résultats pour un large éventail de tables.

Les bordures et les marges intercellulaires de la table doivent être comprises lors de l'assignation des largeurs aux colonnes. Trois cas se présentent :

  1. La largeur minimum de la table est égale ou est supérieure à l'espace disponible. Dans ce cas, assigner les largeurs minimum et permettre à l'utilisateur un défilement horizontal. Pour les conversions en Braille, il sera nécessaire de remplacer les cellules par des références aux notes donnant leur contenu entier. Par convention, ces notes apparaissent avant la table ;
  2. La largeur maximum de la table tient dans l'espace disponible. Dans ce cas, donner aux colonnes leur largeur maximum ;
  3. La largeur maximum de la table est supérieure à l'espace disponible, mais la largeur minimum de la table y est inférieure. Dans ce cas, établir la différence entre l'espace disponible et la largeur minimum de la table, appelons-la W. Appelons également D la différence entre la largeur maximum et la largeur minimum de la table.

    Pour chaque colonne, appelons d la différence entre la largeur maximum et la largeur minimum de la colonne en question. Maintenant, donnons à la colonne la largeur minimum, plus d fois W sur D. Ceci produit des colonnes avec une grande amplitude entre les largeurs minimum et maximum qui sont plus larges que les colonnes avec une amplitude plus faible.

Cette étape d'assignation est alors répétée pour les tables imbriquées, en utilisant les largeurs minimum et maximum déduites pour toutes ces tables lors de la première passe. Dans ce cas, la largeur de la cellule de table parente joue le rôle de la dimension de fenêtre courante dans la description ci-dessus. Ce processus se répète récursivement pour toutes les tables imbriquées. La table externe est alors restituée en utilisant les largeurs assignées. Les tables imbriquées sont ensuite restituées en tant que partie du contenu de la cellule de la table parente.

Si la largeur de la table est spécifiée avec; l'attribut width, l'agent utilisateur essaye d'ajuster les largeurs des colonnes pour y correspondre. L'attribut width n'est pas pris en compte si cela aboutit à des colonnes faisant moins que leur largeur minimum (i.e., indivisible).

Si des largeurs relatives sont spécifiées au moyen de l'élément COL, l'algorithme est modifié de manière à accroître les largeurs des colonnes par rapport à la largeur minimum pour satisfaire aux contraintes des largeurs relatives. Les éléments COL ne devraient être considérés que comme des indices, de sorte que les colonnes ne soient pas fixées avec une valeur moindre que leur largeur minimum. De la même façon, les colonnes ne devraient pas être si larges que la table s'étire bien au-delà des limites de la fenêtre. Si un élément COL spécifie une largeur relative de zéro, la colonne devrait toujours avoir sa largeur minimum.

Lors de l'utilisation de l'algorithme en deux passes, la position d'alignement par défaut, en l'absence d'un attribut charoff explicite ou hérité, peut se déterminer en choisissant la position qui centreraient les lignes, pour laquelle les largeurs avant et après le caractère d'alignement sont à la valeur maximale pour chacune des lignes dans la colonne avec la déclaration align="char". Pour une dispositon de table progressive, la valeur par défaut suggérée est charoff="50%". Si plusieurs cellules, dans différentes rangées de la même colonne, utilisent un caractère d'alignement, toutes ces cellules en question devraient s'aligner, indépendamment du caractère utilisé pour l'alignement. Les règles de prise en charge des objets trop grands pour une colonne s'appliquent quand l'alignement explicite ou implicite aboutit à une situation dans laquelle les données excèdent la largeur assignée à la colonne.

Le choix du nom des attributs. Il aurait été préférable de choisir les valeurs de l'attribut frame de sorte qu'elles soient compatibles avec l'attribut rules et les valeurs utilisées pour l'alignement. Par exemple : « none, top, bottom, topbot, left, right, leftright, all ». Malheureusement, SGML exige que les valeurs d'attribut énumérées soient uniques pour chaque élément, indépendamment du nom de l'attribut. C'est ce qui entraîne des problèmes immédiats pour "none", "left", "right" et "all". Les valeurs de l'attribut frame ont été choisies pour éviter les conflits avec les attributs rules, align et valign. C'est une mesure de prémunition, car il est prévu que les attributs frame et rules seront ajoutés aux autres éléments de table dans les futures révisions de cette spécification. Une alternative aurait consisté à donner le type CDATA aux valeurs de l'attribut frame. Le consensus qui a prévalu au sein du groupe de travail HTTP du W3C, c'est que les bénéfices de pouvoir employer des outils de validation SGML, pour vérifier les attributs en fonction de valeurs énumérées, l'emportaient sur la cohérence des noms.

B.6 Remarques sur les formulaires

B.6.1 L'affichage progressif

L'affichage progressif des documents qui sont en cours de réception à partir du réseau soulève certains problèmes en ce qui concerne les formulaires. Les agents utilisateurs devraient empêcher la soumission d'un formulaire tant que tous les éléments du formulaire n'ont pas été reçus.

L'affichage progressif des documents soulève certaines questions vis-à-vis de la navigation par tabulation. L'heuristique pour donner l'attention à l'élément ayant la plus petite valeur pour l'attribut tabindex dans le document semble raisonnable au premier abord. Cependant, cela implique d'attendre que tout le texte du document soit reçu, puisque jusqu'alors la plus petite valeur de l'attribut tabindex peut encore changer. Si l'utilisateur frappe la touche de tabulation avant ce moment, il est raisonnable que les agents utilisateurs déplacent l'attention sur la plus petite valeur tabindex couramment disponible.

Si le formulaire est associé à un script côté client, cela peut entraîner d'autres problèmes potentiels. Par exemple, le gestionnaire de script d'un champs donné peut se référer à un champs qui n'existe pas encore.

B.6.2 Les évolutions futures

Cette spécification définit un ensemble d'éléments et d'attributs qui sont suffisamment puissants pour satisfaire les besoins généraux pour la production de formulaires. Cependant, il y a toujours de la place pour nombre d'améliorations possibles. Par exemple, les problèmes suivants pourraient être résolus dans le futur :

  • L'éventail des types de champs de formulaire est trop limité par rapport aux interfaces utilisateurs modernes. Par exemple, il n'y a aucune mesure pour les entrées de données tabulaires, les cases de défilement [ndt. sliders] ou les dispositions de page multiple ;
  • les serveurs ne peuvent pas mettre à jour les champs d'un formulaire soumis et, au lieu de cela, ils doivent renvoyer un document HTML entier, entraînant le papillotement de l'écran
  • les points précédents entraînent également des problèmes pour les navigateurs vocaux, rendant l'interaction avec un formulaire difficile aux déficients visuels.

Une autre extension possible serait l'ajout de l'attribut usemap à l'élément INPUT en utilisation comme image cliquable côté client pour une déclaration "type=image". L'élément AREA correspondant à l'emplacement cliqué contribuerait à passer cette valeur au serveur. Pour éviter d'avoir à modifier les scripts du serveur, il peut être approprié de renforcer l'élément AREA pour qu'il fournisse les valeurs « x » et « y » à utiliser avec l'élément INPUT.

B.7 Remarques sur les scripts

B.7.1 La syntaxe réservée pour les macrocommandes de script futures

Cette spécification réserve une syntaxe pour la gestion future des macrocommandes de script dans les attributs HTML du type CDATA. L'intention est de permettre la spécification des attributs en fonction des propriétés des objets qui apparaissent plus tôt dans la page. La syntaxe est la suivante :

   attribut = "... &{ corps de la macrocommande }; ... "

Les pratiques courantes pour les macrocommandes de script

Le corps de la macrocommande est constitué d'une ou plusieurs déclarations dans le langage de script par défaut (selon les attributs d'événement intrinsèque). Le point-virgule « ; » qui suit l'accolade fermante « } » est toujours nécessaire car, sinon, ce caractère accolade droite « } » est considéré comme faisant partie du corps de la macrocommande. Il est intéressant de remarquer que les guillemets sont toujours nécessaires pour les attributs contenant des macrocommandes de script.

Le traitement des attributs de type CDATA se déroule de la façon suivante :

  1. L'analyseur SGML évalue les éventuelles entités SGML (par exemple, "&gt;") ;
  2. Puis les macrocommandes de script sont évaluées par le moteur de script ;
  3. Enfin, la chaîne de caractères résultante est passée à l'application pour le traitement suivant.

Le traitement des macrocommandes intervient lors du chargement (ou du déchargement) du document, mais n'est pas réitéré quand le document est redimensionné, rafraîchi, etc.

EXEMPLE DÉCONSEILLÉ :
Voici quelques exemples utilisant JavaScript. Le premier rend la couleur d'arrière-plan du document aléatoire :

    <BODY bgcolor='&{randomrgb};'>

Vous voulez peut-être atténuer l'arrière-plan pour une consultation le soir :

    <BODY bgcolor='&{if(Date.getHours > 18)...};'>

L'exemple suivant utilise JavaScript pour fixer les coordonnées d'une image cliquable côté client :

 <MAP NAME=foo>
   <AREA shape="rect" coords="&{myrect(imageuri)};" href="&{myuri};" alt="">
 </MAP>

Cet exemple règle la taille d'une image en fonction des propriétés du document :

    <IMG src="bar.gif" width='&{document.banniere.width/2};' height='50%' alt="banni&egrave;re">

Vous pouvez règler l'URI d'un lien ou d'une image par un script :

 <SCRIPT type="text/javascript">
   function fabricant(gadget) {
       ...
   }
   function localisation(fabricant) {
       ...
   }
   function logo(fabricant) {
       ...
   }
 </SCRIPT>
  <A href='&{localisation(fabricant("gadget"))};'>gadget</A>
  <IMG src='&{logo(fabricant("gadget"))};' alt="logo">

Ce dernier exemple montre la manière avec laquelle on peut quoter les attributs SGML de type CDATA à l'aide de guillemets simples ou doubles. Si vous utilisez des guillemets simples autour de la valeur de chaîne de l'attribut, alors vous pouvez inclure des guillemets doubles faisant partie de la chaîne en question. Une autre approche consisterait à utiliser l'entité « &quot; » pour les guillemets doubles :

   <IMG src="&{logo(fabricant(&quot;gadget&quot;))};" alt="logo">

B.8 Remarques sur les cadres

Étant donné qu'il n'y a aucune garantie pour que le nom d'un cadre cible soit unique, il est approprié de décrire la pratique courante pour trouver un cadre en fonction d'un nom de cible :

  1. Si le nom de cible est un mot réservé, tel que décrit dans la partie normative, l'appliquer comme tel ;
  2. Sinon, effectuer une première recherche en profondeur de la hiérarchie du cadre dans la fenêtre qui contenait le lien. Utiliser le premier cadre dont le nom correspond exactement ;
  3. Si, au cours de l'étape (2), on ne trouve pas un tel cadre, appliquer à nouveau l'étape (2) à chaque fenêtre, de l'avant vers l'arrière. S'arrêter dès la rencontre d'un cadre ayant exactement le même nom ;
  4. Si l'étape (3) n'aboutit pas, créer une nouvelle fenêtre et lui assigner ce nom de cible.

B.9 Remarques sur l'accessibilité

L'initiative pour l'accessibilité au Web du W3C ([WAI]) est en train de produire une série de principes directeurs pour améliorer l'accessibilité au Web pour les personnes avec des déficiences physiques. Il y a trois jeux de principes directeurs :

  • Les principes directeurs pour l'accessibilité du contenu Web ([WCGL]), pour les auteurs et les gestionnaires de sites. Veuillez consulter les principes directeurs pour l'accessibilité du contenu Web concernant la fourniture d'un texte de remplacement pour les images, les applets, les scripts, etc.
  • les principes directeurs pour l'accessibilité des agents utilisateurs ([UAGL]), pour les développeurs des agents utilisateurs (navigateurs, visualiseurs multimédias, technologies d'assistance). Veuillez consulter ces principes directeurs pour la conduite à suivre dans la gestion d'un texte de remplacement
  • les principes directeurs pour l'accessibilité des outils d'édition ([ATGL]), pour les développeurs des outils d'édition.

B.10 Remarques sur la sécurité

Les ancres, les images incorporées et tous les autres éléments qui contiennent un URI en paramètre peuvent provoquer la résolution de l'URI, en réponse à une entrée de l'utilisateur. Auquel cas, les questions de sécurité dans le document [RFC1738], section 6, devraient être considérées. Les méthodes très répandues pour la soumission des requêtes de formulaire, à savoir HTTP et SMTP, offrent peu de garantie de confidentialité. Les fournisseurs d'information, qui demandent des informations sensibles via un formulaire, particulièrement au moyen de l'élément INPUT et de la déclaration type="password", devraient avoir conscience de cette absence de confidentialité et en prévenir leurs utilisateurs.

B.10.1 Les problèmes de sécurité des formulaires

L'agent utilisateur ne devrait pas envoyer un fichier qui n'aura pas été explicitement demandé à l'utilisateur. Les agents utilisateurs HTML sont donc censés confirmer tous les noms de fichier par défaut qui pourrait être suggérés par l'attribut value de l'élément INPUT. Les commandes cachées ne doivent pas spécifier de fichiers.

Cette spécification ne comprend pas de mécanisme pour le cryptage des données : ceci devrait être pris en charge par les autres mécanismes en place, quels qu'ils soient, pour la transmission sécurisée des données.

Une fois que le fichier est chargé sur le serveur, l'agent de traitement devrait le traiter et l'enregistrer de manière adéquate.


Index des éléments HTML 4

Index des éléments

Légende : Optionnel, Interdit, Vide, Déconseillé, DTD Transitoire, DTD avec jeu d'enCadrement

Nom | Balise ouvrante | Balise fermante | Vide | Déc. | DTD | Description
A |  |  |  |  |  | ancre
ABBR |  |  |  |  |  | abréviation (e.g., WWW, HTTP, etc.)
ACRONYM |  |  |  |  |  | acronyme
ADDRESS |  |  |  |  |  | informations sur l'auteur
APPLET |  |  |  | D | T | applet Java
AREA |  | I | V |  |  | aire d'image cliquable côté client
B |  |  |  |  |  | style de texte gras
BASE |  | I | V |  |  | URI de base du document
BASEFONT |  | I | V | D | T | taille de la police de base
BDO |  |  |  |  |  | inactivation de l'algorithme I18N BiDi
BIG |  |  |  |  |  | style de texte agrandi
BLOCKQUOTE |  |  |  |  |  | citation longue
BODY | O | O |  |  |  | corps du document
BR |  | I | V |  |  | saut de ligne forcé
BUTTON |  |  |  |  |  | bouton poussoir
CAPTION |  |  |  |  |  | légende de la table
CENTER |  |  |  | D | T | raccourci pour DIV align=center
CITE |  |  |  |  |  | citation
CODE |  |  |  |  |  | fragment de code
COL |  | I | V |  |  | colonne de table
COLGROUP |  | O |  |  |  | groupe de colonnes de table
DD |  | O |  |  |  | description de la définition
DEL |  |  |  |  |  | texte supprimé [ndt. deleted]
DFN |  |  |  |  |  | définition d'instance
DIR |  |  |  | D | T | liste d'annuaire [ndt. directory list]
DIV |  |  |  |  |  | conteneur de langue/style générique
DL |  |  |  |  |  | liste de définitions [ndt. definition list]
DT |  | O |  |  |  | terme de définition [ndt. definition term]
EM |  |  |  |  |  | emphase
FIELDSET |  |  |  |  |  | groupe de commandes de formulaire
FONT |  |  |  | D | T | changement local à la police
FORM |  |  |  |  |  | formulaire interactif
FRAME |  | I | V |  | C | sous-fenêtre
FRAMESET |  |  |  |  | C | subdivision de fenêtre
H1 |  |  |  |  |  | titrage
H2 |  |  |  |  |  | titrage
H3 |  |  |  |  |  | titrage
H4 |  |  |  |  |  | titrage
H5 |  |  |  |  |  | titrage
H6 |  |  |  |  |  | titrage
HEAD | O | O |  |  |  | en-tête du document
HR |  | I | V |  |  | règle horizontale
HTML | O | O |  |  |  | élément racine du document
I |  |  |  |  |  | style de texte italique
IFRAME |  |  |  |  | T | sous-fenêtre en-ligne
IMG |  | I | V |  |  | image incoporée
INPUT |  | I | V |  |  | commande de formulaire
INS |  |  |  |  |  | texte inséré [ndt. inserted text]
ISINDEX |  | I | V | D | T | invite sur une seule ligne
KBD |  |  |  |  |  | texte à entrer par l'utilisateur
LABEL |  |  |  |  |  | texte du label d'un champs de formulaire
LEGEND |  |  |  |  |  | légende du jeu de champs
LI |  | O |  |  |  | item de liste
LINK |  | I | V |  |  | lien indépendant du média
MAP |  |  |  |  |  | image cliquable côté client
MENU |  |  |  | D | T | liste de menus
META |  | I | V |  |  | métainformations génériques
NOFRAMES |  |  |  |  | C | conteneur du contenu de remplacement pour une restitution sans cadres
NOSCRIPT |  |  |  |  |  | conteneur du contenu de remplacement pour une restitution sans scripts
OBJECT |  |  |  |  |  | objet incorporé générique
OL |  |  |  |  |  | liste ordonnée [ndt. ordered list]
OPTGROUP |  |  |  |  |  | groupe d'options
OPTION |  | O |  |  |  | option sélectionnable
P |  | O |  |  |  | paragraphe
PARAM |  | I | V |  |  | valeur de propriété nommée
PRE |  |  |  |  |  | texte préformaté
Q |  |  |  |  |  | brè citation en-ligne
S |  |  |  | D | T | style de texte barré [ndt. strike-through]
SAMP |  |  |  |  |  | exemple de sortie d'un programme, scripts, etc.
SCRIPT |  |  |  |  |  | déclarations de script
SELECT |  |  |  |  |  | sélecteur d'option
SMALL |  |  |  |  |  | style de texte diminué
SPAN |  |  |  |  |  | conteneur de langue/style générique
STRIKE |  |  |  | D | T | texte barré
STRONG |  |  |  |  |  | forte emphase
STYLE |  |  |  |  |  | indication de style
SUB |  |  |  |  |  | écriture en lettres inférieures
SUP |  |  |  |  |  | écriture en lettres supérieures
TABLE |  |  |  |  |  |
TBODY | O | O |  |  |  | corps de table
TD |  | O |  |  |  | cellule de données d'une table [ndt. table data cell]
TEXTAREA |  |  |  |  |  | champs de texte multiligne
TFOOT |  | O |  |  |  | pied de table
TH |  | O |  |  |  | cellule de rubrique d'une table [ndt. table header cell]
THEAD |  | O |  |  |  | en-tête de table
TITLE |  |  |  |  |  | titre du document
TR |  | O |  |  |  | rangée de table [ndt. table row]
TT |  |  |  |  |  | style de texte téléimprimeur ou à chasse fixe [ndt. monospaced]
U |  |  |  | D | T | style de texte souligné
UL |  |  |  |  |  | liste non-ordonnée [ndt. unordered list]
VAR |  |  |  |  |  | instance d'une variable ou argument de programme


Index des attributs HTML 4

Index des attributs

Légende : Déconseillé, DTD Transitoire, DTD avec jeu d'enCadrement

Nom | Éléments concernés | Type | Valeur par défaut | Déc. | DTD | Commentaires
abbr | TD, TH | %Text; | #IMPLIED |  |  | abréviation pour cellule de rubrique
accept-charset | FORM | %Charsets; | #IMPLIED |  |  | liste des jeux de caractères reconnus
accept | FORM, INPUT | %ContentTypes; | #IMPLIED |  |  | liste de types MIME pour chargement d'un fichier sur le serveur
accesskey | A, AREA, BUTTON, INPUT, LABEL, LEGEND, TEXTAREA | %Character; | #IMPLIED |  |  | touche de caractère pour l'accessibilité
action | FORM | %URI; | #REQUIRED |  |  | gestionnaire de formulaire côté serveur
align | CAPTION | %CAlign; | #IMPLIED | D | T | relativement à la table
align | APPLET, IFRAME, IMG, INPUT, OBJECT | %IAlign; | #IMPLIED | D | T | alignement vertical ou horizontal
align | LEGEND | %LAlign; | #IMPLIED | D | T | relativement au jeu de champs
align | TABLE | %TAlign; | #IMPLIED | D | T | position de la table relativement à la fenêtre
align | HR | (left | center | right) | #IMPLIED | D | T |
align | DIV, H1, H2, H3, H4, H5, H6, P | (left | center | right | justify) | #IMPLIED | D | T | alignement, alignement du texte
align | COL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD, TR | (left | center | right | justify | char) | #IMPLIED |  |  |
alink | BODY | %Color; | #IMPLIED | D | T | couleur des liens sélectionnés
alt | APPLET | %Text; | #IMPLIED | D | T | brève description
alt | AREA, IMG | %Text; | #REQUIRED |  |  | brève description
alt | INPUT | CDATA | #IMPLIED |  |  | brève description
archive | APPLET | CDATA | #IMPLIED | D | T | liste d'archives séparées par des virgules
archive | OBJECT | CDATA | #IMPLIED |  |  | liste d'URI séparés par des espaces
axis | TD, TH | CDATA | #IMPLIED |  |  | liste des rubriques concernées séparées par des virgules
background | BODY | %URI; | #IMPLIED | D | T | mosaïque de textures pour l'arrière-plan du document
bgcolor | TABLE | %Color; | #IMPLIED | D | T | couleur d'arrière-plan des cellules
bgcolor | TR | %Color; | #IMPLIED | D | T | couleur d'arrière-plan des rangées
bgcolor | TD, TH | %Color; | #IMPLIED | D | T | couleur d'arrière-plan des cellules
bgcolor | BODY | %Color; | #IMPLIED | D | T | couleur d'arrière-plan du document
border | TABLE | %Pixels; | #IMPLIED |  |  | épaisseur du contour de la table
border | IMG, OBJECT | %Pixels; | #IMPLIED | D | T | épaisseur de la bordure du lien
cellpadding | TABLE | %Length; | #IMPLIED |  |  | espacement à l'intérieur des cellules
cellspacing | TABLE | %Length; | #IMPLIED |  |  | espacement entre les cellules
char | COL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD, TR | %Character; | #IMPLIED |  |  | caractère d'alignement, e.g. char=':'
charoff | COL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD, TR | %Length; | #IMPLIED |  |  | décalage du caractère d'alignement
charset | A, LINK, SCRIPT | %Charset; | #IMPLIED |  |  | encodage de caractères de la ressource reliée
checked | INPUT | (checked) | #IMPLIED |  |  | pour les boutons radio et les cases à cocher
cite | BLOCKQUOTE, Q | %URI; | #IMPLIED |  |  | URI du document ou message sources
cite | DEL, INS | %URI; | #IMPLIED |  |  | informations sur la raison du changement
class | Tous les éléments, sauf BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE et TITLE | CDATA | #IMPLIED |  |  | liste de classes séparées par des espaces
classid | OBJECT | %URI; | #IMPLIED |  |  | identifie une implémentation
clear | BR | (left | all | right | none) | none | D | T | contrôle l'écoulement du texte
code | APPLET | CDATA | #IMPLIED | D | T | fichier de classe de l'applet
codebase | OBJECT | %URI; | #IMPLIED |  |  | URI de base pour les attributs classid, data, archive
codebase | APPLET | %URI; | #IMPLIED | D | T | URI de base optionnel pour l'applet
codetype | OBJECT | %ContentType; | #IMPLIED |  |  | type de contenu de l'attribut code
color | BASEFONT, FONT | %Color; | #IMPLIED | D | T | couleur du texte
cols | FRAMESET | %MultiLengths; | #IMPLIED |  | C | liste de longueurs, par défaut : 100% (1 colonne)
cols | TEXTAREA | NUMBER | #REQUIRED |  |  |
colspan | TD, TH | NUMBER | 1 |  |  | nombre de colonnes couvertes par la cellule
compact | DIR, DL, MENU, OL, UL | (compact) | #IMPLIED | D | T | espacement inter-items réduit
content | META | CDATA | #REQUIRED |  |  | informations associées
coords | AREA | %Coords; | #IMPLIED |  |  | liste de longueurs séparées par des virgules
coords | A | %Coords; | #IMPLIED |  |  | à utiliser avec les images cliquables côté client
data | OBJECT | %URI; | #IMPLIED |  |  | référence aux données de l'objet
datetime | DEL, INS | %Datetime; | #IMPLIED |  |  | date et heure du changement
declare | OBJECT | (declare) | #IMPLIED |  |  | déclare mais n'instancie pas le drapeau
defer | SCRIPT | (defer) | #IMPLIED |  |  | l'agent utilisateur peut différer l'exécution du script
dir | Tous les éléments, sauf APPLET, BASE, BASEFONT, BDO, BR, FRAME, FRAMESET, IFRAME, PARAM, SCRIPT | (ltr | rtl) | #IMPLIED |  |  | direction du texte faible/neutre
dir | BDO | (ltr | rtl) | #REQUIRED |  |  | directionnalité
disabled | BUTTON, INPUT, OPTGROUP, OPTION, SELECT, TEXTAREA | (disabled) | #IMPLIED |  |  | indisponible dans ce contexte
enctype | FORM | %ContentType; | "application/x-www- form-urlencoded" |  |  |
face | BASEFONT, FONT | CDATA | #IMPLIED | D | T | liste de noms de police séparés par des virgules
for | LABEL | IDREF | #IMPLIED |  |  | correspond à la valeur ID du champs
frame | TABLE | %TFrame; | #IMPLIED |  |  | quelles parties du contour restituer
frameborder | FRAME, IFRAME | (1 | 0) | 1 |  | C | bordures de cadre ou non ?
headers | TD, TH | IDREFS | #IMPLIED |  |  | liste des id des cellules de rubrique
height | IFRAME | %Length; | #IMPLIED |  | T | hauteur du cadre
height | TD, TH | %Length; | #IMPLIED | D | T | hauteur de la cellule
height | IMG, OBJECT | %Length; | #IMPLIED |  |  | surclasser la hauteur
height | APPLET | %Length; | #REQUIRED | D | T | hauteur initiale
href | A, AREA, LINK | %URI; | #IMPLIED |  |  | URI de la ressource reliée
href | BASE | %URI; | #IMPLIED |  |  | URI qui fait office d'URI de base
hreflang | A, LINK | %LanguageCode; | #IMPLIED |  |  | code de langue
hspace | APPLET, IMG, OBJECT | %Pixels; | #IMPLIED | D | T | gouttière horizontale
http-equiv | META | NAME | #IMPLIED |  |  | nom de l'en-tête de réponse HTTP
id | Tous les éléments, sauf BASE, HEAD, HTML, META, SCRIPT, STYLE, TITLE | ID | #IMPLIED |  |  | identifiant unique au document
ismap | IMG, INPUT | (ismap) | #IMPLIED |  |  | utiliser une image cliquable côté serveur
label | OPTION | %Text; | #IMPLIED |  |  | à utiliser dans les menus hiérarchiques
label | OPTGROUP | %Text; | #REQUIRED |  |  | à utiliser dans les menus hiérarchiques
lang | Tous les éléments, sauf APPLET, BASE, BASEFONT, BR, FRAME, FRAMESET, IFRAME, PARAM, SCRIPT | %LanguageCode; | #IMPLIED |  |  | code de langue
language | SCRIPT | CDATA | #IMPLIED | D | T | nom de langage de script prédéfini
link | BODY | %Color; | #IMPLIED | D | T | couleur des liens
longdesc | IMG | %URI; | #IMPLIED |  |  | lien vers une description longue (en complément de l'attribut alt)
longdesc | FRAME, IFRAME | %URI; | #IMPLIED |  | C | lien vers une description longue (en complément de l'attribut title)
marginheight | FRAME, IFRAME | %Pixels; | #IMPLIED |  | C | marges verticales en pixels
marginwidth | FRAME, IFRAME | %Pixels; | #IMPLIED |  | C | marges horizontales en pixels
maxlength | INPUT | NUMBER | #IMPLIED |  |  | nombre de caractères maxi pour les champs de texte
media | STYLE | %MediaDesc; | #IMPLIED |  |  | prévu pour ces médias
media | LINK | %MediaDesc; | #IMPLIED |  |  | pour restitution sur ces médias
method | FORM | (GET | POST) | GET |  |  | méthode HTTP utilisée pour soumettre le formulaire
multiple | SELECT | (multiple) | #IMPLIED |  |  | sélection simple par défaut
name | BUTTON, TEXTAREA | CDATA | #IMPLIED |  |  |
name | APPLET | CDATA | #IMPLIED | D | T | permet aux applets de se trouver les uns les autres
name | SELECT | CDATA | #IMPLIED |  |  | nom du champs
name | FORM | CDATA | #IMPLIED |  |  | nom du formulaire pour les scripts
name | FRAME, IFRAME | CDATA | #IMPLIED |  | C | nom du cadre pour le ciblage
name | IMG | CDATA | #IMPLIED |  |  | nom de l'image pour les scripts
name | A | CDATA | #IMPLIED |  |  | extrêmité du lien nommée
name | INPUT, OBJECT | CDATA | #IMPLIED |  |  | soumettre comme partie du formulaire
name | MAP | CDATA | #REQUIRED |  |  | pour appel par l'attribut usemap
name | PARAM | CDATA | #REQUIRED |  |  | nom de propriété
name | META | NAME | #IMPLIED |  |  | nom des métainformations
nohref | AREA | (nohref) | #IMPLIED |  |  | cette région est inactive
noresize | FRAME | (noresize) | #IMPLIED |  | C | autoriser l'utilisateur à redimensionner le cadre ?
noshade | HR | (noshade) | #IMPLIED | D | T |
nowrap | TD, TH | (nowrap) | #IMPLIED | D | T | suppression de la césure
object | APPLET | CDATA | #IMPLIED | D | T | fichier d'applet sérialisé
onblur | A, AREA, BUTTON, INPUT, LABEL, SELECT, TEXTAREA | %Script; | #IMPLIED |  |  | l'élément a perdu l'attention
onchange | INPUT, SELECT, TEXTAREA | %Script; | #IMPLIED |  |  | la valeur de l'élément a changé
onclick | Tous les éléments, sauf APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME, FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT, STYLE, TITLE | %Script; | #IMPLIED |  |  | le bouton d'un pointeur a été cliqué
ondblclick | Tous les éléments, sauf APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME, FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT, STYLE, TITLE | %Script; | #IMPLIED |  |  | le bouton d'un pointeur a été double cliqué
onfocus | A, AREA, BUTTON, INPUT, LABEL, SELECT, TEXTAREA | %Script; | #IMPLIED |  |  | l'élément a reçu l'attention
onkeydown | Tous les éléments, sauf APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME, FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT, STYLE, TITLE | %Script; | #IMPLIED |  |  | une touche est appuyée
onkeypress | Tous les éléments, sauf APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME, FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT, STYLE, TITLE | %Script; | #IMPLIED |  |  | une touche a été pressée puis relâchée
onkeyup | Tous les éléments, sauf APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME, FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT, STYLE, TITLE | %Script; | #IMPLIED |  |  | une touche est relâchée
onload | FRAMESET | %Script; | #IMPLIED |  | C | tous les cadres ont été chargés
onload | BODY | %Script; | #IMPLIED |  |  | le document a été chargé
onmousedown | Tous les éléments, sauf APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME, FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT, STYLE, TITLE | %Script; | #IMPLIED |  |  | le bouton d'un pointeur a été appuyé
onmousemove | Tous les éléments, sauf APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME, FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT, STYLE, TITLE | %Script; | #IMPLIED |  |  | le bouton d'un pointeur a été déplacé à l'intérieur
onmouseout | Tous les éléments, sauf APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME, FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT, STYLE, TITLE | %Script; | #IMPLIED |  |  | le bouton d'un pointeur a été déplacé en dehors
onmouseover | Tous les éléments, sauf APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME, FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT, STYLE, TITLE | %Script; | #IMPLIED |  |  | le bouton d'un pointeur a été déplacé sur
onmouseup | Tous les éléments, sauf APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME, FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT, STYLE, TITLE | %Script; | #IMPLIED |  |  | le bouton d'un pointeur a été relâché
onreset | FORM | %Script; | #IMPLIED |  |  | le formulaire a été réinitialisé
onselect | INPUT, TEXTAREA | %Script; | #IMPLIED |  |  | un texte a été sélectionné
onsubmit | FORM | %Script; | #IMPLIED |  |  | le formulaire a été soumis
onunload | FRAMESET | %Script; | #IMPLIED |  | C | tous les cadres ont été retirés
onunload | BODY | %Script; | #IMPLIED |  |  | le document a été retiré
profile | HEAD | %URI; | #IMPLIED |  |  | dictionnaire de métainformations nommé
prompt | ISINDEX | %Text; | #IMPLIED | D | T | message d'invite
readonly | TEXTAREA | (readonly) | #IMPLIED |  |  |
readonly | INPUT | (readonly) | #IMPLIED |  |  | pour les boutons de type text et passwd
rel | A, LINK | %LinkTypes; | #IMPLIED |  |  | types de lien progressif
rev | A, LINK | %LinkTypes; | #IMPLIED |  |  | types de lien régressif
rows | FRAMESET | %MultiLengths; | #IMPLIED |  | C | liste de longueurs, par défaut : 100% (1 rangée)
rows | TEXTAREA | NUMBER | #REQUIRED |  |  |
rowspan | TD, TH | NUMBER | 1 |  |  | nombre de rangées couvertes par la cellule
rules | TABLE | %TRules; | #IMPLIED |  |  | règles entre rangées et colonnes
scheme | META | CDATA | #IMPLIED |  |  | selectionner une forme de contenu
scope | TD, TH | %Scope; | #IMPLIED |  |  | portée des cellules de rubrique
scrolling | FRAME, IFRAME | (yes | no | auto) | auto |  | C | barres de défilement ou non
selected | OPTION | (selected) | #IMPLIED |  |  |
shape | AREA | %Shape; | rect |  |  | contrôle l'interprétation des coordonnées
shape | A | %Shape; | rect |  |  | à utiliser avec les images cliquables côté client
size | HR | %Pixels; | #IMPLIED | D | T |
size | FONT | CDATA | #IMPLIED | D | T | [+|-]entier, e.g. size="+1", size="4"
size | INPUT | CDATA | #IMPLIED |  |  | propre à chaque type de champs
size | BASEFONT | CDATA | #REQUIRED | D | T | taille de police de base pour les éléments FONT
size | SELECT | NUMBER | #IMPLIED |  |  | rangées visibles
span | COL | NUMBER | 1 |  |  | les attributs de l'élément COL affectent "n" colonnes
span | COLGROUP | NUMBER | 1 |  |  | nombre de colonnes par défaut dans le groupe
src | SCRIPT | %URI; | #IMPLIED |  |  | URI d'un script externe
src | INPUT | %URI; | #IMPLIED |  |  | pour les champs avec des images
src | FRAME, IFRAME | %URI; | #IMPLIED |  | C | source du contenu du cadre
src | IMG | %URI; | #REQUIRED |  |  | URI de l'image à incorporer
standby | OBJECT | %Text; | #IMPLIED |  |  | message à montrer pendant le chargement
start | OL | NUMBER | #IMPLIED | D | T | numéro commençant la séquence
style | Tous les éléments, sauf BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE, TITLE | %StyleSheet; | #IMPLIED |  |  | indications de style associées
summary | TABLE | %Text; | #IMPLIED |  |  | objet/structure pour sortie vocale
tabindex | A, AREA, BUTTON, INPUT, OBJECT, SELECT, TEXTAREA | NUMBER | #IMPLIED |  |  | position dans l'ordre de tabulation
target | A, AREA, BASE, FORM, LINK | %FrameTarget; | #IMPLIED |  | T | restituer dans ce cadre
text | BODY | %Color; | #IMPLIED | D | T | couleur du texte du document
title | Tous les éléments, sauf BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, TITLE | %Text; | #IMPLIED |  |  | titre consultatif
type | A, LINK | %ContentType; | #IMPLIED |  |  | type de contenu consultatif
type | OBJECT | %ContentType; | #IMPLIED |  |  | type de contenu pour l'attribut data
type | PARAM | %ContentType; | #IMPLIED |  |  | type de contenu pour l'attribut value quand valuetype=ref
type | SCRIPT | %ContentType; | #REQUIRED |  |  | type de contenu du langage de script
type | STYLE | %ContentType; | #REQUIRED |  |  | type de contenu du langage de style
type | INPUT | %InputType; | TEXT |  |  | le genre de gadget voulu
type | LI | %LIStyle; | #IMPLIED | D | T | style de l'item de liste
type | OL | %OLStyle; | #IMPLIED | D | T | style de numérotation
type | UL | %ULStyle; | #IMPLIED | D | T | style de puce
type | BUTTON | (button | submit | reset) | submit |  |  | utiliser comme bouton de formulaire
usemap | IMG, INPUT, OBJECT | %URI; | #IMPLIED |  |  | utiliser une image cliquable côté client
valign | COL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD, TR | (top | middle | bottom | baseline) | #IMPLIED |  |  | alignement vertical dans les cellules
value | INPUT | CDATA | #IMPLIED |  |  | spécifier pour les boutons radio et les cases à cocher
value | OPTION | CDATA | #IMPLIED |  |  | par défaut, le contenu de l'élément
value | PARAM | CDATA | #IMPLIED |  |  | valeur de propriété
value | BUTTON | CDATA | #IMPLIED |  |  | envoyé au serveur à la soumission
value | LI | NUMBER | #IMPLIED | D | T | réinitialise le numéro dans la séquence
valuetype | PARAM | (DATA | REF | OBJECT) | DATA |  |  | comment interpréter la valeur
version | HTML | CDATA | %HTML.Version; | D | T | une constante
vlink | BODY | %Color; | #IMPLIED | D | T | couleur des liens visités
vspace | APPLET, IMG, OBJECT | %Pixels; | #IMPLIED | D | T | gouttière verticale
width | HR | %Length; | #IMPLIED | D | T |
width | IFRAME | %Length; | #IMPLIED |  | T | largeur du cadre
width | IMG, OBJECT | %Length; | #IMPLIED |  |  | surclasser la largeur
width | TABLE | %Length; | #IMPLIED |  |  | largeur de la table
width | TD, TH | %Length; | #IMPLIED | D | T | largeur de la cellule
width | APPLET | %Length; | #REQUIRED | D | T | largeur initiale
width | COL | %MultiLength; | #IMPLIED |  |  | spécification de la largeur de colonne
width | COLGROUP | %MultiLength; | #IMPLIED |  |  | largeur par défaut des éléments COL contenus
width | PRE | NUMBER | #IMPLIED | D | T |


La version française de cette traduction est :
http://www.la-grange.net/w3c/html4.01/

Traducteur : J.J.Solari dans le cadre de l'effort de la liste de discussion w3c-translators.fr@w3.org
La version française peut contenir des erreurs. La version anglaise de cette note est l'unique version normative. Version originale : http://www.w3.org/TR/1999/REC-html401-19991224

Index

A B C D E F G H I J L M N O P R S T U W
abréviations et acronymes 1
accessibilité
clés d'accès 1
contenu de l'objet de remplacement 1
contenu de remplacement des cadres 1
description longue d'une image 1
descriptions longues des cadres 1
feuilles de style 1
fonctionnalités de HTML 4 1
images cliquables 1, 2
texte de remplacement 1
agent utilisateur 1
données de script 1
données de style 1
conforme 1
gestion des images cliquables 1
situations d'erreur 1, 2
traitement des données de script et de style 1
alignement
contenu de la table 1
éléments de type bloc 1
flottements 1
images 1
objets 1
texte flottant 1
alternatives, feuilles de style [...] 1
ancre 1
caractères ASCII dans le nom 1
caractères non-ASCII dans le nom 1
casse du nom 1
création avec l'attribut id 1
création avec l'élément A 1
élément A comparé à attribut id 1
espace de nom 1
fixée par un script 1
références de caractères dans le nom 1
syntaxe du nom 1
unicité du nom 1
applet
moyens pour inclure 1
application/x-www-form-urlencoded 1, 2
arrière-plan, couleur d'[...] 1
attention 1
clé d'accès 1
label qui donne l'attention à une commande 1
attribut 1
casse de la valeur 1
booléen 1
booléen minimisé 1
déclaration dans le DTD 1
guillemets autour de la valeur 1
insensible à la casse 1
valeur #FIXED 1
valeur #IMPLIED 1
valeur #REQUIRED 1
%attrs; 1
auteur 1
balisage 1
balise fermante 1
déclarée optionnelle 1
omise 1
balise ouvrante 1
omise 1
bi-directionnel
algorithme Unicode 1
encodage de caractères 1
feuille de style 1
inactivation 1
blanc 1
autour des cadres 1
autour des contenus de la table 1
autour des images et des objets 1
caractère 1
fusion des blancs 1
préservé dans l'élément PRE 1
bloc
bi-directionnalité 1, 2
type d'élément 1
%block; 1
BODY
pas dans un jeu d'encadrement 1
booléen, attribut [...]1, 2
minimisé 1
bordure
cadre 1
image 1
objet 1
table 1
bouton poussoir 1
bouton radio 1
bouton de réinitialisation 1
bouton de soumission 1
cadre
algorithme de cible 1
blancs environnants 1
bordure 1
cible du document 1
contenu initial 1
description longue 1
en-ligne 1
introduction 1
liste des noms de cible réservés 1
problèmes d'URI 1
cadre cible
algorithme 1
par défaut 1
noms réservés 1
sémantique 1
spécification 1
caractères
abstraits 1
clé d'accès 1
restitution au mieux 1
non-affichables 1
restitution des caractères non-affichables 1
cascade, feuilles de style en [...] 1
case à cocher 1
casse
codes de langue 1
descripteurs de média 1
données de script 1
données de style 1
encodage de caractères 1
nom d'ancre 1
nom des attributs 1
nom des couleurs 1
nom des éléments 1
références de caractères numériques 1
référence d'entité de caractère 1
types de contenu 1
types de lien 1
URI 1
valeurs des attributs 1, 2, 3
valeurs de longueur 1
catalogue pour HTML 1
CDATA 1, 2
données des scripts et des styles 1
cellule de données
table 1
cellule de rubrique
abréviation 1
portéef 1
table 1
CERN 1
césure 1
%Character; 1
%Charset; 1
citations 1
restitution 1
class, attribut [...]
rôles 1
clé d'accès 1
code, position de [...] 1
%Color; 1
colonne
largeur des colonnes dans une table 1
nombre de colonnes dans une table 1
colonnes, groupe de [...] 1
commande 1
clé d'accès 1
donner l'attention 1
événements1
inactive 1
lecture seule 1
navigation par tabulation 1
nom de commande 1
réussie 1
types 1
valeur de commande 1
valeur initiale 1
commande cachée 1, 2
commande inactive 1
commande non réussie 1
commande en lecture seule 1
commande d'objet 1, 2
commande réussie 1
commande de saisie de mot de passe 1
commande de saisie de texte 1
multiligne 1
sur une seule ligne 1
commande de sélection de fichier 1
soumission 1
commentaires
DTD, dans un [...] 1
HTML, dans [...] 1
informatifs seulement 1
non-restitués 1
références de caractères dans un commentaire 1
utilisés pour dissimuler les données de script 1
utilisés pour dissimuler les données de feuille de style 1
conformité 1
Content-Language, en-tête [...] 1
Content-Script-Type, en-tête [...] 1
Content-Style-Type, en-tête [...] 1
Content-Type, en-tête [...] 1
%ContentType; 1
coordonnées
clic de soumission d'un formulaire1
image cliquable côté serveur 1
couleur
arrière-plan 1
noms 1
coupure du texte 1
date
format 1
texte inséré ou supprimé 1
%Datetime; 1
déclaration de type de document 1
DTD avec jeu d'encadrement 1
DTD strict 1
DTD transitoire1
déconseillé 1
éléments 1
défaut
encodage de caractères 1
langage de script 1
langage de feuille de style 1
cadre cible 1
définition de type de document 1
fragments de DTD conformes 1
commentaires 1
exemples conformes 1
jeu d'encadrement 1
comment lire 1
strict 1
transitoire 1
descripteur de média
casse 1
liste des descripteurs de média reconnus 1
analyse 1
description longue d'une image
relation avec le texte de remplacement 1
direction
héritage de la direction pour les éléments imbriqués 1
indication de la direction de la table 1
texte 1
document
validation SGMLSGML 1
modification dynamique par un script 1
façons d'incorporer 1
façons d'inclure 1, 2
document avec jeu d'encadrement 1
document HTML 1
données, types de [...]
CDATA 1
ID 1
IDREF 1
IDREFS 1
NAME 1
NUMBER 1
DTD strict
déclaration 1
définition 1
DTD transitoire
déclaration 1
définition 1
Dublin Core 1
élément
appel à partir des scripts 1
balise fermante 1
balise fermante omise 1
balise ouvrante 1
balise ouvrante omise 1
déclaration de type 1, 2
gestion des éléments déconseillés 1
gestion des éléments obsolètes 1
identifiant unique 1
insensible à la casse 1
liste des éléments déconseillés 1
liste des éléments obsolètes 1
modèle de contenu 1
type bloc 1
type en-ligne 1
types 1
vide 1, 2
élément vide 1
encodage de caractères 1, 2
bi-directionnalité 1
choix 1
détermination par l'agent utilisateur 1
exemples communs 1
liens 1
noms 1
par défaut 1
spécification 1
soumission de formulaire 1
UTF-1 1
UTF-16 1
en-ligne
type d'élément 1
entité message 1
entité paramètre
%Character; 1
%Charset; 1
%Color; 1
%ContentType; 1
%Datetime; 1
%FrameTarget; 1
%LanguageCode; 1
%Length; 1
%MediaDesc; 1
%MultiLength; 1
%Pixels; 1
%Script; 1
%Text; 1
%URI; 1
%attrs; 1
%block; 1
%inline; 1
entité paramètre, définition d'une [...] 1
erreur
gestion par l'agent utilisateur 1, 2
image cliquable avec un élément IMG dans un élément BUTTON 1
ressource insdisponible 1
restitutions des règles de style dans l'élément STYLE 1
espace-mot 1
événements 1
événements intrinsèques 1
feuille de style
alternative 1
bi-directionnalité 1
cascade 1
commentaires pour dissimuler 1
données 1
externe 1
externe via un lien 1
règles en-ligne 1
introduction 1
persistente 1
préférée 1
règles dans l'élément HEAD 1
spécification d'une feuille de style externe 1
spécification d'une feuille de style préférée 1
média cible 1
utilisée avec les éléments DIV et SPAN 1
feuille de style persistente 1
feuille de style préférée 1
#FIXED, valeur d'attribut [...] 1
flottants, objets [...] 1
flottant, texte [...] 1
formulaire
codage des données 1
commandes 1
ordre de tabulation des commandes 1
méthodes et actions 1
méthode de soumission 1
navigation entre les commandes 1
rajouter des labels 1
réinitialisation 1
remarques sur l'affichage 1
soumission 1
structurer les commandes 1
traitement des commandes 1
types de commande 1
types de contenu pour le codage 1
valeurs soumises 1
%FrameTarget; 1
GET
soumission de formulaire 1
groupe de travail HTML
membres 1
HTML
application SGML 1
astuces d'édition 1
commentaires 1
développement 1
spécification de données étrangères 1
version 2.0 1
version 3.0 1
version 3.2 1
version HTML+ 1
HTTP
en-tête Content-Language 1
en-tête Content-Script-Type 1
en-tête Content-Style-Type 1
en-tête Content-Type 1
en-tête Default-Style 1
GET et POST avec les formulaires 1
employé pour relier des feuilles de style externes 1
ID 1
id, attribut [...]
rôles 1
même espace de nom que l'attribut name 1
identifiant de fragment 1, 2
IDREF 1
IDREFS 1
image
alignement 1
bordure 1
description longue 1
pas directement dans un cadre 1
restitution visuelle 1
façons d'inclure 1
blancs environnants 1
largeur et hauteur 1
image cliquable 1, 2
accessibilité 1
côté client 1
illégale pour un élément IMG dans un élément BUTTON 1
chevauchement des régions 1
côté serveur 1
server-side 1
avec l'élément OBJECT 1
image cliquable côté client 1
création 1
image cliquable côté serveur 1, 2
coordonnées du clic 1
#IMPLIED, valeur d'attribut [...] 1
inclusion d'un objet 1
%inline; 1
IETF 1
jeu de caractères du document 1
ISO10646 1, 2
équivalence de ISO10646 et UNICODE 1
jeu de caractères universel 1
jeu des données du formulaire 1
codage 1
jeu d'encadrement
déclaration du DTD 1
définition du DTD 1
contenu de remplacement 1
problèmes de navigation 1
imbriqués 1
partage des données 1
spécification de la disposition 1
utilisation de l'éléments NOFRAMES 1
jeux d'entités
les URI pour HTML 4.01 1
label
attention 1
association explicite à la commande 1
association implicite à la commande 1
lang, attribut [...]
pas pour la direction 1
application 1
langage de balisage 1
langage de feuille de style
par défaut 1
langage de script
déclaration locale 1
par défaut 1
specification 1
langue
spécification du code de langue 1
ressource reliée 1
script 1
texte 1
%LanguageCode; 1
%Length; 1
lien
encodage de caractères 1
feuilles de style externes 1, 2
feuilles de style en fonction du média 1
cible par défaut 1
définition 1
progressif et régressif 1
imbrication illégale 1
restitution 1
sémantique du lien avec le cadre cible 1
titre 1
type 1
utilisé pour définir une relation 1
utilisé pour ramener une ressource 1
liste
liste de définitions 1
imbrication 1
numérotation 1
ordonnée 1
feuilles de style 1
non-ordonnée 1
restitution visuelle 1
longueur relative 1
média
feuilles de style externes 1
utilisés par les feuilles de style 1
%MediaDesc; 1
menu 1
regroupement des choix 1
options présélectionnées 1
restitution des choix 1
restitution visuelle des options regroupées 1
métadonnées 1
élément LINK comparé à META 1
profils 1
système 1
modèle de contenu 1
éléments exclus 1
syntaxe du modèle de contenu dans le DTD 1
moteur de recherche
liens 1
assistance 1, 2
%MultiLength; 1
multipart/form-data 1, 2
NAME 1
navigation par tabulation 1
notes sur les formes minimisées 1
NUMBER 1
numérotage des titres
numérotage 1
objet
alignement 1
bordure 1
restitution de repli 1
inclusion générique 1
dans l'élément HEAD 1, 2, 3
formulaire 1
initialisation 1
localisation de l'implémentation et des données 1
systèmes de nommage 1
règles concernant les objets incorporés 1
objet déclaré statiquement 1
restitution visuelle 1
blancs environnants 1
largeur et hauteur 1
obsolète 1
éléments 1
ordre de tabulation 1
outil d'édition 1, 2
langage de feuille de style par défaut 1
paragraphe
restitution visuelle 1
pixel 1
%Pixels; 1
PICS 1
police
style de police avec HTML 1
POST
données de formulaire non-ASCII 1
soumission de formulaire 1
profil 1
rangée
nombre de rangées dans une table 1
rangées, groupe de [...] 1
RDF 1, 2
référence de caractère 1, 2
directionnalité 1
référence de caractère numérique 1
références des entités de caractères 1
règle
entre les éléments de type bloc 1
entre les cellules d'une table 1
réinitialisation d'un formulaire 1
répertoire de caractères 1
#REQUIRED, valeur d'attribut [...] 1
résolution des URI relatifs 1
robot de recherche
assistance 1
rognage
texte d'une table 1
saut de ligne 1
texte bi-directionnel 1
texte flottant 1
forcé 1
interdiction 1
scheme, attribut [...] 1
scope, attribut [...]
portée des cellules de rubrique dans la table 1
script
appel des éléments 1
commentaires pour dissimuler 1
données 1
exécution à la suite d'un événement 1
exécution en fin du chargement du document 1
introduction 1
non reconnu 1
remarques pour l'implémentation 1
syntaxe réservée 1
utilisations 1
utilisé pour établir une ancre 1
utilisé pour modifier le document 1
%Script; 1
sécurité
remarques 1
commande de saisie de mot de passe 1
SGML
application 1
catalogue pour HTML 1
déclaration 1
déclaration de HTML 4 1
jeu de caractères du document 1
définition de type de document (DTD) 1
validation du document 1
déclaration de type d'élément 1
fonctionnalités dont la gestion est limitée 1, 2
remarques sur l'implémentation 1
introduction 1
traitement des sauts de ligne 1
summary, attribut [...]
contenu de la table 1
table
algorithme pour obtenir les indications de rubrique 1
algorithmes de disposition 1
alignement du contenu 1
bordures et règles 1
categorisation des cellules 1
cellules de données 1
cellules de rubrique 1
cellules qui couvrent plusieurs rangées/colonnes 1
diction des cellules de données 1
directionnalité 1
groupe de colonnes 1
groupe de rangées 1
largeur des colonnes 1
légende 1
marges de la cellule 1
nombre des colonnes 1
nombre des rangées 1
pas pour la mise en forme des pages 1
remarques sur l'affichage progressif 1
résumé du contenu 1
restitution progressive 1
restitution non-visuelle 1
restitution visuelle 1
temps
format 1
texte
balisage pour insertion et suppression 1
césure dans un paragraphe 1
cité 1
direction 1
flottement 1
préformaté 1
texte de remplacement
spécification 1
text/html 1
%Text; 1
tiret conditionnel 1
title, attribut [...]
disponible pour l'utilisateur 1
document 1
employé pour annoter les éléments 1
titrage
correctement imbriqué 1
type de contenu
application/x-www-form-urlencoded 1
multipart/form-data 1
pour codage des données du formulaire 1
text/html 1
type de lien
casse 1
liste des types de lien reconnus 1
profils des nouveaux liens 1
Unicode, algorithme bi-directionnel [...] 1
URI
casse 1
caractères non-ASCII dans les valeurs d'attribut 1
relatif 1
résolution d'un URI relatif 1, 2
spécification de l'URI de base 1
utilisations dans HTML 1
URI de base 1
URI relatif 1
résolution 1
%URI; 1
URL
relation avec l'URI 1
utilisateur 1
UTF-1 1
UTF-16 1
World Wide Web (Web) 1


Object DHTM

DHTML Elements

<!-- --> !DOCTYPE A ACRONYM ADDRESS APPLET
AREA B BASE BASEFONT BGSOUND BIG
BLOCKQUOTE BODY BR BUTTON CAPTION CENTER
CITE CODE COL COLGROUP COMMENT DD
DEL DFN DIR DIV DL DT
EM EMBED FIELDSET FONT FORM FRAME
FRAMESET HEAD H1 H2 H3 H4
H5 H6 HR HTML I IFRAME
IMG INPUT INS ISINDEX KBD LABEL
LEGEND LI LINK LISTING MAP MARQUEE
MENU META NOBR NOFRAMES NOSCRIPT OBJECT
OL OPTION P PARAM PLAINTEXT PRE
Q S SAMP SCRIPT SELECT SMALL
SPAN STRIKE STRONG STYLE SUB SUP
TABLE TBODY TD TEXTAREA TFOOT
TH THEAD TITLE TR TT U
UL VAR WBR XMP

Reconfiguration By J2M


Object DHTM

DHTML Elements

<!-- -->

Description

Comments are ignored by the HTML parser. Text between the beginning of the comment <!-- and the end tag --> is not displayed in the browser window.

Syntax

<!-- -->

Remarks

Comments can contain other HTML elements. Comments do not nest.

Both the start and end tags are required.

See Also

COMMENT

Reconfiguration By J2M


Object DHTM

DHTML Elements

!DOCTYPE

Description

Specifies the HTML DTD that the document corresponds to.

Syntax

<!DOCTYPE>

Remarks

Different versions can be used depending on the level of compatibility the author wishes to indicate. In the examples below, the first indicates compatibility with the HTML 3.2 DTD; the second indicates a strict adherence to the HTML 4.0 DTD.

Examples

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">

Reconfiguration By J2M


Object DHTM

DHTML Elements

A

Description

Designates the start or destination of a hypertext link. The anchor element requires the HREF= or the NAME= attribute to be specified.

Syntax

<A
 ACCESSKEY=key
CLASS=classname
DATAFLD=colname
DATASRC=#ID
HREF=url
ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
 METHODS=http-method
NAME=name
REL="stylesheet"
 REV="stylesheet"
 STYLE=css1-properties
TABINDEX=n
TARGET=window_name | _blank | _parent | _self | _top
TITLE=text
URN=urn
event = script
>

Parameter | Description
ACCESSKEY=key | Accelerator for the element. Pressing ALT-key selects this element in the user's browser.
CLASS=classname | Class of the tag being defined. This is used to associate a subclassed style sheet with the tag.
DATAFLD=colname | Column name from the data source object that supplies the bound data.
DATASRC=#ID | ID of the data source object that supplies the data that is bound to this element.
HREF=url | Destination URL or anchor point. If HREF is set to an empty string (""), then hyperlinking will cause the base URL to be opened. For example, if the current file is "http://microsoft.com/home/hello.html", then "http://microsoft.com/home/" will be opened.
ID=value | SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underscore character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The script is written in JScript.
VBS, VBSCRIPT | The script is written in VBScript.
METHODS=http-method | METHODS attributes of anchors and links provide information about the functions that the user may perform on an object. These are more accurately given by the HTTP protocol when it is used, but it may, for similar reasons as for the TITLE attribute, be useful to include the information in advance in the link. For example, the HTML user agent may choose a different rendering as a function of the methods allowed; for example, something that is searchable may get a different icon.
NAME=name | Name of the anchor.
REL="stylesheet" | Gives the relationship(s) described by the hypertext link from the anchor to the target. The value is a comma-separated list of relationship values. The values and their semantics will be registered by the HTML registration authority. The default relationship if none other is given is void. The REL attribute is only used when the HREF= attribute is present.
REV="stylesheet" | Same as the REL attribute, but the semantics of the link type are in the reverse direction. A link from A to B with REL="X" expresses the same relationship as a link from B to A with REV="X". An anchor may have both REL and REV attributes.
STYLE=css1-properties | Inline style sheet for the tag.
TABINDEX=n | Sets the tab order position for the object.
TARGET=window_name | _blank | _parent | _self | _top Window or frame at which to target the contents. If no frame or window exists that matches the specified target, a new window is opened for the specified link. If no target is specified, the default is "_self" for a link within the same site or "_top" if the site is external. Special target values are:
_blank | Specifies to load the link into a new unnamed window.
_parent | Specifies to load the link into the immediate parent of the document the link is in.
_self | Specifies to load the link into the same window the link was clicked in.
_top | Specifies to load the link into the full body of the current window.
TITLE=text | Used to provide advisory information. The contents of the title attribute will be displayed in a tooltip during the onmouseover event.
event Can be one or more of these events:
onblur onclick
ondblclick ondragstart
onfocus onhelp
onkeydown onkeypress
onkeyup onmousedown
onmousemove onmouseout
onmouseover onmouseup
onselectstart

Remarks

Text and/or images may be within an anchor. To represent images that are anchors, a border in the visited or not visited color is displayed.

Both the start and end tags are required.

Example

<A HREF="http://www.microsoft.com">This is a link to Microsoft.</A>

<A HREF="home.htm">This link points to a file called home.htm in the same directory as this page.</A>

<A TARGET="viewer" HREF="sample.htm">Click here to load the link into "viewer" window.</A>

<A HREF="http://www.microsoft.com"><IMG SRC="images/bullet.gif">This link contains an image</A>

<A HREF="javascript:window.open()">This link opens a new window using the open method in javascript</A>

Scripting Object

A

Reconfiguration By J2M


Object DHTM

DHTML Elements

ACRONYM

Description

Indicates an acronym.

Syntax

<ACRONYM
 CLASS=classname
ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
 STYLE=css1-properties
TITLE=text
event = script
>

Parameter | Description
CLASS=classname | Class of the tag being defined. This is used to associate a subclassed style sheet with the tag.
ID=value | SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underscore character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The script is written in JScript.
VBS, VBSCRIPT | The script is written in VBScript.
STYLE=css1-properties | Inline style sheet for the tag.
TITLE=text | Used to provide advisory information. The contents of the title attribute will be displayed in a tooltip during the onmouseover event.
event Can be one or more of these events:
onclick ondblclick
ondragstart onhelp
onkeydown onkeypress
onkeyup onmousedown
onmousemove onmouseout
onmouseover onmouseup
onselectstart

Remarks

Both the start and end tags are required. This tag does not affect how text appears in the browser.

Example

<ACRONYM>MSN</ACRONYM>

Scripting Object

ACRONYM

See Also

ADDRESS, CITE, DFN, EM, STRONG

Reconfiguration By J2M


Object DHTM

DHTML Objects

ADDRESS

Description

The Address element is used to specify information such as address, signature and authorship.

Syntax

<ADDRESS
 CLASS=classname
ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
STYLE=css1-properties
TITLE=text
event = script
>

Parameter | Description
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The scripting language is written in JavaScript.
VBS, VBSCRIPT | The scripting language is written in VBScript.
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
TITLE=text | Used to provide advisory information. The contents of the title attribute will be displayed in a ToolTip during the onmouseover event.
event Can be one or more of these events:
onclick ondblclick
ondragstart onhelp
onkeydown onkeypress
onkeyup onmousedown
onmousemove onmouseout
onmouseover onmouseup
onselectstart

Remarks

This element is a block element.

Both the start and end tags are required.

Example

<ADDRESS>This text will be in italic.</ADDRESS>

Scripting Object

ADDRESS

See Also

ACRONYM, CITE, DFN, EM, STRONG

Reconfiguration By J2M


Object DHTM

DHTML Elements

APPLET

Description

Places executable content on the page.

Syntax

<APPLET
 ALIGN=ABSBOTTOM | ABSMIDDLE | BASELINE | BOTTOM | LEFT | MIDDLE | RIGHT | TEXTTOP | TOP
 ALT=text
CLASS=classname
CODE=filename
CODEBASE=url
DATAFLD=colname
DATASRC=#ID
HEIGHT=n
HSPACE=n
ID=value
NAME=name
SRC=url
STYLE=css1-properties
TITLE=text
VSPACE=n
WIDTH=n
event = script
>

Parameter | Description
ALIGN=ABSBOTTOM | ABSMIDDLE | BASELINE | BOTTOM | LEFT | MIDDLE | RIGHT | TEXTTOP | TOP | Specifies the alignment for the control-like element.
ALT=text | Optional text as an alternative to the application if it cannot be executed.
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
CODE=filename | The name of the file containing the compiled Java class.
CODEBASE=url | This is an optional parameter that specifies the base URL for the application.
DATAFLD=colname | The column name from the data source object that supplies the bound data. This can only be used on the contained PARAM elements.
DATASRC=#ID | Indicates the ID of the data source object that supplies the data that is bound to this element.
HEIGHT=n | Along with WIDTH=, specifies the size at which the element is drawn. This attribute may be initially set in pixels or percentages.
HSPACE=n | Along with VSPACE=, specifies margins for the element.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID names must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created and can only be referenced by ordinal position.
NAME=name | Specifies the name of the application.
SRC=url | Specifies a URL for the associated file.
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
TITLE=text | Used to provide advisory information. The contents of the title attribute will be displayed in a ToolTip during the onmouseover event.
VSPACE=n | Along with HSPACE=, specifies margins for the element.
WIDTH=n | Along with HEIGHT=, specifies the size at which the element is drawn. This attribute may be initially set in pixels or percentages.
event Can be one or more of these events:
onafterupdate onbeforeupdate
onblur onclick
ondataavailable ondatasetchanged
ondatasetcomplete ondblclick
onerrorupdate ondragstart
onfocus onhelp
onkeydown onkeypress
onkeyup onmousedown
onmousemove onmouseout
onmouseover onmouseup
onreadystatechange onresize
onrowenter onrowexit

Remarks

This element is a block element.

Both the start and end tags are required.

Scripting Object

APPLET

See Also

EMBED, OBJECT, PARAM

Reconfiguration By J2M


Object DHTM

DHTML Elements

AREA

Description

Specifies the shape of a hyperlink "hot spot" in a client-side image map.

Syntax

<AREA
 ALT=text
CLASS=classname
COORDS=coordinates
HREF=url
ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
 NOHREF
 SHAPE=CIRC | CIRCLE | POLY | POLYGON | RECT | RECTANGLE
 STYLE=css1-properties
TABINDEX=n
TARGET=window_name | _blank | _parent | _self | _top
TITLE=text
event = script
>

Parameter | Description
ALT=text | Optional text as an alternative to the graphic for rendering in non-graphical environments. Alternate text should be provided whenever the graphic is not rendered. Alternate text is mandatory for Level 0 documents.
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
COORDS=coordinates | Coordinates that define the hot spot's shape.
HREF=url | Specifies the destination URL or anchor point.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The scripting language is written in JavaScript.
VBS, VBSCRIPT | The scripting language is written in VBScript.
NOHREF | Indicates that clicks in this region should cause no action.
SHAPE=CIRC | CIRCLE | POLY | POLYGON | RECT | RECTANGLE | Specifies the type of shape used in the image map.
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
TABINDEX=n | Sets the tab order position for the object.
TARGET=window_name | _blank | _parent | _self | _top Specifies the window or frame to target the contents at. If no frame or window exists that matches the specified target, a new window is opened for the specified link. If no target is specified, the default is "_self" for a link within the same site or "_top" if the site is external. Special target values are listed below:
_blank | Specifies to load the link into a new unnamed window.
_parent | Specifies to load the link into the immediate parent of the document the link is in.
_self | Specifies to load the link into the same window the link was clicked in.
_top | Specifies to load the link into the full body of the current window.
TITLE=text | Used to provide advisory information. The contents of the title attribute will be displayed in a ToolTip during the onmouseover event.
event Can be one or more of these events:
onblur onclick
ondblclick ondragstart
onfocus onhelp
onkeydown onkeypress
onkeyup onmousedown
onmousemove onmouseout
onmouseover onmouseup
onselectstart

Remarks

This is an empty element and does not require a closing tag.

Examples

<AREA SHAPE="RECT" COORDS="0, 0, 58, 31" HREF="http://www.microsoft.com/ie/">

<AREA TARGET="viewer" HREF="sample.htm" SHAPE="CIRCLE" COORDS="73, 15, 10">

<AREA SHAPE="RECT" COORDS="58, 0, 88, 31" NOHREF>

Scripting Object

AREA

See Also

MAP, IMG

Reconfiguration By J2M


Object DHTM

DHTML Elements

B

Description

The Bold element specifies that the text should be rendered in boldface, where available. The end tag turns off the bold formatting.

Syntax

<B
 CLASS=classname
ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
STYLE=css1-properties
TITLE=text
event = script
>

Parameter | Description
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The scripting language is written in JavaScript.
VBS, VBSCRIPT | The scripting language is written in VBScript.
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
TITLE=text | Used to provide advisory information. The contents of the title attribute will be displayed in a ToolTip during the onmouseover event.
event Can be one or more of these events:
onclick ondblclick
ondragstart onhelp
onkeydown onkeypress
onkeyup onmousedown
onmousemove onmouseout
onmouseover onmouseup
onselectstart

Remarks

Both the start and end tags are required.

Example

<B>Displayed in a bold typeface.</B>

Scripting Object

B

See Also

STRONG

Reconfiguration By J2M


Object DHTM

DHTML Elements

BASE

Description

Specifies the document's base URL.

Syntax

<BASE
 HREF=url
TARGET=window_name | _blank | _parent | _self | _top
>

Parameter | Description
HREF=url | Specifies the document's reference URL for associating relative URLs with the proper document path.
TARGET=window_name | _blank | _parent | _self | _top Specifies the window or frame to target the contents at. If no frame or window exists that matches the specified target, a new window is opened for the specified link. If no target is specified, the default is "_self" for a link within the same site or "_top" if the site is external. Special target values are listed below:
_blank | Specifies to load the link into a new unnamed window.
_parent | Specifies to load the link into the immediate parent of the document the link is in.
_self | Specifies to load the link into the same window the link was clicked in.
_top | Specifies to load the link into the full body of the current window.

Remarks

Base is used to ensure that your document's relative links are associated with the proper document path.

This element may only be used within the HEAD tag.

This is an empty element and does not require a closing tag.

Example

<BASE HREF="http://www.sample.com/hello.htm">

Scripting Object

BASE

Reconfiguration By J2M


Object DHTM

DHTML Elements

BASEFONT

Description

Sets a base font value to be used as the default font when rendering text.

Syntax

<BASEFONT
 CLASS=classname
COLOR=color
FACE=font
ID=value
LANG=language
SIZE=n
>

Parameter | Description
CLASS=classname | Class of the tag being defined. This is used to associate a subclassed style sheet with the tag.
COLOR=color | Color to be used by the font or horizontal rule. For a complete list of colors, see the Internet Explorer color table.
FACE=font | Current font typeface.
ID=value | SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underscore character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
SIZE=n | Font size between 1 and 7 (7 is largest).

Remarks

This is an empty element and does not require a closing tag. This element may be used within the BODY tag or the HEAD tag. BASEFONT should appear before any displayed text in the BODY of the document.

Example

<BASEFONT SIZE=3> This sets the base font size to 3.
<FONT SIZE=+4> Now the font size is 7.
<FONT SIZE=-1> Now the font size is 2.

Scripting Object

BASEFONT

Reconfiguration By J2M


Object DHTM

DHTML Elements

BGSOUND

Description

The BGSOUND tag allows you to create pages with background sounds or "soundtracks."

Syntax

<BGSOUND
 BALANCE=n
CLASS=classname
ID=value
LANG=language
LOOP=n
SRC=url
TITLE=text
VOLUME=n
>

Parameter | Description
BALANCE=n | Determines how the available volume will be divided between the left and right speakers. Valid values for this attribute are in the range of -10,000 to +10,000, with 0 being "Wave Output" center balanced.
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LOOP=n | Specifies how many times a sound will loop when activated.
SRC=url | Specifies the URL of a sound to be played.
TITLE=text | Used to provide advisory information.
VOLUME=n | Determines the loudness of a page's background sound. Valid values for this attribute are in the range of -10,000 to 0, with 0 being full "Wave Output" volume.

Remarks

This element may be used within the HEAD tag.

The start tag is required, and the end tag is optional.

Scripting Object

BGSOUND

Reconfiguration By J2M


Object DHTM

DHTML Elements

BIG

Description

Specifies that the enclosed text should be displayed in a relatively bigger font than the current font.

Syntax

<BIG
 CLASS=classname
ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
STYLE=css1-properties
TITLE=text
event = script
>

Parameter | Description
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The scripting language is written in JavaScript.
VBS, VBSCRIPT | The scripting language is written in VBScript.
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
TITLE=text | Used to provide advisory information. The contents of the title attribute will be displayed in a ToolTip during the onmouseover event.
event Can be one or more of these events:
onclick ondblclick
ondragstart onhelp
onkeydown onkeypress
onkeyup onmousedown
onmousemove onmouseout
onmouseover onmouseup
onselectstart

Remarks

Both the start and end tags are required.

Example

<BIG>This text is larger.</BIG>

Scripting Object

BIG

Reconfiguration By J2M


Object DHTM

DHTML Elements

BLOCKQUOTE

Description

Sets apart a long quotation in text.

Syntax

<BLOCKQUOTE
 CLASS=classname
ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
STYLE=css1-properties
TITLE=text
event = script
>

Parameter | Description
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The scripting language is written in JavaScript.
VBS, VBSCRIPT | The scripting language is written in VBScript.
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
TITLE=text | Used to provide advisory information. The contents of the title attribute will be displayed in a ToolTip during the onmouseover event.
event Can be one or more of these events:
onclick ondblclick
ondragstart onhelp
onkeydown onkeypress
onkeyup onmousedown
onmousemove onmouseout
onmouseover onmouseup
onselectstart

Remarks

This element is a block element.

Both the start and end tags are required.

Example

<P>He said,
<BLOCKQUOTE>"Hi there!"</BLOCKQUOTE>

Scripting Object

BLOCKQUOTE

See Also

Q

Reconfiguration By J2M


Object DHTM

DHTML Elements

BODY

Description

Specifies beginning and end of document body. This element can be used to set the background image, the background color, the link color and the top and left margins of the page. The end tag is required.

Syntax

<BODY
 ALINK=color
BACKGROUND=url
BGCOLOR=color
BGPROPERTIES=FIXED
 BOTTOMMARGIN=pixels
CLASS=classname
ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
LEFTMARGIN=pixels
LINK=color
RIGHTMARGIN=pixels
SCROLL=YES|NO
 STYLE=css1-properties
TEXT=color
TITLE=string
TOPMARGIN=n
VLINK=color
event = script
>

Parameter | Description
ALINK=color | The color for the active link. For a complete list of colors, look at the Internet Explorer color table.
BACKGROUND=url | Specifies a background picture. The picture is tiled behind the text and graphics on the page.
BGCOLOR=color | Sets the background color of the page. For a complete list of colors, look at the Internet Explorer color table.
BGPROPERTIES= | Specifies a watermark, which is a background picture that does not scroll.
BOTTOMMARGIN= | Specifies the bottom margin for the entire body of the page and overrides the default margin. If set to "0" or "", the bottom margin will be exactly on the bottom edge of the window or frame.
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The scripting language is written in JavaScript.
VBS, VBSCRIPT | The scripting language is written in VBScript.
LEFTMARGIN=pixels | Specifies the left margin for the entire body of the page and overrides the default margin. If set to "0" or "", the left margin will be exactly on the left edge of the window or frame.
LINK=color | The color of shortcuts that have not yet been visited. For a complete list of colors, look at the Internet Explorer color table.
RIGHTMARGIN=pixels | Specifies the right margin for the entire body of the page and overrides the default margin. If set to "0" or "", the right margin will be exactly on the right edge of the window or frame.
SCROLL=YES | NO | Turns on or off the scrollbars. The default is YES.
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
TEXT=color | Sets the color of text on the page. For a complete list of colors, look at the Internet Explorer color table.
TITLE=text | Used to provide advisory information. The contents of the title attribute will be displayed in a ToolTip during the onmouseover event.
TOPMARGIN=pixels | Specifies the margin for the top of the page and overrides the default margin. If set to "0" or "", the top margin will be exactly on the top edge of the window or frame.
VLINK=color | The color of shortcuts that have already been visited. For a complete list of colors, look at the Internet Explorer color table.
event Can be one or more of these events:
onafterupdate onbeforeunload
onbeforeupdate onclick
ondblclick ondragstart
onhelp onkeydown
onkeypress onkeyup
onload onmousedown
onmousemove onmouseout
onmouseover onmouseup
onrowenter onrowexit
onscroll onselect
onselectstart onunload

Remarks

This element is a block element.

Examples

This is the HTML used to insert the background image of this page.

<BODY BACKGROUND="http://www.microsoft.com/ie/images/watermrk.gif" BGPROPERTIES=FIXED
BGCOLOR=#FFFFFF TEXT=#000000 LINK=#ff6600 VLINK=#330099>

<HTML><BODY>Here's a Web page!</BODY></HTML>

Scripting Object

BODY

Reconfiguration By J2M


Object DHTM

DHTML Elements

BR

Description

Inserts a line break.

Syntax

<BR
 CLASS=classname
CLEAR=ALL |LEFT | RIGHT
 ID=value
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
STYLE=css1-properties
TITLE=text
>

Parameter | Description
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
CLEAR=ALL | LEFT | RIGHT | Inserts vertical space so that the next text displayed will be past left- or right-aligned floating images.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The scripting language is written in JavaScript.
VBS, VBSCRIPT | The scripting language is written in VBScript.
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
TITLE=text | Used to provide advisory information.

Scripting Object

BR

See Also

WBR

Reconfiguration By J2M


Object DHTM

DHTML Elements

BUTTON

Description

Renders an HTML button, displaying the text between the start and end tags as the label within the button.

Syntax

<BUTTON
 ACCESSKEY=string
CLASS=classname
DATAFLD=colname
DATAFORMATAS=HTML | TEXT
 DATASRC=#ID
DISABLED
 ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
 STYLE=css1-properties
TITLE=text
TYPE=BUTTON | RESET | SUBMIT
 event = script
>

Parameter | Description
ACCESSKEY=key | Specifies an accelerator for the element. Pressing alt-key selects this element in the user's browser.
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
DATAFLD=colname | The column name from the data source object that supplies the bound data.
DATAFORMATAS=HTML | TEXT | Indicates whether bound data is plain text or HTML.
DATASRC=#ID | Indicates the ID of the data source object that supplies the data that is bound to this element.
DISABLED | Used to disable an element. This attribute prevents an element from receiving the focus, and causes the element to appear "grayed out."
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The scripting language is written in JavaScript.
VBS, VBSCRIPT | The scripting language is written in VBScript.
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
TITLE=text | Used to provide advisory information. The contents of the title attribute will be displayed in a ToolTip during the onmouseover event.
TYPE=BUTTON | RESET | SUBMIT Defines a button that indicates a default for the ENTER key (with a dark border). The possible values are:
BUTTON | Command button to be used in a script.
RESET | When pressed, this button resets the form's fields to their specified initial values. The label to be displayed on the button may be specified just as for the SUBMIT button.
SUBMIT | Submits the form. The default label is application-specific. If a SUBMIT button is pressed in order to submit the form, and that button has a NAME attribute specified, then that button contributes a name/value pair to the submitted data. Otherwise, a SUBMIT button makes no contribution to the submitted data.
event Can be one or more of these events:
onafterupdate onbeforeupdate
onblur onclick
ondblclick ondragstart
onfocus onhelp
onkeydown onkeypress
onkeyup onmousedown
onmousemove onmouseout
onmouseover onmouseup
onresize onrowenter
onrowexit onselectstart

Remarks

You should not include the SELECT, BUTTON, INPUT, or A within the BUTTON tag.

This element is a block element.

Both the start and end tags are required.

Scripting Object

BUTTON

Reconfiguration By J2M


Object DHTM

DHTML Elements

CAPTION

Description

Specifies a caption for a TABLE .

Syntax

<CAPTION
 ALIGN=BOTTOM | CENTER | LEFT | RIGHT | TOP
 CLASS=classname
ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
 STYLE=css1-properties
TITLE=text
VALIGN=BOTTOM | TOP
 event = script
>

Parameter | Description
ALIGN= BOTTOM | CENTER | LEFT | RIGHT | TOP Specifies the alignment of the caption.
BOTTOM | Aligns the caption bottom center.
CENTER | Centers the caption.
LEFT | Left aligns the caption.
RIGHT | Right aligns the caption.
TOP | Aligns the caption top center.
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The scripting language is written in JavaScript.
VBS, VBSCRIPT | The scripting language is written in VBScript.
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
TITLE=text | Used to provide advisory information. The contents of the title attribute will be displayed in a ToolTip during the onmouseover event.
VALIGN=BOTTOM | TOP | Specifies whether the caption appears at the top or bottom.
event Can be one or more of these events:
onafterupdate onbeforeupdate
onblur onchange
onclick ondblclick
ondragstart onfocus
onhelp onkeydown
onkeypress onkeyup
onmousedown onmousemove
onmouseout onmouseover
onmouseup onresize
onrowenter onrowexit
onselect onselectstart

Remarks

This element is a block element.

Both the start and end tags are required.

Example

<TABLE>
<CAPTION VALIGN=BOTTOM>
This caption will appear below the table.
</CAPTION>
<TR>
....
</TR>
</TABLE>

Scripting Object

CAPTION

Reconfiguration By J2M


Object DHTM

DHTML Elements

CENTER

Description

Causes subsequent text and images to be centered. The required end tag returns the alignment to its previous state. This element has the same effect as using the element <DIV ALIGN=CENTER>.

Syntax

<CENTER
 CLASS=classname
ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
 STYLE=css1-properties
TITLE=text
event = script
>

Parameter | Description
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The scripting language is written in JavaScript.
VBS, VBSCRIPT | The scripting language is written in VBScript.
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
TITLE=text | Used to provide advisory information. The contents of the title attribute will be displayed in a ToolTip during the onmouseover event.
event Can be one or more of these events:
onclick ondblclick
ondragstart onhelp
onkeydown onkeypress
onkeyup onmousedown
onmousemove onmouseout
onmouseover onmouseup
onselectstart

Remarks

This element is a block element.

Both the start and end tags are required.

Example

<CENTER>This text appears centered on the page.</CENTER>

Scripting Object

CENTER

Reconfiguration By J2M


Object DHTM

DHTML Elements

CITE

Description

Indicates a citation. Refers to a book, paper, or other published source material. The text for citations is rendered in italics.

Syntax

<CITE
 CLASS=classname
ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
 STYLE=css1-properties
TITLE=text
event = script
>

Parameter | Description
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The scripting language is written in JavaScript.
VBS, VBSCRIPT | The scripting language is written in VBScript.
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
TITLE=text | Used to provide advisory information. The contents of the title attribute will be displayed in a ToolTip during the onmouseover event.
event Can be one or more of these events:
onclick ondblclick
ondragstart onhelp
onkeydown onkeypress
onkeyup onmousedown
onmousemove onmouseout
onmouseover onmouseup
onselectstart

Remarks

Both the start and end tags are required.

Example

<CITE>Book Title.</CITE>

Scripting Object

CITE

See Also

ACRONYM, ADDRESS, DFN, EM, STRONG

Reconfiguration By J2M


Object DHTM

DHTML Elements

CODE

Description

Specifies a code sample. The text is rendered in a small font.

By default, the font used is fixed-width. If a font face is specified with the FONT or BASEFONT elements preceding CODE, that font is used instead.

Syntax

<CODE
 CLASS=classname
ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
 STYLE=css1-properties
TITLE=text
event = script
>

Parameter | Description
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The scripting language is written in JavaScript.
VBS, VBSCRIPT | The scripting language is written in VBScript.
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
TITLE=text | Used to provide advisory information. The contents of the title attribute will be displayed in a ToolTip during the onmouseover event.
event Can be one or more of these events:
onclick ondblclick
ondragstart onhelp
onkeydown onkeypress
onkeyup onmousedown
onmousemove onmouseout
onmouseover onmouseup
onselectstart

Remarks

Both the start and end tags are required.

Example

<CODE>Here is some text in a small, fixed-width font.</CODE>

Scripting Object

CODE

See Also

SAMP

Reconfiguration By J2M


Object DHTM

DHTML Elements

COL

Description

Used to specify column based defaults for the table properties.

Syntax

<COL
 ALIGN=CENTER | LEFT | RIGHT
 CLASS=classname
ID=value
SPAN=n
STYLE=css1-properties
TITLE=text
VALIGN=BASELINE | BOTTOM | MIDDLE | TOP
 WIDTH=n
>

Parameter | Description
ALIGN=CENTER | LEFT | RIGHT | Displays the element left flush, right flush, or centered relative to the display or table.
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
SPAN=n | Specifies how many columns are in the group.
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
TITLE=text | Used to provide advisory information. The contents of the title attribute will be displayed in a ToolTip during the onmouseover event.
VALIGN=BASELINE | BOTTOM | MIDDLE | TOP Displays the elements aligned at the top or bottom within the element.
BASELINE | Vertical align to the baseline of the font.
BOTTOM | Vertical align to the bottom of the element.
MIDDLE | Vertical align to the middle of the element.
TOP | Vertical align to the top of the element.
WIDTH=n | Sets the initial width of the element. This attribute may be initially set in pixels or percentages.

Remarks

This element is a block element.

Example

<TABLE>
<COLGROUP>
<COL ALIGN=RIGHT>
<COL ALIGN=LEFT>
<COLGROUP>
<COL ALIGN=CENTER>
<TBODY>
<TR>
<TD>This is the first column in the group and is right-aligned.</TD>
<TD>This is the second column in the group and is left-aligned.</TD>
<TD>This column is in a new group and is centered.</TD>
</TR>
</TABLE>

Scripting Object

COL

See Also

COLGROUP

Reconfiguration By J2M


Object DHTM

DHTML Elements

COLGROUP

Description

Used as a container for a group of columns.

Syntax

<COLGROUP
 ALIGN=CENTER | LEFT | RIGHT
 CLASS=classname
ID=value
SPAN=n
STYLE=css1-properties
TITLE=text
VALIGN=BASELINE | BOTTOM | MIDDLE | TOP
 WIDTH=n
>

Parameter | Description
ALIGN= CENTER | LEFT | RIGHT | Displays the element left flush, right flush, or centered relative to the display or table.
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
SPAN=n | Specifies how many columns are in the group.
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
TITLE=text | Used to provide advisory information.
VALIGN=BASELINE | BOTTOM | MIDDLE | TOP Displays the elements aligned at the top or bottom within the element.
BASELINE | Vertical align to the baseline of the font.
BOTTOM | Vertical align to the bottom of the element.
MIDDLE | Vertical align to the middle of the element.
TOP | Vertical align to the top of the element.
WIDTH=n | Sets the initial width of the element. This attribute may be initially set in pixels or percentages.

Remarks

End tags are optional.

Example

<TABLE>
<COLGROUP ALIGN=RIGHT>
<COLGROUP SPAN=2 ALIGN=LEFT>
<TBODY>
<TR>
<TD>This column is in the first group and is right-aligned.</TD>
<TD>This column is in the second group and is left-aligned.</TD>
<TD>This column is in the second group and is left-aligned.</TD>
</TR>
</TABLE>

Scripting Object

COLGROUP

See Also

COL

Reconfiguration By J2M


Object DHTM

DHTML Elements

COMMENT

Description

This element is no longer recommended. Indicates a comment that will not be displayed. This element is provided for backward compatibility. When authoring documents, use the <!-- --> comment element for comments instead.

Syntax

<COMMENT
 ID=value
LANG=language
TITLE=text
>

Parameter | Description
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
TITLE= | Used to provide advisory information.

Remarks

Both the start and end tags are required.

Scripting Object

COMMENT

See Also

<!-- -->

Reconfiguration By J2M


Object DHTM

DHTML Elements

DD

Description

The definition in a definition list. Usually indented from the definition list, and displayed in the right-hand column of a definition list.

Syntax

<DD
 CLASS=classname
ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
 STYLE=css1-properties
TITLE=text
event = script
>

Parameter | Description
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The scripting language is written in JavaScript.
VBS, VBSCRIPT | The scripting language is written in VBScript.
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
TITLE=text | Used to provide advisory information. The contents of the title attribute will be displayed in a ToolTip during the onmouseover event.
event Can be one or more of these events:
onclick ondblclick
ondragstart onhelp
onkeydown onkeypress
onkeyup onmousedown
onmousemove onmouseout
onmouseover onmouseup
onselectstart

Remarks

This element is a block element.

The start tag is required, and the end tag is optional.

Example

<DL><DT>Cat<DD>A small domesticated mammal.
<DT>Lizard<DD>A reptile generally found in dry areas.</DL>

Scripting Object

DD

See Also

DL, DT

Reconfiguration By J2M


Object DHTM

DHTML Elements

DEL

Description

Indicates text that has been deleted from the document.

Syntax

<DEL
 CLASS=classname
ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
 STYLE=css1-properties
TITLE=text
event = script
>

Parameter | Description
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The scripting language is written in JavaScript.
VBS, VBSCRIPT | The scripting language is written in VBScript.
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
TITLE=text | Used to provide advisory information. The contents of the title attribute will be displayed in a ToolTip during the onmouseover event.
event Can be one or more of these events:
onclick ondblclick
ondragstart onhelp
onkeydown onkeypress
onkeyup onmousedown
onmousemove onmouseout
onmouseover onmouseup
onselectstart

Remarks

Both the start and end tags are required.

Example

<DEL>This text has been revised.</DEL>

Scripting Object

DEL

See Also

INS

Reconfiguration By J2M


Object DHTM

DHTML Elements

DFN

Description

Indicates the defining instance of a term. Formats a term for its first appearance in a document.

Syntax

<DFN
 CLASS=classname
ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
 STYLE=css1-properties
TITLE=text
event = script
>

Parameter | Description
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The scripting language is written in JavaScript.
VBS, VBSCRIPT | The scripting language is written in VBScript.
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
TITLE=text | Used to provide advisory information. The contents of the title attribute will be displayed in a ToolTip during the onmouseover event.
event Can be one or more of these events:
onclick ondblclick
ondragstart onhelp
onkeydown onkeypress
onkeyup onmousedown
onmousemove onmouseout
onmouseover onmouseup
onselectstart

Remarks

This element is a block element.

Both the start and end tags are required.

Example

<DFN>HTML stands for hypertext markup language.</DFN>

Scripting Object

DFN

See Also

ACRONYM, ADDRESS, CITE, STRONG

Reconfiguration By J2M


Object DHTM

DHTML Elements

DIR

Description

Denotes a directory list. The following text is a directory list that consists of individual items, each beginning with an LI element and none containing more than 20 characters.

Syntax

<DIR
 CLASS=classname
ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
 STYLE=css1-properties
TITLE=text
event = script
>

Parameter | Description
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The scripting language is written in JavaScript.
VBS, VBSCRIPT | The scripting language is written in VBScript.
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
TITLE=text | Used to provide advisory information. The contents of the title attribute will be displayed in a ToolTip during the onmouseover event.
event Can be one or more of these events:
onclick ondblclick
ondragstart onhelp
onkeydown onkeypress
onkeyup onmousedown
onmousemove onmouseout
onmouseover onmouseup
onselectstart

Remarks

This element is a block element.

Both the start and end tags are required.

Example

<DIR><LI>Art
<LI>History
<LI>Literature
<LI>Sports
<LI>Entertainment
<LI>Science
</DIR>

Scripting Object

DIR

Reconfiguration By J2M


Object DHTM

DHTML Elements

DIV

Description

The DIV element is used to represent different kinds of containers in a document such as chapter, section, abstract, appendix, etc.

Syntax

<DIV
 ALIGN=CENTER | LEFT | RIGHT
 CLASS=classname
DATAFLD=colname
DATAFORMATAS=HTML | TEXT
 DATASRC=#ID
ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
STYLE=css1-properties
TITLE=text

event = script
>

Parameter | Description
ALIGN=CENTER | LEFT | RIGHT | Displays the element left flush, right flush, or centered relative to the display or table.
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
DATAFLD=colname | The column name from the data source object that supplies the bound data.
DATAFORMATAS=HTML | TEXT | Indicates whether bound data is plain text or HTML.
DATASRC=#ID | Indicates the ID of the data source object that supplies the data that is bound to this element.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The scripting language is written in JavaScript.
VBS, VBSCRIPT | The scripting language is written in VBScript.
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
TITLE=text | Used to provide advisory information. The contents of the title attribute will be displayed in a ToolTip during the onmouseover event.
event Can be one or more of these events:
onafterupdate onbeforeupdate
onblur onclick
ondblclick ondragstart
onfocus onhelp
onkeydown onkeypress
onkeyup onmousedown
onmousemove onmouseout
onmouseover onmouseup
onresize onrowenter
onrowexit onscroll
onselectstart

Remarks

This element is a block element.

Both the start and end tags are required.

Example

<DIV>
This text represents a section.
</DIV>

<DIV ALIGN=CENTER>
This text represents another section, and its text is centered.
</DIV>

Scripting Object

DIV

Reconfiguration By J2M


Object DHTM

DHTML Elements

DL

Description

Denotes a definition list. The text is formatted as a list of terms on the left and their definitions indented below. The DT and DD elements can be used to define the elements within a directory list.

Syntax

<DL
 CLASS=classname
COMPACT
 ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
 STYLE=css1-properties
TITLE=text
event = script
>

Parameter | Description
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
COMPACT | Specifies that the list should be compacted to remove extra space between list elements.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The scripting language is written in JavaScript.
VBS, VBSCRIPT | The scripting language is written in VBScript.
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
TITLE=text | Used to provide advisory information. The contents of the title attribute will be displayed in a ToolTip during the onmouseover event.
event Can be one or more of these events:
onclick ondblclick
ondragstart onhelp
onmousedown onmousemove
onmouseout onmouseover
onmouseup onselectstart

Remarks

This element is a block element.

Both the start and end tags are required.

Example

<DL>
<DT>Cat
<DD> A small domesticated mammal.
<DT>Lizard
<DD>A reptile generally found in dry areas.
</DL>

Scripting Object

DL

See Also

DD, DT

Reconfiguration By J2M


Object DHTM

DHTML Elements

DT

Description

A definition term within a definition list. The text is a term to be defined, and should be displayed in the left-hand column of a definition list. The corresponding definition should be indicated with the DD element.

Syntax

<DT
 CLASS=classname
ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
 STYLE=css1-properties
TITLE=text
event = script
>

Parameter | Description
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The scripting language is written in JavaScript.
VBS, VBSCRIPT | The scripting language is written in VBScript.
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
TITLE=text | Used to provide advisory information. The contents of the title attribute will be displayed in a ToolTip during the onmouseover event.
event Can be one or more of these events:
onclick ondblclick
ondragstart onhelp
onkeydown onkeypress
onkeyup onmousedown
onmousemove onmouseout
onmouseover onmouseup
onselectstart

Remarks

This element is a block element.

The start tag is required, and the end tag is optional.

Example

<DL>
<DT>Cat
<DD> A small domesticated mammal.
<DT>Lizard
<DD>A reptile generally found in dry areas.
</DL>

Scripting Object

DT

See Also

DD, DL

Reconfiguration By J2M


Object DHTM

DHTML Elements

EM

Description

Used to emphasize text. Usually renders text in italics.

Syntax

<EM
 CLASS=classname
ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
 STYLE=css1-properties
TITLE=text
event = script
>

Parameter | Description
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The scripting language is written in JavaScript.
VBS, VBSCRIPT | The scripting language is written in VBScript.
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
TITLE=text | Used to provide advisory information. The contents of the title attribute will be displayed in a ToolTip during the onmouseover event.
event Can be one or more of these events:
onclick ondblclick
ondragstart onhelp
onkeydown onkeypress
onkeyup onmousedown
onmousemove onmouseout
onmouseover onmouseup
onselectstart

Remarks

Both the start and end tags are required.

Example

<EM>This text is emphasized, often shown in italics.</EM>

Scripting Object

EM

See Also

ACRONYM, ADDRESS, CITE, STRONG

Reconfiguration By J2M


Object DHTM

DHTML Elements

EMBED

Description

Allows you to embed documents of any type. The user needs to have an application which can view the data installed correctly on their machine.

Syntax

<EMBED
 ALIGN=ABSBOTTOM | ABSMIDDLE | BASELINE | BOTTOM | LEFT | MIDDLE | RIGHT | TEXTTOP | TOP
 ALT=text
CLASS=classname
CODE=filename
CODEBASE=url
HEIGHT=n
HSPACE=n
ID=value
NAME=name
SRC=url
STYLE=css1-properties
TITLE=text
UNITS=value
VSPACE=n
WIDTH=n

>

Parameter | Description
ALIGN=ABSBOTTOM | ABSMIDDLE | BASELINE | BOTTOM | LEFT | MIDDLE | RIGHT | TEXTTOP | TOP | Specifies the alignment for the control-like element.
ALT=text | Optional text as an alternative to the application if it cannot be executed.
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
CODE=filename | The name of the file containing the compiled Java class.
CODEBASE=url | This is an optional parameter that specifies the base URL for the application.
HEIGHT=n | Along with WIDTH, specifies the size at which the element is drawn. This attribute may be initially set in pixels or percentages.
HSPACE=n | Along with VSPACE=, specifies margins for the element.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID names must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created and can only be referenced by ordinal position.
NAME=name | Specifies the name of the application.
SRC=url | Specifies a URL for the associated file.
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
TITLE=text | Used to provide advisory information. The contents of the title attribute will be displayed in a ToolTip during the onmouseover event.
UNITS=value | Defines the units for the height and width of the EMBED element, expressed as pixels (px) or ems (em).
VSPACE=n | Along with HSPACE=, specifies margins for the element.
WIDTH=n | Along with HEIGHT, specifies the size at which the element is drawn. This attribute may be initially set in pixels or percentages.

Remarks

This element is a block element.

Both the start and end tags are required.

Scripting Object

EMBED

See Also

APPLET, OBJECT, PARAM

Reconfiguration By J2M


Object DHTM

DHTML Elements

FIELDSET

Description

The FIELDSET element is similar to the DIV element but is for the specific purpose of grouping related fields. It is a container and it is nestable. It can contain a single LEGEND that must immediately follow the FIELDSET tag. The legend is used to identify the contained set of fields. This is especially useful to speech-based browsers which can then provide users with a way to move from group to group. This element renders as a box around the group and transposes the legend over the upper-left or lower-left portion of the box depending upon the ALIGN= attribute value on the LEGEND element. The legend element must be the first element within the field set. If it is not, the legend text cannot be rendered as part of the FIELDSET border.

Syntax

<FIELDSET
 ALIGN= LEFT | CENTER | RIGHT
 CLASS=classname
ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
STYLE=css1-properties
TITLE=text
event = script
>

Parameter | Description
ALIGN=LEFT | CENTER | RIGHT | Displays the element left flush, right flush, or centered, relative to the display or table.
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID names must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created and can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The scripting language is written in JavaScript.
VBS, VBSCRIPT | The scripting language is written in VBScript.
STYLE= | Specifies an in-line style sheet for the tag.
TITLE= | Used to provide advisory information. The contents of the title attribute will be displayed in a ToolTip during the onmouseover event.
event Can be one or more of these events:
onblur onchange
onclick ondblclick
ondragstart onfilterchange
onfocus onhelp
onkeydown onkeypress
onkeyup onmousedown
onmousemove onmouseout
onmouseover onmouseup
onresize onscroll
onselect onselectstart

Remarks

Both the start and end tags are required.

Scripting Object

FIELDSET

See Also

CAPTION, LEGEND

Reconfiguration By J2M


Object DHTM

DHTML Elements

FONT

Description

Specifies a new font face, size, and color to be used for rendering the enclosed text.

Syntax

<FONT
 CLASS=classname
COLOR=color
FACE=font
ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
SIZE=n
STYLE=css1-properties
TITLE=text
event = script
>

Parameter | Description
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
COLOR=color | Set the color to be used by the font or horizontal rule. For a complete list of colors, look at the Internet Explorer color table.
FACE=font | Sets the current font typeface.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The scripting language is written in JavaScript.
VBS, VBSCRIPT | The scripting language is written in VBScript.
SIZE=n | Specifies font size between 1 and 7 (7 is largest).
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
TITLE=text | Used to provide advisory information. The contents of the title attribute will be displayed in a ToolTip during the onmouseover event.
event Can be one or more of these events:
onclick ondblclick
ondragstart onhelp
onkeydown onkeypress
onkeyup onmousedown
onmousemove onmouseout
onmouseover onmouseup
onselectstart

Remarks

Both the start and end tags are required.

Scripting Object

FONT

Reconfiguration By J2M


Object DHTM

DHTML Elements

FORM

Description

Specifies that the contained controls take part in a form.

Syntax

<FORM
 ACTION=url
CLASS=classname
ENCTYPE=encoding
ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
METHOD=GET | POST
 NAME=name
STYLE=css1-properties
TARGET=window_name | _blank | _parent | _self | _top
TITLE=text
event = script
>

Parameter | Description
ACTION=url | Specifies the address to be used to carry out the action of the form. If none is specified, the base URL of the document is used.
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
ENCTYPE=encoding | Specifies the format of the data being submitted by the form.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The scripting language is written in JavaScript.
VBS, VBSCRIPT | The scripting language is written in VBScript.
METHOD=GET | POST | Indicates how the form data should be sent to the server; either GET or POST
NAME=name | Specifies the name of the control, bookmark, or application.
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
TARGET=window_name | _blank | _parent | _self | _top Specifies the window or frame to target the contents at. If no frame or window exists that matches the specified target, a new window is opened for the specified link. If no target is specified, the default is "_self" for a link within the same site or "_top" if the site is external. Special target values are listed below:
_blank | Specifies to load the link into a new unnamed window.
_parent | Specifies to load the link into the immediate parent of the document the link is in.
_self | Specifies to load the link into the same window the link was clicked in.
_top | Specifies to load the link into the full body of the current window.
TITLE=text | Used to provide advisory information. The contents of the title attribute will be displayed in a ToolTip during the onmouseover event.
event Can be one or more of these events:
onclick ondblclick
ondragstart onhelp
onkeydown onkeypress
onkeyup onmousedown
onmousemove onmouseout
onmouseover onmouseup
onreset onselectstart
onsubmit

Remarks

When programming the form, all control-like elements are added to the form as named items. In addition, these items are exposed through the Item method on the form.

This element is a block element.

Both the start and end tags are required.

Example

<FORM TARGET="viewer" ACTION="http://www.sample.com/bin/search">
...
</FORM>

Scripting Object

FORM

Reconfiguration By J2M


Object DHTM

DHTML Elements

FRAME

Description

Specifies an individual frame within a FRAMESET .

Syntax

<FRAME
 BORDERCOLOR=color
CLASS=classname
DATAFLD=colname
DATASRC=#ID
FRAMEBORDER=NO | YES | 0 | 1
 HEIGHT=n
ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
MARGINHEIGHT=pixels
MARGINWIDTH=pixels
NAME=window_name | _blank | _parent | _self | _top
NORESIZE=NORESIZE | RESIZE
 SCROLLING=AUTO | NO | YES
 SRC=url
TITLE=text
WIDTH=n
event = script
>

Parameter | Description
BORDERCOLOR=color | Sets border color and must be used with the BORDER attribute, except for frames. For a complete list of colors, look at the Internet Explorer color table.
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
DATAFLD=colname | The column name from the data source object that supplies the bound data.
DATASRC=#ID | Indicates the ID of the data source object that supplies the data that is bound to this element.
FRAMEBORDER=NO | YES | 0 | 1 | Specifies whether or not to display a border for the frame.
HEIGHT=n | Along with WIDTH, specifies the size at which the element is drawn. This attribute may be initially set in pixels or percentages.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The scripting language is written in JavaScript.
VBS, VBSCRIPT | The scripting language is written in VBScript.
MARGINHEIGHT=pixels | Sets the amount of top and bottom margin should be set before displaying the text in a frame.
MARGINWIDTH=pixels | Sets the amount of left and right margin should be set before displaying the text in a frame.
NAME=window_name | _blank | _parent | _self | _top Specifies the window or frame to target the contents at. If no frame or window exists that matches the specified target, a new window is opened for the specified link. If no target is specified, the default is "_self" for a link within the same site or "_top" if the site is external. Special target values are listed below:
_blank | Specifies to load the link into a new unnamed window.
_parent | Specifies to load the link into the immediate parent of the document the link is in.
_self | Specifies to load the link into the same window the link was clicked in.
_top | Specifies to load the link into the full body of the current window.
NORESIZE | When this attribute is supplied, the frame is not resizable by the user. The default behavior allows the user to resize the frame.
SCROLLING=AUTO | NO | YES | Specifies that the frame can be scrolled. If set to "AUTO," the browser determines whether scrollbars are necessary.
SRC=url | Specifies a URL for the associated file.
TITLE=text | Used to provide advisory information. The contents of the title attribute will be displayed in a ToolTip during the onmouseover event.
WIDTH=n | Along with HEIGHT, sets the initial size of the element. This attribute may be initially set in pixels or percentages.
event Can be this event:
onreadystatechange

Remarks

This element is a block element.

Example

<FRAME FRAMEBORDER=0 SCROLLING=NO SRC="sample.htm">

Scripting Object

FRAME

See Also

FRAMESET, NOFRAMES

Reconfiguration By J2M


Object DHTM

DHTML Elements

FRAMESET

Description

Sets the number and size of vertical and horizontal frames for a compound document. Use the FRAME element within FRAMESET to define the content and properties of the individual frames. You can also nest FRAMESET elements to create frames within a frame.

Syntax

<FRAMESET
 BORDER=pixels
BORDERCOLOR=color

CLASS=classname
COLS=col-widths
FRAMEBORDER=NO | YES | 0 | 1
FRAMESPACING=spacing
ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
ROWS=row-heights
TITLE=text
>

Parameter | Description
BORDER=pixels | Defines the space between the frames in pixels, including the 3D border. For nested FRAMESETS, the border can only be defined for the top-level FRAMESET element.
BORDERCOLOR=color | Sets border color and must be used with the BORDER attribute, except for frames. For a complete list of colors, look at the Internet Explorer color table.
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
COLS=col-widths | A comma delimited list of frames to create. Each item in the list contains the initial size of the column. You can specify the column dimensions by percentage (%), pixels, or a relative size (*)
FRAMEBORDER=NO | YES | 0 | 1 | Specifies whether or not to display a border for the frame. "YES" or 1 causes a border to be displayed (default). "NO" or 0 displays no border.
FRAMESPACING=spacing | Creates additional space between the frames in pixels.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The scripting language is written in JavaScript.
VBS, VBSCRIPT | The scripting language is written in VBScript.
ROWS=row-heights | A comma delimited list of frames to create. Each item in the list contains the initial size of the row. You can specify the row dimensions by percentage (%), pixels, or a relative size (*).
TITLE=text | Used to provide advisory information.

Remarks

A frameset organizes multiple frames on the screen. Only frames, nested FRAMESETelements, and the NOFRAMES tag are valid within a frameset.

This element is a block element.

Both the start and end tags are required.

Example

<FRAMESET COLS="25%, 50%, *">
<FRAME SRC="contents.htm">
<FRAME SRC="info.htm">
<FRAME SCROLLING=NO SRC="graphic.htm">
</FRAMESET>

Scripting Object

FRAMESET

See Also

FRAME, NOFRAMES

Reconfiguration By J2M


Object DHTM

DHTML Elements

HEAD

Description

An unordered collection of information that marks the document heading.

Syntax

<HEAD
 CLASS=classname
ID=value
TITLE=text
>

Parameter | Description
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
TITLE=text | Used to provide advisory information. The contents of the title attribute will be displayed in a ToolTip during the onmouseover event.

Remarks

The HEAD provides information that does not effect the rendering of the document, but may be of use to the browser. The HEAD falls before the BODY of the document is specified. The following tags are valid in the HEAD block:

  • BASE
  • LINK
  • TITLE
  • META
  • BASEFONT
  • BGSOUND

The TITLE tag is the only information that is required as part of a HEAD block.

Example

<HEAD>
<TITLE>A Simple Document</TITLE>
</HEAD>

Scripting Object

HEAD

Reconfiguration By J2M


Object DHTM

DHTML Elements

Hn

Description

Renders text in heading style. Use H1 through H6 to specify different sizes and styles of headings. The end tag is required to restore the formatting to normal.

Syntax

<Hn
 ALIGN=CENTER | LEFT | RIGHT
 CLASS=classname
ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
STYLE=css1-properties
TITLE=text
event = script
>

Parameter | Description
n | Sets the heading level. This is an integer from 1 to 6.
ALIGN= | Displays the element left flush, right flush, or centered relative to the display or table.
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The scripting language is written in JavaScript.
VBS, VBSCRIPT | The scripting language is written in VBScript.
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
TITLE=text | Used to provide advisory information. The contents of the title attribute will be displayed in a ToolTip during the onmouseover event.
event Can be one or more of these events:
onclick ondblclick
ondragstart onhelp
onkeydown onkeypress
onkeyup onmousedown
onmousemove onmouseout
onmouseover onmouseup
onselectstart

Remarks

This element is a block element.

Both the start and end tags are required.

Example

<H1>Welcome to Internet Explorer!</H1>

Scripting Objects

H1 H2 H3
H4 H5 H6

Reconfiguration By J2M


Object DHTM

DHTML Elements

HR

Description

Draws a horizontal rule.

Syntax

<HR
 ALIGN=CENTER | LEFT | RIGHT
 CLASS=classname
COLOR=color
ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
NOSHADE
SIZE=n
STYLE=css1-properties
TITLE=text
WIDTH=n
event = script
>

Parameter | Description
ALIGN=CENTER | LEFT | RIGHT | Displays the element left flush, right flush, or centered relative to the display or table.
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
COLOR=color | Set the color to be used by the font or horizontal rule. For a complete list of colors, look at the Internet Explorer color table.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The scripting language is written in JavaScript.
VBS, VBSCRIPT | The scripting language is written in VBScript.
NOSHADE | Draws the horizontal rule without 3-D shading.
SIZE=n | Sets the height of the <HR > element in pixels.
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
TITLE=text | Used to provide advisory information. The contents of the title attribute will be displayed in a ToolTip during the onmouseover event.
WIDTH=n | Sets the initial width of the element. This attribute may be initially set in pixels or percentages.
event Can be one or more of these events:
onbeforeupdate onblur
onclick ondblclick
ondragstart onfocus
onhelp onkeydown
onkeypress onkeyup
onmousedown onmousemove
onmouseout onmouseover
onmouseup onresize
onrowenter onrowexit
onselectstart

Remarks

This element is a block element.

Scripting Object

HR

Reconfiguration By J2M


Object DHTM

DHTML Elements

HTML

Description

This element identifies the document as containing HTML elements. The begin tag typically appears after the !DOCTYPE element. The end tag comes after all HTML elements in the document.

Syntax

<HTML
 TITLE=text
>

Parameter | Description
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
TITLE= | Used to provide advisory information.

Remarks

Example

<HTML>
<BODY>
<P>This is an HTML document.
</BODY>
</HTML>

Scripting Object

HTML

Reconfiguration By J2M


Object DHTM

DHTML Elements

I

Description

The Italic element specifies that the text should be rendered in italic font, where available.

Syntax

<I
 CLASS=classname
ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
STYLE=css1-properties
TITLE=text
event = script
>

Parameter | Description
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The scripting language is written in JavaScript.
VBS, VBSCRIPT | The scripting language is written in VBScript.
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
TITLE=text | Used to provide advisory information. The contents of the title attribute will be displayed in a ToolTip during the onmouseover event.
event Can be one or more of these events:
onclick ondblclick
ondragstart onhelp
onkeydown onkeypress
onkeyup onmousedown
onmousemove onmouseout
onmouseover onmouseup
onselectstart

Remarks

Both the start and end tags are required.

Example

<I>This text will be in italic.</I>

Scripting Object

I

See Also

ADDRESS, CITE, DFN, EM

Reconfiguration By J2M


Object DHTM

DHTML Elements

IFRAME

Description

Used to create in-line floating frames.

Syntax

<IFRAME
 ALIGN=ABSBOTTOM | ABSMIDDLE | BASELINE | BOTTOM | LEFT | MIDDLE | RIGHT | TEXTTOP | TOP
 BORDER=pixels
BORDERCOLOR=color
CLASS=classname
DATAFLD=colname
DATASRC=#ID
FRAMEBORDER=NO | YES | 0 | 1
 FRAMESPACING=pixels
HEIGHT=n
HSPACE=pixels
ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
MARGINHEIGHT=pixels
MARGINWIDTH=pixels
NAME=window_name | _blank | _parent | _self | _top
 NORESIZE=NORESIZE | RESIZE
 SCROLLING=AUTO | NO | YES
 SRC=url
STYLE=css1-properties
TITLE=text
VSPACE=pixels
WIDTH=n
>

Parameter | Description
ALIGN=ABSBOTTOM | ABSMIDDLE | BASELINE | BOTTOM | LEFT | MIDDLE | RIGHT | TEXTTOP | TOP | Specifies the alignment for the control-like element.
BORDER=pixels | Specifies the thickness of a border to be drawn around the element. The default is 0.
BORDERCOLOR=color | Sets border color and must be used with the BORDER attribute, except for frames. For a complete list of colors, look at the Internet Explorer color table.
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
DATAFLD=colname | The column name from the data source object that supplies the bound data.
DATASRC=#ID | Indicates the ID of the data source object that supplies the data that is bound to this element.
FRAMEBORDER=NO | YES | 0 | 1 | Specifies whether or not to display a 3-D border around the frame. "YES" or 1 causes a border to be displayed (default). "NO" or 0 displays no border.
FRAMESPACING=pixels | Creates additional space between the frames.
HEIGHT=n | Along with WIDTH, specifies the size at which the element is drawn. This attribute may be initially set in pixels or percentages.
HSPACE=pixels | Along with VSPACE, specifies margins for the element.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The scripting language is written in JavaScript.
VBS, VBSCRIPT | The scripting language is written in VBScript.
MARGINHEIGHT=pixels | Sets the amount of top and bottom margin should be set before displaying the text in a frame.
MARGINWIDTH=pixels | Sets the amount of left and right margin should be set before displaying the text in a frame.
NAME=window_name | _blank | _parent | _self | _top Specifies the window or frame to target the contents at. If no frame or window exists that matches the specified target, a new window is opened for the specified link. If no target is specified, the default is "_self" for a link within the same site or "_top" if the site is external. Special target values are listed below:
_blank | Specifies to load the link into a new unnamed window.
_parent | Specifies to load the link into the immediate parent of the document the link is in.
_self | Specifies to load the link into the same window the link was clicked in.
_top | Specifies to load the link into the full body of the current window.
NORESIZE | When this attribute is supplied, the frame is not resizable by the user. The default behavior allows the user to resize the frame.
SCROLLING=AUTO | NO | YES | Specifies that the frame can be scrolled. If set to "AUTO," the browser determines whether scrollbars are necessary (default).
SRC=url | Specifies a URL for the associated file to be displayed in the frame.
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
TITLE=text | Used to provide advisory information.
VSPACE=pixels | Along with HSPACE, specifies margins for the element.
WIDTH=n | Along with HEIGHT, sets the initial size of the element. This attribute may be initially set in pixels or percentages.

Remarks

This element is a block element.

Both the start and end tags are required.

Example

<IFRAME FRAMEBORDER=0 SCROLLING=NO SRC="sample.htm"></IFRAME>

Scripting Object

IFRAME

Reconfiguration By J2M


Object DHTM

DHTML Elements

IMG

Description

Embeds an image or a video clip in the document.

Syntax

<IMG
 ALIGN=ABSBOTTOM | ABSMIDDLE | BASELINE | BOTTOM | LEFT | MIDDLE | RIGHT | TEXTTOP | TOP
 ALT=text
BORDER=n
CLASS=classname
DATAFLD=colname
DATASRC=#ID
DYNSRC=url
HEIGHT=n
HSPACE=n
ID=value
ISMAP
 LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
LOOP=n
LOWSRC=url
NAME=name
SRC=url
STYLE=css1-properties
TITLE=text
USEMAP=url
VSPACE=n
WIDTH=n
event = script
>

Parameter | Description
ALIGN=ABSBOTTOM | ABSMIDDLE | BASELINE | BOTTOM | LEFT | MIDDLE | RIGHT | TEXTTOP | TOP | Specifies the alignment for the image.
ALT=text | Optional text as an alternative to the graphic for rendering in non-graphical environments. Alternate text should be provided whenever the graphic is not rendered. Alternate text is mandatory for Level 0 documents.
BORDER=n | Specifies the thickness of a border to be drawn around the element.
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
DATAFLD=colname | The column name from the data source object that supplies the bound data.
DATASRC=#ID | Indicates the ID of the data source object that supplies the data that is bound to this element.
DYNSRC=url | Specifies the address of a video clip or VRML world to be displayed in the window. Stands for Dynamic Source.
HEIGHT=n | Along with WIDTH, specifies the size at which the element is drawn. This attribute may be initially set in pixels or percentages.
HSPACE=n | Along with VSPACE, specifies margins for the element.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
ISMAP | Identifies the picture as a server-side image map. Image maps allow users to access other documents by clicking different areas in an image. Server-side image maps require a script or other service on the server to process click information. When the user clicks on the image, the server receives the coordinates of the user's click along with the URL of the map. Internet Explorer appends a "?" and a comma-separated pair of x-y coordinates to the HREF attribute in the A element. For further information regarding server-side maps and the content of the map file, check your HTTP server documentation.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The scripting language is written in JavaScript.
VBS, VBSCRIPT | The scripting language is written in VBScript.
LOOP=n | Specifies how many times a sound or video will loop when activated. Also specifies how many times the marquee should loop.
LOWSRC=url | Specifies a lower resolution image to display.
NAME=name | Specifies the name of the control.
SRC=url | Specifies a URL for the associated file.
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
TITLE=text | Used to provide advisory information. The contents of the title attribute will be displayed in a ToolTip during the onmouseover event.
USEMAP=url | Identifies the picture as a client-side image map and specifies a MAP to use for responding to the user's clicks. Use the MAP and AREA elements to create the client-side mapping information.
VSPACE=n | Along with HSPACE, specifies margins for the element.
WIDTH=n | Along with HEIGHT, sets the initial size of the element. This attribute may be initially set in pixels or percentages.
event Can be one or more of these events:
onabort onafterupdate
onbeforeupdate onblur
onclick ondblclick
ondragstart onerror
onfocus onhelp
onkeydown onkeypress
onkeyup onload
onmousedown onmousemove
onmouseout onmouseover
onmouseup onresize
onrowenter onrowexit
onselectstart

Example

<IMG SRC=mygraphic.bmp>

Scripting Object

IMG

See Also

AREA, INPUT, MAP

Reconfiguration By J2M


Object DHTM

DHTML Elements

INPUT

Description

Specifies a form input control.

Syntax

<INPUT
ACCESSKEY=key
ALIGN=LEFT | CENTER | RIGHT
ALT=text
CLASS=classname
DISABLED
DYNSRC=url
ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
LOWSRC=url
MAXLENGTH=n
NAME=name
READONLY
SIZE=n
SRC=url
STYLE=css1-properties
TABINDEX=n
TITLE=text
TYPE=BUTTON | CHECKBOX | FILE | HIDDEN | IMAGE | PASSWORD | RADIO | RESET | SUBMIT | TEXT
VALUE=value
event = script
>

Parameter | Description
ACCESSKEY=key | Specifies an accelerator for the element. Pressing alt-key selects this element in the user's browser. This attribute applies to the BUTTON, CHECKBOX, FILE, PASSWORD, RADIO, RESET, SUBMIT, and TEXT input types.
ALIGN=LEFT | CENTER | RIGHT | Displays the element left flush, right flush, or centered relative to the display or table when TYPE=IMAGE..
ALT=text | When TYPE=IMAGE, optional text as an alternative to the graphic for rendering in non-graphical environments. Alternate text should be provided whenever the graphic is not rendered. Alternate text is mandatory for Level 0 documents.
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
DISABLED | Used to disable an element. This attribute prevents an element from receiving the focus, and causes the element to appear "grayed out."
DYNSRC=url | Specifies the address of a video clip or VRML world to be displayed in the window. Stands for Dynamic Source. Applies to type=image only.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The scripting language is written in JavaScript.
VBS, VBSCRIPT | The scripting language is written in VBScript.
LOWSRC=url | Specifies a lower resolution image to display. Applies to type=image only.
MAXLENGTH=n | Indicates the maximum number of characters that can be entered into a text control. This attribute applies to the PASSWORD and TEXT input types.
NAME=name | Specifies the name of the control, bookmark, or application.
READONLY | Causes the element's contents to be read only. The INPUT element can still receive the focus. This attribute applies to the PASSWORD and TEXT input types.
SIZE=n | Specifies the size of the control.
SRC=url | Specifies a URL for the associated file. This attribute applies to the IMAGE type.
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
TABINDEX=n | Sets the tab order position for the object. This attribute applies to the BUTTON, CHECKBOX, FILE, PASSWORD, RADIO, RESET, SUBMIT, and TEXT input types.
TITLE=text | Used to provide advisory information. The contents of the title attribute will be displayed in a ToolTip during the onmouseover event.
TYPE=BUTTON | CHECKBOX | FILE | HIDDEN | IMAGE | PASSWORD | RADIO | RESET | SUBMIT | TEXT Specifies the type of intrinsic control. The default is TEXT.
BUTTON | A button on the HTML form.
CHECKBOX | Used for simple Boolean attributes or for attributes that can take multiple values at the same time. It is represented by a number of check box fields, each of which has the same name. Each selected check box generates a separate name/value pair in the submitted data, even if this results in duplicate names. The default value for check boxes is on.
FILE | A file upload element that allows the user to supply a file as the input.
HIDDEN | No field is presented to the user, but the content of the field is sent with the submitted form. This value can be used to transmit state information about client/server interaction.
IMAGE | An image field that you can click, causing the form to be immediately submitted. The coordinates of the selected point are measured in pixel units from the upper-left corner of the image, and are returned (along with the other contents of the form) in two name/value pairs. The x-coordinate is submitted under the name of the field with ".x" appended, and the y-coordinate is submitted under the name of the field with ".y" appended. Any VALUE= attribute is ignored. The image itself is specified by the SRC= attribute, exactly as for the IMG element.
PASSWORD | The same as the TEXT input type, except that text is not displayed as the user enters it.
RADIO | Used for attributes that accept a single value from a set of alternatives. Each radio-button field in the group should be given the same name. Only the selected radio button in the group generates a name/value pair in the submitted data. Radio buttons require an explicit VALUE= attribute.
RESET | When pressed, this button resets the form's fields to their specified initial values. The label to be displayed on the button may be specified just as for the SUBMIT button.
SUBMIT | Submits the form. The default label is application-specific. If a SUBMIT button is pressed in order to submit the form, and that button has a NAME attribute specified, then that button contributes a name/value pair to the submitted data. Otherwise, a SUBMIT button makes no contribution to the submitted data.
TEXT | Used for a single-line text-entry field. Use in conjunction with the SIZE= and MAXLENGTH= attributes.
VALUE=value | For textual/numerical controls, specifies the default value of the control. For Boolean controls, specifies the value to be returned when the control is turned on. This attribute applies to the BUTTON, CHECKBOX, HIDDEN, PASSWORD, RADIO, RESET, SUBMIT, and TEXT input types.
event Can be one or more of these events:
onafterupdate onbeforeupdate
onblur onchange
onclick ondblclick
ondragstart onfocus
onhelp onkeydown
onkeypress onkeyup
onmousedown onmousemove
onmouseout onmouseover
onmouseup onselect
onselectstart

Remarks

Objects can be submitted in forms. The NAME is the identifier of the object tag (i.e., <OBJECT NAME=slider CLASSID=...>), and the VALUE is obtained by getting the value of the default property of the control. If any of the following conditions occur, then the object will not become part of the submit string:
Object did not instantiate
Object does not have an identifier
Object does not have a default property to get
Default property cannot be coerced into a string

Example

<FORM ACTION="http://intranet/survey" METHOD=POST>
<P>Name
<BR><INPUT NAME="CONTROL1" TYPE=TEXT VALUE="Your Name">
<P>Password
<BR><INPUT TYPE="PASSWORD" NAME="CONTROL2">
<P>Color
<BR><INPUT TYPE="RADIO" NAME="CONTROL3" VALUE="0" CHECKED>Red
<INPUT TYPE="RADIO" NAME="CONTROL3" VALUE="1">Green
<INPUT TYPE="RADIO" NAME="CONTROL3" VALUE="2">Blue
<P>Comments
<BR><INPUT TYPE="TEXT" NAME="CONTROL4" SIZE="20,5" MAXLENGTH="250">
<P><INPUT NAME="CONTROL5" TYPE=CHECKBOX CHECKED>Send receipt
<P><INPUT TYPE="SUBMIT" VALUE="OK"><INPUT TYPE="RESET" VALUE="Reset">
</FORM>

Scripting Object

INPUT

See Also

TEXT, BUTTON, IMG, TEXTAREA, OBJECT

Reconfiguration By J2M


Object DHTM

DHTML Elements

INS

Description

Indicates text that has been added to the document.

Syntax

<INS
 CLASS=classname
ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
 STYLE=css1-properties
TITLE=text
event = script
>

Parameter | Description
CLASS=classname | Class of the tag being defined. This is used to associate a subclassed style sheet with the tag.
ID=value | SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underscore character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The script is written in JScript.
VBS, VBSCRIPT | The script is written in VBScript.
STYLE=css1-properties | Inline style sheet for the tag.
TITLE=text | Used to provide advisory information. The contents of the title attribute will be displayed in a tooltip during the onmouseover event.
event Can be one or more of these events:
onclick ondblclick
ondragstart onhelp
onkeydown onkeypress
onkeyup onmousedown
onmousemove onmouseout
onmouseover onmouseup

Remarks

Both the start and end tags are required.

Example

<INS datetime="1997-10-01T12:15:30-05:00">This text has been revised.</INS>

Scripting Object

INS

See Also

DEL

Reconfiguration By J2M


Object DHTM

DHTML Elements

ISINDEX

Description

Causes the browser to prompt the user for a single line of input with a dialog window.

Syntax

<ISINDEX
 CLASS=classname
ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
STYLE=css1-properties
PROMPT=text
>

Parameter | Description
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The scripting language is written in JavaScript.
VBS, VBSCRIPT | The scripting language is written in VBScript.
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
PROMPT=text | Specifies a text prompt message for the input field.

Remarks

With HTML 4 this element will be deprecated, with INPUT recommended for use instead.

Reconfiguration By J2M


Object DHTM

DHTML Elements

KBD

Description

Indicates text to be entered at the keyboard. Renders text in bold with a fixed-width font.

Syntax

<KBD
 CLASS=classname
ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
STYLE=css1-properties
TITLE=text
event = script
>

Parameter | Description
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The scripting language is written in JavaScript.
VBS, VBSCRIPT | The scripting language is written in VBScript.
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
TITLE=text | Used to provide advisory information. The contents of the title attribute will be displayed in a ToolTip during the onmouseover event.
event Can be one or more of these events:
onclick ondblclick
ondragstart onhelp
onkeydown onkeypress
onkeyup onmousedown
onmousemove onmouseout
onmouseover onmouseup
onselectstart

Remarks

Both the start and end tags are required.

Example

<KBD>The user should enter this text.</KBD>

Scripting Object

KBD

Reconfiguration By J2M


Object DHTM

DHTML Elements

LABEL

Description

Specifies a label for a control-like element. The content between the start and end tags defines the label text.

Syntax

<LABEL
 ACCESSKEY=key
CLASS=classname
DATAFLD=colname
DATAFORMATAS=HTML | TEXT
 DATASRC=#ID
FOR=ID
ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
STYLE=css1-properties
TITLE=text
event = script
>

Parameter | Description
ACCESSKEY=key | Specifies an accelerator for the element. Pressing alt-key selects this element in the user's browser.
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
DATAFLD=colname | The column name from the data source object that supplies the bound data.
DATAFORMATAS=HTML | TEXT | Indicates whether bound data is plain text or HTML.
DATASRC=#ID | Indicates the ID of the data source object that supplies the data that is bound to this element.
FOR=ID | Specifies the ID for the control-like element the label is for. This is optional when the label is wrapped around the control the label applies to.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The scripting language is written in JavaScript.
VBS, VBSCRIPT | The scripting language is written in VBScript.
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
TITLE=text | Used to provide advisory information. The contents of the title attribute will be displayed in a ToolTip during the onmouseover event.
event Can be one or more of these events:
onclick ondblclick
ondragstart onhelp
onkeydown onkeypress
onkeyup onmousedown
onmousemove onmouseout
onmouseover onmouseup
onselectstart

Remarks

Labels cannot be nested.

Both the start and end tags are required.

Scripting Object

LABEL

Reconfiguration By J2M


Object DHTM

DHTML Elements

LEGEND

Description

Identifies a contained set of fields defined in the FIELDSET element. The LEGEND element must be the first element within the FIELDSET element.

Syntax

<LEGEND
 ALIGN=BOTTOM | CENTER | LEFT | RIGHT | TOP
 CLASS=classname
ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
 STYLE=css1-properties
TITLE=text
VALIGN=BOTTOM | TOP
 event = script
>

Parameter | Description
ALIGN= BOTTOM | CENTER | LEFT | RIGHT | TOP Specifies the alignment of the legend text.
BOTTOM | Aligns the legend text bottom center.
CENTER | Centers the legend text.
LEFT | Left aligns the legend text.
RIGHT | Right aligns the legend text.
TOP | Aligns the legend text top center.
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The scripting language is written in JavaScript.
VBS, VBSCRIPT | The scripting language is written in VBScript.
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
TITLE=text | Used to provide advisory information. The contents of the title attribute will be displayed in a ToolTip during the onmouseover event.
VALIGN=BOTTOM | TOP | Specifies whether the legend text appears at the top or bottom.
event Can be one or more of these events:
onclick ondblclick
ondragstart onhelp
onkeydown onkeypress
onkeyup onmousedown
onmousemove onmouseout
onmouseover onmouseup

Remarks

This element is a block element.

Both the start and end tags are required.

Scripting Object

LEGEND

Reconfiguration By J2M


Object DHTM

DHTML Elements

LI

Description

Denotes one item of a list. This element is used inside a DIR, MENU, OL, or UL block.

Syntax

<LI
 CLASS=classname
ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
STYLE=css1-properties
TITLE=text
TYPE=1 | a | A | i | I
 VALUE=value
event = script
>

Parameter | Description
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The scripting language is written in JavaScript.
VBS, VBSCRIPT | The scripting language is written in VBScript.
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
TITLE=text | Used to provide advisory information. The contents of the title attribute will be displayed in a ToolTip during the onmouseover event.
TYPE=1 | a | A | i | I Changes the style of the list.
1 | List items are numbered.
a | List items are labeled with lowercase letters.
A | List items are labeled with uppercase letters.
i | List items are labeled with lowercase roman numerals.
I | List items are labeled with uppercase roman numerals.
VALUE=value | Changes the count of ordered lists as they progress.
event Can be one or more of these events:
onclick ondblclick
ondragstart onhelp
onkeydown onkeypress
onkeyup onmousedown
onmousemove onmouseout
onmouseover onmouseup
onselectstart

Remarks

This element is a block element.

The start tag is required, and the end tag is optional.

Example

<DIR> <LI>Art
<LI>History
<LI>Literature
<LI>Sports
<LI>Entertainment
<LI>Science</DIR>

Scripting Object

LI

See Also

DIR, MENU, OL, UL

Reconfiguration By J2M


Object DHTM

DHTML Elements

LINK

Description

Used to specify a typed hyperlink between the document and some other resource.

Syntax

<LINK
 DISABLED
 HREF=url
ID=value
MEDIA=SCREEN | PRINT | ALL
 REL=STYLESHEET
 TITLE=text
TYPE="text/css"
>

Parameter | Description
DISABLED | Used to disable an element. This attribute prevents an element from receiving the focus, and causes the element to appear "grayed out."
HREF=url | Specifies the destination URL or anchor point.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
MEDIA= SCREEN | PRINT | ALL Describes the output device for the document. A value of "PRINT" does not affect the on-screen layout. Default value is ALL.
SCREEN | Output is intended for non-paged computer screens.
PRINT | Output is intended for paged, opaque material and for documents on screen viewed in print preview mode.
ALL | Applies to all devices.
REL=STYLESHEET | The REL attribute gives the relationship(s) described by the hypertext link from the anchor to the target. Values and their semantics will be registered by the HTML registration authority. The default relationship if none other is given is void. The REL attribute is only used when the HREF= attribute is present.
TITLE=text | Used to provide advisory information.
TYPE="text/css" | Indicates the type of style sheet.

Remarks

This element may only be used within the HEAD tag.

Example

<LINK REL=stylesheet HREF="styles.css" TYPE="text/css">

Scripting Object

LINK

Reconfiguration By J2M


Object DHTM

DHTML Elements

LISTING

Description

This element is no longer recommended and should not be used in new documents. LISTING renders text in fixed-width type. When authoring new documents, use the PRE element.

Syntax

<LISTING
 CLASS=classname
ID=string
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
STYLE=css1-properties
TITLE=text
event = script
>

Parameter | Description
ALIGN= | Displays the element left flush, right flush, or centered relative to the display or table.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The scripting language is written in JavaScript.
VBS, VBSCRIPT | The scripting language is written in VBScript.
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
TITLE=text | Used to provide advisory information. The contents of the title attribute will be displayed in a ToolTip during the onmouseover event.
Can be one or more of these events:
onclick ondblclick
ondragstart onhelp
onkeydown onkeypress
onkeyup onmousedown
onmousemove onmouseout
onmouseover onmouseup
onselectstart

Remarks

This element is a block element.

Both the start and end tags are required.

Scripting Object

LISTING

See Also

PRE

Reconfiguration By J2M


Object DHTM

DHTML Elements

MAP

Description

Specifies a collection of hot spots for a client-side image map

Syntax

<MAP
 CLASS=classname
ID=value
LANG=language
NAME=name
STYLE=css1-properties
TITLE=text
event = script
>

Parameter | Description
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
NAME=name | Specifies the name of the window.
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
TITLE=text | Used to provide advisory information. The contents of the title attribute will be displayed in a ToolTip during the onmouseover event.
event Can be one or more of these events:
onclick ondblclick
ondragstart onhelp
onkeydown onkeypress
onkeyup onmousedown
onmousemove onmouseout
onmouseover onmouseup
onselectstart

Remarks

Both the start and end tags are required.

This example shows a client-side image map having two hot spots and an area that is not hot. These hot spots can be applied to an image by using the name "map1" with the USEMAP= attribute of the IMG element.

Scripting Object

MAP

Reconfiguration By J2M

Vu dans Airplanes and Rockets ( Grip-DIP )

<map >
<area alt="Google search" coords="304,60,425,103" href="http://www.airplanesandrockets.com/search.htm" shape="rect">
</map>

Airplanes and Rockets' history & copyright Google search American Modeler Air Trails American Aircraft Modeler Young Men Hobbies Aviation Flying Aces Saturday Evening Post Boys' Life Hobby Distributors Amateur Astronomy Celestron CPC 800 Deluxe Engines & Motors Balsa Densities Silkspan Covering Comics Hints & kinks Snoopy Telephone Peanuts Collection Charles Schulz Saturday Evening Post Electronics My Models Model Aircraft Articles Plans Model Boat Articles Plans Model Car Articles Plans Model Train Articles Plans Grandmother Clock 1941 Crosley 03CB Radio Model helicopter articles & plans Crosswords Model Rocket Articles Plans Restoration Projects Photos Peanuts Collection Model Aircraft Articles Plans Sitemap Homepage Hints Amateur Radio Personal Everything from the homepage Miscellaneous Activities


Object DHTM

DHTML Elements

MARQUEE

Description

Enables you to create a scrolling text marquee.

Syntax

<MARQUEE
 BEHAVIOR=ALTERNATE | SCROLL | SLIDE
 BGCOLOR=color
CLASS=classname
DATAFLD=colname
DATAFORMATAS=HTML | TEXT
 DATASRC=#ID
DIRECTION=DOWN | LEFT | RIGHT | UP
 HEIGHT=n
HSPACE=n
ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
LOOP=n
SCROLLAMOUNT=n
SCROLLDELAY=milliseconds
STYLE=css1-properties
TITLE=text
TRUESPEED
 VSPACE=n
WIDTH=n
event = script
>

Parameter | Description
BEHAVIOR=ALTERNATE | SCROLL | SLIDE How the text scrolls in the marquee.
Alternate | The marquee text alternates left and right.
Scroll | The marquee text scrolls in the direction specified in the DIRECTION= attribute. The text scrolls off the end and starts over.
Slide | The marquee text scrolls in the direction specified in the DIRECTION= attribute and stops when it reaches the end.
BGCOLOR=color | Background color behind the element. For a complete list of colors, see the Internet Explorer color table.
CLASS=classname | Class of the tag being defined. This is used to associate a subclassed style sheet with the tag.
DATAFLD=colname | Column name from the data source object that supplies the bound data.
DATAFORMATAS=HTML | TEXT | Indicates whether bound data is plain text or HTML.
DATASRC=#ID | ID of the data source object that supplies the data that is bound to this element.
DIRECTION=DOWN | LEFT | RIGHT | UP | Which direction the text should scroll.
HEIGHT=n | HEIGHT of the MARQUEE in pixels or as a percentage of the screen height.
HSPACE=n | Along with VSPACE, specifies margins for the element.
ID=value | SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underscore character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The script is written in JScript.
VBS, VBSCRIPT | The script is written in VBScript.
LOOP=n | Number of times the marquee text will loop.
SCROLLAMOUNT=n | Number of pixels the text scrolls between each subsequent drawing of the MARQUEE.
SCROLLDELAY=milliseconds | Speed the MARQUEE scrolls in milliseconds.
STYLE=css1-properties | Inline style sheet for the tag.
TITLE=text | Used to provide advisory information. The contents of the title attribute will be displayed in a tooltip during the onmouseover event.
TRUESPEED | When present, this attribute indicates that the exact scroll delay value specified is used to move the marquee text. Without this attribute, all scroll delay values of 59 or less are rounded to 60 milliseconds.
VSPACE=n | Along with HSPACE, specifies margins for the element in pixels.
WIDTH=n | Returns the calculated width of the marquee in window coordinates. In HTML, this attribute may be initially set in pixels or percentages.
event Can be one or more of these events:
onafterupdate onblur
onbounce onclick
ondblclick ondragstart
onfinish onfocus
onhelp onkeydown
onkeypress onkeyup
onmousedown onmousemove
onmouseout onmouseover
onmouseup onresize
onrowenter onrowexit
onselectstart onstart

Remarks

Both the start and end tags are required.

Example

<MARQUEE DIRECTION=RIGHT BEHAVIOR=SCROLL SCROLLAMOUNT=10 SCROLLDELAY=200>
This is a scrolling marquee.
</MARQUEE>

Scripting Object

MARQUEE

Reconfiguration By J2M


Object DHTM

DHTML Elements

MENU

Description

Specifies that the following block consists of individual items that begin with the LI element.

Syntax

<MENU
 CLASS=classname
ID=value
LANG=language
STYLE=css1-properties
TITLE=text
event = script
>

Parameter | Description
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
TITLE=text | Used to provide advisory information. The contents of the title attribute will be displayed in a ToolTip during the onmouseover event.
event Can be one or more of these events:
onclick ondblclick
ondragstart onhelp
onkeydown onkeypress
onkeyup onmousedown
onmousemove onmouseout
onmouseover onmouseup
onselectstart

Remarks

This element is a block element.

Both the start and end tags are required.

Example

<MENU>
<LI>This is the first item in the menu.
<LI>And this is the second item in the menu.
</MENU>

Scripting Object

MENU

Reconfiguration By J2M


Object DHTM

DHTML Elements

META

Description

Provides information about an HTML document to browsers, search engines, and other applications

Syntax

<META
 CONTENT=description
HTTP-EQUIV=response
NAME=text
TITLE=text
URL=url
>

Parameter | Description
CONTENT=description | Specifies meta-information to be associated with the given name or HTTP response header.
HTTP-EQUIV=response | Used to bind the CONTENT of the element to an HTTP response header. This information is then used based on the application reading the header.
NAME=name | Specifies the name of the control, bookmark, or application.
TITLE=text | Used to provide advisory information.
URL=url | If a URL is specifies, the URL will be loaded after the specified time has elapsed.

Remarks

This element may only be used within the HEAD tag.

The start tag is required, and the end tag is optional.

The value of the CONTENT= attribute depends on the HTTP-EQUIV= attribute. The following lists some of these values.
HTTP-EQUIV CONTENT
REFRESH delay[;url]

The delay is the number of seconds that the browser waits before reloading a document. The optional url specifies the document to reload. If no url is given, the browser reloads the current document.

Content-Type text/html; CHARSET=character-set

The character-set specifies one of the character set aliases listed in HTML Character Sets.

Examples

The following example sets the character set for the document.

<META HTTP-EQUIV="Content-Type"
  CONTENT="text/html; CHARSET=Windows-1251">

The following example causes the browser to reload the document every two seconds.

<META HTTP-EQUIV="REFRESH" CONTENT=2>

The following example causes the browser to load the new document, http://www.sample.com/next.htm, after a five second delay.

<META HTTP-EQUIV="REFRESH" CONTENT="5; URL=http://www.sample.com/next.htm">

The following example causes the server to include the given content in the HTTP response to a GET or HEAD request for the document.

<META HTTP-EQUIV="Expires"
CONTENT="Tue, 04 Dec 1996 21:29:02 GMT">
<meta http-equiv="Keywords" CONTENT="HTML, Reference">
<META HTTP-EQUIV="Reply-to"
content="anybody@microsoft.com">

The HTTP response includes the following header fields.

Expires: Tue, 04 Dec 1996 21:29:02 GMT
Keywords: HTML, Reference
Reply-to: anybody@microsoft.com

Scripting Object

META

Reconfiguration By J2M


Object DHTM

DHTML Elements

NOBR

Description

Renders text without line breaking.

Syntax

<NOBR
 ID=value
STYLE=css1-properties
TITLE=text
>

Parameter | Description
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
TITLE=text | Used to provide advisory information.

Remarks

The start tag is required, and the end tag is optional.

Example

<NOBR>Here's a line of text I don't want to be broken . . . here's the end of the line.</NOBR>

Reconfiguration By J2M


Object DHTM

DHTML Elements

NOFRAMES

Description

Used to contain HTML for browsers that do not support FRAMESET elements.

Syntax

<NOFRAMES
 ID=value
STYLE=css1-properties
TITLE=text
>

Parameter | Description
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
TITLE=text | Used to provide advisory information.

Remarks

This element is a block element.

Both the start and end tags are required.

Example

<FRAMESET>
<NOFRAMES>You need Internet Explorer 3.0 to view frames!</NOFRAMES>
</FRAMESET>

See Also

FRAME, FRAMESET

Reconfiguration By J2M


Object DHTM

DHTML Elements

NOSCRIPT

Description

Specifies HTML to be displayed in browsers that do not support scripting.

Syntax

<NOSCRIPT
>

Remarks

This element is a block element.

Both the start and end tags are required.

Reconfiguration By J2M


Object DHTM

DHTML Elements
s

OBJECT

Description

Inserts an object, such as an image, document, application, or control, into the HTML document. An object can contain any elements ordinarily used within the body of an HTML document, including section headings, paragraphs, lists, forms, and nested objects.

Syntax

<OBJECT
 ACCESSKEY=key
ALIGN=ABSBOTTOM | ABSMIDDLE | BASELINE | BOTTOM | LEFT | MIDDLE | RIGHT | TEXTTOP | TOP
 CLASS=classname
CLASSID=id
CODE=url
CODEBASE=url
CODETYPE=media-type
DATA=url
DATAFLD=colname
DATASRC=#ID
HEIGHT=n
ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
NAME=name
STYLE=css1-properties
TABINDEX=n
TITLE=text
TYPE=MIME-type
WIDTH=n
event = script
>

Parameter | Description
ACCESSKEY=key | Specifies an accelerator for the element. Pressing alt-key selects this element in the user's browser.
ALIGN=ABSBOTTOM | ABSMIDDLE | BASELINE | BOTTOM | LEFT | MIDDLE | RIGHT | TEXTTOP | TOP | Specifies the alignment for the control-like element.
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
CLASSID=id | Identifies the object implementation. For example, the syntax is CLSID:class-identifier for registered ActiveX controls.
CODE=url | The name of the file containing the compiled Java class.
CODEBASE=url | Specifies a URL referencing where to find the implementation of the object.
CODETYPE=media-type | Specifies the Internet media type for code.
DATA=url | Specifies a URL referencing the object's data.
DATAFLD=colname | The column name from the data source object that supplies the bound data. This attribute can be used on both the OBJECT element and the PARAM elements it contains.
DATASRC=#ID | Indicates the ID of the data source object that supplies the data that is bound to this element.
HEIGHT=n | Along with WIDTH, specifies the size at which the element is drawn. This attribute may be initially set in pixels or percentages.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The scripting language is written in JavaScript.
VBS, VBSCRIPT | The scripting language is written in VBScript.
NAME=name | Specifies the name of the control, bookmark, or application.
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
TABINDEX=n | Sets the tab order position for the object.
TITLE=text | Used to provide advisory information. The contents of the title attribute will be displayed in a ToolTip during the onmouseover event.
TYPE=MIME-type | Specifies the MIME type for the associated scripting engine; will override any LANGUAGE value.
WIDTH=n | Along with HEIGHT, sets the initial size of the element. This attribute may be initially set in pixels or percentages.
event Can be one or more of these events:
onafterupdate onbeforeupdate
onblur onclick
ondblclick ondragstart
onfocus onhelp
onkeydown onkeypress
onkeyup onmousedown
onmousemove onmouseout
onmouseover onmouseup
onreadystatechange onresize
onrowenter onrowexit
onselectstart

Remarks

Objects can be submitted in forms. See INPUT.

This element is a block element. Both the start and end tags are required.

Scripting Object

OBJECT

See Also

APPLET, EMBED, PARAM

Reconfiguration By J2M


Object DHTM

DHTML Elements

OL

Description

Draws lines of text as an ordered list.

Syntax

<OL
 CLASS=classname
ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
START=n
STYLE=css1-properties
TITLE=text
TYPE=1 | a | A | i | I
 event = script
>

Parameter | Description
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The scripting language is written in JavaScript.
VBS, VBSCRIPT | The scripting language is written in VBScript.
START=n | Specifies the starting number for a list.
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
TITLE=text | Used to provide advisory information. The contents of the title attribute will be displayed in a ToolTip during the onmouseover event.
TYPE=1 | a | A | i | I Changes the style of the list.
1 | List items are numbered.
a | List items are labeled with lowercase letters.
A | List items are labeled with uppercase letters.
i | List items are labeled with lowercase roman numerals.
I | List items are labeled with uppercase roman numerals.
event Can be one or more of these events:
onclick ondblclick
ondragstart onhelp
onkeydown onkeypress
onkeyup onmousedown
onmousemove onmouseout
onmouseover onmouseup
onselectstart

Remarks

This element is a block element.

Both the start and end tags are required.

Example

<OL>
<LI>This is the first item in the list.
<LI>And this is the second item in the list.
</OL>

<OL START=3>
<LI>This is item number 3.
</OL>

<OL TYPE=A>
<LI>This is item A.
</OL>

Scripting Object

OL

See Also

LI

Reconfiguration By J2M


Object DHTM

DHTML Elements

OPTION

Description

Denotes one choice in a SELECT block.

Syntax

<OPTION
 CLASS=classname
ID=value
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
SELECTED
 VALUE=value
event = script
>

Parameter | Description
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The scripting language is written in JavaScript.
VBS, VBSCRIPT | The scripting language is written in VBScript.
SELECTED | Indicates that this item is the default. If not present, the first item is selected by default.
VALUE=value | For textual/numerical controls, specifies the default value of the control. For Boolean controls, specifies the value to be returned when the control is turned on.
event Can be one or more of these events:
ondragstart onselectstart

Remarks

This element is a block element.

The start tag is required, and the end tag is optional.

Example

<SELECT NAME="Cars" SIZE="1">
<OPTION VALUE="1">BMW
<OPTION VALUE="2">PORSCHE
<OPTION VALUE="3" SELECTED>MERCEDES
</SELECT>

Scripting Object

OPTION

See Also

SELECT

Reconfiguration By J2M


Object DHTM

DHTML Elements

P

Description

Denotes a paragraph.

Syntax

<P
 ALIGN=CENTER | LEFT | RIGHT
 CLASS=classname
ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
STYLE=css1-properties
TITLE=text
event = script
>

Parameter | Description
ALIGN=CENTER | LEFT | RIGHT | Displays the element left flush, right flush, or centered relative to the display or table.
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The scripting language is written in JavaScript.
VBS, VBSCRIPT | The scripting language is written in VBScript.
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
TITLE=text | Used to provide advisory information. The contents of the title attribute will be displayed in a ToolTip during the onmouseover event.
event Can be one or more of these events:
onclick ondblclick
ondragstart onhelp
onkeydown onkeypress
onkeyup onmousedown
onmousemove onmouseout
onmouseover onmouseup
onselectstart

Remarks

This element is a block element.

The start tag is required, and the end tag is optional.

Example

<P>This is a paragraph.</P>

Scripting Object

P

Reconfiguration By J2M


Object DHTM

DHTML Elements

PARAM

Description

Sets the property value for a given object. This element valid within the APPLET, EMBED, and OBJECT elements.

Syntax

<PARAM
 DATAFLD=colname
DATAFORMATAS=HTML | TEXT
 DATASRC=#ID
NAME=name
VALUE=value
>

Parameter | Description
DATAFLD=colname | The column name from the data source object that supplies the bound data.
DATAFORMATAS=HTML | TEXT | Indicates whether bound data is plain text or HTML.
DATASRC=#ID | Indicates the ID of the data source object that supplies the data that is bound to this element.
NAME=name | Specifies the name of the parameter.
VALUE=value | Specifies the property value. The value is passed to the object without change except that any character or numeric character entities are replaced with their corresponding character values.

See Also

APPLET, EMBED, OBJECT

Reconfiguration By J2M


Object DHTM

DHTML Elements

PLAINTEXT

Description

Renders text in fixed-width type without processing tags and disables HTML parsing for the rest of the document. Although a </PLAINTEXT> tag is required, it does not close the container and is rendered on-screen. This element has been deprecated and may not be supported in a consistent manner by all browsers. It is recommended that the PRE element be used instead.

Syntax

<PLAINTEXT
 CLASS=classname
ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
STYLE=css1-properties
TITLE=text
event = script

>

Parameter | Description
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The scripting language is written in JavaScript.
VBS, VBSCRIPT | The scripting language is written in VBScript.
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
TITLE=text | Used to provide advisory information. The contents of the title attribute will be displayed in a ToolTip during the onmouseover event.
event Can be one or more of these events:
onclick ondblclick
ondragstart onhelp
onkeydown onkeypress
onkeyup onmousedown
onmousemove onmouseout
onmouseover onmouseup
onselectstart

Remarks

This element is a block element.

Both the start and end tags are required.

Scripting Object

PLAINTEXT

Reconfiguration By J2M


Object DHTM

DHTML Elements

PRE

Description

Renders text in fixed-width type.

Syntax

<PRE
 CLASS=classname
ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
STYLE=css1-properties
TITLE=text
event = script
>

Parameter | Description
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The scripting language is written in JavaScript.
VBS, VBSCRIPT | The scripting language is written in VBScript.
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
TITLE=text | Used to provide advisory information. The contents of the title attribute will be displayed in a ToolTip during the onmouseover event.
event Can be one or more of these events:
onclick ondblclick
ondragstart onhelp
onkeydown onkeypress
onkeyup onmousedown
onmousemove onmouseout
onmouseover onmouseup
onselectstart

Remarks

This element is a block element.

Both the start and end tags are required.

Example

<PRE>Here's some plain text.</PRE>

Scripting Object

PRE

Reconfiguration By J2M


Object DHTM

DHTML Elements

Q

Description

Sets apart a short quotation in text.

Syntax

<Q
 CLASS=classname
ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
STYLE=css1-properties
TITLE=text
event = script
>

Parameter | Description
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The scripting language is written in JavaScript.
VBS, VBSCRIPT | The scripting language is written in VBScript.
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
TITLE=text | Used to provide advisory information. The contents of the title attribute will be displayed in a ToolTip during the onmouseover event.
event Can be one or more of these events:
onclick ondblclick
ondragstart onhelp
onkeydown onkeypress
onkeyup onmousedown
onmousemove onmouseout
onmouseover onmouseup
onselectstart

Remarks

This element is a block element.

Both the start and end tags are required.

Example

<P>He said,
<Q>"Hi there!"</Q>

Scripting Object

Q

See Also

BLOCKQUOTE

Reconfiguration By J2M


Object DHTM

DHTML Elements

S

Description

Renders text in strikethrough type.

Syntax

<S
 CLASS=classname
ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
STYLE=css1-properties
TITLE=text
event = script
>

Parameter | Description
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The scripting language is written in JavaScript.
VBS, VBSCRIPT | The scripting language is written in VBScript.
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
TITLE=text | Used to provide advisory information. The contents of the title attribute will be displayed in a ToolTip during the onmouseover event.
event Can be one or more of these events:
onclick ondblclick
ondragstart onhelp
onkeydown onkeypress
onkeyup onmousedown
onmousemove onmouseout
onmouseover onmouseup
onselectstart

Remarks

Both the start and end tags are required.

Example

<S>This text has a line through it.</S>

Scripting Object

S

See Also

STRIKE

Reconfiguration By J2M


Object DHTM

DHTML Elements

SAMP

Description

Specifies sample text and renders it in a small font. The required end tag restores the text formatting to normal. By default, the font used is fixed-width. If a font face is specified in a FONT or BASEFONT element preceding SAMP, that font is used instead.

Syntax

<SAMP
 CLASS=classname
ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
STYLE=css1-properties
TITLE=text
event = script
>

Parameter | Description
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The scripting language is written in JavaScript.
VBS, VBSCRIPT | The scripting language is written in VBScript.
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
TITLE=text | Used to provide advisory information. The contents of the title attribute will be displayed in a ToolTip during the onmouseover event.
event Can be one or more of these events:
onclick ondblclick
ondragstart onhelp
onkeydown onkeypress
onkeyup onmousedown
onmousemove onmouseout
onmouseover onmouseup
onselectstart

Remarks

Both the start and end tags are required.

Example

<SAMP>Here is some text in a small fixed-width font.</SAMP>

Scripting Object

SAMP

See Also

CODE

Reconfiguration By J2M


Object DHTM

DHTML Elements

SCRIPT

Description

Specifies a script for the page that will be interpreted by a script engine.

Syntax

<SCRIPT
 CLASS=classname
DEFER
EVENT=eventname
FOR=element
ID=value
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
SRC=url
TITLE=text
TYPE=MIME-type
>

Parameter | Description
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
DEFER | Indicates the script block contains only functions and no in-line script. Deferring the parsing of scripts until they are needed can improve performance by decreasing the time it takes to load a document.
EVENT=eventname | Specifies the event the script is being written for.
FOR=element | Specifies which element is being bound to the event script. A scripting object or element ID can be specified as the element value.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT. This attribute overrides any TYPE= value.
JAVASCRIPT, JSCRIPT | The scripting language is written in JavaScript.
VBS, VBSCRIPT | The scripting language is written in VBScript.
SRC=url | Specifies a URL for the associated file.
TITLE=text | Used to provide advisory information.
TYPE=MIME-type | Specifies the MIME type for the associated scripting engine.

Remarks

Code within the SCRIPT block that are not contained within a function are executed immediately as the page is loaded. To keep scripts from being displayed on down-level browsers, the SCRIPT block should be nested within a comment block.

This element is a block element.

Both the start and end tags are required.

Scripting Object

SCRIPT

Reconfiguration By J2M


Object DHTM

DHTML Elements

SELECT

Description

Denotes a list box or dropdown list. The end tag encloses any OPTION elements that may appear within the SELECT element.

Syntax

<SELECT
 ACCESSKEY=key
ALIGN=ABSBOTTOM | ABSMIDDLE | BASELINE | BOTTOM | LEFT | MIDDLE | RIGHT | TEXTTOP | TOP
 CLASS=classname
DATAFLD=colname
DATASRC=#ID
DISABLED
 ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
MULTIPLE
 NAME=name
SIZE=n
STYLE=css1-properties
TABINDEX=n
event = script
>

Parameter | Description
ACCESSKEY=key | Specifies an accelerator for the element. Pressing alt-key selects this element in the user's browser.
ALIGN=ABSBOTTOM | ABSMIDDLE | BASELINE | BOTTOM | LEFT | MIDDLE | RIGHT | TEXTTOP | TOP | Specifies the alignment for the control-like element.
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
DATAFLD=colname | The column name from the data source object that supplies the bound data.
DATASRC=#ID | Indicates the ID of the data source object that supplies the data that is bound to this element.
DISABLED | Used to disable an element. This attribute prevents an element from receiving the focus, and causes the element to appear "grayed out."
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The scripting language is written in JavaScript.
VBS, VBSCRIPT | The scripting language is written in VBScript.
MULTIPLE | Indicates that multiple items in the list can be selected.
NAME=name | Specifies the name of the control, bookmark, or application.
SIZE=n | Specifies the size of the control.
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
TABINDEX=n | Sets the tab order position for the object.
event Can be one or more of these events:
onafterupdate onbeforeupdate
onblur onchange
onclick ondblclick
ondragstart onfocus
onhelp onkeydown
onkeypress onkeyup
onmousedown onmousemove
onmouseout onmouseover
onmouseup onresize
onrowenter onrowexit
onselectstart

Remarks

Both the start and end tags are required.

Example

<SELECT NAME="Cars" SIZE="1">
<OPTION VALUE="1">BMW
<OPTION VALUE="2">PORSCHE
<OPTION VALUE="3" SELECTED>MERCEDES
</SELECT>

Scripting Object

SELECT

See Also

OPTION

Reconfiguration By J2M


Object DHTM

DHTML Elements

SMALL

Description

Specifies that the enclosed text should be displayed with a relatively smaller font than the current font.

Syntax

<SMALL
 CLASS=classname
ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
STYLE=css1-properties
TITLE=text
event = script
>

Parameter | Description
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The scripting language is written in JavaScript.
VBS, VBSCRIPT | The scripting language is written in VBScript.
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
TITLE=text | Used to provide advisory information. The contents of the title attribute will be displayed in a ToolTip during the onmouseover event.
event Can be one or more of these events:
onclick ondblclick
ondragstart onhelp
onkeydown onkeypress
onkeyup onmousedown
onmousemove onmouseout
onmouseover onmouseup
onselectstart

Remarks

Both the start and end tags are required.

Example

<SMALL>This text is smaller.</SMALL>

Scripting Object

SMALL

Reconfiguration By J2M


Object DHTM

DHTML Elements

SPAN

Description

This does not have any structural role or established rendering convention. It allows a user to define their own method of rendering using style sheets.

Syntax

<SPAN
 CLASS=classname
DATAFLD=colname
DATAFORMATAS=HTML | TEXT
 DATASRC=#ID
ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
STYLE=css1-properties
TITLE=text
event = script
>

Parameter | Description
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
DATAFLD=colname | The column name from the data source object that supplies the bound data.
DATAFORMATAS=HTML | TEXT | Indicates whether bound data is plain text or HTML.
DATASRC=#ID | Indicates the ID of the data source object that supplies the data that is bound to this element.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The scripting language is written in JavaScript.
VBS, VBSCRIPT | The scripting language is written in VBScript.
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
TITLE=text | Used to provide advisory information. The contents of the title attribute will be displayed in a ToolTip during the onmouseover event.
event Can be one or more of these events:
onclick ondblclick
ondragstart onhelp
onkeydown onkeypress
onkeyup onmousedown
onmousemove onmouseout
onmouseover onmouseup
onselectstart

Remarks

Both the start and end tags are required.

Example

<P>This paragraph contains a single <SPAN STYLE="color: blue">blue</SPAN> word.

Scripting Object

SPAN

Reconfiguration By J2M


Object DHTM

DHTML Elements

STRIKE

Description

Renders text in strikethrough type.

Syntax

<STRIKE
 CLASS=classname
ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
STYLE=css1-properties
TITLE=text
event = script
>

Parameter | Description
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The scripting language is written in JavaScript.
VBS, VBSCRIPT | The scripting language is written in VBScript.
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
TITLE=text | Used to provide advisory information. The contents of the title attribute will be displayed in a ToolTip during the onmouseover event.
event Can be one or more of these events:
onclick ondblclick
ondragstart onhelp
onkeydown onkeypress
onkeyup onmousedown
onmousemove onmouseout
onmouseover onmouseup
onselectstart

Remarks

Both the start and end tags are required.

Example

<STRIKE>This text has a line through it.</STRIKE>

Scripting Object

STRIKE

See Also

S

Reconfiguration By J2M


Object DHTM

DHTML Elements

STRONG

Description

Renders text with a strong emphasis, often shown in boldface.

Syntax

<STRONG
 CLASS=classname
ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
STYLE=css1-properties
TITLE=text
event = script
>

Parameter | Description
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The scripting language is written in JavaScript.
VBS, VBSCRIPT | The scripting language is written in VBScript.
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
TITLE=text | Used to provide advisory information. The contents of the title attribute will be displayed in a ToolTip during the onmouseover event.
event Can be one or more of these events:
onclick ondblclick
ondragstart onhelp
onkeydown onkeypress
onkeyup onmousedown
onmousemove onmouseout
onmouseover onmouseup
onselectstart

Remarks

Both the start and end tags are required.

Example

<STRONG>This text is strongly emphasized, shown as bold.</STRONG>

Scripting Object

STRONG

See Also

ACRONYM, ADDRESS, CITE, EM

Reconfiguration By J2M


Object DHTM

DHTML Elements

STYLE

Description

Specifies the style sheet for the page.

Syntax

<STYLE
 DISABLED
 MEDIA=SCREEN | PRINT | ALL
 TITLE=text
TYPE="text/css"
>

Parameter | Description
DISABLED | Used to disable an element. This attribute prevents an element from receiving the focus, and causes the element to appear "grayed out."
MEDIA= SCREEN | PRINT | ALL Describes the output device for the document. A value of "PRINT" does not affect the on-screen layout. Default value is ALL.
SCREEN | Output is intended for non-paged computer screens.
PRINT | Output is intended for paged, opaque material and for documents on screen viewed in print preview mode.
ALL | Applies to all devices.
TITLE=text | Used to provide advisory information.
TYPE="text/css" | Indicates the type of style sheet.

Remarks

This element may be used within the BODY tag.

Both the start and end tags are required.

Example

<STYLE>
   BODY {background: white; color: black}
   H1 {font: 8pt Arial bold}
   P {font: 10pt Arial; text-indent: 0.5in}
   A {text-decoration: none; color: blue}
</STYLE>

Scripting Object

STYLE

Reconfiguration By J2M


Object DHTM

DHTML Elements

SUB

Description

The enclosed text should be displayed in subscript, and using a smaller font than the current font.

Syntax

<SUB
 CLASS=classname
ID=value

LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
STYLE=css1-properties
TITLE=text
event = script
>

Parameter | Description
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The scripting language is written in JavaScript.
VBS, VBSCRIPT | The scripting language is written in VBScript.
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
TITLE=text | Used to provide advisory information. The contents of the title attribute will be displayed in a ToolTip during the onmouseover event.
event Can be one or more of these events:
onclick ondblclick
ondragstart onhelp
onkeydown onkeypress
onkeyup onmousedown
onmousemove onmouseout
onmouseover onmouseup
onselectstart

Remarks

Both the start and end tags are required.

Example

(X<SUB>1</SUB>,Y<SUB>1</SUB>)

Scripting Object

SUB

See Also

SUP

Reconfiguration By J2M


Object DHTM

DHTML Elements

SUP

Description

The enclosed text should be displayed in SuperScript and in a smaller font relative to the current font.

Syntax

<SUP
 CLASS=classname
ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
STYLE=css1-properties
TITLE=text
event = script
>

Parameter | Description
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The scripting language is written in JavaScript.
VBS, VBSCRIPT | The scripting language is written in VBScript.
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
TITLE=text | Used to provide advisory information. The contents of the title attribute will be displayed in a ToolTip during the onmouseover event.
event Can be one or more of these events:
onclick ondblclick
ondragstart onhelp
onkeydown onkeypress
onkeyup onmousedown
onmousemove onmouseout
onmouseover onmouseup
onselectstart

Remarks

Both the start and end tags are required.

Example

X<SUP>2</SUP> + Y<SUP>2</SUP>

Scripting Object

SUP

See Also

SUB

Reconfiguration By J2M


Object DHTM

DHTML Elements

TABLE

Description

Used to specify that the contained content is organized into a table with rows and columns. Use the TR, TD, and TH elements in the container to create the rows, columns, and cells.

The optional CAPTION, THEAD, TBODY, TFOOT, COLGROUP, and COL elements can be used to organize a table and apply attributes across columns and groups of columns.

Syntax

<TABLE
 ALIGN=CENTER | LEFT | RIGHT
 BACKGROUND=url
BGCOLOR=color
BORDER=n
BORDERCOLOR=color
BORDERCOLORDARK=color
BORDERCOLORLIGHT=color
CELLPADDING=n
CELLSPACING=n
CLASS=classname
COLS=n
DATAPAGESIZE=n
DATASRC=#ID
FRAME=ABOVE | BELOW | BORDER | BOX | INSIDES | LHS | RHS | VOID | VSIDES
 HEIGHT=n
ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
RULES=ALL | COLS | GROUPS | NONE | ROWS
 STYLE=css1-properties
TITLE=text
WIDTH=n
event = script
>

Parameter | Description
ALIGN=CENTER | LEFT | RIGHT | Specifies how the table should be aligned.
BACKGROUND=url | Specifies a background picture for the table. The picture is tiled behind the text and graphics in the table, table head, or table cell.
BGCOLOR=color | Sets the background color behind the element. For a complete list of colors, look at the Internet Explorer color table.
BORDER=n | Specifies the thickness of a border to be drawn around the element.
BORDERCOLOR=color | Sets border color and must be used with the BORDER attribute, except for frames. For a complete list of colors, look at the Internet Explorer color table.
BORDERCOLORDARK=color | Sets independent border color control over one of the two colors used to draw a 3-D border, opposite of BORDERCOLORLIGHT, and must be used with the BORDER attribute.
BORDERCOLORLIGHT=color | Sets independent border color control over one of the two colors used to draw a 3-D border, opposite of BORDERCOLORDARK, and must be used with the BORDER attribute.
CELLPADDING=n | Specifies the amount of space between the border of the cell and the contents of the cell.
CELLSPACING=n | Specifies the amount of space between cells in a table.
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
COLS=n | The number of columns in the table.
DATAPAGESIZE=n | Sets the number of records displayed in a data bound repeated table.
DATASRC=#ID | Indicates the ID of the data source object that supplies the data that is bound to this element.
FRAME= ABOVE | BELOW | BORDER | BOX | INSIDES | LHS | RHS | VOID | VSIDES Specifies which sides of a frame (outside borders) are displayed. The possible values are:
BORDER | Displays a border on all sides of the table frame. This is the default.
VOID | Removes all outside table borders.
ABOVE | Displays a border on the top side of the table frame.
BELOW | Displays a border on the bottom side of the table frame.
HSIDES | Displays a border on the top and bottom sides of the table frame.
LHS | Displays a border on the left-hand side of the table frame.
RHS | Displays a border on the right-hand side of the table frame.
VSIDES | Displays a border on the left and right sides of the table frame.
BOX | Displays a border on all sides of the table frame.
HEIGHT=n | Along with WIDTH, specifies the size at which the element is drawn. This attribute may be initially set in pixels or percentages.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The scripting language is written in JavaScript.
VBS, VBSCRIPT | The scripting language is written in VBScript.
RULES=ALL | COLS | GROUPS | NONE | ROWS | Specifies which dividing lines are displayed (inside borders).
Specifies which dividing lines (inside borders) are displayed. The possible values are:
NONE | Removes all interior table borders. This is the default.
GROUPS | Displays horizontal borders between all table groups. Groups are specified by the THEAD, TBODY, TFOOT, and COLGROUP elements.
ROWS | Displays horizontal borders between all table rows.
COLS | Displays vertical borders between all table columns.
ALL | Displays a border on all rows and columns.
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
TITLE=text | Used to provide advisory information. The contents of the title attribute will be displayed in a ToolTip during the onmouseover event.
WIDTH=n | Along with HEIGHT, sets the initial size of the element. This attribute may be initially set in pixels or percentages.
event Can be one or more of these events:
onafterupdate onbeforeupdate
onblur onclick
ondblclick ondragstart
onfocus onhelp
onkeydown onkeypress
onkeyup onmousedown
onmousemove onmouseout
onmouseover onmouseup
onresize onrowenter
onrowexit onscroll
onselectstart

Remarks

Valid tags within a table include:

  • TR
  • CAPTION
  • THEAD
  • TBODY
  • TFOOT
  • COLGROUP
  • COL

This element is a block element.

Both the start and end tags are required.

Example

<TABLE BORDER=1 WIDTH=80%>
<THEAD>
<TR>
<TH>Heading 1</TH>
<TH>Heading 2</TH>
</TR>
<TBODY>
<TR>
<TD>Row 1, Column 1 text.</TD>
<TD>Row 1, Column 2 text.</TD>
</TR>
<TR>
<TD>Row 2, Column 1 text.</TD>
<TD>Row 2, Column 2 text.</TD>
</TR>
</TABLE>

Scripting Object

TABLE

See Also

TD, TR

Reconfiguration By J2M


Object DHTM

DHTML Elements

TBODY

Description

Creates multiple sections when rules are needed between groups of table rows. If a table does not have a header or footer (does not have a THEAD or TFOOT element), the TBODY element is optional. The end tag is optional.

You can use the TBODY element more than once in a table. This is useful for dividing lengthy tables into smaller units and for controlling the placement of horizontal rules.

Syntax

<TBODY
 ALIGN=CENTER | LEFT | RIGHT
 BGCOLOR=color
CLASS=classname
ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
 STYLE=css1-properties
TITLE=text
VALIGN=BASELINE | BOTTOM | CENTER | TOP
 event = script
>

Parameter | Description
ALIGN=CENTER | LEFT | RIGHT | Displays the element left flush, right flush, or centered relative to the display or table.
BGCOLOR=color | Sets the background color behind the element. For a complete list of colors, look at the Internet Explorer color table.
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The scripting language is written in JavaScript.
VBS, VBSCRIPT | The scripting language is written in VBScript.
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
TITLE=text | Used to provide advisory information. The contents of the title attribute will be displayed in a ToolTip during the onmouseover event.
VALIGN=BASELINE | BOTTOM | CENTER | TOP Displays the elements aligned at the top or bottom within the element.
BASELINE | Vertical align to the baseline of the font.
BOTTOM | Vertical align to the bottom of the element.
MIDDLE | Vertical align to the middle of the element.
TOP | Vertical align to the top of the element.
event Can be one or more of these events:
onclick ondblclick
ondragstart onhelp
onkeydown onkeypress
onkeyup onmousedown
onmousemove onmouseout
onmouseover onmouseup
onselectstart

Remarks

This element is exposed for all tables, even if the table did not explicitly define a TBODY element.

This element is a block element.

The end tags are optional.

Example

<TABLE>
<THEAD>
<TR>
...
</TR>
<TBODY>
<TR>
...
</TR>
</TBODY>
</TABLE>

Scripting Object

TBODY

Reconfiguration By J2M


Object DHTM

DHTML Elements

TD

Description

Specifies a cell in a table. This element is valid only within a row in a table. You must use a TR element before using TD. All attributes are optional.

Syntax

<TD
 ALIGN=CENTER | LEFT | RIGHT
 BACKGROUND=url
BGCOLOR=color
BORDERCOLOR=color
BORDERCOLORDARK=color
BORDERCOLORLIGHT=color
CLASS=classname
COLSPAN=n
ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
 NOWRAP
 ROWSPAN=n
STYLE=css1-properties
TITLE=text
VALIGN=BASELINE | BOTTOM | CENTER | TOP
 event = script
>

Parameter | Description
ALIGN=CENTER | LEFT | RIGHT | Displays the element left flush, right flush, or centered relative to the display or table.
BACKGROUND=url | Specifies a background picture for the table. The picture is tiled behind the text and graphics in the table, table head, or table cell.
BGCOLOR=color | Sets the background color behind the element. For a complete list of colors, look at the Internet Explorer color table.
BORDERCOLOR=color | Sets border color and must be used with the BORDER attribute, except for frames. For a complete list of colors, look at the Internet Explorer color table.
BORDERCOLORDARK=color | Sets independent border color control over one of the two colors used to draw a 3-D border, opposite of BORDERCOLORLIGHT, and must be used with the BORDER attribute. For a complete list of colors, look at the Internet Explorer color table.
BORDERCOLORLIGHT=color | Sets independent border color control over one of the two colors used to draw a 3-D border, opposite of BORDERCOLORDARK, and must be used with the BORDER attribute. For a complete list of colors, look at the Internet Explorer color table.
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
COLSPAN=n | Specifies how many columns in the TABLE this cell should span.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The scripting language is written in JavaScript.
VBS, VBSCRIPT | The scripting language is written in VBScript.
NOWRAP | The NOWRAP attribute is used when you do not want the browser to automatically perform word wrap.
ROWSPAN=n | Specifies how many rows in a TABLE this cell should span.
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
TITLE=text | Used to provide advisory information. The contents of the title attribute will be displayed in a ToolTip during the onmouseover event.
VALIGN=BASELINE | BOTTOM | CENTER | TOP Displays the elements aligned at the top or bottom within the element.
BASELINE | Vertical align to the baseline of the font.
BOTTOM | Vertical align to the bottom of the element.
MIDDLE | Vertical align to the middle of the element.
TOP | Vertical align to the top of the element.
event Can be one or more of these events:
onafterupdate onbeforeupdate
onblur onclick
ondblclick ondragstart
onfocus onhelp
onkeydown onkeypress
onkeyup onmousedown
onmousemove onmouseout
onmouseover onmouseup
onresize onrowenter
onrowexit onscroll
onselectstart

Remarks

This element is a block element.

Both the start and end tags are required.

Scripting Object

TD

See Also

TABLE, TH, TR

Reconfiguration By J2M


Object DHTM

DHTML Elements

TEXTAREA

Description

Creates a multiline text entry control in which the user can type and edit text. The end tag is required. Any text between the start tag and end tag is used as the initial value for the control.

Syntax

<TEXTAREA
 ACCESSKEY=key
ALIGN=ABSBOTTOM | ABSMIDDLE | BASELINE | BOTTOM | LEFT | MIDDLE | RIGHT | TEXTTOP | TOP
 CLASS=classname
COLS=n
DATAFLD=colname
DATASRC=#ID
DISABLED
 ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
 NAME=name
READONLY
 ROWS=n
STYLE=css1-properties
TABINDEX=n
TITLE=text
WRAP=OFF | PHYSICAL | VIRTUAL
 event = script
>

Parameter | Description
ACCESSKEY=key | Specifies an accelerator for the element. Pressing alt-key selects this element in the user's browser.
ALIGN=ABSBOTTOM | ABSMIDDLE | BASELINE | BOTTOM | LEFT | MIDDLE | RIGHT | TEXTTOP | TOP | Specifies the alignment for the control-like element.
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
COLS=n | Specifies how many characters wide the text area is.
DATAFLD=colname | The column name from the data source object that supplies the bound data.
DATASRC=#ID | Indicates the ID of the data source object that supplies the data that is bound to this element.
DISABLED | Used to disable an element. This attribute prevents an element from receiving the focus, and causes the element to appear "grayed out."
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The scripting language is written in JavaScript.
VBS, VBSCRIPT | The scripting language is written in VBScript.
NAME=name | Specifies the name of the control, bookmark, or application.
READONLY | Causes the element's contents to be read only.
ROWS=n | Specifies the number of rows tall the text area control should be.
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
TABINDEX=n | Sets the tab order position for the object.
TITLE=text | Used to provide advisory information. The contents of the title attribute will be displayed in a ToolTip during the onmouseover event.
WRAP=OFF | PHYSICAL | VIRTUAL Specifies how to handle word-wrapping inside the text area.
OFF | Word-wrapping is disabled (default).
PHYSICAL | The text is displayed and submitted word-wrapped
VIRTUAL | The text is displayed word-wrapped, but is submitted as typed.
event Can be one or more of these events:
onafterupdate onbeforeupdate
onblur onchange
onclick ondblclick
ondragstart onfocus
onhelp onkeydown
onkeypress onkeyup
onmousedown onmousemove
onmouseout onmouseover
onmouseup onresize
onrowenter onrowexit
onscroll onstart
onselectstart

Remarks

The default font is fixed pitch.

Both the start and end tags are required.

Scripting Object

TEXTAREA

See Also

INPUT

Reconfiguration By J2M


Object DHTM

DHTML Elements

TFOOT

Description

Defines the table footer. Use TFOOT to duplicate footers when breaking a table across page boundaries, or for static headers when body sections are rendered in a scrolling panel. The end tag is optional.

The table footer is optional; if given, only one footer is allowed. The TFOOT element is valid only within a table; you must use a TABLE element before using this element.

Syntax

<TFOOT
 ALIGN=CENTER | LEFT | RIGHT
 BGCOLOR=color
CLASS=classname
ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
 STYLE=css1-properties
TITLE=text
VALIGN=BASELINE | BOTTOM | CENTER | TOP
 event = script
>

Parameter | Description
ALIGN=CENTER | LEFT | RIGHT | Displays the element left flush, right flush, or centered relative to the display or table.
BGCOLOR=color | Sets the background color behind the element. For a complete list of colors, look at the Internet Explorer color table.
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The scripting language is written in JavaScript.
VBS, VBSCRIPT | The scripting language is written in VBScript.
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
TITLE=text | Used to provide advisory information. The contents of the title attribute will be displayed in a ToolTip during the onmouseover event.
VALIGN=BASELINE | BOTTOM | CENTER | TOP Displays the elements aligned at the top or bottom within the element.
BASELINE | Vertical align to the baseline of the font.
BOTTOM | Vertical align to the bottom of the element.
MIDDLE | Vertical align to the middle of the element.
TOP | Vertical align to the top of the element.
event Can be one or more of these events:
onclick ondblclick
ondragstart onhelp
onkeydown onkeypress
onkeyup onmousedown
onmousemove onmouseout
onmouseover onmouseup
onselectstart

Remarks

This element is a block element.

Example

<TABLE>
<TBODY>
<TR>
...
</TR>
<TFOOT>
<TR>
...
</TR>
</TABLE>

Scripting Object

TFOOT

Reconfiguration By J2M


Object DHTM

DHTML Elements

TH

Description

Creates a row or column heading in a table. The element is similar to the TD element but emphasizes the text in the cell to distinguish it from text in TD cells. The end tag is optional.

Syntax

<TH
 ALIGN=CENTER | LEFT | RIGHT
 BACKGROUND=url
BGCOLOR=color
BORDERCOLOR=color
BORDERCOLORDARK=color
BORDERCOLORLIGHT=color
CLASS=classname
COLSPAN=n
ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
NOWRAP
 ROWSPAN=n

STYLE=css1-properties
TITLE=text
VALIGN=BASELINE | BOTTOM | CENTER | TOP
 event = script
>

Parameter | Description
ALIGN=CENTER | LEFT | RIGHT | Displays the element left flush, right flush, or centered relative to the display or table.
BACKGROUND=url | Specifies a background picture for the table. The picture is tiled behind the text and graphics in the table, table head, or table cell.
BGCOLOR=color | Sets the background color behind the element. For a complete list of colors, look at the Internet Explorer color table.
BORDERCOLOR=color | Sets border color and must be used with the BORDER attribute, except for frames. For a complete list of colors, look at the Internet Explorer color table.
BORDERCOLORDARK=color | Sets independent border color control over one of the two colors used to draw a 3-D border, opposite of BORDERCOLORLIGHT, and must be used with the BORDER attribute. For a complete list of colors, look at the Internet Explorer color table.
BORDERCOLORLIGHT=color | Sets independent border color control over one of the two colors used to draw a 3-D border, opposite of BORDERCOLORDARK, and must be used with the BORDER attribute. For a complete list of colors, look at the Internet Explorer color table.
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
COLSPAN=n | Specifies how many columns in the TABLE this cell should span.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The scripting language is written in JavaScript.
VBS, VBSCRIPT | The scripting language is written in VBScript.
NOWRAP | The NOWRAP attribute is used when you do not want the browser to automatically perform word wrap.
ROWSPAN=n | Specifies how many rows in a TABLE this cell should span.
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
TITLE=text | Used to provide advisory information. The contents of the title attribute will be displayed in a ToolTip during the onmouseover event.
VALIGN=BASELINE | BOTTOM | CENTER | TOP Displays the elements aligned at the top or bottom within the element.
BASELINE | Vertical align to the baseline of the font.
BOTTOM | Vertical align to the bottom of the element.
MIDDLE | Vertical align to the middle of the element.
TOP | Vertical align to the top of the element.
event Can be one or more of these events:
onclick ondblclick
ondragstart onhelp
onkeydown onkeypress
onkeyup onmousedown
onmousemove onmouseout
onmouseover onmouseup
onscroll onselectstart

Remarks

This element is a block element.

Both the start and end tags are required.

Scripting Object

TH

See Also

TD, TR

Reconfiguration By J2M


Object DHTM

DHTML Elements

THEAD

Description

Defines the table heading. Use THEAD to duplicate headings when breaking tables across page boundaries, or for static headings when body sections are rendered in a scrolling panel. The end tag is optional.

The table heading is optional; if given, only one heading is allowed. The THEAD element is valid only within a table; you must use a TABLE element before using this element.

Syntax

<THEAD
 ALIGN=CENTER | LEFT | RIGHT
 BGCOLOR=color
CLASS=classname
ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
 STYLE=css1-properties
TITLE=text
VALIGN=BASELINE | BOTTOM | CENTER | TOP
 event = script
>

Parameter | Description
ALIGN=CENTER | LEFT | RIGHT | Displays the element left flush, right flush, or centered relative to the display or table.
BGCOLOR=color | Sets the background color behind the element. For a complete list of colors, look at the Internet Explorer color table.
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The scripting language is written in JavaScript.
VBS, VBSCRIPT | The scripting language is written in VBScript.
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
TITLE=text | Used to provide advisory information. The contents of the title attribute will be displayed in a ToolTip during the onmouseover event.
VALIGN=BASELINE | BOTTOM | CENTER | TOP Displays the elements aligned at the top or bottom within the element.
BASELINE | Vertical align to the baseline of the font.
BOTTOM | Vertical align to the bottom of the element.
MIDDLE | Vertical align to the middle of the element.
TOP | Vertical align to the top of the element.
event Can be one or more of these events:
onclick ondblclick
ondragstart onhelp
onkeydown onkeypress
onkeyup onmousedown
onmousemove onmouseout
onmouseover onmouseup
onselectstart

Remarks

This element is a block element.

Example

<TABLE>
<THEAD>
<TR>
...
</TR>
<TBODY>
<TR>
...
</TR>
</TABLE>

Scripting Object

THEAD

Reconfiguration By J2M


Object DHTM

DHTML Elements

TITLE

Description

Identifies the contents of the document in a global context.

Syntax

<TITLE
 ID=value
TITLE=string
>

Parameter | Description
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
TITLE= | Used to provide advisory information.

Remarks

This element may only be used within the HEAD tag.

This element is a block element.

Both the start and end tags are required.

Example

<HEAD>
<TITLE>"Welcome To Internet Explorer!"</TITLE>
</HEAD>

Scripting Object

TITLE

Reconfiguration By J2M


Object DHTM

DHTML Elements

TR

Description

Creates a row in a table. The row can contain one or more TD elements.

Syntax

<TR
 ALIGN=CENTER | LEFT | RIGHT
 BGCOLOR=color
BORDERCOLOR=color
BORDERCOLORDARK=color
BORDERCOLORLIGHT=color
CLASS=classname
ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
 STYLE=css1-properties
TITLE=text
VALIGN=BASELINE | BOTTOM | CENTER | TOP
 event = script
>

Parameter | Description
ALIGN=CENTER | LEFT | RIGHT | Displays the element left flush, right flush, or centered relative to the display or table.
BGCOLOR=color | Sets the background color behind the element. For a complete list of colors, look at the Internet Explorer color table.
BORDERCOLOR=color | Sets border color and must be used with the BORDER attribute, except for frames. For a complete list of colors, look at the Internet Explorer color table.
BORDERCOLORDARK=color | Sets independent border color control over one of the two colors used to draw a 3-D border, opposite of BORDERCOLORLIGHT, and must be used with the BORDER attribute. For a complete list of colors, look at the Internet Explorer color table.
BORDERCOLORLIGHT=color | Sets independent border color control over one of the two colors used to draw a 3-D border, opposite of BORDERCOLORDARK, and must be used with the BORDER attribute. For a complete list of colors, look at the Internet Explorer color table.
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The scripting language is written in JavaScript.
VBS, VBSCRIPT | The scripting language is written in VBScript.
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
TITLE=text | Used to provide advisory information. The contents of the title attribute will be displayed in a ToolTip during the onmouseover event.
VALIGN=BASELINE | BOTTOM | CENTER | TOP Displays the elements aligned at the top or bottom within the element.
BASELINE | Vertical align to the baseline of the font.
BOTTOM | Vertical align to the bottom of the element.
MIDDLE | Vertical align to the middle of the element.
TOP | Vertical align to the top of the element.
event Can be one or more of these events:
onafterupdate onbeforeupdate
onblur onclick
ondblclick ondragstart
onfocus onhelp
onkeydown onkeypress
onkeyup onmousedown
onmousemove onmouseout
onmouseover onmouseup
onresize onrowenter
onrowexit onselectstart

Remarks

Within a row, the following tags are valid:

  • TD
  • TH

This element is a block element.

Both the start and end tags are required.

Example

<TABLE>
<TR>
...
</TR>
<TR>
...
</TR>
</TABLE>

Scripting Object

TR

See Also

TABLE, TD, TH

Reconfiguration By J2M


Object DHTM

DHTML Elements

TT

Description

Indicates teletype. Renders text in fixed-width type. The required end tag returns the text formatting to normal.

Syntax

<TT
 CLASS=classname
ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
STYLE=css1-properties
TITLE=text
event = script
>

Parameter | Description
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The scripting language is written in JavaScript.
VBS, VBSCRIPT | The scripting language is written in VBScript.
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
TITLE=text | Used to provide advisory information. The contents of the title attribute will be displayed in a ToolTip during the onmouseover event.
event Can be one or more of these events:
onclick ondblclick
ondragstart onhelp
onkeydown onkeypress
onkeyup onmousedown
onmousemove onmouseout
onmouseover onmouseup
onselectstart

Remarks

Both the start and end tags are required.

Example

<TT>Here's some plain text.</TT>

Scripting Object

TT

Reconfiguration By J2M


Object DHTM

DHTML Elements

U

Description

Renders underlined text. The required end tag restores the text to normal.

Syntax

<U
 CLASS=classname
ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
STYLE=css1-properties
TITLE=text
event = script
>

Parameter | Description
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The scripting language is written in JavaScript.
VBS, VBSCRIPT | The scripting language is written in VBScript.
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
TITLE=text | Used to provide advisory information. The contents of the title attribute will be displayed in a ToolTip during the onmouseover event.
event Can be one or more of these events:
onclick ondblclick
ondragstart onhelp
onkeydown onkeypress
onkeyup onmousedown
onmousemove onmouseout
onmouseover onmouseup
onselectstart

Remarks

Both the start and end tags are required.

Example

<U>This text is underlined.</U>

Scripting Object

U

Reconfiguration By J2M


Object DHTM

DHTML Elements

UL

Description

Specifies that the following block of text is a bulleted (or unordered) list. Each item begins with a LI tag. The end tag is required.

Syntax

<UL
 CLASS=classname
ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
STYLE=css1-properties
TITLE=text
TYPE=1 | a | A | i | I
 event = script
>

Parameter | Description
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The scripting language is written in JavaScript.
VBS, VBSCRIPT | The scripting language is written in VBScript.
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
TITLE=text | Used to provide advisory information. The contents of the title attribute will be displayed in a ToolTip during the onmouseover event.
TYPE=1 | a | A | i | I Changes the style of the list.
1 | List items are numbered.
a | List items are labeled with lowercase letters.
A | List items are labeled with uppercase letters.
i | List items are labeled with lowercase roman numerals.
I | List items are labeled with uppercase roman numerals.
event Can be one or more of these events:
onclick ondblclick
ondragstart onhelp
onkeydown onkeypress
onkeyup onmousedown
onmousemove onmouseout
onmouseover onmouseup
onselectstart

Remarks

This element is a block element.

Both the start and end tags are required.

Example

<UL>
<LI>This is the first bulleted item in the list.
<LI>And this is the second bulleted item in the list.
</UL>

Scripting Object

UL

See Also

LI

Reconfiguration By J2M


Object DHTM

DHTML Elements

VAR

Description

Indicates placeholder text for a variable. Displays text in a small, fixed-width type. The required end tag restores the formatting to normal.

Syntax

<VAR
 CLASS=classname
ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
STYLE=css1-properties
TITLE=text
event = script
>

Parameter | Description
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The scripting language is written in JavaScript.
VBS, VBSCRIPT | The scripting language is written in VBScript.
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
TITLE=text | Used to provide advisory information. The contents of the title attribute will be displayed in a ToolTip during the onmouseover event.
event Can be one or more of these events:
onclick ondblclick
ondragstart onhelp
onkeydown onkeypress
onkeyup onmousedown
onmousemove onmouseout
onmouseover onmouseup
onselectstart

Remarks

Both the start and end tags are required.

Example

Enter the <VAR>filename</VAR> in the dialog box.

Scripting Object

VAR

Reconfiguration By J2M


Object DHTM

DHTML Elements

WBR

Description

Inserts a soft line break in a block of NOBR text.

Syntax

<WBR
 CLASS=classname

ID=value
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
STYLE=css1-properties
TITLE=text
>

Parameter | Description
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The scripting language is written in JavaScript.
VBS, VBSCRIPT | The scripting language is written in VBScript.
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
TITLE=text | Used to provide advisory information.

Remarks

The start tag is required, and the end tag is optional.

Example

<NOBR>This line of text will not break, no matter how narrow the window gets.
<WBR>This one, however, will.</NOBR>

See Also

BR

Reconfiguration By J2M


Object DHTM

DHTML Elements

XMP

Description

This tag is no longer recommended. Instead, the PRE or SAMP tags should be used. XMP indicates example text by displaying it in fixed-width type. The required end tag restores the text to normal.

Syntax

<XMP
 CLASS=classname
ID=value
LANG=language
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS

STYLE=css1-properties
TITLE=text
event = script
>

Parameter | Description
CLASS=classname | Specifies the class of the tag being defined. This is used to associate a sub-classed style sheet with the tag.
ID=value | An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Valid ID values must begin with a letter. The underbar character, "_", may be used in the ID name. The ID should be unique throughout the scope of the document. If more than one object with the same identifier exists in a document, a collection of those named items is created that can only be referenced by ordinal position.
LANG=language | Specifies which language to use in ISO standard language abbreviation form.
LANGUAGE=JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT Specifies the language the current script is written in and invokes the proper scripting engine. The default value is JAVASCRIPT.
JAVASCRIPT, JSCRIPT | The scripting language is written in JavaScript.
VBS, VBSCRIPT | The scripting language is written in VBScript.
STYLE=css1-properties | Specifies an in-line style sheet for the tag.
TITLE=text | Used to provide advisory information. The contents of the title attribute will be displayed in a ToolTip during the onmouseover event.
event Can be one or more of these events:
onclick ondblclick
ondragstart onhelp
onkeydown onkeypress
onkeyup onmousedown
onmousemove onmouseout
onmouseover onmouseup
onselectstart

Remarks

This element is a block element.

Both the start and end tags are required.

Scripting Object

XMP

See Also

LISTING, PLAINTEXT, PRE, TT

Reconfiguration By J2M


1, rue fra.so | Tutoriel HTML 3.2 - Introduction

Ce tutoriel HTML a été écrit et créé par Franck:
http://perso.wanadoo.fr/franck.sophie/

Formation au HTML 3.2 : Introduction

Pourquoi ce tutoriel?

Ce tutoriel a pour but de vous fournir les clés du HTML 3.2, voire un peu plus. Même si vous utilisez un logiciel qui se charge de générer ce code, des connaissances en HTML peuvent s'avérer fort utiles lorsque les choses ne fonctionnent pas comme prévu.

J'ai volontairement choisi la version 3.2 du HTML car elle me parait plus abordable pour l'apprentissage, et c'est surtout la version la plus largement comprise par les navigateurs aujourd'hui.

Je vous propose de commencer par quelques points importants.

Trousse à outils

Vous le savez sans doute, il éxiste beaucoup de logiciels de publication pour Internet qui se chargent, avec plus ou moins de réussite, de générer le code HTML. Néanmoins, l'avantage de connaître le HTML est que l'on peut se passer de ces logiciels et ainsi épargner son compte en banque.

Si la plate-forme informatique que vous utilisez n'a guère d'importance (Mac ou PC), il vous faut cependant une "trousse à outils" minimum. Beaucoup de ces outils sont inclus dans votre système (MacOs ou Windows) ou sont disponibles en freeware (gratuits) ou en shareware (vous pouvez essayer le produit avant de l'acheter, mais n'oubliez pas de retribuer son auteur si vous continuez à utiliser son logiciel). Voici ce que je vous conseille d'utiliser pour ce tutoriel (vous êtes cependant libre de choisir d'autre logiciels) :

Pour éditer vos fichiers HTML :

Un simple éditeur de texte suffit : SimpleText, Wordpad ou Write.
C'est la solution la plus simple et celle qui vous permettra de vérifier l'effet de chaque balise et/ou attribut que je présente.

N.B. : Pour ceux qui tiennent à utiliser un traitement de texte du style Microsoft Word, il est très important de choisir le format "Texte seulement" au moment d'enregistrer vos fichiers.

Pour gérer vos images :

Des logiciels en shareware tels que Graphic Converter (Mac) ou Paint Shop Pro (PC) font tout à fait l'affaire, pour une somme très raisonnable.

Codes héxadécimaux des couleurs :

Il éxiste des logiciels en freeware qui permettent d'obtenir le code héxadécimal d'une couleur en la sélectionnant simplement dans une palette. En surfant sur le web, vous trouverez ce qui vous conviendra.

Nommer vos fichiers HTML

Le nom que vous donnez à vos fichiers HTML est libre, si ce n'est qu'il est limité à 8 caractères sous DOS et Windows 3.x. J'attire seulement votre attention sur la notion de casse, c'est-à-dire le respect des majuscules et minuscules.

En effet, lorsque vous vous trouvez sous système utilisateur (MacOs ou Windows), le fait que vous fassiez appel à un fichier nommé "Bonjour.html" par "bonjour.html" ne pose a priori pas de problème. Tant que vous êtes sous système utilisateur.
Mais sur Internet, la plupart des serveurs - là où seront stockées vos pages personnelles - fonctionnent sous UNIX ou dérivé. Or Unix est sensible à la casse, c'est-à-dire que si vous appelez le fichier "Bonjour.html" en tapant "bonjour.html", vous n'obtiendrez pas de réponse, ou un message d'erreur. Sous Unix, il s'agit de deux fichiers distincts.

En guise de conseil, essayez de n'utiliser que des minuscules dans vos noms de fichier (ou que des majuscules), ce qui vous permettra d'éviter ce risque d'erreur.

L'extension des fichiers HTML

Lorsque vous enregistrez vos fichiers HTML, il faut leur donner une extension, même si vous travaillez sous MacOs ou Windows 9x! Cette extension est ".html", ou ".htm" si vous travaillez sous DOS ou Windows 3.x.

Règle générale sur les balises HTML

Les balises HTML fonctionnent par paire : une balise d'ouverture, <TITLE>, et une balise de fermeture, </TITLE>. Comme vous pouvez le voir dans cet exemple (nous en verrons le sens plus tard), le nom de la balise est encadré par les signes "<" et ">". Cela permet au navigateur de différencier le contenu du document du code qui sert à le mettre en forme. La balise de fin reprende le nom de la balise de début mais contient en plus un slash "/", ce qui indique que l'application de la balise cesse à cet endroit.

Comme toute règle, nous verrons par la suite qu'il éxiste un certain nombre d'exceptions (absence de balise de fin notamment).

Définition et Conventions

Le langage HTML est un ensemble de codes ou de balises qui permettent de formater, d'afficher et de présenter vos données en vue de leur publication sur Internet.

Chaque balise HTML peut recevoir des attributs qui permettent d'afiner ou de modifier le fonctionnement de la balise. Pour vous permettre de les différencier, j'écrirai les balises en MAJUSCULES et les attributs en minuscules. Je parle d'élément pour définir les balises de début et de fin.

N.B. : Lorsque vous saisissez votre code HTML, sachez que ce langage est insensible à la casse, en d'autres termes, vous pouvez tapez vos balises et attributs en majuscules ou minuscules.

Comment procéder?

Dans les leçons qui suivent, je vous présente les principales balises du HTML 3.2 et leurs attributs. Je donne quelques exemples de codes, mais qui restent insuffisants pour vous montrer les petits différences qui éxistent parfois.

Aussi je vous conseille de lire chaque leçon dans son intégralité, puis de faire des essais par vous-même. Dans beaucoup de cas, le fait de créer le code vous-même vous éclairera sur l'utilité des balises et attributs.


1, rue fra.so | HTML 3.2 : Sommaire

Formation au HTML 3.2 : Sommaire

Voici donc la liste des chapitres abordé dans ce tutoriel :

Introduction
Conventions
Règles générales
Trousse à outils
Nom des fichiers
Editer un document HTML
Créer un nouveau document HTML
Ouvrir le document dans un navigateur
Structure générale d'un document HTML
Exemple de structure d'un document HTML
L'en-tête du document
Le corps du document
Formater le texte
Le texte
Les titres : <H1>, <H2>, ...
Le formatage : <B>, <I>, ...
La notion d'accéssibilité : <EM>, <CITE>, ...
Les paragraphes
Les Retours à la ligne : <P>, <BR>
L'alignement : <P align="x">, <CENTER>
Les retraits : <BLOCKQUOTE>
Le texte pré-formaté : <PRE>
Les césures : <NOBR>, <WBR>
Indice et exposant : <SUB>, <SUP>
Afficher des images
Formats de fichiers graphiques : GIF, JPG
Affichage simple d'une image : <IMG>
L'adresse d'un fichier
Attributs de <IMG>
Image de fond : background="url"
Créer des liens
La balise <A>
Les ancres : name="xxx"
Les listes
Listes à puces et listes numérotées : <UL>, <OL>
Les listes descriptives : <DL>
Les listes <DIR> et <MENU>
Mélanger les listes
Ajouter des couleurs
Les couleurs en HTML
Les couleurs standards
Les codes héxadécimaux
Colorer les éléments de page
Les polices de caractère
Les tableaux
La balise <TABLE>
Les cellules du tableau : <TR>, <TH>, <TD>
Exemple
Les Frames
Le fichier frameset
Les attributs de <FRAMESET>
Les attributs de <FRAME>
Exemple
Les image-maps
Déclarer une image-map
Définir le map
En cas de non-support
Les moteurs de recherche sur Internet
Déclarations de balises <META>
S'inscrire dans les principaux moteurs de recherche
Récapitulatif des balises présentées


1, rue fra.so | Tutoriel HTML 3.2 - Couleurs et Polices

Formation au HTML 3.2 : Couleurs et Polices

I- Définition des couleurs en HMTL

Il éxiste deux possibilités en HTML pour définir une couleur :

  • l'utilisation des 16 couleurs standards (héritage des premiers écrans VGA sous Windows)
  • l'utilisation de codes héxadécimaux

1- Les couleurs standard

Elles sont donc au nombre de 16, et sont reconnues par tous les systèmes. En voici la liste :
Aqua | black | blue | fuschia
gray | green | lime | maroon
navy | olive | purple | red
silver | teal | white | yellow

Leur emploi est simple, comme nous le verrons ultérieurement.

2- Les codes héxadécimaux

Cela se complique un peu. Pour être plus en harmonie avec le langage système, et pour permettre l'utilisation de toutes les couleurs (16 couleurs, c'est vraiment court!), les créateurs du HTML ont eu l'idée de convertir les composantes RVB de chaque couleur en un code héxadécimal (base 16 : 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f). Le mieux, si vos outils graphiques ne font pas la conversion, c'est de surfer sur le web à la recherche d'un shareware ou d'un freeware qui se chargera de la conversion pour vous. Vous n'avez qu'à cliquer dans une palette pour choisir une couleur, et le code vous est fournit.

Pour utiliser ces couleurs converties en code héxadécimaux, il vous faut précéder la valeur par un signe dièse (#).

Voici quelques exemples de codes héxadécimaux de couleurs :

code héxadécimal pour le blanc : FFFFFF

code héxadécimal pour le noir : 000000

II- Les éléments de la page

Nous avons vu dans la partie "Afficher des images" qu'il était possible de spécifier un fichier graphique qui sert de fond de page. Il est cependant aussi possible d'intervenir sur la couleur d'autres éléments de la page, tel que le fond de la page, le texte, les liens, les liens visités ou encore le lien cliqué. Tout ceci se modifie en ajoutant des attributs à la balise <BODY>.

Les attributs de <BODY> :

+ bgcolor= "couleur / code héxadécimal" - spécifie la couleur du fond de page.

+ text="couleur / code héxadécimal" - spécifie la couleur par défaut pour tout le texte du document.

+ link= "couleur / code héxadécimal" - spécifie la couleur des liens hypertextes et du cadre des images agissant comme des liens hypertextes.

+ vlink= "couleur / code héxadécimal" - spécifie la couleur des liens visités dans le document.

+ alink= "couleur / code héxadécimal" - spécifie la couleur du lien au moment où il est cliqué (bouton de la souris en bas).

Voici un exemple de code :

<BODY bgcolor="#000000" text="white" link="blue" vlink="yellow">
Le fond de page sera noir, le texte blanc, les liens en bleu et les liens visités seront jaunes.

Note : Lorsque vous spécifiez une couleur par son code héxadécimal, n'oubliez pas le signe dièse (#), sans lequel votre code ne sera pas reconnu.

III- Les polices de caractères

Grâce à la balise <FONT>, il vous est possible de spécifier plusieurs choses pour une section de texte :

  • la police de caractère
  • la taille des caractères
  • la couleur du texte

1- La balise <FONT>

Les attributs de la balise <FONT>...</FONT>

+ face="nom de la police1, nom de la police2, etc" - spécifie une liste de polices de caractère par ordre de préférence. Si la police n'est pas présente dans le système de votre visiteur, le navigateur cherche la suivante et ainsi de suite. Si aucune n'est présente, il affiche le texte dans la police de caractère par défaut.

+ size=valeur absolue / valeur relative - spécifie la taille des caractères. Deux méthodes coéxistent :

- la valeur absolue : les tailles vont de 1 à 7, 3 étant la taille normale par défaut. On spécifie alors la taille par size=5, ce qui a pour effet d'agrandir de deux tailles les caractères ainsi encodés.

- la valeur relative : 3 étant la taille standard, on spécifie alors size=+2, ce qui a le même effet que dans l'exemple précédent.

+ color="couleur standard / code héxadécimal" - spécifie la couleur du texte encodés.

Voici un exemple de code :

<FONT face="Helvetica, Times" size=+2 color="#AE3F1A">Mon texte special</FONT>

Ce qui s'affiche ainsi : Mon texte special

2- Changer la taille par défaut

Pour une raison quelconque, vous pouvez désirer changer la taille par défaut du texte. La balise <BASEFONT> (pas de balise de fin) a été conçue à cet effet.

Placée à l'endroit de votre choix, elle stipule une taille de caractère par une valeur absolue ou relative (voir plus haut) à tout le texte qui la suit. Si vous faites appel à la balise <FONT> pour modifier la taille d'une portion de texte, la taille normale sera celle spécifiée dans <BASEFONT>. Ceci est particulièrement important pour utiliser des valeurs relatives.

Ne possédant pas de balise de fin, si vous désirez retrouver la taille par défaut du HTML (c'est-à-dire 3 en valeur absolue), il vous faudra disposer une nouvelle balise <BASEFONT> pour l'indiquer.

Exemple de code :

<BASEFONT size=+2>

Le texte qui suit cette balise verra sa taille augmentée de deux niveaux.


1, rue fra.so | Tutoriel HTML 3.2 - Introduction

Formation au HTML 3.2 : Editer un document HTML

Il serait sans doute bon que, de temps à autres, vous fassiez des essais avec les balises que je présente. Cela vous permettra de vous rendre compte, réellement, de leur effet et de vous familiariser avec leur utilisation. Voici donc la procédure pour éditer, modifier et vérifier un document HTML.

Créer un nouveau document

  1. Pour créer un nouveau document HTML, lancez votre éditeur de texte et ouvrez un nouveau document (si le logiciel ne le fait pas automatiquement).
  2. La leçon "Structure générale d'un document HTML" commence par un exemple de code HTML. Sélectionnez-le à la souris dans votre navigateur, copiez-le et collez-le dans votre nouveau document dans votre éditeur de texte.
  3. Entre les balises <TITLE> et </TITLE>, remplacez le texte par le titre que vous souhaitez donner à votre document ("Exercices de HTML", par exemple).
  4. Dans le menu Fichier, choisissez "Enregistrer sous". Choisissez l'endroit où vos souhaitez enregistrer ce fichier (l'idéal étant de créer un dossier ou répertoire où vous regrouperez tout vos fichiers d'exercice HTML). Nommez le fichier en prenant soin de lui ajouter l'extension ".html" ou ".htm". Pour ceux qui utilisent un éditeur de texte, n'oubliez pas de choisir le format "Texte seulement". Validez.
  5. Retournez dans votre navigateur et ouvrez le fichier que vous venez de créer. Seul le texte "contenu de votre document..." s'affiche.
    Cependant, en observant la barre de titre de la fenêtre du navigateur, vous pouvez voir que le texte que vous avez entré entre les balises <TITLE> et </TITLE> sert de titre à votre document (pour les non-anglicistes, "title" signifie titre). Pas mal, non? Et ce n'est qu'un début!

Plus tard, pour modifier le contenu de votre fichier HTML, il vous suffit de retourner dans l'éditeur de texte et de le modifier. N'oubliez cependant pas d'enregistrer le fichier avant de le recharger dans votre navigateur.

Charger le fichier dans votre navigateur

Pour que les modifications apportées dans vos fichiers HTML soient prises en compte dans votre navigateur, il vous faut à chaque fois ouvrir le fichier à partir du menu Fichier.
Une autre possibilité s'offre à vous : utiliser le bouton "Rafraichir" ou "Recharger" de votre navigateur. J'attire cependant votre attention sur le fait qu'en fonction de la configuration de votre logiciel internet, ce rafraichissement peut se faire à partir de la version conservée dans la cache. Ainsi, les modifications que vous aurez apporté à votre document HTML n'apparaitront pas. Pour y remédier, maintenez la touche "majuscule temporaire" en cliquant sur le bouton de rechargement.

Vous êtes maintenant prêt pour créer vos propres documents HTML.


1, rue fra.so | Tutoriel HTML 3.2 - Introduction

Formation au HTML 3.2 : Formater le texte

Comme vous avez sans doute pu le constater dans la section sur "Editer un document HTML", le texte saisi est affiché au kilomètre, sans mise en forme ni formatage. Pour mieux vous en rendre compte, réduisez au agrandissez la taille de la fenêtre de votre navigateur. Le texte sera automatiquement réaligné. Pour formater le texte, il faut utiliser du HTML.
Nous allons donc voir comment ajouter du style au texte, et comment formater vos divers paragraphes.

I- Du texte avec du style

1- Les titres

Il éxiste 6 niveaux de titre en HTML, allant de <H1> à <H6>, <H1> étant le titre le plus important. Leur affichage dépend directement du navigateur que vous utilisez et des polices de caractère choisies.
Dans tous les cas, le texte entre ces balises est placé sur une nouvelle ligne.
Voici une exemple de code :

<H1>Mon titre en H1</H1>
<H2>Mon titre en H2</H2>
<H3>Mon titre en H3</H3>
<H4>Mon titre en H4</H4>
<H5>Mon titre en H5</H5>
<H6>Mon titre en H6</H6>

s'affiche ainsi (dans votre navigateur) :

Mon titre en H1

Mon titre en H2

Mon titre en H3

Mon titre en H4

Mon titre en H5
Mon titre en H6

2- Les différentes styles de caractères

Pour appliquer un style à un mot ou à un morceau de phrase, il suffit d'encadrer le ou les mots des balises qui correspondent au style désiré. On peut aussi combiner les styles.

- Le gras : <B>Texte</B> - ex. : Voici du gras

- L'italique : <i>Texte</i> - ex. : Voici de l'italique

- Le monospace : <TT>Texte</TT> - ex. : voici du texte en police monospace

- Souligné : <U>Texte</U> - ex. : voici du texte souligné

- Barré : <STRIKE>Texte</STRIKE> ou <S>Texte</S> - ex. : voici du texte barré

Pour mêler les style, il vous suffit d'ajouter les balises les unes à la suite des autres, sans oublier qu'il faudra toutes les fermer :

<B><I><U>Voici un exemple de texte</I> partiellement en italique, en gras et souligné</B></U>

s'affiche :

Voici un exemple de texte partiellement en italique, en gras et souligné

3-Mettre du texte en évidence et la notion d'accéssibilité

Le W3C (World Wide Web Consortium, organisme qui établit entre autres les normes pour le HTML) insiste beaucoup sur le fait de rendre les données accéssibles au plus grand nombre, notamment aux personnes souffrant de déficiences visuelles. Ces personnes peuvent utiliser des navigateurs vocaux. Aussi, et pour leur permettre un meilleur accès aux données sur le web, voici les balises qui peuvent les aider à décrire nos pages (le HTML 4 est plus pointu sur ce point, grâce aux feuilles de style). L'affichage et le rendu dépendent de votre navigateur (les rendus peuvent être similaire à de l'italique, du gras ou autre).

- Mise en évidence simple : <EM>Texte</EM> - ex. : Mise en évidence simple

- Citation : <CITE>Texte</CITE> - ex. : Pour faire une citation

- Exemple : <SAMPLE>Texte</SAMPLE> - ex. : Ceci est un exemple

- Variable : <VAR>Texte</VAR> - ex. : ceci est une variable

Il en éxiste d'autres, mais j'avoue que je ne maîtrise pas cette partie du HTML.

II- Formater le texte

1- Les retours à la ligne

Nous l'avons déjà vu, lorsque vous saisissez votre texte dans votre éditeur de texte, les retours à la ligne que vous faites - via la touche "Entrée" -, ne sont pas affichés dans le navigateur. Et pour cause, il faut faire appel à une balise HTML.

- Le retour simple : <BR>
Cet élément ne possède pas de balise de fin. Il provoque un retour à la ligne simple à l'endroit où il est placé.

Ex. : Votre texte<BR>avec un retour à la ligne simple.

S'affiche ainsi :

Votre texte
avec un retour à la ligne simple.

- Le retour avec ligne vierge : <P>
Cet élément ne requiert pas non-plus de balise de fin. Il affiche un retour à la ligne avec ajout d'une ligne vierge.

Ex. : Votre texte<P>avec un retour à la ligne et ajout d'une ligne vierge.

S'affiche ainsi :

Votre texte

avec un retour à la ligne et une ligne vierge.

2- Aligner le texte

En HTML, vous pouvez choisir d'aligner vos paragraphes de texte à gauche (par défaut), au centre ou à droite. Il éxiste trois solutions, aucune ne permettant cependant de justifier le texte.

- <P align=left / center / right>Texte</P> : Oui, il s'agit bien de la même balise que pour l'ajout d'un retour à la ligne, à laquelle on adjoint un attribut, celui de l'alignement (respectivement gauche / centre / droite). A noter aussi, dans cette utilisation de la balise <P>, il vous faut utiliser la balise de fermeture pour signaler la fin de l'alignement.

Ex. : <P align=center>Votre paragraphe est au centre</P>

s'affiche ainsi :

Votre paragraphe est au centre

- <CENTER>Texte</CENTER> : C'est une balise Nestcape, aujourd'hui reconnue par la majorité des navigateurs Internet. Elle centre le paragraphe entre ces balises.

Ex. : <CENTER>Votree paragraphe est au centre</CENTER>

s'affiche :

- <DIV align=left / center / right>Texte, image, tableau</DIV> : cette balise permet d'aligner en même temps plusieurs type de données, qu'il s'agisse de texte, d'images ou encore de tableaux. Son fonctionnement est similaire a celui de <P align =...>

3- Mettre du texte en retrait : <BLOCKQUOTE>...</BLOCKQUOTE>

A l'origine, cet élément devait permettre de différencier un paragraphe de citation du reste du texte, en affichant un retrait à gauche. Mais la majorité des gens utilisent simplement cette balise pour le retrait, sans que le contenu soit forcément une citation. Pour augmenter le retrait, multipliez les blockquote.

Ex. : <BLOCKQUOTE><BLOCKQUOTE>Texte avec deux retraits</BLOCKQUOTE></BLOCKQUOTE>

s'affiche ainsi :

Texte avec deux retraits

4- Le texte préformaté : <PRE>.....</PRE>

Le texte que vous saisissez entre ces balises sera affiché tel que vous l'avez entré, c'est-à-dire avec les espaces et les retours à la lignes.

Ex. : <PRE>Voici un texte pre-
formate</PRE>

s'affiche ainsi :

Voici un      texte                     pre-

formate

5- Césure ou pas de césure

- Interdire la césure : <NOBR>Phrase de texte</NOBR> - Le navigateur ne pourra alors pas faire de césure ou de retour automatique à la ligne dans le texte encadré par ces balises. Si besoin est, il ajoutera des ascenceurs horizontaux pour que le lecteur puisse afficher le reste de la ligne.

- Programmer une césure : <WBR>Texte</WBR> - Si la portion de texte pour laquelle vous avez interdit les retours automatiques est longue, il est judicieux de placer cet élément pour permettre au navigateur, si besoin est, d'utiliser la césure programmée pour un retour à la ligne.

6- Les traits de séparation : <HR>

Pour aérer vos textes, il peut être judicieux de séparer les parties par des traits horizontaux. Cet élément HTML ne possède pas de balise de fin, puisque le trait s'affiche sur une nouvelle ligne.

Attributs possibles :

+ align = left / center (défaut) / right - stipule l'alignement du trait.

+ width = pixels / pourcentage - spécifie la largeur du trait, soit en pixels, soit en pourcentage de la taille de la fenêtre.

+ height = pixels - hauteur ou épaisseur du trait en pixels.

+ noshade - efface l'effet d'ombrage affiché par défaut dans le navigateur.

7- Les caractères spéciaux

Vous l'aurez peut-être constaté dans vos essais sur les balises que je vous ai déjà présenté, les caractères accentués de la langue française ne sont pas rendu correctement dans votre navigateur. Il ne s'agit pas d'une erreur. L'anglais, la langue de base du HTML (vous vous souvenez de la déclaration de la version de HTML utilisé...), ne comporte pas d'accent. Les gens du W3C n'ont cependant pas oublié toutes les autres langues qui sont utilisées sur Terre. Les caractères spéciaux font l'objet de codes qui leur permettent d'être affichés normalement dans un navigateur.

- Les principaux caractères spéciaux pour le français (liste non exhaustive) :
Caractère à affiher | Code en HTML
é | class="blueSample">&eacute;
è | &egrave;
à | &agrave;
ù | &ugrave;
ê | &ecirc;
î | &icirc;
ô | &ocirc;
â | &acirc;
ë | &euml;
ï | &iuml;
ç | &ccedil;
< | &lt;
> | &gt;

Dans votre texte, il vous suffit de remplacer le caractère par le code adéquat.

Indice et exposant

Dans vos formules mathématiques ou chimiques, il se peut que vous ayez besoin de mettre des caractères en indice ou en exposant.

+ indice : H<SUB>2</SUB>O : H2O

+ Exposant : 10<SUP>3</SUP> : 103

Voilà, vous savez maintenant présenter votre texte, le formater, lui attribuer des styles, tout ça pour le rendre accéssible sur Internet. La leçon est relativement longue, avec beaucoup de choses à retenir. Aussi, entrainez-vous, faites des essais, mêlez les différentes balises pour obtenir des effets combinés, relisez votre code en cas de mauvais fonctionnement (la très grande majorité des erreurs provient de fautes de frappe). Vous devez vous sentir à l'aise avec l'utilisation de ces balises avant de poursuivre. J'ajouterai enfin que vous n'êtes pas tenu de connaître par coeur toutes les balises. Seulement les principales, et faites des notes résumées pour les autres. Vous consulterez ces notes en cas de besoin.


1, rue fra.so | Tutoriel HTML 3.2 - Les Frames

Formation au HTML 3.2 : Les frames

Kezako, frames? Et pourtant vous en avez rencontré sur Internet. Les frames sont les cadres créés dans la fenêtre de votre navigateur. Chaque cadre peut recevoir un fichier HTML différent. Ce principe est surtout utilisé pour des barres de navigations, des hauts de page (où sont placés des publicités ou plus simplement le nom de la compagnie ou du site visité). Un moment très en vogue, les frames tendent à se faire plus rares sur Internet. D'abord parce que la mise à jour du site est plus difficile (vous le verrez dans cette leçon) et surtout parce que les frames accroissent sensiblement les temps de chargement pour vos visiteurs. Qui plus est, esthétiquement, les frames ont tendances à "charger" le design des sites.

Dans le cas où nous construisons une page contenant deux frames, il nous faut au moins trois fichiers (il faut néanmoins ajouter un fichier par cadre créé - son contenu) :

  • le fichier <FRAMESET>, celui qui répartit les cadres dans la fenêtre
  • deux fichiers HTML pour le contenu de chaque cadre

1- Le fichier <FRAMESET>

Comme un tableau, un fichier frameset se construit en lisant les cadres de haut en bas, et de gauche à droite. Mais commençons par un exemple de code simple :

<HTML>
<HEAD>
<TITLE>Mon site</TITLE>
</HEAD>
<FRAMESET cols="20, *">
<FRAME SRC="fichier1.html" name="colGauche">
<FRAME SRC="fichier2.html" name="colDroite">
<NOFRAMES>
Ce site a ete construit avec des frames. Il semble que votre navigateur ne supporte pas ces balises. Voici un lien pour visiter notre site sans frames : <A HREF="fichier2.html">Site sans frames</A>
</NOFRAMES>
</FRAMESET>
</HTML>

Le fichier <FRAMESET> est le fichier qui crée et répartit dans la fenêtre les différents cadres (frames) de notre page. Les balises <FRAMESET> et </FRAMESET> remplacent les balises traditionnelles <BODY> et </BODY>.

Ici, nous avons créé deux colonnes, la première fait 20 pixels de large et la seconde occupe le reste disponible de la fenêtre du navigateur. Dans le colonne de gauche de 20 pixels de large - son nom étant "colGauche" -, nous chargeons le fichier "fichier1.html" et dans la colonne de gauche - "colGauche" -, nous chargeons le fichier "fichier2.html".

Au cas où le navigateur de notre visiteur ne supporterait pas les balises de frames, nous fournissons un contenu alternatif via les balises <NOFRAMES>. Ici, un lien vers fichier2.html.

2- Les attributs pour le fichier <FRAMESET>

Les attributs de la balise <FRAMESET> :

+ cols="pixels / %, pixels / %" - crée des colonnes dont la largeur peut être spécifiée en pixels ou en pourcentage de la fenêtre totale. Les dimensions pour chaque colonne sont séparées par des virgules. (on note aussi qu'il est possible d'indiquer le signe "*" pour indiquer que la colonne occupe l'espace restant).

+ rows="pixels / %, pixels / %" - crée des cadres horizontaux (lignes). Il n'est pas possible d'utiliser cols et rows dans le même frameset (voir dans l'exemple en fin de leçon).

+ framespacing="pixels" - indique l'espace entre les deux cadres.

+ frameborder="pixels" - épaisseur de la bordure des cadres.

+ bordercolor="code héxadécimal" - couleur de la bordure des cadres (ici, les noms des 16 couleurs standard ne sont pas possibles).

+ border="pixels" - épaisseur de la bordure entre les cadres.

NOTE IMPORTANTE : si vous désirez que vos cadres n'aient pas de bordure, il vous faut fixer les trois attributs suivants à la valeur de "0" pour que cela fonctionne sous Netscape et Internet Explorer : framespacing, frameborder et border.

Certains de ces attributs sont redondants, mais c'est parce qu'ils ne fonctionnent soit que sous Internet Explorer soit sous Netscape.

Les attributs des balises <FRAME> :

+ src="fichier" - indique le fichier initialement chargé dans la fenêtre.

+ name="texte" - spécifie un nom pour la fenêtre créée. C'est particulièrement important car vous ferez appel à ce nom lorsque vous voudrez charger un fichier dans ladite fenêtre.
Bien que le nom que vous donnez à vos fenêtres soit libre, il éxiste certains noms qui sont réservés en HTML :

- "_top" : le fichier est chargé dans la fenêtre entière (efface les frames)
- "_blank" : une nouvelle fenêtre est ouverte dans votre navigateur pour y charger le fichier. L'ancienne fenêtre reste ouverte en arrière plan.
- "_parent" : ouvre le fichier dans une fenêtre supérieure hiérarchiquement (dans le cas où plusieurs fenêtres du navigateur sont ouvertes).

+ scrolling="yes / no / auto" - autorise ou non la présence d'ascenseurs de défilement pour le cadre. "auto" laisse au navigateur le soin d'afficher des ascenseurs si besoin est (c'est l'option par défaut si rien n'est spécifié).

+ marginheight="pixels" - marges disposées en haut et en bas du cadre.

+ marginwidth="pixels" - marges disposées de chaque côté du cadre.

3- Des fichiers HTML et des frames

En fait, rien ne différencie à première vue les fichiers HTML pour un site avec des frames des autres fichiers HTML. La seule différence s'observe dans les liens hypertextes : il faut préciser la frame de destination pour l'affichage du fichier à charger. Par défaut, si rien n'est indiqué, le fichier se charge dans le cadre où se trouvait le lien hypertexte.

Voici un exemple de code :

<A HREF="monExemple.html" target="colDroite">Un exemple de chargement dans une frame</A>

En guise de rappel, trois noms réservés vous permettent de sortir des frames : "_top", "_parent", "_blank" (à utiliser avec l'attribut target).

4-Exemple de code pour un fichier frameset

Nous allons construire trois frames : deux colonnes, dont celle de gauche contenant deux rangées.

<HTML>
<HEAD>
<TITLE>Mon site en frames</TITLE>
</HEAD>
<FRAMESET cols="150, *" border="5" frameborder="5" bordercolor="#000000">
<FRAMESET rows="50%, 50%">
<FRAME SRC="fichier1.html" name="hautGauche">
<FRAME SRC="fichier2.html" name="basGauche">
</FRAMESET>
<FRAME SRC="fichier3.html" name="colDroite">
<NOFRAMES>
Votre navigateur ne supporte pas les frames. Voici un acces a <A HREF="fichier3.html">notre site sans frames</A>
</NOFRAMES>
</FRAMESET>
</HTML>

Voici deux captures d'écran qui vous permettront de visualiser le résultat. On note que sous Explorer 3, la couleur et l'épaisseur des bordures de cadre ne fonctionnent pas.

Capture du résultat sour Internet Explorer 3

Capture du résultat sous Netscape 4

Comme d'habitude, faites des essais, en commençant par le plus simple (en reprenant les exemples que je donne), puis incorporez progressivement les divers attributs. A chaque fois, vérifiez le résultat dans votre navigateur.


1, rue fra.so | Tutoriel HTML 3.2 - Introduction

Formation au HTML 3.2 : Afficher des images

Ne dit-on pas qu'une image vaut bien mille mots! Eh bien nous allons voir comment afficher des images dans vos pages web.

1- Les formats de fichiers graphiques

C'est simple, il n'y en a que deux qui soient reconnues universellement : le GIF et le JPG.

+ le format GIF : particulièrement à l'aise avec les aplats de couleurs, ce format permet des fichiers de faible encombrement et permet l'entrelacement (affichage progressif par bandes) et la transparence (format GIF89a).

+ le format JPG : il permet de varier le taux de compression et donc de mieux adapter le rapport poids-qualité de l'image. Ce format est recommandé pour les photos et en général les images comportant des dégradés de couleurs.

Il éxiste d'autres formats, mais il faut alors que votre visiteur ait ajouté à son navigateur les pluggins nécessaires (petits programmes additionnels).

2- Affichage simple d'une image

Le code de base est des plus simples : <IMG SRC="fichier.gif">

Cet élément ne comporte pas de balise de fin.

Ce code suppose cependant que le fichier image se situe dans le même dossier que celui du fichier HTML qui y fait appel. Nous allons donc voir comment faire si ce fichier graphique se situe dans un autre dossier.

3- Suivre le chemin

Indiquer au navigateur le chemin à suivre pour trouver un fichier graphique est sans doute une partie un peu difficile. Mais vous devriez vous en sortir très bien (j'y arrive bien!). Ce que nous allons voir ici pour les images s'applique aussi aux liens vers d'autres fichiers HTML. Pour des raisons pratiques, disons que le dossier/répertoire s'appelle "images"

+ l'image se situe dans le dossier/répertoire du fichier HTML :

c'est le cas le plus simple, celui que nous avons vu dans l'exemple précédent.

+ l'image se trouve dans un sous-répertoire/dossier situé dans le dossier où se situe le fichier HTML :

c'est encore relativement simple, le code est <IMG SRC="images/fichier.gif">

Si le dossier "images" se trouve dans un répertoire qui lui-même se situe dans le répertoire du fichier HTML, il suffit d'indiquer le chemin complet : <IMG SRC="repertoireX/images/fichier.gif">

+ l'image se situe dans un répertoire/dossier supérieur à celui du fichier HMTL :

on indique alors simplement au navigateur de "remonter" d'un niveau pour trouver le fichier : <IMG SRC="../fichier.gif">

Si le fichier se situe dans un dossier situé à plusieurs niveaux au-dessus de celui du fichier HTML, on multiplie l'indication pour remonter : <IMG SRC="../../../fichier.gif">

Si le fichier se situe dans "images", situé plusieurs niveaux au-dessus du fichier HTML : <IMG SRC="../../../images/fichier.gif">

Voici quelques exemples illustrés de chemins :

<IMG SRC="fichier.gif">

<IMG SRC="repertoireX/images/fichier.gif">

<IMG SRC="repertoireX/images/fichier.gif">

<IMG SRC="../fichier.gif">

<IMG SRC="../../../fichier.gif">

<IMG SRC="../../images/fichier.gif">

4- Les attributs de <IMG>

+ width=pixels - indique la largeur de l'image à afficher

+ height=pixels - indique la hauteur de l'image à afficher

+ alt="texte descriptif" - quelques mots qui s'affichent avant le chargement de l'image, ou en cas d'impossibilité de charger le fichier

+ align=left / center / right - alignement de l'image sur la page

+ border=pixel - par défaut, le navigateur affiche un cadre de 1 pixel d'épaisseur autour de l'image. 0 signifie qu'il n'y a pas de cadre.

+ vspace=pixels - spécifie un espace vierge en pixels de chaque côtés de l'image

+ hspace=pixels - spécifie un espace vierge en pixels en haut et en bas de l'image

+ lowsrc="fichierbis.jpg" - spécifie un fichier en basse résolution de l'image à charger. Si votre fichier graphique est lourd, utiliser cet attribut pour faire patienter vos visiteurs avec une image en basse résolution. Cette image doit avoir les mêmes dimensions que l'image finale.

Voici un exemple de code reprenant tous ces attributs :

<IMG SRC="Nantes.gif" lowsrc="Nantesbis.jpg" height="125" width="125" alt="Ma ville" border="0" align=center vspace=10 hspace=10>

Ce code affiche une image située dans le même fichier HTML qui l'appelle. Pendant son chargement, il affiche le texte "Ma ville", puis l'image en basse résolution "Nantesbis.jpg". Sa taille est de 125 x 125 et elle est alignée au centre. Elle ne possède pas de bordure et un espace de 10 pixels l'entoure complètement.

5- Une image pour le fond de votre page

Nous le verrons plus tard, vous pouvez spécifier la couleur du fond de votre page, celle du texte, et des liens visités. Mais nous allons voir maintenant comment charger une image comme fond de page. Le navigateur répète cette image pour "remplir" entièrement le fond de la fenêtre ouverte.
Un conseil, prenez un fichier très léger et dont les motifs ne nuiront pas à la lecture de vos documents.

Il s'agit en fait d'un attribut de la balise de début <BODY> : <BODY background="fichier.jpg">

N'oubliez pas de fournir le chemin du fichier si celui-ci ne se trouve pas dans le même dossier/répertoire que le fichier HTML.


1, rue fra.so | Tutoriel HTML 3.2 - Les Liens Hypertextes

Formation au HTML 3.2 : Les Liens HyperTextes

Vous savez maintenant mettre en forme votre texte pour l'afficher sur Internet. Vous savez comment afficher vos images. Mais toute la puissance d'Internet réside sans doute dans sa faculté à relier les sites et les documents entre eux, grâce aux liens hypertextes. Et, cerise sur le gâteau, ce n'est pas plus difficile que ce que nous avons vu jusqu'à présent.

Note : je pars du principe que vous êtes familier de la notion de "chemin" et que vous savez comment indiquer au navigateur l'itinéraire à suivre pour trouver un fichier. Pour un petit rappel, relisez la section concernant le sujet dans la leçon précédente "Afficher des images".

1- Créer un lien hypertexte - <A>

Un lien HTML possède toujours deux extrémités : le début (le pointeur, ou le lien) et la fin (la cible).

Le début correspond au texte (ou image) qui pointe vers un autre élément. Souvent, il s'agit du texte souligné et de couleur différente au-dessus duquel le curseur de la souris se transforme. Pour une image, si celle-ci ne possède pas de cadre, seule le changement de forme du curseur indique qu'il s'agit d'un lien.

La fin d'un lien est le fichier qui s'affiche lorsque le lien a été cliqué. Il peut s'agir d'un fichier HTML, d'une partie du même fichier (voir la section suivante sur les ancres), d'une image, de vidéo ou de son. Ce document peut se trouver sur le même site (on utilise alors une adresse relative. Ex : ../images/fichier.html) ou sur un autre site (on utilise alors une adresse absolue. Ex. : http://www.monsite.com/fichier.html).

La mise en oeuvre d'un lien hypertexte est très simple : <A HREF="adresse_document_visé.html">Lien hypertexte</A>

Il vous suffit d'indiquer l'adresse (relative ou absolue) du fichier qui devra se charger quand le texte sera cliqué.

2- Utiliser les ancres - <A name="...">

Grâce aux ancres, il est possible de spécifier une section de texte, à l'intérieur d'un document HTML, qui devra être affichée. Pour être plus clair, imaginons que nous ayons un document contenant des poésies, dont l'une des sections, disons la partie 2, concerne les oeuvres de Baudelaire. Si dans un sommaire nous faisons référence à cette partie, au milieu de beaucoup d'autres. Nos visiteurs, intéréssés particulièrement par Baudelaire et non par les autres, pourrait grâce à un lien aller directement à cette partie. Il nous faut pour cela construire :

  • dans le document contenant les poésies, un marqueur invisible identifiant la partie concernant Baudelaire :
      Insérer une ancre
    • A l'endroit que vous souhaitez identifier, placez la balise suivante : <A name="partie2">II- La poésie de Baudelaire</A>
    • Le nom que vous donnez à une ancre doit être unique à l'intérieur d'un même document HTML.
  • dans le sommaire, un lien pointant vers le fichier, et plus précisement, à l'intérieur de ce fichier, vers l'ancre identifiant cette partie.
      Pointer vers une ancre
    • Lorsque vous construisez votre lien vers le fichier poesie.html (c'est un exemple!), il vous suffit d'ajouter le nom de l'ancre à la suite du nom du fichier. Comme suit : <A HREF="poesie.html#partie2">Baudelaire et le Mal de Vivre</A>
    • N'oubliez surtout pas le signe dièse (#) entre le nom de fichier et celui de l'ancre, car c'est lui qui indique au navigateur de chercher l'ancre "partie2" dans le fichier "poesie.html".

Vous pouvez aussi faire référence à une ancre située dans un même fichier : <A HREF="#partie2">Baudelaire</A>

Voilà. Vous pouvez désormais relier vos documents entre eux. Faites des essais, le plus dur étant d'être très rigoureux dans le chemin que l'on fournit.


1, rue fra.so | Tutoriel HTML 3.2 - Les Listes

Formation au HTML 3.2 : Les Listes

Il est parfois utile de faire appel à une liste dont la présentation sera plus parlante qu'une longue énumération. Le HTML a prévu un certain nombre de type de listes.

I- Listes à puces et listes numérotées

Chaque liste est encadrée des balises indiquant le style de la liste : <UL> pour les listes à puces et <OL> pour les listes numérotées. Chaque élément de la liste est précédé de la balise <LI> (pas de balise de fin) et sera présenté avec un retour à la ligne simple et une puce le précédant.

1- Les listes à puces - <UL>

Code HTML Présentation dans un navigateur
<UL>
<LI>Mon premier élément de liste
<LI>Mon deuxième élément de liste
</UL>
  • Mon premier élément de liste
  • Mon deuxième élément de liste

Nous pouvons néanmoins agir sur la forme de la puce en ajoutant l'attribut type=

+ type="disc (défaut) / circle /square" - circle affiche des puces en forme de cercle évidé et square des carrés.

Voici un exemple :

<UL type="square">
<LI>Mon premier élément de liste
<LI>Mon deuxième élément de liste
</UL>

2- Les listes numérotées - <OL>

Elles se construisent de la même manière que les listes à puces, si ce n'est que les puces sont remplacées par de nombres.

Code HTML Présentation dans un navigateur
<OL>
<LI>Mon premier élément de liste
<LI>Mon deuxième élément de liste
</OL>
  1. Mon premier élément de liste
  2. Mon deuxième élément de liste

Il éxiste deux attributs pour les listes numérotées : le premier permet de choisir le type de numérotation utilisé, et le second de spécifier un nombre de départ de la liste.

+ type="A / a / I / i / 1 (défaut)

A - chaque élément de la liste sera précédé d'une lettre majuscule en guise de numérotation
a - numérotation par des lettres minuscules
I - numérotation par capitales romaines
i - numérotation par minuscules romaines
1 - numérotation par chiffres arabes, option par défaut si l'attribut "type" n'est pas spécifié

+ start=nombre
Cette option peut s'avérer utile si vous décidez de partager une liste en plusieurs colonnes d'un tableau. Le nombre spécifié pour start correspond au numéro (ou la lettre) qui sera attribué au premier élément de la liste.

Exemple de code :

<OL type="i" start=6>
<LI>Mon premier élément de liste
<LI>Mon deuxième élément de liste
</OL>

II - Les listes descriptives - <DL>

Les listes descriptives se différencie des listes à puces et des listes numérotées par le fait que les éléments ne sont pas numérotées mais regroupés dans des rubriques ou parties.

La liste complète est encadrée par les balises <DL> et </DL>. Chaque titre de rubrique est précédé par la balise <DT> (pas de balise de fin) et chaque élément de rubrique et précédé de <DD> (pas de balise de fin).

Code HTML Présentation dans un navigateur
<DL>
<DT>Ma première rubrique
<DD>Mon premier élément de première rubrique
<DD>Mon deuxième élément de première rubrique
<DT>Ma deuxième rubrique
<DD>Mon premier élément de première rubrique
<DD>Mon deuxième élément de première rubrique
</DL>
Ma première rubrique
Mon premier élément de première rubrique
Mon deuxième élément de première rubrique
Ma deuxième rubrique
Mon premier élément de deuxième rubrique
Mon deuxième élément de deuxième rubrique

III- Les listes <DIR> et <MENU>

Ces deux types de listes (qui disparaissent dans le HTML 4) sont très similaires à la liste à puces. Seul le rendu de ces listes est différent (ce rendu diffère même selon le navigateur que vous utilisez). Je me contenterai donc de vous donner deux exemples de codes :

Liste Menu | Liste Dir (répertoire ou listing)
<MENU> <LI>Mon premier élément de liste <LI>Mon deuxième élément de liste </MENU> | <DIR> <LI>Mon premier élément de liste <LI>Mon deuxième élément de liste </DIR>

IV- Mêler les listes

Vous savez donc construire une liste simple, quelquesoit sont type. Imaginons maintenant que le sommaire que vous construisez soit compliqué. J'entend par là que certaines parties contiennent des sous-parties qui contiennent elles-mêmes des éléments, ...

Pour bien marquer les différentes parties de ce sommaire, vous pouvez "imbriquer" différentes listes, et même des listes de types différents. Voici un exemple :

<OL type="I">
<LI>Les débuts de la poésie
     <UL>
     <LI>Le Moyen-Age
     <LI>La Renaissance
     </UL>
<LI>Les poètes les plus connus
     <UL>
     <LI>Baudelaire
     <LI>Verlaine
     </UL>
</OL>

Bien sûr, mon exemple reste simple, mais rien ne vous empêche, dans vos essais, de compliquer la structure. Gardez seulement à l'esprit que le tout doit rester lisible pour votre lecteur (si le sommaire doit prendre une demi-journée de lecture...)


1, rue fra.so | Tutoriel HTML 3.2 - Les Images-Maps

Formation au HTML 3.2 : Les Images-Maps

Qu'est-ce que c'est : une clickable image-map est une image dont différentes zones, dites "chaudes" ou "actives", agissent comme des liens hypertextes. Chaque zone renvoit vers un fichier différent.

Note : pour réaliser des image-maps, votre logiciel de retouche d'image doit vous fournir les coordonnées en x et y des zones que vous voulez définir. Notez ces coordonnées avant de passer sous l'éditeur de texte.

1- Déclarer une image en image-map

En fait, déclarer une image comme utilisant un map est des plus simple : il suffit d'ajouter l'attribut usemap="#nomMap" dans la balise <IMG>. Le nom donné au map est libre, mais n'oubliez pas le signe dièse (#) qui le précède (c'est le même principe que pour les ancres)

Voici un exemple :

<IMG SRC="images/vacances.gif" width="300" height="300" usemap="#vacances">

Le nom de notre map est donc "vacances". Le navigateur va donc chercher à l'intérieur du fichier en cours de lecture la définition du map "vacances". Nous aurions pu placer cette définition de map dans un autre fichier, voire un autre répertoire. Notre attribut deviendrait : usemap="../repertoire2/fichierZ.html#vacances"

Il nous suffit en fait d'indiquer au navigateur le chemin pour trouver le map en question.
La plupart du temps, on définit le map juste après l'implémentation de l'image-map, ou à la fin du fichier contenant l'image-map. Mais si vous avez beaucoup d'image-maps sur votre site, il peut être intéressant de rassembler les définitions de maps dans un fichier HTML externe.

2- Définir le map

Comme je l'ai précisé en introduction, il vous faut un moyen d'obtenir les coordonnées en x et y pour les différentes zones que vous voulez définir. La plupart des logiciels de graphisme ont aujourd'hui cette option.

Voici un exemple de définition de map :

<MAP name="vacances">
<AREA shape="rect" coords="3, 3, 30, 30" HREF="fichier1.html">
<AREA shape="rect" coords="267, 267, 297, 297" HREF="fichier2.html">
</MAP>

C'est un exemple simple. Seulement deux zones actives : la première en haut à gauche renvoit vers "fichier1.html"; la seconde en bas à droite renvoit vers "fichier2.html". Le reste de l'image est inactif.

La balise <AREA> définit une nouvelle zone active. Son attribut HREF="..." indique le fichier visé par cette zone hypertexte.

Il est possible de définir différentes formes de zones actives :

+ rectangulaire : shape="rect" - on définit alors les coordonnées du point en haut à gauche en x puis en y, puis le point en bas à droite en x puis en y. Ce qui donne : coords="x1, y1, x2, y2"

+ cercle : shape="circle" - on définit le point du cercle le plus à gauche, celui le plus en haut (ce qui permet de situer la cercle sur l'image), puis le rayon en pixels. On obtient donc : coords="x1, y1, x2, y2, rayon"

+ polygone : shape="polygon" - on définit les coordonnées en x et y pour chaque point du polygone (comme pour le rectangle, mais il y a plus de points).

3- Et si le navigateur ne comprend pas les images-maps?

Si le navigateur de votre visiteur ne comprend pas les image-maps, il interprétera l'image entière ... comme une image!
Pour remédier à cela, vous pouvez fournir un fichier alternatif contenant tous les liens (sous forme de texte, par exemple) :

<A HREF="fichierbis.html"><IMG SRC="images/vacances.gif" width="300" height="300" usemap="#vacances"></A>

Les navigateurs qui ne comprennent pas les maps chargeront alors "fichierbis.html", alors que les autres passeront à la définition du map.


1, rue fra.so | Tutoriel HTML 3.2 - Les Moteurs de Recherche

Formation au HTML 3.2 : Les Moteurs de Recherche

Vous avez construit votre site Internet. Mais voilà, il vous faut maintenant le faire connaître. Le travail est en partie fait sur certains moteurs de recherche. Ceux-ci utilisent en effet les balises META que l'on place dans l'en-tête du document HTML. Pour d'autres, il faut s'inscrire.

1- Les balises META

Placées dans l'en-tête de vos documents HTML, ces balises permettent aux créateurs de sites Internet de fournir un certain nombre d'informations sur le site, la page ou le créateur lui-même.

Il n'éxiste pas réellement de règles en la matière. On place généralement ces balises après <TITLE> ... </TITLE>. Pour ce qui est du contenu, voici quelques balises régulièrement rencontrées.

+ <META HTTP-EQUIV="refresh" CONTENT="5; http://fichier_a_charger">
Cette balise permet de charger automatiquement un deuxième fichier ("fichier_a_charger"> au bout de 5 secondes.

+ <META TYPE="author" CONTENT="fra.so">
Indique que l'auteur de la page est fra.so

+ <META TYPE="keywords" CONTENT="art, html, ...">
Indique une liste de mots-clés correspondant au contenu de la page (éviter les accents). Ces mots-clés sont susceptibles d'être les critères entrés dans un moteur de recherche.

+ <META TYPE="lang" CONTENT="fr, en, us-en, span">
Indique la ou les langues accéssibles sur le site.

+ <META TYPE="description" CONTENT="breve description par des phrases du contenu du site">
Petite description du contenu du site.

Il éxiste beaucoup d'autres balises META. En demandant l'affichage des sources des documents que vous consultez, vous en rencontrerez sûrement. Si vous comprenez l'anglais, leur sens est souvent évident.

2- S'inscrire sur un moteur de recherche

Il éxiste un très bon site qui vous permet de vous inscrire sur les moteurs de recherche les plus connus, les plus utilisés, etc. Ce site, c'est http://www.altern.org/promoweb/

Voici cependant une liste des sites sur lesquels s'inscrire, en gras, les incontournables :

  • http://www.excite.com - américain
  • http://www.hotbot.com - américain
  • http://www.northernlight.com - américain
  • http://www.infoseek.com - américain
  • http://www.altavista.com - américain
  • http://www.webcrawler.com - américain
  • http://www.lycos.com - américain
  • http://www.planetsearch.com - américain
  • http://www.newhoo.com - anglais
  • http://fr.excite.com - version française de Excite.com
  • http://www.wanadoo.fr - rubrique quiquoiou - français
  • http://www.voila.fr - français
  • http://lokace.iplus.fr - français
  • http://www.y-web/home-fr.html - européen
  • http://www.yahoo.fr - français
  • http://www.yahoo.com - américain
  • http://www.nomade.fr - français

Cette liste n'est forcément pas éxhaustive, mais elle permettra déjà à votre site d'être vu.


1, rue fra.so | HTML 3.2 : Recapitulatif

Formation au HTML 3.2 : Récapitulatif des balises

Chose promise, chose due. Voici un récapitulatif des balises présentées dans cette petite formation au HTML 3.2.

Balises | Attributs | Commentaires
Structure du document HTML
<doctype HTML Public "-//W3C//DTD HTML 3.2//EN"> | Déclaration de la version de HTML utilisée dans le document
<HTML> .... </HTML>
<HEAD> ... </HEAD> | En-tête d'un document HTML
<BODY> ... </BODY> background="fichier graphique"
bgcolor="couleur ou code héxadécimal"
text="couleur ou code héxadécimal"
link="couleur ou code héxadécimal"
vlink="couleur ou code héxadécimal"
alink="couleur ou code héxadécimal" 		Corps du document HTML
<!-- .... //--> Commentaires personnels
<ADDRESS> ... </ADDRESS> | Vos coordonnées
<META ....> http-equiv="refresh"
type="..."
content="..." 		Informations sur le document et/ou son auteur
Justification
<P> | retour à la ligne plus une ligne vierge
<P> ... </P> | align="left / center / right" | alignement du paragraphe
<BR> | retour à la ligne simple
<CENTER>...</CENTER> | centrer
<DIV> ... </DIV> | align="left / center / right" | aligner plusieurs éléments en même temps
<HR> align="left / center / right"
width="pixels ou %"
height="pixels"
noshade 		trait horizontal de séparation
<BLOCKQUOTE>...</BLOCKQUOTE> | Retrait de paragraphe
<PRE>...</PRE> | le texte est affiché tel que saisi dans l'éditeur de texte
Style de caractère
<Hn>...<Hn> | Titres, avec des niveaux allant de 1 à 6 (croissant en importance)
<B>...</B> | gras

<I>...</I>

italique
<U>...</U> | souligné
<TT>...</TT> | police monospace (type Courier)
<STRIKE>...</STRIKE> | barré
<S>...</S> | barré
Mise en évidence
<XMP>...</XMP> | code HTML
<DFN>...</DEF> | définition
<VAR>...</VAR> | variable
<SAMPLE>...</SAMPLE> | exemple
<CITE>...</CITE> | citation
<EM>...</EM> | mise en évidence
Les listes
<UL>...</UL> | type="square / circle /disc" | liste à puces
<OL>...</OL> type="1 / A / a / I / i"
start="n" 		liste numérotée
<LI> | élément de liste (à puces ou numérotée, dir ou menu)
<DL>... </DL> | liste descriptive
<DT> | titre de rubrique dans une liste descriptive
<DD> | élément de rubrique dans une liste descriptive
<MENU>...</MENU> | liste en présentation condensée
<DIR>...</DIR> | liste sous forme de listing
Les images
<IMG> src="chemin/fichier_graphique"
align="left / center / right"
height="pixels"
width="pixels"
lowsrc="fichierBis"
alt="description"
border="pixels"
vspace="pixels"
hspace="pixels"
usemap="nom_map"
Les liens hypertextes
<A>...</A> href="fichier_cible"
target="fenetre_cible" (noms réservés : "_top, _blank, _parent")
name="nom_de_l'ancre"
Les polices de caractères
<FONT>...</FONT> face="police1, police2, ..."
size="+n ou valeur absolue (1 à 7)" 		sélectionne la police de caractère et sa taille
<BASEFONT> | size="valeur relative ou valeur absolue" | spécifie la taille par défaut de la police pour le texte qui suit
<SUP>...</SUP> | caractères en exposant
<SUB>...</SUB> | caractères en indice
Les couleurs
aqua, black, blue, fuschia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow | les 16 couleurs standard
#code héxadécimal | codes héxadécimaux permettant de couvrir toutes les couleurs
Les tableaux
<TABLE>....</TABLE> bgcolor="couleur ou code héxadécimal"
background="fichier graphique"
border="pixels"
bordercolor="couleur ou code héxadécimal"
align="left / center / right"
height="pixels"
width="pixels ou %"
cellpadding="pixels"
cellspacing="pixels" 		Marque les limites d'un tableau
<CAPTION>...</CAPTION> | titre pour le tableau
<TH>...</TH> align="left / center / right"
valign="top / middle / bottom"
width="pixels / %"
height="pixels / %"
bgcolor="couleur / code héxadécimal"
background="fichier graphique" 		Cellule de titre pour une rangée ou une colonne de tableau
<TR>...</TR> align="left / center / right"
valign="top / middle / bottom"
width="pixels / %"
height="pixels / %"
bgcolor="couleur / code héxadécimal"
background="fichier graphique" 		construit une ligne de tableau
<TD>...</TD> align="left / center / right"
valign="top / middle / bottom"
width="pixels / %"
height="pixels / %"
bgcolor="couleur / code héxadécimal"
background="fichier graphique" 		construit une cellule de tableau
Les frames
<FRAMESET>.....</FRAMESET> cols="pixels / % / *"
rows="pixels / % / *"
framespacing="pixels"
frameborder="pixels"
border="pixels"
bordercolor="code héxadécimal"
marginheight="pixels"
marginwidth="pixels"
scolling="yes / no / auto" 		Vient en lieu et place de l'élément <BODY> dans un fichier frameset.
<FRAME>...</FRAME> src="fichier"
name="nom_de_fenêtre" 		définit chaque cadre/frame
<NOFRAMES>...</NOFRAMES> | contenu alternatif pour les navigateurs ne supportant pas les frames
Les images-maps
<MAP>...</MAP> | name="nom_du_map" | délimite la définition des maps (zones d'activité de l'image)
<AREA> shape="rect / circle / polygon"
coords="x1, y1, x2, y2"
href="fichier_cible_de_la_zone" 		définition d'une zone active. Voici les coordonnées à saisir pour chaque forme :
+ rect : coin supérieur gauche et coin inférieur droit
+ circle : point à gauche, point en haut, rayon
+ polygon : chaque point


1, rue fra.so | Tutoriel HTML 3.2 - Introduction

Formation au HTML 3.2 : Structure généraled'un document HTML

Voici un exemple de structure générale basique que tout document HTML se doit d'avoir :

<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<TITLE>Titre de votre document</TITLE>
<!-- Commentaires personnels non affiches dans le navigateur //-->
</HEAD>
<BODY>
Contenu de votre document qui sera affiche dans le navigateur de votre visiteur : vous pouvez placer ici du texte, des images, des sons, des applets java, des scripts ou encore de la video.
<ADDRESS>
Adresse de votre page
Date de creation ou de mise a jour
Votre email pour recevoir des commentaires
</ADDRESS>
</BODY>
</HTML>

Nous allons maintenant détailler cet exemple et voir la signification des balises qui y sont présentes. Tout document HTML possède deux parties : un en-tête (l'élément <HEAD>) et un corps (l'élément <BODY>).
Le tout - en-tête et corps - est encadré par les balises <HTML> et </HTML>. Elles indiquent au navigateur qu'il s'agit de code HTML.

I- L'en-tête du document : <HEAD>

Les éléments contenus dans l'en-tête du document, délimité par les balises <HEAD> et </HEAD>, ne sont pas affichés dans le navigateur internet, à l'exception du contenu de l'élément <TITLE>.

1- La déclaration de la version de HTML

C'est théoriquement la première ligne de tout document HTML, et elle se trouve avant toute autre déclaration :

Dans mon exemple, je signale que la version du HTML utilisée est la 3.2, en version anglaise - EN. En fait, il n'éxiste que la version anglaise.

2- Le titre du document : <TITLE>

Ce sont les balises <TITLE> et </TITLE> qui permettent de donner un titre à vos documents. Le contenu de ces balises apparait dans la barre de titre de la fenêtre du navigateur.

Cet élément est obligatoire, sans quoi vos pages seront répertoriées sous l'intitulé "Sans titre" ou "Untitled" par certains moteurs de recherche sur Internet.

3- Les commentaires

Tout ce qui se trouve entre les balises <!-- et //--> correspond à un commentaire ou une annotation personnelle qui ne sera pas affiché dans le navigateur. Cet élément peut se placer aussi bien dans l'en-tête ou le corps du document.
Les commentaires peuvent vous servir à séparer logiquement les parties de votre document ou encore à marquer la logique de votre construction. Pensez à utiliser les commentaires. Cela facilite grandement le travail lorsqu'on doit reprendre le fichier, pour une mise à jour par exemple.

II- Le corps du document : <BODY>

C'est là que vous disposez tous les éléments qui seront affichés dans le navigateur de votre visiteur.
Nous verrons par la suite comment implémenter ces éléments, qu'il s'agisse de texte, d'images ou de multimédia.

Laissez votre adresse : <ADDRESS>

Cet élément, situé au début ou à la fin du corps du document, vous permet de laisser vos coordonnées. La manière dont sera rendu le contenu de cet élément dépend directement du navigateur (italique, gras ou autre).
Généralement, on laisse comme coordonnées l'adresse du site, de la page consultée, la date de création ou de modification, et l'e-mail.

Voici un exemple de code :

<ADDRESS>
http://perso.wanadoo.fr/franck.sophie/HTML32/<BR>
Mise a jour : mars 1999<BR>
E-mail : fra.so@wanadoo.fr
</ADDRESS>


1, rue fra.so | Tutoriel HTML 3.2 - Les Tableaux

Formation au HTML 3.2 : Les Tableaux

Nous entamons ici une partie un peu plus ardue. Pas par sa complexité, mais par le nombre de balises et d'attributs que nous allons voir. Mais cela en vaut la peine. Tout d'abord, un tableau permet de structurer la présentation des données, mais surtout - et comme bon nombre d'internautes l'ont compris - les tableaux permettent de palier les lacunes du HTML en matière de mise en page : il devient possible d'aligner plusieurs lignes de texte à côté d'une image, de présenter le texte en colonnes, d'aligner correctement plusieurs images, d'imbriquer des tableaux dans un tableau, et j'en passe.

Nous allons donc voir dans un premier temps la balise <TABLE> et ses attribut, puis les différentes balises de cellule. Enfin, un exemple de code pour un tableau vous permettra de visualiser la structure de l'ensemble.

I- Implémenter un tableau - <TABLE>

Les balises <TABLE> et </TABLE> marquent le début et la fin d'un tableau.

Il est possible d'ajouter un certain nombre d'attribut à la balise de début pour modifier l'aspect du tableau.

Les attributs de <TABLE> :

+ bgcolor="couleur standard / code héxadécimal" - spécifie la couleur de fond du tableau.

+ background="fichier graphique" - spécifie un fichier image en guise de fond pour le tableau. Les formats GIF et JPG sont reconnus universellement.

+ border="pixel" - spécifie l'épaisseur en pixels du cadre et des bordures intérieures du tableau ("0" signifie qu'il n'y a pas de bordure, et 1 est la valeur par défaut).

+ bordercolor="couleur standard / code héxadécimal" - spécifie la couleur du cadre et des bordures intérieures du tableau.

+ height="pixels" - spécifie la hauteur en pixels du tableau.

+ width="pixels / %" - spécifie la largeur du tableau, soit en pixels, soit en pourcentage par rapport à la taille de la fenêtre.

+ cellpadding="pixels" - spécifie l'épaisseur des bordures intérieures du tableau

+ cellspacing="pixels" - spécifie l'espace en pixels entre le contenu des cellules et le bord de la cellule.

Exemple de code :

<TABLE border="0" align="center" bgcolor="gray" width="50%" cellpadding="0" cellspacing="2">

Ici, le tableau n'aura pas de bordure, aura un fond gris, une largeur égale à la moitié de celle de la fenêtre du navigateur. L'épaisseur des bordures internes sera nulle et l'espace entre le bord des cellules et leur contenu sera de 2 pixels.

II- Les cellules d'un tableau

1- Les titres

Un tableau se lit et se construit de haut en bas, en suivant chaque ligne de gauche à droite.

- <CAPTION>Titre du tableau</CAPTION> : fournit un titre au tableau.

- <TH>Colonne 1</TH> : utilisées à la place des balises de cellule (voir plus bas), elles permettent de donner un titre à une colonne ou à une rangée d'un tableau.

Attributs de <TH> :

+ align="left (défaut) / center / right" - spécifie l'alignement des données à l'intérieur de la cellule (gauche, centre ou droite).

+ valign="top / middle (défaut) /bottom" - spécifie l'alignement vertical des données à l'intérieur de la cellule (en haut, au milieu ou en bas).

+ bgcolor="couleur standard / code héxadécimal" - spécifie la couleur de fond de la cellule.

+ background="fichier graphique" - spécifie un fichier image en guise de fond pour la cellule. Les formats GIF et JPG sont reconnus universellement.

+ height="pixels" - spécifie la hauteur de la cellule de titre.

+ width="pixels / %" - spécifie la largeur de la cellule de titre (% par rapport à la largeur totale du tableau).

2- Les cellules

+ Pour créer une nouvelle ligne dans le tableau (y compris pour les titres de colonnes utilisant les balises <TH>) : <TR>vos cellules</TR>

Attributs de <TR> :

+ align="left (défaut) / center / right" - spécifie l'alignement des données à l'intérieur des cellules de la rangée (gauche, centre ou droite).

+ valign="top / middle (défaut) /bottom" - spécifie l'alignement vertical des données à l'intérieur des cellules de la ligne (en haut, au milieu ou en bas).

+ bgcolor="couleur standard / code héxadécimal" - spécifie la couleur de fond des cellules de la ligne.

+ background="fichier graphique" - spécifie un fichier image en guise de fond pour les cellules de la ligne. Les formats GIF et JPG sont reconnus universellement.

+ height="pixels" - spécifie la hauteur de la ligne.

+ Pour créer une cellule : <TD>Le contenu de la cellule (texte, images,...)</TD>

Attributs de <TD> :

+ align="left (défaut) / center / right" - spécifie l'alignement des données à l'intérieur de la cellule (gauche, centre ou droite).

+ valign="top / middle (défaut) /bottom" - spécifie l'alignement vertical des données à l'intérieur de la cellule (en haut, au milieu ou en bas).

+ bgcolor="couleur standard / code héxadécimal" - spécifie la couleur de fond de la cellule.

+ background="fichier graphique" - spécifie un fichier image en guise de fond pour la cellule. Les formats GIF et JPG sont reconnus universellement.

+ height="pixels" - spécifie la hauteur de la cellule.

+ width="pixels" - spécifie la largeur de la cellule.

+ colspan="nombre de colonnes" - spécifie que la cellule occupe plusieurs colonnes (vers la droite).

+ rowspan="nombre de lignes" - spécifie le nombre de lignes occupées par la cellule (vers le bas).

III- Exemple de code pour un tableau

<TABLE width=400 border=1 bordercolor="#000000" cellpadding=2 cellspacing=2 bgcolor="gray">

<TR>
<TD align=center width=150>cellule 1 de la ligne 1</TD>
<TD align=center width=250>cellule 2 de la ligne 1</TD>
</TR>

<TR>
<TD align=center colspan=2 bgcolor="yellow">cellule unique de la ligne 2</TD>
</TR>

<TR>
<TD>cellule 1 de la ligne 3</TD>
<TD rowspan=2 bgcolor="red">cellule 2 des lignes 3 et 4</TD>
</TR>

<TR>
<TD>cellule 1 de la ligne 4</TD>
</TR>

</TABLE>

Ce qui devrait apparaitre comme suit :
cellule 1 de la ligne 1 | cellule 2 de la ligne 1
cellule unique de la ligne 2
cellule 1 de la ligne 3 | cellule 2 des lignes 3 et 4
cellule 1 de la ligne 4

Faites des essais, vous prendrez mieux conscience de l'utilisation des balises pour les tableaux. Souvenez-vous qu'il est plus facile de faire quelque chose quand on sait à quoi doit ressembler le résultat final. Aussi n'hésitez pas dans un premier temps à crayonner la forme de votre tableau, à prévoir le nombre de lignes, le nombre de colonnes etc. Des commentaires HTML bien placés vous aiderons lors de révisions ultérieures.


1, rue fra.so | HTML 4 - Sommaire

Cette référence HTML a été écrite et créée par Franck:
http://perso.wanadoo.fr/franck.sophie/

Suivant

HTML 4 : Sommaire

Voici une présentation du nouveau standard du HTML, appelé à se développer tant les possibilité qu'il offre sont formidables. Il s'agit en fait d'un résumé du document officiel du W3C (World Wide Web Consortium). Il a en outre l'avantage d'être en français. Je l'ai arbitrairement divisé en 11 chapitres pour permettre une consultation plus pratique et plus rapide sur le réseau.

Structure d'un document HTML
Version de HTML
La balise <HTML>
L'en-tête du document : <HEAD>
<TITLE>
<META>
Le corps du document
<BODY>
<ID> et <CLASS>
<SPAN> et <DIV>
Les titres : <H1>, <H2>,...
<ADDRESS>
Le traitement du texte
L'espace
Structurer le texte
Sections de phrases
<BLOCKQUOTE> et <Q>
<SUP> et <SUB>
Lignes et paragraphes
Les tirets
<PRE>
Les mises à jour
Les listes
<UL>, <OL> et <LI>
<DL>, <DT> et <DD>
Les types de listes
<DIR> et <MENU>
Les tableaux
Elements de structure
<TABLE>
<CAPTION>
<THEAD>, <TFOOT> et <TBODY>
<COLGROUP> et <ROWGROUP>
<TR>
<TH> et <TD>
Formater un tableau
Bordures
Alignement
Marges
Les liens
<A>
Lier les documents : <LINK>
Résoudre les adresses relatives : <BASE>
Les objets
Les images : <IMG>
La balise générique : <OBJECT>
Règle de rendu
L'attribut PARAM
Nommer un objet
Déclaration et implémentation de l'objet
Les applets
<IFRAME>
Les image-maps
<MAP> et <MAP AREA>
server-side map
Attributs des objets
Dimensions
Espace
Bordure
Texte alternatif
Les frames
Introduction
Créer des frames
<FRAMESET>
<FRAME> Spécifier le cadre-cible
Cible par défaut
Ordre des déclarations Contenu alternatif
<NOFRAMES>
LONGDESC
<IFRAME>
L'alignement
Formater une page
BGCOLOR
ALIGN
Objets flottants
Les polices
Style
Taille, couleur et font
<HR>
Les feuilles de style - css
Introduction
Ajouter du style
Langage par défaut
Style interne (en ligne)
La balise <STYLE>
Les type de media
Les css externes
Css préférées et css alternatives
Css externe
Déclarer une css
Cacher les css
Charger les css par HTTP Header
Les formulaires
Les contrôles
<FORM>
<INPUT>
<BUTTON>
Les menus de formulaire
<SELECT>
<OPTION>
<OPTGROUP>
<TEXTAREA>
<ISINDEX>
<LABEL>
Structurer le formulaire <FIELDSET> et LEGEND>
Améliorer la navigation : <TABINDEX>, <ACCESSKEY>
Les contrôles DISABLE et READONLY
Envoyer un formulaire
Méthode de traitement
Validité des données
Traitement et envoi
Encodage
Les scripts
<SCRIPT>
Spécifier le langage
Les évènements
Alternative

Suivant


1, rue fra.so | HTML 4 - Aligner

HTML 4 : Aligner

Sommaire

  1. Formater une page

    1. Bgcolor

    2. Align
    3. Objets flottants
  2. Les polices
    1. Le style
    2. Taille, couleur et font
  3. <HR>

I- Formater une page HTML

1. La couleur de fond : l'attribut BGCOLOR

Peut se placer à l'intérieur de plusieurs éléments tels que BODY, TABLE, TR, TH, TD, etc.

Syntaxe :
bgcolor="couleur (parmi les 16 noms reconnus / #valeur héxadécimale (attention au dièse)"

2. L'alignement : l'attribut ALIGN

Tout comme BGCOLOR, peut s'insérer dans beaucoup d'éléments

Syntaxe :
align="left/right/center/justify"

Exemple 1 de code :
<HEAD>
<STYLE TYPE="text/css">
body { text-align : center }
</STYLE>
</HEAD>
<BODY>
Tous le texte du document est centré.
</BODY>

Exemple 2 de code :
<HEAD>
<STYLE TYPE="text/css">
H1.wood { text-align : center }
</STYLE>
</HEAD>
<BODY>
<H1 CLASS="wood">Texte de la classe définie dans STYLE : sera donc centré.</H1>
texte du document en alignement normal
</BODY>

3. Les objets flottants

Les objets et images comportant l'attribut ALIGN sont dits flottants. En effet le texte peut couler le long de l'un de leur côtés.

Les autres objets et images ne comportant pas l'attribut ALIGN ou quand celui-ci est à la valeur CENTER - exception confirmant la règle - sont dits "inline, c'est-à-dire que le texte ne peut pas couler sur leurs côtés.

Pour les éléments flottants, l'attribut CLEAR de l'élément BR permet de contrôler le positionnement du texte autour de l'objet.

Syntaxe :
<BR CLEAR="
+ none (défaut, le texte suit dans la présentation active)
+ left (la ligne suivante reprendra sous l'objet avec alignement à gauche)
+ right (la ligne suivante reprendra sous l'objet avec alignement à droite)
+ all (comme left, mais avec alignement justifié)"

Exemple de code :
Dans l'entête :
<STYLE TYPE="text/css">
br.mybr { clear : left }
</STYLE>
Dans le corps du document :
<BR CLASS="mybr">

Retourner en haut de la page

II- Les polices

Dans tous les cas, il est préférable d'utiliser les css. Les balises <FONT> et <BASEFONT> sont dépréciées en faveur des css.

1. Les styles de polices

<TT> (TeleType, monospaced font) | <I> (Italic)
<B> (Bold - Gras) | <BIG> (Big font)
<U> (souligné) | <SMALL> (Small font)
<STRIKE> (barré) |

Exemple de code :
<STYLE TYPE="text/css">
BODY { font-style : italic; color : green }
</STYLE>

2. Les modifiants

Il s'agit-là d'attributs qui modifient l'apparence des polices de caractère. Ils complètent la balise de style

Syntaxe :
size="entier (de 1 à 7 vers le + grand) / relatif (de -3 à +3)"
color="couleur (parmi les 16 noms reconnus) / #héxadécimal" (attention au DIESE)
face="nom de la police" : il est possible de spécifier une liste, séparée par virgules, donnant un ordre de préférence selon la disponibilité des polices sur le système de l'utilisateur.

Exemple de code :
<STYLE TYPE="text/css">
BODY { font-size : 12pt; face : Arial, Helvetica; color : green }
</STYLE>

Retourner en haut de la page

III- Les traits : la balise <HR>

Attributs :
align="left/right/center" (défaut=center)
noshade : pas d'effet 3D dans le rendu
size="pix" : hauteur
width="pix / %" : longueur


1, rue fra.so | HTML 4 - Les Feuilles de Style

HTML 4 : Les Feuilles de Style

Sommaire

  1. Introduction
  2. Ajouter du style
    1. langage par défaut
    2. style interne
    3. la balise <Style>
    4. type de media
  3. Les css externes
    1. Css préférée et alternative
    2. Css externe
  4. Déclarer une css
  5. Cacher les css
  6. Charger les css par HTTP Headers

I- Introduction

Les feuilles de style (ou css) permettent de faciliter le travail de présentation et de personnalisation - sans passer par des solutions propriétaires, de la programmation, le détournement des tableaux en vue de présentations, ...

Exemple de code :
p.special {
color : green
border : solid red;
}

Les css peuvent se placer soit dans HEAD soit dans un fichier externe avec une extension ".css" (dépend du langage utilisé)
<HEAD>
<LINK HREF="special.css" REL="stylesheet" TYPE="txt/css">
</HEAD>

Les css permettent de :

  • séparer les données de style du contenu
  • indépendance du langage
  • partager ou mêler des css
  • spécifier les médias pris en charge
  • offrir un choix du style à appliquer
  • améliorer les performances

Retourner en haut de la page

II- Ajouter du style au HTML

Il éxiste plusieurs normes de css : css1 et css2 entre autres.

1. Spécifier le langage par défaut

Cela s'opère via une meta donnée :
<META HTTP-EQUIV="content-style-type" CONTENT="text/css">

2. Le style interne au document

Il faut alors utiliser l'attribut STYLE, inclus dans l'élément auquel il s'applique, et à lui seul :
<P STYLE="font-size: 12 pt; color: fuchsia">Texte</P>

Les propriétés sont déclarées ainsi :
Nom: valeur; Nom: valeur

Attention à ne pas confondre la balise STYLE qui s'insère dans HEAD et s'applique au document (ou à des éléments nommés via ID ou CLASS) et l'attribut STYLE qui lui est insérer dans le code HTML et ne s'applique qu'à l'élément auquel il est adjoint.

3. La balise STYLE

placé dans HEAD, permet de définir le style de :

  • tous les éléments d'une catégorie (i.e. : <P>)
  • les éléments répondant à une classe (via CLASS)
  • un seul élément appelé par son nom unique (via ID)

Attributs :
type="content-type" : spécifie le langage de la css et remplace celui par défaut
media : "media-descriptor" : stipule le média de rendu (écran, téléphone, oral, ...)
title="texte" : nom de la css

Exemple 1 de code : s'applique à tous les H1 du document
<HEAD>
<STYLE TYPE="text/css">
h1 {border-width: 1; border: solid; text-align: center}
</STYLE>
</HEAD>

Exemple 2 de code: ne s'applique qu'aux éléments de la classe
<HEAD>
<STYLE TYPE="text/css">
h1.myclass {border-width: 1; border: solid; text-align: center} </STYLE>
</HEAD><BODY>
<H1 CLASS="myclass">Texte</h1>

Exemple 3 de code : ne s'applique qu'à un seul élément, appelant une ID
<HEAD>
<STYLE TYPE="text/css">
#myId {border-width: 1; border: solid; text-align: center}
1 </STYLE>
</HEAD><BODY>
<H1 ID="myId">Texte</H1>

Les balises <SPAN> et <DIV> permettent d'étendre considérablement les possibilités de présentation.

4. Les types de médias

C'est via l'attribut MEDIA de l'élément STYLE :
MEDIA:"projection"; "aural"; etc.

Retourner en haut de la page

III- Les feuilles de style externes

Cela présente plusieurs avantages :

  • mises à jour de site plus aisées
  • changer le style sans toucher le contenu du site
  • chargement des css selon le media de l'utilisateur

1. Css préférée et alternative

Il est possible de créer plusieurs feuilles de style afin d'offrir un choix à l'utilisateur, en fonction de ses goûts ou de ses besoins (browser en mode texte, imprimer, etc.)

2. Spécifier une css externe

Cette opération se fait via l'élément LINK (cf introduction)

Les attributs obligatoires pour faire appel à une css externe via LINK sont

  • href="adresse de la css"
  • type="text/css" : type de données à charger
  • place de la css, via l'attribut REL
  • rel="persistent" - pas d'attribut TITLE
  • rel="preferred" et TITLE="nom de la css"
  • rel="alternate" et TITLE="nom de la css"

Un élément META permettra aussi de déclarer une css préférée :
<META HTTP-EQUIV="Default-Style" CONTENT="nom de la css">

Si plusieurs LINK déclarent une css préférée, celle dont la déclaration est la première à apparaître est vrai. Il faut aussi noter que les déclarations en META ou HTTP Headers sont prioritaires sur les autres déclarations.

Retourner en haut de la page

IV- Cascading Style Sheet

Cascading introduit la possibilité de mêler plusieurs sources de style pour un même document ou de les partager sur plusieurs documents. Il est cependant préférable de ne pas mélanger les langages de style.

Exemple de code :
<LINK REL="alternate stylesheet" TITLE="compact" HREF="small-font.css" TYPE="text/css">
<LINK REL="alternate stylesheet" TITLE="compact" HREF="font.css" TYPE="text/css">
<LINK REL="alternate stylesheet" TITLE="print" HREF="print.css" TYPE="text/css">
<LINK REL="stylesheet" TITLE="common" HREF="common.css" TYPE="text/css">

Ainsi, la dernière déclaration est pour la css "persistent". Elle est chargée dans tous les cas.

Les trois premières sont des css "alternate", dont le choix est laissé à l'utilisateur. Le navigateur chargera la css "alternate" choisie par l'utilisateur et la css "persistent (common).

Ce genre de pratique permet de préparer des css pour des médias spécifiques (écran mode texte, browser parlé, téléphone portable, ...)

Retourner en haut de la page

V- Cacher le style aux navigateurs

Beaucoup de navigateurs d'anciennes générations ne supportent pas le html 4 et ces feuilles de style. Aussi, comme pour les langages de script, on place les données de style dans des balises de commentaire.

Exemple de code :
<STYLE TYPE="txt/css">
<!--
Tous les éléments de style que l'on souhaite
-->
</STYLE>

Retourner en haut de la page

VI- Charger les css par HTTP HEADERS

Pour appliquer des style à tout un site. (équivaut à LINK)

Attention à la syntaxe :
link : <http://uri/common.css>; rel=stylesheet>

Equivaut à :
<LINK REL="StyleSheet" HREF="http://uri/common.css" TYPE="text/css">


1, rue fra.so | HTML 4 - Les Formulaires

HTML 4 : Les Formulaires

Sommaire

  1. Les contrôles
  2. <Form>
  3. <Input>
  4. <Button>
  5. Menus de formulaires
    1. <select>
    2. <option>
    3. <optgroup>
  6. <Textarea>
  7. <Isindex>
  8. <Label>
  9. Structurer : <fieldset> et <legend>
  10. Améliorer la navigation
    1. <tabindex>
    2. Accesskey
  11. Contrôles disable et readonly
  12. Envoyer un formulaire
    1. Méthode de traitement
    2. Validité des données
    3. Traitement et envoi
    4. Encodage

I- Les contrôles

Tout contrôle doit au moins avoir :

  • une propriété initiale (chaîne de caractères)
  • une valeur initiale (chaîne de caractères)

Ces valeurs peuvent ensuite évouler selon les choix de l'utilisateur et/ou des scripts qui leur sont associés.

Les contrôles sont dits valides quand la paire nom - valeur est expédiée.

Les types de contrôle :

  • button : implémenté via les éléments <BUTTON> ou <INPUT>
    • submit button : envoi des données
    • reset button : remise à leur valeur initiale des valeurs
    • push button : pas de comportement par défaut - chaque bouton est lié à un script éxécuté lors du clic de l'utilisateur
    • check box : implémentée par INPUT. Il s'agit de boutons on/off à choix multiples. Seuls les boutons à la valeur On sont valides et donc envoyés.
    • radio button : implémenté par INPUT. Bouton on/off à choix unique quand ils partagent le même nom.
  • menu : implémenté par SELECT, avec ou sans OPTGROUP et/ou OPTION
  • text input : implémenté par INPUT pour une ligne unique, ou TEXTAREA pour un bloc de texte
  • file select : via INPUT. Permet de choisir un fichier lors de l'envoi
  • hidden controls : via INPUT, permet de masquer des contrôles et de stocker des données de manière invisible (i.e. historique)
  • object controls : via OBJECT, permet d'insérer un objet dans un formulaire

Retourner en haut de la page

II- La balise <FORM>

Il s'agit de la balise instanciant un formulaire.

Attributs :
action="adresse" : spécifie le processus de traitement des données

  • "adresse http" : envoie sur un serveur
  • "mailto : email" : envoie sur une email

method="get (va chercher l'info = défaut) / post (envoie)" : méthode de traitement
enctype="content-type" : encryptage
accept-charset="charset list" : liste d'encodages acceptés
accept="content-type-list"

Exemple de code :
<FORM ACTION="mailto : "fra.so@wanadoo.fr" METHOD="post">

Retourner en haut de la page

III- La balise <INPUT>

Permet d'insérer des contrôles

Attributs :
type="text / password / checkbox / radio / submit / reset / file / hidden / image / button" : type du contrôle inséré (password est à éviter car sécurité minime)
name="texte" : nom attribué au contrôle - obligatoire
value="texte" : valeur initiale du contrôle - optionnel sauf pour les radio buttons
size="pix / nbre de caractères" : largeur en nombre de caractères seulement pour "password" et texte
maxlength="nombre de caractères" : ce nombre peut être dépassé grâce aux ascenceurs
checked : élément présélectionné
src="adresse" : source de l'image pour les contrôles IMAGE

Retourner en haut de la page

IV- La balise <BUTTON>

Comme <INPUT>, il permet d'impléménter des contrôles, mais cette fois avec un contenu via TYPE="image" et des boutons animés à leur déclenchement.

Exemple de code affichant le texte "Bonjour" suivi d'une image-bouton avec le texte "submit"inscrit dessus :
<BUTTON NAME="submit" VALUE="submit" TYPE="submit">Bonjour<IMG SRC="image.gif"></BUTTON>

A noter qu'il est préférable de fournir un ALT pour les images et que les images-map sur boutons ne sont pas autorisées.

Attributs :
name="texte" : nom du contrôle
value="texte-donnée" : valeur initiale
type="submit (défaut) / reset / button (push button)"
disabled, tabindex, accesskey, onfocus, onblur

Retourner en haut de la page

V- Les balises <SELECT>, <OPTGROUP>, <OPTION>

1-<SELECT>

Permet de créer un menu avec plusieurs <OPTION>

Attributs :
name="texte" : nom du contrôle
size="nombre" : nombre de lignes visibles simultanément (drop-down menu)
multiple : booléen autorisant le choix multiple dans un menu.
disabled, tabindex, onfocus, onblur, onchange

2. <OPTION>

Définit les éléments d'un menu.

Attributs :
selected : booléen marquant les items présélectionnés (pour plusieurs présélections dans un même menu, ajouter "multiple" dans <SELECT>
disabled
label="texte" : court titre pour le contenu
value="texte-donnée" : valeur initiale. Si absent, la valeur initiale sera celle de OPTION

3. <OPTGROUP>

Permet de rassembler logiquement les éléments d'un menu.

Attributs :
disabled
label="texte" : nomme les sous-menus

Retourner en haut de la page

VI- La balise <TEXTAREA>

Insère un bloc où l'utilisateur pourra saisir du texte.

Attributs :
name="texte" : nom du contrôle
rows="nombre" : nombre de lignes visibles (ascenceurs au delà)
cols="nombre" = nombre de colonnes visibles (ascenceurs au delà)
readonly : le texte pré-entré n'est pas modifiable
disabled, tabindex, accesskey, onfocus, onblur, onselect, onchange

Retourner en haut de la page

VII- La balise <ISINDEX>

Crée un ligne unique de texte. A remplacer par <INPUT TYPE="text">

Attributs :
prompt="texte" : texte pré-entré

Exemple de code déprécié :
<ISINDEX prompt="Allons-y">

Retourner en haut de la page

VIII- La Balise <LABEL>

Certains éléments ont un attributs LABEL ou un label implicite (les navigateurs utilisent VALUE pour obtenir ce label)

Pour les éléments ne possédant ni l'attribut "label" ni de label implicite, il est possible d'utiliser l'élément LABEL. Celui-ci permet de fournir de l'information sur le contrôle lui-même. (champs de texte, checkboxes, radio buttons et menus)

Attributs :
accesskey, onfocus, onblur
for="ID-adresse" : Associe deux contrôles. Leurs valeurs respectives sont identiques. Le bouton cible est identifié via son ID="nom unique". Cet attribut ne fonctionne pas pour des contrôles situé dans des cellules différentes d'un tableau.

Retourner en haut de la page

IX- Structurer un formulaire : les balises <FIELDSET> et <LEGEND>

  • <FIELDSET> permet de classer par thèmes les contrôles d'un formulaire.
  • <LEGEND> permet de titrer ces thèmes, améliorant la lisibilité du formulaire

Attributs de <LEGEND> :
align="top / bottom / left / right" - déprécié : alignement par rapport au FIELDSET

Exemple de code :
<FORM ........>
<FIELDSET>
<LEGEND>Titre</FIELDSET>
reste du formulaire
</FIEDSET>
<fieldset>Etc</fieldset>
</FORM>

Retourner en haut de la page

X- Accentuer un élément

Il éxiste trois possibilités de mettre un élément "onfocus" :

  • le clic de la souris
  • la navigation au clavier (tabbing order)
  • les access keys (keyboard shortcuts ou raccourcis clavier)

1. Navigation au clavier

Grâce à l'élément <TABINDEX="nombre"> (entre 0 et 32767).

Le tabbing order (ordre de tabulation) dépend du navigateur utilisé. Généralement, la touche Tab permet de naviguer d'un élément à un autre, et la touche Entrer de l'activer.

- les liens ayant "tabindex" sont visités en priorité

- ceux n'en ayant pas sont ensuite suivis dans l'ordre alphabétique

- les éléments "disabled" ne sont pas navigables

Eléménts supportant TABINDEX : <A>, <AREA>, <BUTTON>, <INPUT>, <OBJECT>, <SELECT> et <TEXTAREA>.

2. Access keys

Raccourcis claviers dont la combinaison dépend du système utilisé (PC= Alt + touche ; MAC= Pomme + touche). Il est préférable de signaler ces raccourcis et de les accentuer (souligner ie)

L'action du raccourci dépend de l'élément : A=lancement du lien, TEXTAREA=prêt à saisir du texte, etc.

Exemple de code :
<A IMG SRC="adresse" accesskey="c">Pomme + c</a>

Retourner en haut de la page

XI- Contrôles Disabled et Readonly

Ces deux attributs ne sont modifiables dynamiquement qu'en présence d'un script. Tous deux interdisent les onfocus, tabbing navigation, et validité des contrôles qu'ils concernent.

- Disable : <INPUT>, <BUTTON>, <OPTGROUP>, <SELECT>,<TEXTAREA>.

Cet attribut est héritable, mais les déclarations locales sont prioritaires.

- Readonly : <INPUT>, <TEXT>, <PASSWORD>, <TEXTAREA>.

Retourner en haut de la page

XII- Envoyer un formulaire

1. Méthode de traitement du formulaire

L'attribut "method='get/post' " de <FORM> spécifie le procédé de transmission du formulaire
"get" : les données du formulaires sont accolées à la suite de l'adresse spécifiée dans "action" et expédiées à cette adresse. N'autorise que des valeurs ASCII.
"post" : les données sont envoyées telles qu'elles sont à l'adresse spécifiée dans "action"

2. Validité des contrôles

Un contrôle n'est valide - et donc expédiable - que s'il se situe à l'intérieur d'une balise <FORM> et qu'il possède un nom et une valeur.

L'exception est que les contrôles cachés peuvent être considérés comme valides.

3. Traitement des données et envoie

Le navigateur suit un processus logique pour l'envoi de données :

  • identifier les contrôles valides
  • fabrication d'un paquet
  • encodage selon "enctype"
  • envoi du paquet encodé.

4. Encoder un formulaire

Il est possible de coder les données d'un formulaire avant leur envoi. Cela est possible via l'attribut "enctype="content-type" de <FORM>.

Exemples de code :
<FORM enctype="application/x-www.form-urlencoded"> - par défaut
<FORM enctype="multipart/formdata">

Retourner en haut de la page


1, rue fra.so | HTML 4 - Les Frames

HTML 4 : Les Frames

Sommaire

  1. Introduction
  2. Créer des frames
    1. <frameset>
    2. <frame>
  3. Spécifier une fenêtre-cible
    1. Cible par défaut
    2. Ordre des déclarations
  4. Contenu alternatif
    1. <noframes>
    2. <longdesc>
  5. Frames internes : <iframe>

I- Introduction

Les frames sont des fenêtres créées à l'écran. Par défaut, il n'y en a qu'une.

Attention : LES DOCUMENTS FRAMESET NE CONTIENNENT PAS D'ELEMENT BODY. CELUI-CI EST REMPLACE PAR FRAMESET.

Exemple d'un document de Frameset (création de fenêtres) :
<HEAD> .................</HEAD>
<FRAMESET COLS="20%, 80%>
<FRAME SRC="adresse 1.html">
<FRAME SRC="adresse 2.html">
<NOFRAMES>
Contenu alternatif affiché par les navigateurs ne supportant pas les frames.
</NOFRAMES>
</FRAMESET>

Retourner en haut de la page

II- Créer des fenêtres

Il est conseillé de toujours placer un contenu alternatif via NOFRAMES.

1. L'élément FRAMESET

C'est l'élément container qui permet de créer des fenêtres. Il remplace l'élément BODY.

Les fenêtres créées sont forcément de forme rectangulaires. On forme ainsi des fenêtres par lignes (ROWS) et par colonnes (COLS). Les fenêtres créées apparaissent de gauche à droite et de haut en bas.

Attributs :
rows= "%" (proportion de l'espace disponible) / "pix" (taille fixe en pixels) / "n*" (relatif : par rapport aux autres fenêtres - *=1*) - crée des lignes
Cols="% /pix / n*" - crée des colonnes
onLoad="script" - script éxécuté au chargement de la fenêtre
onUnload="script" - script éxécuté au déchargement de la fenêtre

Nested frames :

Pour créer une sorte de cadrillage, il est possible de mêler les frames.

Exemple de code, créant 3 colonnes, celle du milieu contenant elle-même 2 frames :
<FRAMESET COLS="33%, 33% 33%>
<FRAME SRC="AdresseCol1">
<FRAMESET ROWS="50%, 50%>
<FRAME SRC="Adresse_col2_ligne1">
<FRAME SRC="Adresse_col2_ligne2">
</FRAMESET>
<FRAME SRC="Adresse_col3">
</FRAMESET>

Partager des objets dans les frames :

Grâce aux scripts, il est possible de charger des objets dans plusieurs frames.

Exemple de code envoyant un objet dans la fenêtre principale ("parent") :
<HEAD>
<OBJECT ID="myObject" DATA="uri/data.bar"></OBJECT>
</HEAD>
<BODY>
............................................................................
<p>
<SCRIPT TYPE="Javascript">
parent.myObject.myproperty
</SCRIPT>
<p>
.............................................................................
</BODY>

2. L'élément FRAME

Définit le contenu initiale et l'apparence des fenêtres créées.

Attributs :
name="texte" - nom de la fenêtre (utile pour les renvois)
longdesc="adresse" - adresse d'un fichier décrivant la fenêtre
src="adresse" - adresse du document chargé initialement dans la fenêtre
noresize - interdit le redimensionnement par l'utilisateur
scrolling="auto (si besoin) /
yes (toujours des ascenceurs) /
no (jamais d'ascenceurs)"
frameborder="1 (bordure - défaut) / 0 (pas de bordure)"
marginwidth="pix" - espace entre les bords verticaux de la fenêtre et son contenu
marginheight="pix" - espace entre le contenu et les bords horizontaux de la fenêtre

Retourner en haut de la page

III- Spécifier une fenêtre cible

Il faut pour cela avoir donner un nom à la fenêtre visée (sauf voir les noms réservés). Le renvoi dans une fenêtre spécifique se fait alors dans l'ancre de renvoi via l'attribut TARGET.

Exemple de code : doc1 sera chargé dans la fenêtre appelée "Navigation"
<A HREF="adresse_de_doc1 TARGET="Navigation">Hypertexte</A>

1. Spécifier une fenêtre de chargement par défaut

Deux solutions sont possibles :

  • spécifier la TARGET pour chaque renvoi
  • utiliser <BASE HREF="adresse-de-base-du-doc-actif" TARGET="fenêtre1">
    Ainsi, tous les renvois qui suivront dans le document renverront vers "fenêtre1"

2. Priorité dans les déclarations

Voici l'ordre de recherche suivi par le navigateur pour connaître la fenêtre visée pour le chargement des fichiers liés :

  • la spécification de TARGET
  • si TARGET est absent, il cherche un élément BASE
  • si aucun des deux ne sont présents, il charge dans la fenêtre du lien
  • si TARGET spécifie une fenêtre n'existant pas, il crée un nouvelle fenêtre, lui attribue le nom donné par TARGET et y charge le document demandé.

Retourner en haut de la page

IV- Le contenu alternatif

1. L'élément <NOFRAMES>

Placé dans le FRAMESET, il permet de fournir un renvoi vers une version normale du site.

2. L'attribut LONGDESC

Permet de fournir une description du contenu initial de la fenêtre. Aussi, il est déconseillé de ne mettre qu'une image dans une fenêtre.

Retourner en haut de la page

V- Les frames internes : l'élément <IFRAME>

Permet d'insérer un document à l'intérieur d'un autre, les deux conservant une entière indépendence pour leurs liens, leur présentation,...

Il est désormais possible d'utiliser l'élément OBJECT (générique)

Attributs :
longdesc="adresse"
name="texte" : nom de la fenêtre cible
src="adresse" : adresse du document à charger
frameborder="1/0" (défaut="1")
marginwidth="pix"
marginheight="pix"
scrolling="auto/yes/no"
height="pix/%" : espace alloué à l'affichage de la nouvelle fenêtre
width="pix"

Exemple de code avec texte alternatif entre crochets :
<IFRAME SRC="adresse_du_doc_à_charger" with="100" height="100">
[Texte qui ne sera affiché que par les navigateurs ne supportant pas Iframe ou les frames]
</IFRAME>

Retourner en haut de la page


1, rue fra.so | HTML 4 - Les Liens Hypertextes

HTML 4 : Les Liens Hypertextes

Sommaire

  1. La balise <A>
  2. Lier les documents : <Link>
  3. Une URL absolue : <Base>

Un lien possède toujours deux extrémités (source et destination ) et une direction.

Nommer une ancre : il éxiste deux possiblilités.

  • avec l'élément <A> :
    document source : <A HREF="fichier.html#ancre1">hypertexte</A>
    document destination : <A NAME="ancre1">texte visé</A>
  • avec l'élément <ID> :
    document source : <A HREF="ancre2">hypertexte</A>
    document destination : <ID="ancre2">texte visé (pas de tag de fin)

Relations entre documents : fonctionne avec <LINK> et <A>.

  • REL="adresse" : prochain document.
  • REV="adresse" : précédent document.

Exemple de code :
<LINK REV="Précédent" HREF="chapitre4.hmtl">
<LINK REL="Prochain" HREF="chapitre6.html">

  • Ancres et liens :
    <LINK> ne doit apparaître que dans HEAD.
    <A> n'apparaît que dans BODY.
  • Titrer les liens : l'attribut TITLE permet de nommer un lien, autorisant l'affichage de tooltips au passage du curseur, changements de forme du curseurs, browsers parlés de prévoir la destination, etc.

Retourner en haut de la page

I- La balise <A>

Cet élément permet de spécifier la destination d'un lien, de le nommer (NAME ou ID) et de donner sa position.

Les noms d'ancres doivent être uniques et respecter la casse. De plus, il est impossible de mêler les ancres.

  • <NAME> permet un enrichissement des noms donnés et est supporté par tous les browsers
  • <ID> peut aussi servir de sélecteur pour les css

Attributs de <A> :
name="texte" : nomme le lien. Ce nom est unique dans le document.
href="adresse" : spécifie l'emplacement des ressources visées.
hreflang="fr/en/en-us/..." : spécifie la langue des ressources visées.
type="mimetype"
rel="type de relation" : relation avec d'autres documents
rev="type de relation" : suivi de la liste d'adresse de ressources considérées comme précédentes.
charset="charset" : spécifie l'encodage des caractères des ressources visées.
accesskey, shape, coords, tabindex : sont abordés plus en détails plus loin.

Retourner en haut de la page

II- Relations entre documents : la balise <LINK>

Elle apparait dans <HEAD> et permet de spécifier les documents liés à celui en cours de consultation. Ces informations sont aussi utilisées par les navigateurs utilisant les tooltips, navigateurs oraux, ...

  • <LINK> sert principalement à spécifier et donner l'adresse - via les attributs TYPE="TEXT/CSS" et MEDIA="screen" - des feuilles de style s'appliquant au document.
  • Cet élément est en outre utilisé par les moteurs de recherche en vue de repertorié le site

<LINK TITLE="Manuel en Francais" TYPE="TEXT/HTML" REL="alternate" HREFLANG="FR" HREF="adresse">

Retourner en haut de la page

III- Informations sur le chemin : l'élément <BASE>

Apparait dans <HEAD>, juste après <TITLE>, et avant tout autre élément.

Il permet de stipuler l'adresse absolue du document, ce qui permet de résoudre les éventuels conflits d'adresse relatives (href="../fichier.gif").

Attributs :
href="adresse"
target="frame" : fenêtre visée pour le chargement.


1, rue fra.so | HTML 4 - Les Listes

HTML 4 : Les Listes

Sommaire

  1. <Ul>, <OL> et <LI>
  2. <DL>, <DT> et <DD>
  3. Types des listes
  4. Listes <DIR> et <MENU>

I-<UL>, <OL> et <LI>

  • <UL> : Unordered List. Liste sans numérotation. Tag de fin obligatoire.
  • <OL> : Ordered List. Liste numérotée. Tag de fin obligatoire.
  • <LI> : List Item. Elément de liste. Tag de fin facultatif.

Attributs :
Type="type" - UL & OL (déprécié en faveur des css) : spécifie l'aspect des marqueurs des éléments
Start="nombre" - OL : commence la numérotation à la valeur spécifiée.
Value="nombre" - LI : spécifie le nombre de l'élément.
Compact - OL & UL : rendu plus compact de la liste

Exemple de code :
<ul>
<li>élément 1
<li>élément 2
</ul>

Il est aussi possible de mélanger les styles de liste.

Retourner en haut de la page

II- Definition Lists : les balises <DL>, <DT> et <DD>

Tag de fin obligatoire seulement pour <DL> (Definition List).

DT (Definition for Term) agit comme un titre de rubrique, alors que <DD> (Definition Data) est un équivalent de <LI>.

Exemple de code :
<dl>
<dt>Titre 1 de la liste
<dd>élément 1 de titre 1
<dd>élément 2 de titre 1
<dt>Titre2 de la liste
<dd>élément 1 de titre 2
</dl>

Retourner en haut de la page

III- Les puces des listes <UL> et <OL>

Il s'agit des puces précédant les LI dans les listes UL et OL. Leur aspect peut être modifié via l'attribut "type".

  • <UL type="disc(défaut)/circle/square">
  • <OL> : Types et affichage Nom dans les css
    1. "1" (1,2,3) : arabic numbers
    2. "a" (a,b,c) : lower alpha
    3. "A" (A,B,C) : upper alpha
    4. "i" (i,ii,iii) : lower roman
    5. "I" (I,II,III) : upper roman

Retourner en haut de la page

IV- Les balises <DIR> et <MENU>

Ces balises sont dépréciées. Elles sont semblables dans leur fonctionnement aux <UL>, mais offrent un rendu différent.

  • <DIR> : affiche des listes sur plusieurs colonnes.
  • <MENU> : affiche la liste sur une seule colonne.


1, rue fra.so | HTML 4 - Images, Objets et Applets

HTML 4 : Images, Objets et Applets

Sommaire

  1. Les images : <img>
  2. La balise générique : <object>
    1. Règles de rendu
    2. L'attribut Param Nommer un objet
    3. Déclaration et activation d'un objet
  3. Les applets : <applet>
  4. <Iframe>
  5. Les image-maps
    1. <map> et <area>
    2. Server-side map
  6. VI- Les attributs des objets
    1. Dimensions
    2. Espace
    3. Bordure
    4. Alignement
    5. Texte alternatif

Dans la version 4 du HTML, OBJECT est l'élément générique qui permet d'implémenter les trois catégories d'objets. Cependant, OBJECT n'est pas supporté par tous les navigateurs.

Voici les trois catégories d'objet :

  • IMG=image
  • APPLET=applet java (déprécié)
  • IFRAME=document html

N.B. : IFRAME permet d'insérer un document dans un autre document (cf chapitre sur les frames :
<IFRAME src="uri" même attibuts que IMG>Texte alternatif</IFRAME>

Retourner en haut de la page

I- Afficher les images : la balise <IMG>

Il est recommandé d'utiliser l'attribut ALT pour les navigateurs oraux ou en mode texte.

Attributs :
src="url" : source de l'image
alt="texte" : texte alernatif pour navigateurs oraux ou en mode texte
longdesc="url" : adresse d'un document décrivant l'image
height="pix"
width="pix"
usemap="url" : adresse du descriptif du map (client-side server map)
ismap="url" : l'image et le map sont sur le serveur. Toute opération sera envoyée à l'adresse pour un traitement par le serveur (server-side map)

Retourner en haut de la page

II- L'élément générique d'implémentation : <OBJECT>

Cet élément apparait dans BODY, mais peut aussi être chargé dans HEAD à condition qu'il soit vide d'éxécution (DECLARE)

Attributs :
classid="uri" : adresse de l'objet. S'utilise en remplacement de DATA, en fonction de l'objet.
codebase="uri" : adresse de base de l'objet
codetype="content-type" : spécifie le type de données, à utiliser avec CLASSID
data="uri" : adresse de l'objet
archive="liste d'archives" : séparée par virgules, listes des adresses spécifiées dans CLASSID et DATA permettant un préchargement des données.
declare : booléen qui empêche l'éxécution de l'objet à sa déclaration (éxécution ultérieure)
standby="texte" : texte affiché pendant le chargement de l'objet
height, width, usemap, name, tabindex
param="paramètre" : paramètres de run-time pour les applets

Exemple de code :
- pour une image : <OBJECT DATA="http://www.moi.com/moi.gif" TYPE="image/gif"></OBJECT>
- pour une applet : <OBJECT CLASSID="http://www.moi.com/clock.py"></OBJECT>

1. Règles de rendu des objets

Le navigateur rend d'abord l'objet et ensuite, s'il ne le peut pas, il rendra le contenu (ALT, autres objets internes,...)

2. Initialisation d'un objet : l'attribut PARAM

Placé à l'intérieur de <OBJECT> ou de <APPLET>, il permet de spécifier des run-times pour les objets implémentés.

Attributs :
id="texte" : nom unique de l'objet
name="texte" : nom du paramètre (attention à la casse). Ce nom est sensé être connu par l'objet
value="data" : valeur du paramètre nommé
valuetype="data (défaut = chaîne de caractères) / ref (adresse où sont stockés les run-times) / object (se référe via son ID à un objet dans le même document et contenant les run-times nécéssaires)
type="content-type" (seulement avec VALUETYPE="REF")

Exemple de code :
<OBJECT DATA="http://www.moi.com.clock.py">
<PARAM NAME="heure">
</OBJECT>

3. Schéma global pour nommer les objets

- pour les applets java : <OBJECT CLASSID="JAVA:program.start">...

- pour les activeX : <OBJECT CLASSID="CLSID:program.start">...

Il est aussi bon de spécifier le CODETYPE et CODEBASE.

4. Déclarations et activations des objets

La déclaration doit être placée avant l'activation différée. Pour différer l'éxécution d'un objet, il suffit, lors de sa déclaration, de lui adjoindre le booléen DECLARE. Plusieurs avantages à différer l'éxécution d'un objet :

  • éxécutions multiples
  • activation via un lien (pré-chargement)
  • l'objet pré-chargé peut servir de run-time à d'autres objets

Exemple de code :
<HEAD>..........
<OBJECT DECLARE ID="earth.declaration" DATA="Earth.mpg" TYPE="application/mpeg"</OBJECT>
</HEAD><BODY>
......................................................
..............................................
<A HREF="#eath.declaration">Texte hyperlien lançant le film</A>

Retourner en haut de la page

III- Les applets : <APPLET>

Bien que déprécié, il est toujours supporté par les navigateurs supportant JAVA. Les attributs CODE et OBJECT sont obligatoires.

Attributs :
codebase="uri" : adresse de l'applet
code="data" : nom de l'applet pré-compilée et de ses classes parentes
name="data" : nom de l'applet dans le document
archive="liste d'archives" : listes des classes et autres ressources nécessaires au fonctionnement et qui seront pré-chargées depuis le CODEBASE
object="data" : nom des ressources contenant l'applet
width et height

IV- Embedded documents : <IFRAME>

Le document inclus est totalement indépendent du document le contenant (renvois internes possibles, etc.). Cf chapitre sur les frames.

Retourner en haut de la page

V- Les images maps

  • client-side image-map : la machine-hôte a les données pour interpréter les actions de l'utilistaeur
  • server-side image-map : toute action de l'utilisateur est envoyée au serveur pour interprétation.

1. Les balises <MAP> et <AREA>

  • <MAP> :

Attributs :
name="texte" : nom du map, appelé dans IMG via USEMAP="#Nom" (attention au dièse)

  • <AREA> : définit les zones de l'image et les renvois

Attributs :
shape="default (image entière) / rect (zone rectangulaire) / circ (cercle) / poly (polygone)"
coords=coordonnées de la zone" : départ en haut gauche, fin en bas droite

+ rect="x1,y1,x2,y2"
+ circ="centreX, centreY, rayon (possible en %)"
+ poly="x1,y1x2,y2,......,x15,y15"

nohref : booléen n'attribuant aucun lien à une zone
alt, tabindex, acceskey, onfocus, onblur

Pour les problèmes de compatibilités de fichiers, il est aussi possible d'inclure des données alternatives à l'intérieur de <OBJECT>

Exemple de code :
<OBJECT DATA="fichier.png" TYPE="image/png">
<object data="fichier.gif" type="image/gif">
</object>
</OBJECT>

En cas de doublons, la zone déclarée en premier est considérée comme vrai. La règle est que les zones apparaissent dans l'ordre de leur déclaration. Ainsi, il est possible de faire une zone en forme de bouée :
<MAP NAME="anneau actif"
<AREA SHAPE="CIRC" COORDS="100,100,50">Inactif</A>(rien NOHREF)
<AREA SHAPE="CIRC" COORDS="100,100,250" HREF="uri">Actif</A>
</MAP>

2. Server-side image-map

Pour les images-maps trop compliqués. Il suffit d'inclure l'attibut ISMAP dans les attibuts <IMG> ou <INPUT>, inclus dans une balise <A>.

Exemple de code :
<A HREF="uri"><IMG SRC="fichier.gif" ISMAP></A>

Retourner en haut de la page

VI- Présentation visuelle des images, objets et applets

1. Width et height

Il est possible de redimensionner un objet lors de son affichage, bien que cela soit déconseillé (perte de qualité). En précisant ces données, le navigateur prévoit l'espace des ces objets dans la mise en page.

2. Espace autour

Via les attributs VPSACE (vertival) et HSPACE (horizontal), il est possible d'aérer la présentation.

3. Bordure

L'attribut BORDER="pix" est déprécié au profit des css

4. Alignement

ALIGN="bottom (=baseline) / middle / top (aligné sur le haut du texte) / left / right

5. Texte alternatif

ALT="texte de remplacement". Eviter les textes stupides du style "image" pour remplacer une image (plutôt "la plage de mes vacances en 1997")


1, rue fra.so | HTML 4 - Les Scripts

HTML 4 : Les Scripts

Sommaire

  1. <Script>
  2. Spécifier le langage de script
  3. Les évènements
  4. Alternative

Un script peut être interne ou externe au document html. Il étend les possibilité du html grâce à l'interactivité. Il peut être :

  • chargé une fois et éxécuté immédiatement
  • chargé et activé ultérieurement via un appel au sein du document

1. La Balise SCRIPT

Place un script dans un document html, soit dans HEAD (privilégié) soit dans BODY. Le navigateur doit cependant connaître le langage du script (inné ou plugins).

Attributs :
name="content-type" : nom du langage
char="charset" : encodage du script
language="langage du script" (ie language="text/Javascript")-déprécié
src="adresse du script"
defer : le script est chargé seulement. Son éxécution sera implementée ultérieurement.

2. Spécifier le langage de script

Cette déclaration est obligatoire lors de l'utilisation de scripts.

  • Langage par défaut : applicable à tout le document
    soit <META http-equiv="content-script-type" type="text/Javascript" / "text/tcl" / "text/vbscript">
    soit content-type-script : text/javascript (http-headers)
  • Déclaration locale :
    On insère l'élément SCRIPT à l'endroit souhaité, avec l'attribut TYPE="text/javascript"

3. Evènements intrinsèques

Certains contrôles supportent ces évènements.

Attributs :
onload="script" : intervient après chargement des fenêtres. Se place dans BODY ou FRAMESET
onunload="script" : intervient lors du déchargement des fenêtres
onclick="script" : intervient au clic sur un élément
ondblclick="script" : intervient au double-clic
onmousedown="script" : intervient à la pression sur le bouton de la souris
onmouseup="script"
onmouseover="script"
onmousemove="script"
onfocus="script" : intervient avec <LABEL>,<SELECT>, <TEXTAREA>, <BUTTON>
onblur="script" : intervient quand l'élément est déselectionné (comme onfocus)
onkeypress="script"
onkeydown="script"
onkeyup="script"
onsubmit="script" : intervient avec <FORM>
onreset="script" : intervient avec <FORM>
onselect="script" : intervient avec <INPUT> et <TEXTAREA>
onchange="script" : intervient avec <INPUT>, <SELECT>, <TEXTAREA> : un élément perd le focus et sa valeur a été changée.

4. Alternative

  • L'élément <NOSCRIPT>
    Inséré après </SCRIPT>, il permet de renvoyer sur une version sans script, ou vers des plugins.
  • Cacher le script :
    Il suffit d'insérer des balises de commentaire html.
    <script type="text/javascript">
    <!--
    Contenu du script
    -->
    </script>


1, rue fra.so | HTML 4 - Structure

HTML 4 : Structure d'un Document HTML

Sommaire

  1. Version du HTML
  2. La balise <HTML>
  3. En-tête et la balise <head>
    1. Title META
  4. IV- Le corps du document
    1. <body>
    2. <id> et <class>
    3. <div> et <span>
    4. Les titres
    5. <address>

Un fichier html valide se compose de trois parties principales :

  • la déclaration de version html supporté
  • un entête
  • un corps

I- La version de HTML

<doctype html public "-//w3c//dtd html 4.0//en" "http://www.w3c.org/TR/REC-html40/strict.dtd">
il s'agit de la version 4, sans support des éléments des versions précédentes

<doctype html public "-//w3c//dtd html 4.0 transitional//en" "http://www.w3c.org/TR/REC-html40/loose.dtd"> :
il s'agit de la version 4 avec support des anciennes versions de html

<doctype html public "-//w3c//dtd html 4.0 frameset//en" "http://www.w3c.org/TR/REC-html40/frameset.dtd"> :
s'applique aux fichiers gérant le multifenétrage

N.B. : le "en" signifie que le html est en anglais

Retourner en haut de la page

II- La Balise HTML

Optionnel, il indique le début et la fin du code.

III- L'entête et l'élément HEAD

Il est optionnel, mais permet de séparer les parties du document. C'est dans cette partie que se trouvent le titre du document (affiché en haut de la fenêtre), des mots-clés pour l'accès des moteurs de recherches, des informations sur le document (contenu, auteur,etc.), etc.

L'entête n'est pas affiché dans le navigateur (sauf le titre).

Attributs :
profile="url" : séparé par des virgules, ces sont les adresses des sources des profiles pour interpréter les meta données.

1.Le titre : la Balise TITLE

Tout document html doit avoir un titre, si possible en rapport avec le contenu du site.

Attributs :
title="texte" (en minuscules) : informe sur l'élément avec lequel il est utilisé (tooltip, talk browser,...) Utilisé avec l'élément LINK, il spécifie la feuille de style à charger (css)

2.Les meta données et la balise META

Il n'y a aucune obligation dans le domaine. Les meta données servent à informer sur le document consulté (auteur, mots-clés, ...), informer sur le contenu pour les publics jeunes, le langage des scripts, les feuilles de styles à charger ou encore l'encodage des caractères.

Pour déclarer des meta données, il faut cependant au moins fournir une propriété et une valeur (name et content) pour chacune.

Pour déclarer une meta donnée :

  • déclarer une propriété et une valeur via l'élément META (informations données dans le document) ou l'élément LINK (externe au doc.)
  • se référer à un profile contenant les propriétés et les valeurs, via l'attribut Profile de HEAD

Attributs :
http-equiv="text-fonction" : en remplacement de Name, spécifie au serveur l'entête pour l'envoi des réponses.

Valeurs possibles :

  • <meta http-equiv="expires" content="date au format GMT">
    ainsi le nom de la propriété est "expires" et sa valeur est une date. L'attribut "http-equiv prévient le serveur que le format de réponse sera une date.
  • <meta http-equiv="refresh" content="5, http://adresse.de.renvoi/fichier.html">
    ici, le "http-equiv" prévient le serveur qu'il doit rafraîchir le fichier chargé au bout de 5 secondes, en spécifiant l'adresse du fichier à charger alors (peut servir à rafraîchir le même fichier, ou à en charger un nouveau, ce qui permet alors une sorte de diashow).

name="text" : déclare et nomme une propriété (ex. author, keywords, copyright, date,...)
scheme="fichier" : stipule un fichier permettant l'interprétation des données (cf profile)
content="valeur" : attribut une valeur à la propriété
lang="fr/en/en-us/..." : spécifie la langue utilisée dans le document

Retourner en haut de la page

III- Le corps du document

Optionnel, mais permet de séparer les parties du document (cf head). C'est dans cette partie que sont contenus tous les éléments à afficher dans le navigateur.

1.La balise <BODY>

N.B.: Attention, les documents de multifenétrage ne contiennent pas de BODY

Attributs
bgcolor="#hexa/color" : couleur du fond
background="uri" - déprécié pour les css - : image de fond
text="#hexa/color" : couleur du texte
link="#hexa/color" : couleur des liens
vlink="#hexa/color" : couleur des liens visités
alink="#hexa/color" : couleur du lien lors de son activation

2.Les identificateurs Id et Class

Ce sont des attributs utiles pour plusieurs éléments (p, br, span, div,...). Ils permettent d'identifier ces éléments au sein du document.

  • Id permet d'identifier un élément unique (il est le seul à avoir ce nom) Sa fonction est de :
    - sélectionner dans une css
    - cibler l'ancre d'un lien
    - nommer un objet déclaré
    - identifier des éléments qui devront subir un traitement par le navigateur
  • Class permet de faire partager un même nom à plusieurs éléments. Utile pour :
    - sélectionner une css- identifier des éléments pour des traitements effectués par le navigateur.

3.Les balises <DIV> et <SPAN>

  • Span permet de structurer les éléments dits "inline", c'est-à-dire au sein d'un paragraphe (br ou p)
  • Div permet de structurer les éléments dits "block-level", c'est-à-dire des paragraphes, tableaux, etc.

Ces deux éléments supportent divers attributs tels que align ou lang.

4.Les titres : Headings

Il y a 6 niveaux de titres, allant de H1 (le plus important) à H6 (le moins important).

5. La balise <Address>

Fournit les informations sur le document (date de création ou de modification, créateur, adresse http, email, etc.).

Peut être placé au début du document ou à la fin (cas général).

Retourner en haut de la page


1, rue fra.so | HTML 4 - Les Tableaux

HTML 4 : Les Tableaux

Sommaire

  1. I- Eléments de structure
    1. <table>
    2. <caption>
    3. <thead>, <tfoot> et <tbody>
    4. <colgroup> et <rowgroup>
    5. <tr>
    6. <th> et <td>
  2. II- Formater un tableau
    1. Bordures
    2. Alignement
    3. Marges

I- Les éléments pour construire un tableau

1. L'élément <TABLE>

C'est la balise-container pour construire les tableaux. Tout ce qui se situe entre ces balises fait partie du tableau.

Attributs :
summary="texte" : description du tableau et son utilité.
width="pix/%" : largeur du tableau.
border="pix" : épaisseur de la bordure du tableau.
frame="frame" : spécifie la fenêtre de rendu.
rules="none/groups/rows/cols/all" : affiche des séparations (voir plus loin "formater un tableau").
cellspacing="pix" : espace entre les cellules (épaisseur des traits de séparation lorsqu'il y en a).
cellpadding="pix" : espace entre le contenu et le bord d'une cellule.
align="left/right/center" - déprécié.

2. L'élément <CAPTION>

Placé sous TABLE, il permet de fournir un titre au tableau ou un court descriptif.

Attributs :
align="top/bottom/left/right" - déprécié

3. Entête et pied de tableau

Grâce aux éléments <THEAD>, <TFOOT> et <TBODY>, il est possible de fournir un entête et un pied de page pour les longs tableaux. Lors de leur impression, ces entêtes et pieds de pages seront repris sur chaque page.

Pour être valides, ils doivent tous trois avoir le même nombre de colonnes. THEAD et TFOOT doivent être placés sous TABLE. TBODY contiendra les données du tableau lui-même.

Attributs :
align="left/right/top/bottom"

4. Grouper les colonnes : les éléments <COLGROUP> et <COL>, <ROWGROUP> et <ROW>

Ces quatre éléments permettent de regrouper des colonnes ou des lignes pour leur appliquer des traitements prévus dans les css, via les attributs ID et CLASS.

  • <COL>/<ROW> : une colonne/ligne subira le traitement de css.
  • <COLGROUP>/<ROWGROUP> : plusieurs colonnes sont groupées pour subir ce traitement.

Attributs :
span="nombre" : nombre de colonnes/lignes dans le groupe ou pour la cellule.
width="pix/%/n*" : largeur de chaque colonne/ligne (attention, la valeur "0*" signifie que la colonne/ligne prend toute la largeur disponible, interdisant le rendu incrémentiel).
align="top/bottom/left/right/char - char="caractère"" : alignement (char stipule le caractère sur lequel sera basé l'alignement)

Exemple de code :
<COLGROUP WIDTH="20">
<COL SPAN="10">
</COLGROUP>

Ce COLGROUP crée des colonnes d'une largeur de 20 pixels chacune, et le COL SPAN stipule que la colonne s'étend sur 10 colonnes.

5. Les Table Rows : <TR>

Marque le début de chaque nouvelle ligne du tableau.

Attributs :
align="top/bottom/left/right"

6. Les cellules du tableau : <TH> et <TD>

  • <TH> : permet de donner un titre à la colonne ou à la ligne qu'il débute (remplace donc TD)
  • <TD> : marque le début de toute nouvelle cellule

Attributs :
align="left/right/top/bottom"
headers="idrefs" : liste des TH ayant de l'information concernant cette cellule. Les TH concernés doivent avoir un identifiant unique via l'attribut ID.
scope="scope-name" : placé dans les TH, spécifie la liste des TD concernés par l'information présente. SCOPE doit avoir une des valeurs suivantes :

Row : l'information concerne toute la ligne
Col : l'information concerne toute la colonne
Rowgroup : l'information concerne le groupe de lignes
Colgroup : l'information concerne le groupe de colonnes

abbr="texte" : abbréviation du contenu de la cellule
rowspan="nombre" : la cellule s'étend sur "n" lignes ("0" signifie que la cellule s'éténd jusqu'à la dernière ligne du tableau)
colspan="nombre" : la cellule s'étend sur"n" colonnes ("0" signifie que la cellule s'étend jusqu'à la dernière colonne du tableau)
nowrap - déprécié : désactive le retour automatique du texte
width="pix" - déprécié : largeur de la cellule
height="pix" - déprécié : hauteur de la cellule

Retourner en haut de la page

II- Formater un tableau

Il s'agit-là d'attributs qui s'insèrent dans l'élément <TABLE>

1. Bordure et traits

  • frame (bordure ext. du tableau)="void (sans = défaut) / above (haut seulement) / below (bas) / hsides (haut et bas) / vsides (droite et gauche) / lhs (left hand side : gauche) / rhs (right hand side : droite) / box (4 côtés) / border (4 côtés)"
  • rules (traits séparant les cellules) ="none (défaut) / rows (entre les lignes) / cols (entre les colonnes) / all (partout)"
  • border="pix" : épaisseur du cadre (FRAME) autour du tableau.

2. Alignements

align="left/center/right/justify/char" : alignement horizontal
valign="top/middle/bottom/baseline (la 1° ligne sert de base pour aligner le reste)" : alignement vertical.
char="caractère" : alignement basé sur le caractère.
charoff="pix" : spécifie l'écart entre les caractères (offset).

3. Marges

cellspacing="pix" : espace entre les extérieurs des cellules.
cellpadding="pix" : espace entre le contenu et le bord des cellules.

Retourner en haut de la page


1, rue fra.so | HTML 4 - Texte

HTML 4 : Traitement du Texte

Sommaire

  1. L'espace
  2. Sructurer le texte
    1. Sections de phrases
    2. <blockquote> et <q>
    3. <sup> et <sub>
    4. Lignes et paragraphes
    5. Les tirets
    6. <pre>
  3. Mise à jour

I- L'espace blanc

N.B: Il est important de placer les espaces hors des balises ("texte <h1>à formater</h1> maintenant" et non "texte<h1> à formater </h1>maintenant")

espace : &#x0020; | tab : &#x0009; | espace nul : &#x200B;
<br> : &#x2028; | <p> : &#x2029; |

Retourner en haut de la page

II- Structurer le texte

1.Les éléments de phrases

Ces balises permettent de préciser la nature des données affichées, de mettre en évidence certains éléments, etc.

EM : accentuation | STRONG : accent plus fort
CITE : citation | KBD : texte à saisir
ABBR : abréviation | DFN : définition
CODE : code programmation | SAMP : exemple
VAR : variable de programme | ACRONYM : acronyme

exemple d'utilisation :
<acronym name="world wide web" lang="en">www</acronym>

2.Les balises <Blockquote> et <Q>

  • <Blockquote> sert à signaler les longues citations (block level) - indentation du bloc de texte.
  • <Q> sert pour les courtes citations (une ligne = inline) - ajoute des guillemets simples ou doubles selon la langue.

3.Les éléments <SUP> et <SUB>

  • <Sup> : mettre en exposant
  • <Sub> : mettre en indice

4.Lignes et paragraphes

  • <P> : Retour à la ligne avec ligne vierge. Elément de block level ne pouvant contenir que des blocs. Tag de fin facultatif, supporte plusieurs attributs, pour la plupart dépréciés en faveur des css (align, dir, ...)
  • <BR> : Simple retour à la ligne. Son attribut CLEAR="right/left/all" détermine si le texte peut couler le long d'un élément de bloc (image, tableau,...)

5.Les tirets

le tiret plein (plain hyphen) : &#45; ou &#x2D;

le tiret sécable (soft hyphen) autorise la césure à cette endroit : &#173; ou &#xAD;

6.Le texte préformaté : la balise <PRE>

Affiche le texte tel qu'il a été saisi, espaces et retours à la ligne compris.

Attribut :
Width="nombre" : spécifie la largeur attribuée pour l'élément PRE (n'est pas supporté par tous les browsers)

Retourner en haut de la page

III- Changement de version : les balises <INS> et <DEL>

  • <INS> : marque les sections ajoutées depuis la mise à jour
  • <DEL> : marquent ceux qui ont été supprimés ou périmés

Attributs :
Cite="url" : Spécifie l'adresse pour l'ancienne version
Datetime="date et heure" : Date et heure de la modification de la section ou de l'élément.


The HTML Reference Library

The HTML Reference Library is the most definitive reference for currently useable HTML elements. It directly supports Internet Explorer, Netscape and Mosaic

This version of the HTMLib was prepared especially for the Allaire Corporation, for use within their products only.

© 1995-1998, Stephen Le Hunte


Introduction to the HTMLib

To access information about any HTML element, locate it via the Index (accesible from the Index button, or View menu) and it's details and examples will be displayed in this window. If you are just browsing the information, then use the 'Contents' page (accessible from the Contents button, or View menu) to go to overviews of HTML sections.

HTML Reference Library Conventions
In all of the reference pages, I have tried to make it easy to distinguish example code from the explanatory text, by displaying any example HTML code in an italic green font, with the relevant code being described being bold text. Also, on a page detailing an element that has several attributes, the first time each attribute is mentioned, it will be in a Bold, Maroon font.

Within the HTMLHelp HTMLib, there are two types of hyperlinks. Internal hyperlinks are those that take you to a different topic inside the HTMLib. They appear like this. External links are links that take you to a remote Web site. For these links, a separate copy of Internet Explorer will navigate to the remote link, leaving the HTMLib still available. External links appear like this. Note that only one external Internet Explorer will be used by the HTMLib, with the running instance being 'Stopped' before the new external link is loaded. If you want more than one external copy of Internet Explorer running at any one time, then open a separate copy manually and use the URL given in the HTMLib for the new document. If you already have Internet Explorer running when any HTMLib external links are activated, a new instance (under the control of the HTMLib) of Internet Explorer will be used to navigate to the links given in the HTMLib.

Where a page uses examples that are completely browser dependant and no display workaround was possible, then a graphic for the particular browser required will be visible at the top of the page, surrounding the heading. I hope this doesn't cause too many problems.

What the HTMLib is and isn't
The HTMLib is the most comprehensive guide to currently useable HTML elements available. Where other reference material falls down is that it details (normally without examples) all HTML elements covered in various HTML specifications originating from the World Wide Web Consortium (W3C). While most of the elements in such specifications have been adopted by browsers, a lot haven't (particularly in the case of the ill-fated HTML 3.0 specification). There is no point in documenting such elements in a useable reference. So, the HTMLib covers only those elements that have been adopted by browsers and attempts to detail the level of support for those elements. It's secondary aim is to provide a single location for such documentation, to eliminate the need for expensive on-line checking of browser support for HTML elements.

The HTMLib isn't designed to replace any of the W3C specification documents, or documentation provided by browser vendors. This is particularly the case when considering the HTMLib Scripting reference. Scripting is largely the programming side of HTML and as such relies on the imagination and skill of the script author to produce almost limitless effects. While you are still constrained by browser support for scripting capabilities, this gap is less than the cavernous gulf between the HTML capabilities of browsers. Where external links to other reference material are given, the reader is encouraged to check the documentation, as such links imply that the particular section of information in the HTMLib is condensed.

Contacting the Author
If you have any questions regarding the HTMLib please direct them to me at htmlib@htmlib.demon.co.uk. If you have any general HTML related questions, please try the HTMLibrd - a web based discussion group for the HTMLib.

Licensing terms
This version of the HTMLib was prepared especially for the Allaire Corporation, for inclusion in HomeSite, Cold Fusion and Cold Fusion studio. It's re-distribution rights are as described in the re-distribution rights for the larger products of which the HTMLib is a component. There is also a shareware version of the HTMLib, which may be re-distributed. Details of the licence/re-distribution terms and registration procedures for the shareware version of the HTMLib may be found within that version, details of which can always be found at the HTMLib web site at http://hot.virtual-pc.com/htmlib.
All comments, questions etc., should be directed to me at htmlib@htmlib.demon.co.uk. Also use that address if you wish to be placed on the mailing list for update news about the HTMLib.

Acknowledgements
Here is the 'without whom...' section of the HTML Reference Library. People mentioned here (in no particular order) have made invaluable contributions to the HTML Reference Library over the course of it's life so far, and to them I am eternally grateful.

Acknowledgements
Here is the 'without whom...' section of the HTML Reference Library. People mentioned here (in no particular order) have made invaluable contributions to the HTML Reference Library over the course of its life so far, and to them I am eternally grateful.

Hayley, for enduring hours of inane HTMLib related babble.
Nick, for loads of advice.
Nona, for being the best host honeymooners could ask for ;)
Jeff, Gale, Steve L., John and Ralph at Microsoft, for loads of help, advice and top tips.
Hans, for producing a top quality mirror for downloading the HTMLib (and providing the space and registration procedures for beta downloads). Also, for providing the HTMLibrd, a Web based conference for discussion about the HTMLib and HTML issues. Visit it at http://hjs.geol.uib.no/webstart.htm.
Steve at Sausage Software, Frank at FLFSoft, Adam at SoftQuad, Art at IST, Todd at American Cybernetics. and Francis at Intelligent Environments Inc.
Mark West at Questar Microsystems.
Cub Lea, for valuable WinHelp related advice.
Mark at Sams.Net and Gina (formerly) at Wrox Press
Steve Pruitt at, for his tireless help on the WinHelp mailing list and particularly for advice about the Activated HTMLib portion of the HTMLib Web Site.
Christian, for his help/advice about the HTMLib Web Site.
Ben Weisner, of the Weisner Associates, for production of the Help Authors Resource Kit. Michael Cessna of http://www.wordmission.org/, for invaluable help, advice and for being a knowledge fountain.
Brian, for help and advice about the HTMLib. Visit 'index dot HTML', for the nearest to a Web based HTMLib that there is.
Niall at InstallShield, for his help concerning the InstallShield software used for the HTMLib installation routine.
Jeff for mirroring the complete HTMLib Web site at http://www.terminalp.com/htmlib/. Also, Ken for the other US mirror. Visit it at http://www.arachne.net/htmlib/
Nick Bradbury, Steve Gilson and Dennis Carothers (all at http://www.allaire.com/), for their tireless work on the range of Allaire products, used throughout the development of the HTMLib.
Peter, Al and everyone at Q4, producers of DESL. Highly talented UK developers and great Defender players.
Scott Boggan of Walker Richer Quinn, Cheryl Lockett Zuback of Workwrite and William Meisheid of Sageline Publishing for encouragement and exposure
Joe Welinske of Winwriters and Matthew Ellison of DigiText for encouragement and taking pity on a poor student
Ginsters for the best Cornish pasties money can buy (outside of Cornwall). Note that this is 'pasties' as in the traditional Cornish culinary delicacy, and not a strippers breast accoutrements.

Copyright and Trademarks
This HTML Reference Library and the names 'The HTML Reference Library', 'HTMLib', 'The HTMLib Colour Wizard', 'The Activated Colour Wizard' and the Colour Wizard ActiveX control and Java applet are all © 1995-1997, Stephen Le Hunte (htmlib@htmlib.demon.co.uk)

Netscape is a registered trademark of Netscape Communications Corp. Updated information about any of the Netscape products mentioned in this reference (Netscape Navigator, Communicator, JavaScript, Plug-in information etc.) can always be found at the Netscape Web site : http://www.netscape.com

Windows, Windows95, ActiveX, ActiveMovie, ActiveVRML, Visual Basic, Visual Basic Scripting Edition (VBScript), JScript (Microsoft's JavaScript implementation), Internet Assistant, Internet Explorer and HTMLHelp are either registered trademarks or trademarks of the Microsoft Corp. in the United States and/or other countries. More information about these products/technologies can be found at the Microsoft Web site at http://www.microsoft.com/. Portions of this reference are reprinted with permission granted by the Microsoft Corporation.

The Server Side Includes section of this document is taken from information kindly provided by Mark West of Questar Microsystems Inc. Updated SSI+ information can be obtained from http://www.questar.com/ssi/

Java and HotJava are trademarks of Sun Microsystems in the US and/or other countries. For more information about these products/technologies can be found at either http://java.sun.com/ or http://www.javasoft.com/.

All other brands and product names are trademarks or registered trademarks of their respective companies.

© 1995-1997, Stephen Le Hunte


HTMLib Index

<!-- | <!--# | <!DOCTYPE> | <A> | <ACRONYM>
<ADDRESS> | <APPLET> | <AREA> | <B> | <BASE>
<BASEFONT> | <BGSOUND> | <BIG> | <BLINK> | <BLOCKQUOTE>
<BODY> | <BR> | <BUTTON> | <CAPTION> | <CENTER>
<CITE> | <CODE> | <COL> | <COLGROUP> | <COMMENT>
<DD> | <DEL> | <DFN> | <DIR> | <DIV>
<DL> | <DT> | <EM> | <EMBED> | <FIELDSET>
<FONT> | <FORM> | <FRAME> | <FRAMESET> | <HEAD>
<HR> | <HTML> | <Hx> | <I> | <IFRAME>
<ILAYER> | <IMG> | <INPUT> | <INS> | <ISINDEX>
<KBD> | <KEYGEN> | <LABEL> | <LAYER> | <LEGEND>
<LINK> | <LISTING> | <MAP> | <MARQUEE> | <MENU>
<META> | <MULTICOL> | <NEXTID> | <NOBR> | <NOEMBED>
<NOFRAMES> | <OBJECT> | <OL> | <OPTION> | <P>
<PLAINTEXT> | <PRE> | <Q> | <S> | <SAMP>
<SELECT> | <SMALL> | <SOUND> | <SPACER> | <SPAN>
<STRIKE> | <STRONG> | <STYLE> | <SUB> | <SUP>
<TABLE> | <TBODY> | <TD> | <TEXTAREA> | <TFOOT>
<TH> | <THEAD> | <TITLE> | <TR> | <TT>
<U> | <UL> | <VAR> | <WBR> | <XMP>

© 1995-1997, Stephen Le Hunte


Document Structure Elements

These elements are required within a HTML document. Apart from the prologue document identifier, they represent the only HTML elements which are explicitly required for a document to conform to any HTML standard.

The essential document structure elements are :

<HTML> ... </HTML>
<HEAD> ... </HEAD>
<BODY> ... </BODY>

© 1995-1998, Stephen Le Hunte


<!DOCTYPE...>

The following are various prologue identifiers that should be used in HTML documents. With the identifier is the name of the HTML DTD (document type definition) that the prologue identifier labels the HTML document as adhering to. I.e. a HTML document whose prologue identifier is <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML Level 1//EN//"> should adhere to the HTML-1.DTD (see the RFC for HTML 2.0 (RFC1866) for the DTD). Such a document should not contain Form elements for example.

The document prologue identifier should be included before the <HTML> element of a HTML document, in fact, it should be the first line of any HTML document.

How to refer to the HTML 4.0 specification (correct at the time of writing) :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

How to refer to HTML Level 3.2 :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

Ways to refer to Level 2: most general to most specific
These all require conformance to the HTML.DTD.

<!DOCTYPE HTML PUBLIC  "-//IETF//DTD HTML//EN">
<!DOCTYPE HTML PUBLIC  "-//IETF//DTD HTML 2.0//EN">
<!DOCTYPE HTML PUBLIC  "-//IETF//DTD HTML Level 2//EN">
<!DOCTYPE HTML PUBLIC  "-//IETF//DTD HTML 2.0 Level 2//EN">

Ways to refer to Level 1: most general to most specific
These all require conformance to the HTML-1.DTD.

<!DOCTYPE HTML PUBLIC  "-//IETF//DTD HTML Level 1//EN">
<!DOCTYPE HTML PUBLIC  "-//IETF//DTD HTML 2.0 Level 1//EN">

Ways to refer to Strict Level 2: most general to most specific
These all require conformance to the HTML-S.DTD.

<!DOCTYPE HTML PUBLIC  "-//IETF//DTD HTML Strict//EN">
<!DOCTYPE HTML PUBLIC  "-//IETF//DTD HTML 2.0 Strict//EN">
<!DOCTYPE HTML PUBLIC  "-//IETF//DTD HTML Strict Level 2//EN">
<!DOCTYPE HTML PUBLIC  "-//IETF//DTD HTML 2.0 Strict Level 2//EN">

Ways to refer to Strict Level 1: most general to most specific
These all require conformance to the HTML1-S.DTD.

<!DOCTYPE HTML PUBLIC  "-//IETF//DTD HTML Strict Level 1//EN">
<!DOCTYPE HTML PUBLIC  "-//IETF//DTD HTML 2.0 Strict Level 1//EN">

© 1995-1998, Stephen Le Hunte


<HTML...>

This element identifies the document as containing HTML elements. It should immediately follow the prologue document identifier and serves to surround all of the remaining text, including all other elements. HTML user agents use the presence of this element at the start of a HTML document to ensure that the document is actually HTML, according to the "text/html" MIME type. The document should be constructed thus :

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<HTML>
The rest of the document should be placed here.
</HTML>

The HTML element is not visible upon HTML user agent rendering and can contain only the <HEAD> and <BODY> elements.

NOTE : The <HTML> element can be used to set Style Sheet information to be used for the whole document.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. As the <HTML> element doesn't directly affect the display of a document, no ToolTip is presented when using the TITLE attribute (as with other elements).

LANG="language setting"
The LANG attribute can be used to specify what language the document is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

Consistent with Internet Explorer 4.0's Dynamic HTML object model, the <HTML> element supports various properties and methods. In its role as a document structure element, it supports no events.

<HTML...> Properties
Of the Standard Dynamic HTML properties, <HTML> supports className, document, id, isTextEdit, lang, parentElement, sourceIndex, tagName and title. See the Standard Dynamic HTML properties topic for details.

<HTML...> Methods
Of the Standard Dynamic HTML methods, <HTML> supports contains, getAttribute, removeAttribute and setAttribute. See the Standard Dynamic HTML methods topic for details.

© 1995-1998, Stephen Le Hunte


<HEAD...>

The head of an HTML document is an unordered collection of information about the document. It requires the <TITLE> element between <HEAD> and </HEAD> elements thus :

<HEAD>
<TITLE> Introduction to HTML </TITLE>
</HEAD>

The <HEAD> and </HEAD> elements do not directly affect the look of the document when rendered.

The following elements are related to the head element. While not directly affecting the look of the document when rendered (apart from the <STYLE> element Style Sheet declarations), they do provide (if used) important information to the HTML user agent.

<BASE> - Allows base address of HTML document to be specified
<BASEFONT> - Allows setting of a single font to use throughout the document
<ISINDEX>- Allows keyword searching of the document
<LINK>- Indicate relationships between documents
<META> - Specifies document information useable by server/clients
<NEXTID>- Creates unique document identifiers
<STYLE> - Used by browsers that support use of style sheets to specify styles within the document
<TITLE>- Specifies the title of the document

NOTE : The Title element is the only element described here that is required as part of the Head of a HTML document for conformance to any HTML standard.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <HEAD> as using a particular style sheet class. See the Style Sheets topic for more information.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <HEAD> element for scripting purposes. Any <HEAD> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Consistent with Internet Explorer 4.0's Dynamic HTML object model, the <HEAD> element supports various properties and methods. In its role as a document structure element, it supports no events.

<HEAD...> Properties
Of the Standard Dynamic HTML properties, <HEAD> supports className, document, id, isTextEdit, lang, parentElement, sourceIndex, tagName and title. See the Standard Dynamic HTML properties topic for details.

<HEAD...> Methods
Of the Standard Dynamic HTML methods, <HEAD> supports contains, getAttribute, removeAttribute and setAttribute. See the Standard Dynamic HTML methods topic for details.

© 1995-1998, Stephen Le Hunte


<TITLE...>

Every HTML document must have a Title element. The title should identify the contents of the document and in a global context, and may be used in history lists and as a label for the windows displaying the document. Unlike headings, titles are not typically rendered in the text of a document itself. Normally, browsers will render the text contained within the <TITLE> ... </TITLE> elements in the title bar of the browser window.

The Title element must occur within the head of the document and may not contain anchors, paragraph elements, or highlighting. Only one title is allowed in a document.

NOTE : The length of a title is not limited, however, long titles may be truncated in some applications. To minimise the possibility, titles should be kept as succinct as possible. Also keep in mind that a short title, such as 'Introduction' may be meaningless out of context. An example of a meaningful title might be 'Introduction to HTML elements'

This is the only element that is required within the HEAD element. The other elements described are optional and can be implemented when appropriate.

<HEAD>
<TITLE>Welcome to the HTML Reference</TITLE>
</HEAD>

The <TITLE> element, in accordance with the Internet Explorer Dynamic HTML, supports some of the standard properties and methods.

<TITLE...> Properties
Of the Standard Dynamic HTML properties, the <TITLE> element supports document, id, parentElement, sourceIndex and tagName. See the Standard Dynamic HTML properties topic for more details.

<TITLE...> Methods
Of the Standard Dynamic HTML methods, the <TITLE> element supports contains, getAttribute, removeAttribute and setAttribute. See the Standard Dynamic HTML methods topic for more details.

© 1995-1998, Stephen Le Hunte


<META...>

The META element is used within the <HEAD> element to embed any useful information not defined by other HTML elements. Such information can be extracted by servers/clients for use in identifying, indexing and cataloguing documents.

In addition, HTTP servers can read the content of the document head to generate response headers corresponding to any elements defining a value for the attribute HTTP-EQUIV. This provides document authors a mechanism (not necessarily the preferred one) for identifying information that should be included in the response headers for an HTTP request and forms the basis of the Client Pull mechanism.

Attributes of the <META> element :

HTTP-EQUIV
This attribute specifies the HTTP response header that the information pertains to. If the semantics of the HTTP response header named by this attribute is known, then the contents can be processed based on a well-defined syntactic mapping whether or not the DTD includes anything about it. HTTP header names are not case sensitive. If not present, the NAME attribute should be used to identify this meta-information and it should not be used within an HTTP response header.

NAME
Meta-information name. If the NAME attribute is not present, then name can be assumed equal to the value HTTP-EQUIV.

CONTENT
The meta-information content to be associated with the given name and/or HTTP response header.

Typically, the <META> element would be used to introduce Client Pull into HTML documents, or to specify keywords that may be used by search engines to determine a documents relevance to the current search (although some are stopping using this method).

Microsoft's Internet Explorer now supports the use of HTML ratings, to restrict access to pages that whoever controls the browser deems unacceptable. This uses the W3C's PICS (Platform for Internet Content Selection - http://www.w3.org/PICS/) format of content labelling and currently supports the use of labels provided by the RSAC (Recreational Software Advisory Council - http://www.rsac.org/) under their RSACi labelling vocabulary. NOTE : The PICS format devised by the W3C, defines the format for content labelling, not the actual definitions of the labels - this is up to individual organisations who (like the RSAC, in RSACi) provide ratings services.

Author labelling of content is a step towards responsible self-censorship in the wake of recent government intervention and provides responsible content authors with a way of labelling their web sites, so that users who do not wish to view their content, can not stumble across it by accident, as they can control the browser to block sites who provide labels for content that the user may deem offensive.

PICS rating labels are included in the document with <META> elements within the <HEAD> elements, allowing the browser to determine whether the content is 'safe' for the user, based on their ratings settings, before any of the main page content has been retrieved. It should be noted that the user should not write their own ratings within the <META> element, but should submit pages to ratings organisations for independent rating. With the RSAC, this involves filling out a series of short forms, detailing whether your site contains any degree of offensive language, violence, sex or nudity. They then provide the specific <META> element for the page, site directory, or whole site. An example of a RSAC PICS rating (for the HTMLib web site main page) is :

<META http-equiv="PICS-Label" content='(PICS-1.0 "http://www.rsac.org/ratingsv01.html" l gen false comment "RSACi North America Server" by "htmlib@htmlib.demon.co.uk" for "http://subnet.virtual-pc.com/~le387818/index.html" on "1996.04.04T08:15-0500" exp "1997.01.01T08:15-0500" r (n 0 s 0 v 0 l 0))'>

From the last line of the ratings code, you can see r (n 0 s 0 v 0 l 0) which means that I rated the HTMLib web site as containing no nudity (n), sex (s), violence (v), or bad language (l).

Also, Internet Explorer supports a mechanism known as pragma no-cache, using the <META> element to prevent pages from being cached by the browser. Using this method, you can prevent the page that contains the HTML from being cached by the browser, ensuring that the most recent version of the page is always seen by the user. This is especially useful for pages that may be dynamically created (for instance, search query results, or database searches). To take advantage of this mechanism, use the EXPIRES keyword, together with a date that has already past. For example :

<META HTTP-EQUIV="Expires" CONTENT="Mon, 06 Jan 1990 00:00:01 GMT">

In this case, the browser will be made to believe that the document expired on the 6th January 1990 and so, will not cache the page. For more information, see the HTTP 1.1 specification details at http://www.w3.org/pub/WWW/Protocols/HTTP/1.1/spec.html.

Another use for the <META> element is to specify the character set that the document uses. Using:

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Windows-1251">

sets the document as using character set 1251. This affects the way that Internet Explorer treats things such as character entities used in the document. A detailed description of character sets is outside the scope of this document. For more information, consult Microsoft's Internet Client SDK

Inter-page/site transitions
Internet Explorer 4.0 also supports inter-page and inter-site transitions, using a Visual Filter set in the <META> element. These can be used to set transitions that play when a page is entered (i.e. first loaded) or exited or when a site (individual sites are determined by a change in the host - i.e. http://www.htmlib.com/ and http://faq.htmlib.com/ would be considered individual sites) is entered, or exited. Any of the standard Visual Filter effects can be used with either blend or reveal transitions. The syntax is as used for other Visual Filters, setting the filter type in the CONTENT attribute of the <META> element. For example:

<META HTTP-EQUIV="Page-Enter" CONTENT="filter:RevealTrans(Duration=3.000, Transition=23)">

This would play a random dissolve filter, over 3 seconds when the page is first displayed.

Note : For page-enter, page-exit, site-enter and site-exit transitions to work, the <META> element specifying the filter must be the first element in the <HEAD> section of the document and inter-page transitions do not appear to work across framed documents.

The <META> element, in accordance with the Internet Explorer Dynamic HTML, supports some of the standard properties and methods.

<META...> Properties
Of the Standard Dynamic HTML properties, the <META> element supports document, id, name, parentElement, sourceIndex and tagName. It also supports the charset, content, http-equiv and url properties, which reflect their respective settings (if any) when used, according to any of the above ways of using the <META> element. See the Standard Dynamic HTML properties topic for more details.

<META...> Methods
Of the Standard Dynamic HTML methods, the <META> element supports contains, getAttribute, removeAttribute and setAttribute. See the Standard Dynamic HTML methods topic for more details.

© 1995-1998, Stephen Le Hunte


<LINK...>

The Link element indicates a relationship between the document and some other object. A document may have any number of Link elements.

The Link element is empty (does not have a closing element), but takes the same attributes as the Anchor element.

The <LINK> element would typically be used to provide pointers to related indexes, or glossaries. Links can also be used to indicate a static tree structure in which the document was authored by pointing to a "parent" and "next" and "previous" document. Mosaic (v3.0 for Windows 95/NT4) totally supports the <LINK> element and presents the user with a toolbar populated with buttons for every <LINK> element specified.<LINK REL="..."> is one that Mosaic recognises, it will show the toolbar button with a pre-set graphic, together with whatever text is specified in the TITLE attribute, as the text on the button. The remote location, specified in the HREF attribute is the location that Mosaic will browse to when the button is clicked. Below is a list of the possible preset REL attributes that Mosaic recognises together with the graphic it uses for the toolbar button (on Windows 95 systems).

REL="stylesheet"
This details the stylesheet to be used for the current page. Internet Explorer (from v3.0) and Netscape (from v4.0) supports style sheets and Mosaic presents no pre-set graphic for this but supplies 'Stylesheet' if no TITLE attribute is given.
REL="home" ( [image])
This can be used to link to any page that the browser should consider the 'home' page of the current site. Supplies 'Home' if no TITLE attribute is given.
REL="toc"|"contents" ( [image])
This directs users to the table of contents for your site. 'toc' and 'contents' are interchangeable as the REL attribute value and Mosaic supplies 'ToC' if no TITLE attribute is given.
REL="index" ( [image])
This can be used to link to the index of your site. Supplied with 'Index' if no TITLE attribute is given.
REL="glossary" ( [image])
This creates a link to the glossary of your site. Supplies 'Glossary' if no TITLE attribute is given.
REL="copyright" ( [image])
If your site contains a page detailing copyright attributions, it can be linked to by this REL attribute value. Mosaic supplies 'Copyright' if no TITLE attribute is given.
REL="up"|"parent" ( [image] | [image])
This can be used to set the location of the current documents parent document. For example, your site may conform to a fairly rigid navigation structure and this attribute value can be used to link the current document to an overview of the current document set. Supplied with 'Up' or 'Parent' if no TITLE is given.
REL="child" ( [image])
This can be used to set the location of the current documents 'child' document(s). For example, your site may conform to a fairly rigid navigation structure and this attribute value can be used to link the current document to any of the documents in the level below. I.e. from an overview document to a detail document. Supplied with 'Child' if no TITLE is given.
REL="next" ( [image])
As in the above case, this can be used to provide a link to the next document in the current document set. Mosaic supplies 'Next' if no TITLE attribute is given.
REL="previous" ( [image])
As above, this can be used to link to the previous document in the flow of the current document set. Supplied with 'Previous' if no TITLE attribute is given.
REL="last"|"end" ( [image])
This can be used to link to the last document in the current document set. Mosaic supplies 'End' if no TITLE is given.
REL="first" ( [image])
This can be used to link to the first document in the current document set. Mosaic supplies 'Begin' if no TITLE is given.
REL="help" ( [image])
If your site contains a 'help' file (i.e. tips on site navigation for example), then it can be linked to via this attribute setting. Mosaic supplies 'Help' if no TITLE is given.

You can set the REL attribute to be anything you like, as well as the above pre-sets. Mosaic will supply a default image ( [image]) for these toolbar buttons and will use the text 'Bookmark' if no TITLE attribute is provided.

Mosaic also supports use of the REV="made" attribute/value. This should be used to denote the author of the document and the HREF attribute should use a HREF="mailto:address@site.com" structure. Mosaic will use its default graphic (see above) and default text ('Bookmark') if no TITLE attribute is given.

The <LINK> element represents one of the primary style sheet inclusion mechanism elements. It can be used to specify the location of the style sheet that is to be used for the document.

<HTML>
<HEAD>
<TITLE>This HTML document uses a style sheet</TITLE>
<LINK REL="stylesheet"
TYPE="text/css"
HREF="http://www.stylesheets.com/sheets/formal.css"
TITLE="formal">
</HEAD>
<BODY>
Rest of the document goes here
</BODY>
</HTML>

In the above HTML fragment, the <LINK> element points to the file "formal.css" at the given URL. It tells the browser that :

  • the file addressed is a style sheet, by explicitly giving the "text/css" MIME TYPE;
  • the file's RELationship to the HTML document is that it is a "stylesheet";
  • the stylesheet's TITLE is "formal".

For more information about these specific attributes, see the <A> section and for more general information about style sheets, see the style sheets section.

The <LINK> element is also key to Netscape's 'dynamic fonts' concept, where the font specified in the <LINK> element is automatically downloaded when the page is viewed. To do this, use REL="fontdef in the <LINK> element:

<LINK REL="fontdef" SRC="http://site/path/fontdef.pfr">

where the fontdef.pfr file provides the font definition file. (Producing font definition files is outside the scope of this document. For more information, visit http://home.netscape.com/comprod/products/communicator/fonts/index.html. Also, note that Internet Explorer supports dynamic fonts, using standard W3C Style sheet methods. See the Style Sheets topic for more details.

DISABLED
This Internet Explorer 4.0 specific attribute specifies that the StyleSheet object referenced by the <LINK> element is disabled. Basically, it means its style sheet declarations won't be used.

Consistent with Internet Explorer 4.0's Dynamic HTML object model, the <LINK> element supports various properties and methods. In its role as a document structure element/relationship describer, it supports a few events. Note that all scripting of the <LINK> element is Internet Explorer 4.0 specific.

<LINK...> Properties
Of the Standard Dynamic HTML properties, <BASE> supports className, document, id, parentElement, sourceIndex, tagName and title. See the Standard Dynamic HTML properties topic for details.
Also, the <LINK> element supports the href, disabled and rel properties, which directly reflect any settings of their respective attributes (see above) and the readyState property.

The readyState property can be one of 4 values, depending on the current state of the resource, referenced in the HREF attribute. The possible values of the readyState property are:

Value | Meaning
complete | The resource has completely loaded and is available to the document and therefore manipulation.
interactive | The resource hasn't completely downloaded, but is available to the document and scripting
loading | The resource is being downloaded
uninitialized | The resource is not available - normally, this value indicates that the resource is downloading

Note that the readystate property is read-only.

<LINK...> Methods
Of the Standard Dynamic HTML methods, <LINK> supports contains, getAttribute, removeAttribute and setAttribute. See the Standard Dynamic HTML methods topic for details.

<LINK...> Events
The <LINK> element doesn't support any of the Standard Dynamic HTML events, but does support the following events.

onerror
This event is fired when an error occurs in the downloading of the links resource referenced on the HREF attribute. Normally, this would mean that the resource hasn't downloaded properly and so isn't available to the document, or manipulation through scripting.

onload
The onload event is fired immediately after the resource begins downloading. It does not mean that the resource is available, merely that its download has begun.

onreadystatechange
At any time, the resource may change its readyState property and when this happens, the onreadystatechange event is fired.

© 1995-1998, Stephen Le Hunte


<STYLE...>

The <STYLE> element should reside within the <HEAD> element and is used to delimit Style Sheet information.

The TYPE and TITLE attributes can be used within the <STYLE> element. TYPE is used to specify the internet media (MIME) type of the style sheet definition (which is "text/css") and TITLE can be used to provide a title for the style sheet definitions. This may be used by browsers when a choice of style sheets are available.

For example :

<HTML>
<HEAD>
<TITLE>Introduction to Style Sheets</TITLE>
<STYLE TYPE="text/css" TITLE="Bright Colours">
BODY { color : white}
P { color : blue;
font-size : 12pt;
font-family : Arial}
H1 { color : red;
font-size : 18pt}
</STYLE>
</HEAD>
<BODY>
...

Defines the styles that are specified within the <STYLE> ... </STYLE> elements to be a style sheet, having the title "Bright Colours". For more information about Style Sheets, see the Style Sheets topic.

NOTE : Use of the <STYLE> element and Style Sheet use is only supported by Internet Explorer (from v3.0) and Netscape (from v4.0).

Recent HTML 4.0 draft specifications have included a MEDIA attribute for the <STYLE> element, which specifies the output device. Defaulting to screen, the MEDIA attribute can have the following properties.

Value | Meaning
screen | The style sheet settings given are those that will be used for computer display screen purposes.
print | The style sheet settings are suitable for printed output (typically, they'd contain hard-coded page breaks for example)
projection | The settings are suitable for display on projectors
braille | The settings are to be used for braille machine output
speech | The document is styled to be suitable for speech synthesiser output
all | The style sheet settings are to be used for all output devices

Using the MEDIA attribute, different style sheets can be set up to be used when the document is used in different display environments. Note : Netscape and Internet Explorer both purport to support use of the MEDIA element, but at the time of writing, no such support existed. As they are by nature, screen output devices, it's likely that support may not get implemented. This attribute is detailed here for completeness.

DISABLED
This Internet Explorer 4.0 specific attribute specifies that the StyleSheet object specified in the <STYLE> element is disabled. Basically, it means its style sheet declarations won't be used.

The <STYLE> element, in accordance with the Internet Explorer Dynamic HTML, supports some of the standard properties and methods.

<STYLE...> Properties
Of the Standard Dynamic HTML properties, the <STYLE> element supports document, id, parentElement, sourceIndex and tagName. It also supports the type property, which reflects any settings of the TYPE attribute (see above). See the Standard Dynamic HTML properties topic for more details.

<STYLE...> Methods
Of the Standard Dynamic HTML Methods, the <STYLE> element supports contains, getAttribute, removeAttribute and setAttribute. See the Standard Dynamic HTML Methods topic for more details.

© 1995-1998, Stephen Le Hunte


<BODY...>

The body of a HTML document, as its name suggests, contains all the text and images that make up the page, together with all the HTML elements that provide the control/formatting of the page. The format is :

<BODY>
The rest of the document included here
</BODY>

NOTE : The <BODY> ... </BODY> elements are directly enclosed by the <HTML> ... </HTML> elements.

It is possible to control the document colour scheme and background by specifying certain attributes in the <BODY ...> declaration. However, it should be noted that most browsers provide the user with a means to over-ride colour schemes and prevent images from loading.

The BACKGROUND attribute can be used to point to an image file that will be tiled across the browser window, to provide a background for the document. Specifying :

<BODY BACKGROUND="imagename.gif">
Rest of the document goes here
</BODY>

would cause whatever text, images, etc. appeared in that document to be placed on a background consisting of the (imagename.gif) graphics file being tiled to cover the viewing area, much like bitmaps are used for Windows wallpaper. Browsers that support this attribute, allow the use of .GIF, .JPG images for HTML backgrounds, while Internet Explorer supports those, plus Windows .BMP files.

The BGCOLOR attribute allows setting of the background colour for the document

<BODY BGCOLOR="#rrggbb"> Rest of document goes here </BODY>

Where "#rrggbb" is a hexadecimal (base 16) red-green-blue triplet used to specify the background colour.

For two tables, showing the possible colours that can be described using reserved colour names, see this topic

Clearly, once the background colours/patterns have been changed, it will be necessary to also be able to control the foreground to establish the proper display contrasts.

TEXT
This attribute is used to control the colour of all the normal text in the document. This basically consists of all text that is not specially coloured to indicate a link. The format of TEXT is the same as that of BGCOLOR.

<BODY TEXT="#rrggbb">
Rest of document goes here
</BODY>

colour names are valid values of this attribute

LINK, VLINK, and ALINK attributes
These attributes let you control the colouring of link text. VLINK stands for visited link, and ALINK stands for active link (this sets the colour that the link text will be for the time that it is clicked on). The default colouring of these is: LINK=blue (#0000FF), VLINK=purple (#800080), and ALINK=red (#FF0000). Again, the format for these attributes is the same as that for BGCOLOR and TEXT.

<BODY LINK="#rrggbb" VLINK="#rrggbb" ALINK="#rrggbb">
Rest of document goes here
</BODY>

Colour names are valid values of this attribute.

NOTE : The ALINK attribute is Netscape specific.

The ability to watermark HTML documents, by fixing a background image so that it doesn't scroll as a normal background image does, has been added to Microsoft's Internet Explorer since version 2.0. To give a page with a background image a watermark background, add BGPROPERTIES=FIXED to the BODY element as follows:

<BODY BACKGROUND="filename.gif" BGPROPERTIES=FIXED>

NOTE : This attribute is Internet Explorer specific.

LEFTMARGIN attribute
This Internet Explorer attribute allows the left hand margin of the document to be set.

For example:

<BODY LEFTMARGIN="40">
This document is indented 40 pixels from the left hand edge of the browser window </BODY>

RIGHTMARGIN attribute
This Internet Explorer (4.0 and above) specific attribute allows the right margin of the document to be set in pixels.

TOPMARGIN attribute
This Internet Explorer specific attribute allows the top margin of the document to be set. It accepts a pixel value.

BOTTOMMARGIN attribute
This Internet Explorer specific attribute allows the bottom margin of the document to be set. It accepts a pixel value.

NOTE : All of the above attributes can be set to 0, making the page start and finis at the extreme edges the page.

LANG="language setting"
The LANG attribute can be used to specify what language the <ADDRESS> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <ADDRESS> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

TITLE="Informational Text"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <BODY> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <BODY> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <BODY> element for scripting purposes. Any <BODY> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

SCROLL attribute
The SCROLL attribute can be set to "yes" or "no". Setting it to "no" removes the documents scroll bars that would normally appear if the document is larger than a single viewing window. Care should be taken when using this attribute, as you can not guarantee (with older browsers) any screen/font resolutions.

Colouring Considerations.
Most graphical browsers allow the downloading of embedded images to be turned off to allow for faster downloading and display of the HTML document. If this has been activated by the user, then background images will not be loaded or displayed. If this happens and no BGCOLOR attribute was specified, then all of the foreground text and link colouring attributes (TEXT, LINK, VLINK and ALINK) will be ignored. This is so that documents are not rendered illegible if the text colour scheme authored for use over the set image clashes with the default browser background.

Using the 'Safe' browser palette
Netscape and Internet Explorer will both 're-colour' any colour settings that aren't part of the system palette at the users screen resolution. I.e. your Web pages may look fantastic on your system at 16 bit (65,536) or 24 bit (16,777,216) colour depth, but if the person viewing your pages has their colour depth set to 8 bit (256) colour, or even less, then the colour scheme may not be displayed as authored (in some cases, the colours may not be displayed at all - if what you have specified is a pale colour, it may turn out white, as the browser will choose the nearest 'solid' colour in its available palette). To allow for this, web pages that use colours should only use colours taken from what is known as the Safe browser palette (or Non-dithering palette). This palette consists of 216 colours (256 colours minus the palette entries reserved by the system, and those that vary across different systems (i.e. Windows/Macintosh platforms)). This means that you can be sure that the pages you are authoring (or the graphics in those pages) will display as authored on both Macintosh and Windows platforms. This palette uses multiples of 51 (33 in hexadecimal notation) for the Red, Green and Blue components. So, to be sure that the colours you use will not be dithered, only use #rrggbb triplets made up of components of 33 (00, 33, 66, 99, CC and FF). For instance, "#0066FF" would be a 'safe' colour, while "#FFF0FA" wouldn't (as it would be dithered to the nearest safe palette entry (i.e. "#FFFFFF" on 8-bit (256) colour systems).
For a page that dynamically creates a table and populates it with cells using the colours in the safe browser palette, see this topic
NOTE : This re-colouring 'problem' can be seen more clearly in .GIF images that attempt to use colours that aren't part of the safe browser palette. Instead of choosing the nearest solid colour entry, Netscape and Internet Explorer will both dither the graphic according to the colour palette they have available. Hence it becomes more crucial to have an understanding of the safe browser palette when creating graphics for display on the Web.

NOTE : All of the attributes detailed on this page can be set using Style Sheet definitions.

The <BODY> element, in accordance with Internet Explorer 4.0's Dynamic HTML document object model, supports various properties, methods and events. Note that most of these are Internet Explorer 4.0 specific, although some are supported by Netscape (in versions 3.0 and 4.0). Browser support is detailed with the property, method or event.

<BODY...> Properties
The <BODY...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics. The <BODY> element also supports the following properties:

background
The background property reflects the setting of the BACKGROUND attribute as described above. It is possible to change a documents background by manipulation of the background property.

bgColor
The bgColor property, reflects the setting (if any) of the BGCOLOR attribute. It also has read-write permissions, allowing dynamic changing of the documents background colour.

bgProperties
This reflects the BGPROPERTIES attribute. If the bgProperties property is set to "fixed", any background images will be 'fixed' to the viewing window. If set to "" (i.e. nothing), the background image will scroll with the document (which is the default setting).

bottomMargin
The bottomMargin property reflects the setting (if any) of the BOTTOMMARGIN. The bottomMargin property can be dynamically changed in script functions.

clientHeight
The clientHeight property reflects the height (in pixels) of the currently viewable portion of the document. The clientHeight property is read-only, but could be useful for determining the size of the users current browser window, to dynamically resize any document content.

clientWidth
The clientWidth property reflects the width (in pixels) of the currently viewable portion of the document. The clientWidth property is read-only, but could be useful for determining the size of the users current browser window, to dynamically resize any document content.

leftMargin
The leftMargin property reflects the setting (if any) of the LEFTMARGIN. The leftMargin property can be dynamically changed in script functions.

link (vlink and alink) The *link properties reflect the settings of their respective attributes (LINK, ALINK and VLINK). All three can be changed through scripting.

rightMargin
The rightMargin property reflects the setting (if any) of the RIGHTMARGIN. The rightMargin property can be dynamically changed in script functions.

scroll
The scroll property reflects the setting (if any) of the SCROLL. The scroll property can be dynamically changed in script functions.

scrollHeight
The scrollHeight property reflects the documents total scrollable height (in pixels). It differs from the clientWidth and offsetWidth properties, in that when applied to the <BODY> element, they only return a value corresponding to the currently visible portion of the document, whereas the scrollHeight property returns a value representing the total height of the visible document content. (Note that for the <BODY> element, clientHeight and offsetHeight are essentially identical)

scrollLeft
The scrollLeft property reflects a value representing the distance between the left-most edge of the element and the left hand edge of the current viewing window. When used with the <BODY> element, the scrollLeft property is a value indicative of the extent to which the document has been scrolled sideways.

scrollTop
The scrollTop property returns a value that represents the distance between the top-most edge of the element and the top-most edge of the current viewing window. When used with the <BODY> element, the scrollTop property is a value indicative of the extent to which the document has been scrolled vertically. As an example, the button below will display the current document <BODY>'s scrollTop property on the status bar. Click it to get the value, then scroll the page either up or down and click it again. Scrolling the page down increases the scrollTop property value, scrolling the page up decreases it.

scrollWidth
Like the scrollHeight property, the scrollWidth property reflects a value that represents the total scrollable width of the document. The same nuances between it and the clientWidth and offsetWidth properties exist, as exist between the scrollHeight, clientHeight and offsetHeight properties.

text
The text property reflects the setting (if any) of the TEXT, which can be used to set default text colouring for the document. The text property can be dynamically changed in script functions.

scrolltopMargin
The topMargin property reflects the setting (if any) of the TOPMARGIN. The topMargin property can be dynamically changed in script functions.

<BODY...> Methods
The <BODY...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics. The <BODY> element also supports the following methods:

blur
The blur method can be used to force a document to lose the focus. Doing this would fire the onblur event.

blur
The createTextRange method is used for creating a Text Range from the document content. For more information, see the Text Range Object topic.

focus
The focus method can be used to force a document to gain the focus. Doing this would fire the onfocus event.

<BODY...> Events
The <BODY...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics. The <BODY> attribute also supports the following events:

onblur
The onblur event fires when the current document loses the focus. For example, if your site uses two or more windows for display, you could effectively track the users location by using the onblur and onfocus events in the relevant <BODY> elements.

onfocus
The onfocus event is fired whenever the document receives the focus. As mentioned above, this can be especially useful for executing script functions to determine the users location, should your site/application use multiple browser windows.
Note : The onfocus event is also supported by Netscape

onload
The onload event can be used to execute script functions when the page loads. For example, this HTMLib re-creates a 'non-scrolling region', by executing a script function using the onload event in every document's <BODY> element. The script function loads the title document (or the main content document) immediately after the calling document has loaded.
Note : The onfocus event is also supported by Netscape

onunload
The onunload event is the reverse of the onload event - so, as you'd expect, it can be used to execute script functions when the current document is unloaded from the browser.
Note : The onfocus event is also supported by Netscape

Note : Netscape supports the onblur, onfocus, onload and onunload events for the <BODY> element as part of its Window Object.

© 1995-1998, Stephen Le Hunte


<BASE...>

The Base element allows the URL of the document itself to be set, to help browsers in situations where the document may be read out of context. It is especially useful in allowing browsers to determine any partial URL's, or relative paths that may be specified (for example, in <A HREF> elements, or paths pointing to <IMG SRC=...> (images). The <BASE> Element should appear within the bounds of the <HEAD> element.

Where the base address is not specified, the HTML user agent uses the URL it used to access the document to resolve any relative URLs.

The Base element uses the HREF attribute, which identifies the URL, which should be a fully qualified URL

<BASE HREF="http://www.myhost.com/">

specifies www.myhost.com to be the base from which all relative URLs should be determined.

The Netscape Navigator (from version 2.0) and Internet Explorer (from version 3.0) adds one other attribute to the BASE element. With the introduction of targeted windows the TARGET attribute as used in anchors (<A>) can be used.

This allows the author to pick a default named target window for every link in a document that does not have an explicit TARGET attribute. Its format is:

<BASE TARGET="default_target">

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <BASE> as using a particular style sheet class. See the Style Sheets topic for more information.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <BASE> element for scripting purposes. Any <BASE> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

LANG="language setting"
The LANG attribute can be used to specify what language the <BASE> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. As the <BASE> element doesn't directly affect the display of a document, no ToolTip is presented when using the TITLE attribute (as with other elements).

Consistent with Internet Explorer 4.0's Dynamic HTML object model, the <BASE> element supports various properties and methods. In its role as a document structure element, it supports no events.

<BASE...> Properties
Of the Standard Dynamic HTML properties, <BASE> supports className, document, id, isTextEdit, lang, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, tagName and title. See the Standard Dynamic HTML properties topic for details.
Also, the <BASE> element supports the href and target properties, which directly reflect any settings of their respective attributes (see above).

<BASE...> Methods
Of the Standard Dynamic HTML methods, <BASE> supports contains, getAttribute, removeAttribute and setAttribute. See the Standard Dynamic HTML methods topic for details.

© 1995-1998, Stephen Le Hunte


<BASEFONT...>

This changes the size of the BASEFONT, that all relative <FONT SIZE ...> changes are based on. It defaults to 3, and has a valid range of 1-7. Note that although the <BASEFONT> element doesn't need to be contained within the document <HEAD> section, it must come before any text in the document to change the default font size.

NOTE : Any document <BASEFONT> settings are over-ridden by any style sheet settings for the document.

<BASEFONT SIZE=5>

FACE
This attribute allows changing of the face of the HTML document BASEFONT, exactly as it works for <FONT FACE= ...>. This attribute is not supported by Netscape 4.0.

COLOR
This allows the BASEFONT colour for the HTML document to be set. Colours can either be set by using one of the reserved colour names, or as a hex rrggbb triplet value. This attribute is not supported by Netscape 4.0.

TITLE
Internet Explorer 4.0 (and above) supports use of the TITLE attribute for the <BASEFONT> element. This can be used for informational purposes. The platform preview of Internet Explorer 4.0 generally uses the TITLE attribute as a 'ToolTip' and using it in the <BASEFONT> element currently provides a ToolTip over the entire document text (i.e. the value of the TITLE attribute is displayed as the ToolTip when the mouse hovers over the document text), unless the TITLE attribute is set for other elements.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <BASEFONT> as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <BASEFONT> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <BASEFONT> element for scripting purposes. Any <BASEFONT> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

NOTE : Use of these three attributes (CLASS, STYLE and ID) for the <BASEFONT> element is Internet Explorer (4.0 and above) specific. Using them also 'nullifies' any FACE, COLOR or SIZE settings in Netscape. It would generally be better to set stylings for the whole document using a style sheet. See the Style Sheets section for details.

LANG="language setting"
The LANG attribute can be used to specify what language the <BASEFONT> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

<BASEFONT...> Properties
The <BASEFONT...> element supports some of the Standard Dynamic HTML properties (namely className, document, id, isTextEdit, lang, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title), as well as color, face and size properties which directly reflect any setting of their respective attributes (see above).

<BASEFONT...> Methods
Of the Standard Dynamic HTML methods, <BASEFONT> supports contains, getAttribute, removeAttribute and setAttribute.

<BASEFONT...> Events
The <BASEFONT> element supports no events.

© 1995-1998, Stephen Le Hunte


Possible document Colour Names

140 Netscape Named Colors
Point your mouse to the desired colour, and note the #rrggbb triplet and name values shown in the status bar.

16 Internet Explorer Named Colors
Point your mouse to the desired colour, and note the colour name shown in the status bar.

© 1995-1998, Stephen Le Hunte


<ISINDEX...>

The Isindex element tells the HTML user agent that the document is an index document. As well as reading it, the reader may use a keyword search.

The document can be queried with a keyword search by adding a question mark to the end of the document address, followed by a list of keywords separated by plus signs.

NOTE : The Isindex element is usually generated automatically by a server. If added manually to a HTML document, the HTML user agent assumes that the server can handle a search on the document. To use the Isindex element, the server must have a search engine that supports this element.

To the <ISINDEX> element Netscape authors have added the PROMPT attribute.

PROMPT was introduced by Netscape authors so that text, chosen by the author, can be placed before the text input field of the index. This allows any author chosen message to replace the default text of : This is a searchable index. Enter search keywords

The syntax is:

<ISINDEX PROMPT="Any_text_string : ">

where "Any_text_string" is the text that the user wishes to be displayed before the input box.

Another Netscape specific attribute is ACTION. When used in the <ISINDEX> element, it specifies the cgi script or program to which the text string in the input box should be passed.

<ISINDEX ACTION="websearch">

would pass the text entered into the input box on the page to the cgi script "websearch".

NOTE : "websearch" in the above example is a hypothetical cgi script. If used, the ACTION attribute must point to a properly configured script on the host machine. ACTION is Netscape specific.

Note : <ISINDEX> is no longer supported by Internet Explorer from version 4.0.

© 1995-1998, Stephen Le Hunte


<NEXTID...>

The <NEXTID> element, included in old HTML specifications, is not widely supported and its use is not recommended. Previously, It could be used to provide information about the name of new <A> elements when a document is being edited.

© 1995-1998, Stephen Le Hunte


The 'Safe' Browser Palette

© 1995-1998, Stephen Le Hunte


Forms overview

Forms

Perhaps the biggest advance that the HTML 2.0 specification made over its predecessors was the inclusion of elements that allowed for users to input information. These elements are the Form elements. They provide for the inclusion of objects like text boxes, choice lists, etc., and have proved invaluable for recent HTML applications, particularly search engines, database query entry and the like.

It should be noted that while these HTML elements can be used to easily define the presentation of the form to the user, the real value behind any form is in what it does with the information that is entered. For a form to do anything more than send a straight text dump of the form data (including control characters) to an e-mail address, the form data will need to be passed to some kind of CGI script, or server based executable for processing. (CGI scripting is outside of the scope of this reference and ample reference material is available elsewhere for those interested).

The following elements are used to create forms :

<FORM> - A form within a document
<INPUT ...> - One input field
<OPTION> - One option within a Select element
<SELECT> - A selection from a finite set of options
<TEXTAREA ...> - A multi-line input field
<LABEL ...> - Active Control Labels

Each variable field is defined by an INPUT, TEXTAREA, or OPTION element and must have a NAME attribute to identify its value in the data returned when the form is submitted.

A very simple form for eliciting user response (as shown below) would be :

<H1 ALIGN="center">Comment Form</H1>
<FORM METHOD="POST" ACTION="http://www.htmlib.com/formscript.cgi">
<CENTER>
Your name: <INPUT NAME="name" size="20">
Your e-mail address: <INPUT NAME="email" size="20">
<P>I think the HTML Reference is :
<SELECT NAME="Choice">
<OPTION>Outstanding
<OPTION>Very good
<OPTION>Good
<OPTION>Average
<OPTION>Below Average
<OPTION>Awful
<OPTION SELECTED>My response would be "indecent" under the CDA Act.
</SELECT>
<P>If you have any further comments, please enter them here:<BR>
<TEXTAREA NAME="Comments" ROWS="10" COLS="40">
</TEXTAREA>
<P><INPUT TYPE=SUBMIT> <INPUT TYPE=RESET>
</CENTER>
</FORM>

Comment Form

Your name: Your e-mail address:

I think the HTML Reference is :

If you have any further comments, please enter them here:

Different platforms will have different native systems for navigating within the input fields of a form. (e.g. Windows users can use the Tab key to move from one field to the next through the order that the fields appear within the form). Different browsers may also display different text on any buttons included in the form. For example, Netscape defaults to displaying '"Submit Query" for a button specified by <INPUT TYPE=SUBMIT>, while the Internet Explorer and Mosaic display just "Submit" on such a button.

HTTP File Upload
It is possible to write forms that ask for files as input, rather than data input by input boxes and other simple elements such as checkboxes and radio buttons.

An example of such a form would be:

<FORM ENCTYPE="multipart/form-data" ACTION="_URL_" METHOD=POST>
Send this file: <INPUT NAME="userfile" TYPE="file">
<INPUT TYPE="submit" VALUE="Send File">
</FORM>

NOTE : This method of file upload is Netscape specific and is essentially adoption of another IETF Internet Draft by the Netscape authors. The Internet Draft in question, "Form based file upload in HTML", details adding the FILE option to the TYPE attribute of the INPUT element, allowing an ACCEPT attribute for the INPUT element (which would be a list of MIME types - essentially detailing what files are allowed to be uploaded as the contents of the form) and allowing the ENCTYPE of a form to be "multipart/form-data". This MIME type essentially wraps the form data (including that presented in any other input fields) as a data stream, with discrete boundaries between the information sections. For a more detailed description, readers should check the HTTP file upload specification.

The display method is largely at the discretion of the browsers that support this method. Netscape (Windows versions) display a "Browse" button beside the input box which brings up the standard open/save dialog box, allowing the choice of any local file for upload.

© 1995-1998, Stephen Le Hunte


<FORM...>

The Form element is used to delimit a data input form. There can be several forms in a single document, but the Form element can not be nested. (I.e. a form can't contain another form)

<FORM ACTION="_URL_" METHOD="GET|POST" ENCTYPE="MIME type">
. . .
</FORM>

The ACTION attribute is a URL specifying the location to which the contents of the form data fields are submitted to elicit a response. As mentioned before, this could be simply a direction to an e-mail address, but generally, would be used to point towards some kind of server based CGI script/application that handles the forwarding of form data. If the ACTION attribute is missing, the URL of the document itself is assumed. The way data is submitted varies with the access protocol of the URL to which the form data is sent and with the values of the METHOD and ENCTYPE attributes.

Generally, the METHOD attribute specifies a method of accessing the URL specified in the ACTION attribute and will be either GET or POST. The GET method is ideal for form submission where the use of the form data does not require external processing. For example, with database searches, there is no lasting effect caused by the query of the form (that is, the query runs its search through the database and reports the results). However, where the form is used to provide information for example, that updates a database, then the POST method should be used, with the ACTION attribute pointing to a CGI script that executes the form data processing.

The ENCTYPE specifies the media type used to encode the form data. The default ENCTYPE is the MIME type 'application/x-www-form-urlencoded'

The <FORM> element can also accept the TARGET attribute (as in <A> elements), to specify what window is used for any form feedback. It can take the following values :

window_name
The name of any window specified by a <FRAME> element, or by using the window.open scripting method. If a window_name is used which does not correlate to a previously defined window, then a new window is created and NAMEd according the the window name used in the TARGET attribute. This new window can then be referenced using its new name.
_self
Using this reserved keyword value, would cause any form feedback page to be loaded into the window that currently contains the form.
_parent
Using this reserved keyword value, would cause any form feedback page to be loaded into the window that is the parent of the window currently containing the form. i.e. if the form's window is part of a framed document, it would load into the window controlled by the <FRAMESET> element definitions that control the form's current window.
_top
Using the reserved keyword value would cause the form feedback page to be loaded into the topmost window, clearing any currently existing framed windows.
_blank
Using tis reserved keyword value would cause the form feedback page to be loaded into a newly created window. Using this value is the same as using TARGET="window_name" where the window_name used is not a previously defined window. NOTE : Unlike using the window_name using a previously undefined window name, using _blank will not name the new window for future use.

the <FORM> can also take the NAME attribute, which can be used to set the name of the element for scripting purposes.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <FORM> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <FORM> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <FORM> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <FORM> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <FORM> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <FORM> element for scripting purposes. Any <FORM> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <FORM> element in a document is an object that can be manipulated through scripting. Both Netscape and Internet Explorer support scripting of the <FORM> object - Netscape supporting it through the Forms collectionforms array, but Internet Explorer's Dynamic HTML support is more varied.

<FORM...> Properties
The <FORM...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.
The <FORM> object also supports the following properties:

action, encoding, method, name and target, all of which directly reflect (or set) their respective attribute values (with the encoding property reflecting the ENCTYPE attribute)

<FORM...> Methods
The <FORM...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.
The <FORM> element also supports the submit and reset methods, which submit, or reset the form respectively.

<FORM...> Events
The <FORM...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.
onreset and onsubmit are also supported events of the <FORM> element, firing when the form is reset, or submitted respectively.

© 1995-1998, Stephen Le Hunte


<INPUT...>

The Input element represents a field whose contents may be edited or activated by the user.

Attributes of the Input element:

ALIGN
Vertical alignment of the image. For use only with TYPE=IMAGE in HTML level 2. The possible values are exactly the same as for the ALIGN attribute of the <IMG ...> element.

CHECKED
Indicates that a checkbox or radio button is selected. Unselected checkboxes and radio buttons do not return name/value pairs when the form is submitted.

MAXLENGTH
Indicates the maximum number of characters that can be entered into a text field. This can be greater than specified by the SIZE attribute, in which case the field will scroll appropriately. The default number of characters is unlimited.

NAME
Symbolic name used when transferring the form's contents. The NAME attribute is required for most input types and is normally used to provide a unique identifier for a field, or for a logically related group of fields. The name given to the element can also be used to reference it for scripting purposes.

SIZE
Specifies the size or precision of the field according to its type. For example, to specify a field with a visible width of 24 characters:

INPUT TYPE="text" SIZE="24"

SRC
To be used with the TYPE=IMAGE , this attribute represents a URL specifying an the desired image.

TYPE
Defines the type of data the field accepts. Defaults to free text. Several types of fields can be defined with the type attribute:

BUTTON: This can be used to embed buttons directly into HTML documents, that add functionality when used in conjunction with Visual Basic Script, or JavaScript. The NAME attribute is used to give the button a unique name, which can be used to set its function in the script. The VALUE attribute specifies the text that is displayed on the button in the document.

This is a button TYPE :

CHECKBOX : Used for simple Boolean attributes (where a field will be chosen, or not), or for attributes that can take multiple values at the same time. The latter is represented by a number of checkbox fields each of which has the same name. Each selected checkbox generates a separate name/value pair in the submitted data, even if this results in duplicate names. The default value for checkboxes is "on". It requires the NAME and VALUE attributes, optional attributes being CHECKED.

This is a checkbox TYPE :

HIDDEN : With this input type, no field is presented to the user, but the content of the field is sent with the submitted form. This value may be used to transmit state information about client/server interaction.

IMAGE : An image field upon which you can click with a pointing device, causing the form to be immediately submitted. The co-ordinates of the selected point are measured in pixel units from the upper-left corner of the image, and are returned (along with the other contents of the form) in two name/value pairs. The x-co-ordinate is submitted under the name of the field with .x appended, and the y- co-ordinate is submitted under the name of the field with .y appended. The NAME attribute is required. The image itself is specified by the SRC attribute, exactly as for the Image element.

This is an image TYPE :

PASSWORD : is the same as the TEXT attribute, except that text is not displayed as it is entered.

This is a password TYPE :

RADIO : is used for attributes that accept a single value from a set of alternatives. Each radio button field in the group should be given the same name. Only the selected radio button in the group generates a name/value pair in the submitted data. Radio buttons require an explicit VALUE and NAME attribute. CHECKED is an optional attribute and can be used to specify which options are selected for initial form display.

This is a radio TYPE :

RESET : is a button that when pressed resets the form's fields to their specified initial values. The label to be displayed on the button may be specified just as for the SUBMIT button.

This is a reset TYPE :

SUBMIT : is a button that when pressed submits the form. You can use the VALUE attribute to provide a non- editable label to be displayed on the button. The default label is browser-specific. If a SUBMIT button is pressed in order to submit the form, and that button has a NAME attribute specified, then that button contributes a name/value pair to the submitted data. Otherwise, a SUBMIT button makes no contribution to the submitted data.

This is a submit TYPE :

TEXT : is used for a single line text entry fields. It should be used in conjunction with the SIZE and MAXLENGTH attributes to set the maximum amount of text that can be entered. For textual input that requires multiple lines, the <TEXTAREA> element for text fields which can accept multiple lines. Explicit VALUE and NAME attributes are also required.

This is a text TYPE :

TEXTAREA : is used for multiple-line text-entry fields. Use in conjunction with the SIZE and MAXLENGTH attributes. It is better to use the <TEXTAREA> element for such text entry boxes.

FILE : Netscape and Internet Explorer (from v4.0) support a FILE option to the TYPE attribute of the INPUT element, allowing an ACCEPT attribute for the INPUT element (which is a list of media types or type patterns allowed for the input) and allowing the ENCTYPE of a form to be "multipart/form-data".
This allows the inclusion of files with form information, which could prove invaluable for example, for companies providing technical support, or service providers, requesting data files.

Note : Netscape (since v3.0) and Internet Explorer (from v4.0) natively support the <INPUT TYPE="file"> type. Internet Explorer 3.0 supports an ActiveX control, available from the http://www.microsoft.com/ie/ that adds <INPUT TYPE="file"> functionality to Internet Explorer 3.0.

VALUE
When used with TYPE= ... attributes, this attribute sets the initial displayed value of the field if it displays a textual or numerical value. If the TYPE= ... attribute is one which only allows Boolean values (i.e. chosen, or not chosen) then this specifies the value to be returned when the field is selected.

TABINDEX
The TABINDEX attribute can be used to set a tabbing order for the user to navigate around the main <FORM>. For example, if <FORM> elements have TABINDEX properties set, when the user is focused on an element, pressing the 'Tab' key will pass the focus to the element with the next highest TABINDEX property.

DATAFLD
The DATAFLD attribute can be used to specify a data column name from the Data source (see DATASRC) that the <INPUT> is bound to. For more information on the DATAFLD attribute, see the Data Binding topic.

DATAFORMATAS
When the <INPUT> element is data-bound, it can accept straight text, or HTML from the data source. The DATAFORMATAS attribute should be set to "TEXT" or "HTML" accordingly. with DATAFORMATAS="HTML", the data provided for the <INPUT> element is parsed and rendered when it's displayed.
For more information on the DATAFORMATAS attribute, see the Data Binding topic.

DATASRC
The DATASRC attribute can be used to specify a data source that the <INPUT> is bound to. For more information on the DATASRC attribute, see the Data Binding topic.

DISABLED
Setting the DISABLED flag for a form element, disables it from receiving any user input, or focus. It can still display values, text etc., but the user will not be able to make any changes to those values. For example, the following text box (<INPUT TYPE="text">) has its DISABLED attribute set:

<INPUT TYPE="text" SIZE="20" DISABLED VALUE="Enter a Name">

As you can see, the text box is grayed and will not accept the focus.

READONLY
The READONLY flag is slightly different to the DISABLED flag in that an <INPUT> element labelled as READONLY can still receive the users focus, but the contents of the control can not be changed. For example, the following text box (<INPUT TYPE="text">) has its READONLY attribute set:

<INPUT TYPE="text" SIZE="20" READONLY VALUE="Enter a Name">

As you can see, the text box will accept the focus, but the contents can not be edited.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <INPUT> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <INPUT> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <INPUT> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <INPUT> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <INPUT> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <INPUT> element for scripting purposes. Any <INPUT> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

ACCESSKEY
The ACCESSKEY attribute can be used to specify a shortcut key for the <INPUT> (activated by pressing 'Alt' and the ACCESSKEY together - like standard Windows applications menu shortcuts). The ACCESSKEY setting does not have to be a character in the actual <INPUT> element and no modification reflects whether an ACCESSKEY has been defined.

Every <INPUT> element in a document is an object that can be manipulated through scripting. Scripting of the <INPUT> element is supported by both browsers (Netscape supports scripting through the Forms collection/array and Elements collection. See those topics for details of Netscape support for scripting the <INPUT> element.)

<INPUT...> Properties
The <INPUT...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title), for ell of its TYPE variants. Details of these can be found in the standard Dynamic HTML properties topics.
Additionally, the <INPUT> element supports the following properties for some of the TYPE variants. (If no TYPE variants are listed, then the property is supported by all of them).

align (image)
The align property reflects the value of the ALIGN attribute, when used with an image TYPE

accessKey
The accessKey property reflects the value of the ACCESSKEY attribute, when used in <INPUT> elements.

checked (checkbox, radio)
checked has a boolean value that represents whether the checkbox, or radio button has been checked (checked=true) or not (checked=false).

dataFld (button, checkbox, hidden, password, radio, text)
The dataFld property directly reflects the value of the DATAFLD attribute when used with <INPUT> elements.

dataFormatAs (button)
The dataFormatAs property directly reflects the value of the DATAFORMATAS attribute when used with <INPUT> elements.

dataSrc (button, checkbox, hidden, password, radio, text)
The dataSrc property directly reflects the value of the DATASRC attribute when used with <INPUT> elements.

defaultChecked (checkbox, radio)
The defaultChecked property has a boolean value representing whether or not the radio or checkbox element is checked by default when the form is displayed by the browser.

defaultValue (file, password, text)
The defaultValue property reflects the default value of the text boxes (or file upload selector). It contains a string value, the contents of which are what is displayed by default in the boxes.

disabled
The disabled property reflects (or sets) whether the particular <INPUT> element is disabled (greyed out and not responding to input) or not. It has a boolean (i.e. true or false) value).

form
The form property contains a reference to the form on which the particular <INPUT> element resides.

indeterminate (checkbox)
The indeterminate property reflects, or sets whether the checkbox is in an indeterminate state. If it is, it is displayed as being checked, but also grayed out. It will still respond to user input.

maxLength (password, text)
The maxLength property reflects, or sets the MAXLENGTH attribute for <INPUT> TYPE variants that support it.

name
The name property reflects the value of the NAME attribute for the <INPUT> element.

readOnly (password, text)
readOnly is a boolean value, representing whether the <INPUT> type has its READONLY flag set.

recordNumber (button, checkbox, file, image, radio, submit, text)
The recordNumber property represents the number of the record, from the recordset that provided data for the element. For more information on data-aware HTML elements and data binding, see the Data Binding topic.

status
The status property is an alias for the value property and can be used to determine whether radio buttons, or checkboxes are checked (true) or not (false).

tabIndex
The tabIndex property reflects (or sets) the value of the TABINDEX attribute, when used in <INPUT> elements.

type
The type property returns the value of the TYPE attribute (i.e. 'checkbox' for <INPUT TYPE="checkbox">, 'text' for <INPUT TYPE="text"> etc.)

value
The value property returns the value of the VALUE attribute for the <INPUT> element.

<INPUT...> Methods
The <INPUT...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.
Various TYPE variants of the <INPUT> element support the following methods:

blur
The blur method can be used to force the users focus away from the referenced <INPUT> element.

createTextRange
The createTextRange method (only supported for TYPE="text") can be used to create a TextRange from the text in, or entered into the text box. See the TextRange object topic for more information.

focus
The users focus can be forced onto any <INPUT> element by using the focus method. The onfocus event (see below) is then fired.

select
The select method can be used to select (i.e. pass focus to and highlight the contents of) the <INPUT> elements that support it (text and password). For example, if a text box has a character limit and the user has entered too many characters, the content could be highlighted and the form could alert the user that too many characters have been entered.

<INPUT...> Events
The <INPUT...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.
Some <INPUT> TYPE variants support the following events:

onafterupdate
The onafterupdate event is fired after data is transferred from the element to the data provider and will only fire after the onbeforeupdate event has fired and was successful. For more information on Data Binding, see the Data Binding topic.

onbeforeupdate
onbeforeupdate fires when a data bound element loses the focus, or the current document is unloaded and will only fire if the value of the element is different to the original value that was present when the element received the users focus. Note that onbeforeupdate is a cancelable event (setting returnValue=false for the Event object), which allows the document /script author a chance to validate the new data entered by the user on the client-side, before sending the data to the data provider. For more information on Data Binding, see the Data Binding topic.

onblur
When the referenced <INPUT> element loses the users focus, the onblur event is fired. On the fly form validation can make use of the onblur event to check form elements as the user is entering information.

onchange
The onchange event is fired when the user commits changes to an <INPUT> element. The event does not fire when the actual changes are made, but when the user 'commits' them, by either submitting the form, or by 'blurring' (i.e. removing focus from) the element. Any code using the onchange event is executed before the onblur event (see above), if the change is commited by the user removing the focus.

onerrorupdate
The onerrorupdate event fires when a data transfer error occurs, through some action by the user (i.e. pressing the 'Stop' button on the browser for example), but not if a script generates the transfer error. For more information on Data Binding, see the Data Binding topic.

onfocus
When the user passes the focus to any <INPUT> element, the onfocus event is fired for that element.

onselect
Similar to the onselecstart event, the onselect event is fired as the user selects (i.e. left-clicks and then drags the mouse across) the contents of the <INPUT> element.

© 1995-1998, Stephen Le Hunte


<KEYGEN...>

Note : The <KEYGEN> element is Netscape specific.

The <KEYGEN> element is used to generate 'key' material to be sent along with forms. It's designed mainly for use with certificate management systems. When used, it displays a menu of key sizes, form which the user must choose, before submitting the form. When the form is submitted, a key pair of the chosen size is generated and the private key is stored on the users PC. The public key and challenge string (as specified in the CHALLENGE attribute) are then coded, digitally signed and sent as the value of a name/value pair with the form (the name being the NAME attribute of the <KEYGEN> element.

For example:

<FORM>
. . .
<KEYGEN NAME="somekey" CHALLENGE="1125983021">
. . .
</FORM>

© 1995-1998, Stephen Le Hunte


<LABEL...>

Note : The <LABEL> element is a new element introduced in HTML 4.0 draft specifications and is currently only supported by Internet Explorer 4.0.

The <LABEL> element is used to link a text label to control like elements. Typically, these would be form elements - buttons, radio buttons, checkboxes etc. It provides for the kind of functionality built-in to most standard Windows based applications, whereby clicking the label next to a radio button is the same as clicking the radio button itself. Previously, in HTML, the radio button itself would have had to be clicked.

For example, consider the two radio buttons below:

Make a choice:
Red :
Blue :

They are constructed using standard <INPUT TYPE="radio"... elements. Notice that to make a choice, you have to click the actual radio button itself. Clicking the label does not make the choice.

The same example, slightly modified, with <LABEL> elements added to the radio buttons:

Make a choice:

Note that now clicking the text labels activates the radio buttons - the kind of behaviour seen in standard Windows based applications. Those radio buttons have had <LABEL> elements added to them, like so:

Make a choice:<BR>
<LABEL FOR="Red">Red : <INPUT TYPE="radio" NAME="Colour" VALUE="Red" ID="Red"></LABEL><BR>
<LABEL FOR="Blue">Blue : <INPUT TYPE="radio" NAME="Colour" VALUE="Blue" ID="Blue"></LABEL>

Note : If the <LABEL> element surrounds the control for which it is a label, then the focus marker (seen when the <LABEL> or control is clicked) will surround both elements. If the <LABEL> doesn't surround the control, then the focus marker will only be seen around the <LABEL> element.

The attributes for the <LABEL> element are:

ACCESSKEY
The ACCESSKEY attribute can be used to specify a shortcut key for the <LABEL> (activated by pressing 'Alt' and the ACCESSKEY together - like standard Windows applications menu shortcuts). The ACCESSKEY setting does not have to be a character in the actual label text and the label text is not modified in any way to reflect that an ACCESSKEY has been defined.

CLASS
The CLASS attribute is used to specify the <LABEL> element as using a particular style sheet class. See the Style Sheets topic for details.

DATAFLD
The DATAFLD attribute can be used to specify a data column name from the Data source (see DATASRC) that the <LABEL> is bound to. For more information on the DATAFLD attribute, see the Data Binding topic.

DATAFORMATAS
When the <LABEL> element is data-bound, it can accept straight text, or HTML from the data source. The DATAFORMATAS attribute should be set to "TEXT" or "HTML" accordingly. with DATAFORMATAS="HTML", the data provided for the <LABEL> element is parsed and rendered when it's displayed.
For more information on the DATAFORMATAS attribute, see the Data Binding topic.

DATASRC
The DATASRC attribute can be used to specify a data source that the <LABEL> is bound to. For more information on the DATASRC attribute, see the Data Binding topic.

FOR
The FOR attribute should directly reflect the ID attribute of the element which the <LABEL> is to be linked to. For example, in the above example, the two <LABEL> elements are linked to their respective radio buttons by their ID attributes. Note that the FOR attribute is theoretically unnecessary, if the <LABEL> element wraps the control it's a label for. Using the FOR attribute will ensure proper functionality though.

ID
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <LABEL> element for scripting purposes. Any <LABEL> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

LANG
The LANG attribute can be used to specify what language the <LABEL> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <LABEL> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

STYLE
As well as using previously defined style sheet settings, the <LABEL> element can have in-line stylings attached to it. See the Style Sheets topic for details.

TITLE
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <LABEL> section.

Every <LABEL> element in a document is an object that can be manipulated through scripting. Note that scripting of the <LABEL> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <LABEL> element at all.

<LABEL...> Properties
The <LABEL...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.
Additionally, the <LABEL> element supports the accessKey, dataFld, dataFormatAs, dataSrc and htmlFor, which directly reflect their attribute values.

<LABEL...> Methods
The <LABEL...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<LABEL...> Events
The <LABEL...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

Note : The onclick event for the <LABEL> element occurs before it is propagated to the element referenced in the <LABEL> elements FOR attribute (htmlFor property).

© 1995-1998, Stephen Le Hunte


<OPTION...>

The Option element can only occur within a <SELECT> element. It represents one choice, and can take the following attributes. The contents of the Option element is presented to the user to represent the option. It is used as a returned value if the VALUE attribute is not present.

SELECTED
Indicates that this option is initially selected.

VALUE
When present indicates the value to be returned if this option is chosen. The returned value defaults to the contents of the Option element.

NAME
The NAME attribute is used to set the name of the <OPTION> element that is sent as the name/value pair when the form is submitted.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <OPTION> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <DIR> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <OPTION> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <OPTION> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <OPTION> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <OPTION> element for scripting purposes. Any <OPTION> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <OPTION> element in a document is an object that can be manipulated through scripting. Scripting of the <OPTION> element is supported by both browsers (Netscape supports scripting through the Forms collection/array and Elements collection. See those topics for details of Netscape support for scripting the <OPTION> element.)

<OPTION...> Properties
Of the the standard Dynamic HTML properties, the <OPTION...> element/object supports className, document, id, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, parentElement, parentTextEdit, sourceIndex, style, tagName and title. Details of these can be found in the standard Dynamic HTML properties topics.
Additionally, the <OPTION> element supports the name, selected, text, type and value properties, which directly reflect the attributes of the same name. The text property can be used to set, or retrieve the text of the option chosen (i.e. the text presented to the user). The value property represents (or sets), the 'internal' value that is sent by the <OPTION> element when the form is submitted - therefore it doesn't affect the displayed list.

<OPTION...> Methods
The <OPTION...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<OPTION...> Events
The <OPTION...> element/object doesn't support any events.

© 1995-1998, Stephen Le Hunte


<SELECT...>

The Select element allows the user to chose one of a set of alternatives described by textual labels. Every alternative is represented by the <OPTION> element.

Attributes are:

MULTIPLE
The MULTIPLE attribute is needed when users are allowed to make several selections, e.g.

<SELECT MULTIPLE>

NAME
Specifies the name that will submitted as a name/value pair, or the name by which the element can be referred to in a script function.

SIZE
Specifies the number of visible items. If this is greater than one, then the resulting form control will be a list.

ACCESSKEY
The ACCESSKEY attribute can be used to specify a shortcut key for the <SELECT> drop down list (activated by pressing 'Alt' and the ACCESSKEY together - like standard Windows applications menu shortcuts). The ACCESSKEY setting does not have to be a character in the <SELECT> element, which is not modified in any way to reflect that an ACCESSKEY has been defined.

ALIGN="Alignment"
The ALIGN attribute can be used to set the alignment for the drop-down list. It accepts the standard ALIGN attribute values of absbottom, absmiddle, baseline, bottom, left, middle, right, texttop and top.

TABINDEX
The TABINDEX attribute can be used to set a tabbing order for the user to navigate around the main <FORM>. For example, if <FORM> elements have TABINDEX properties set, when the user is focused on an element, pressing the 'Tab' key will pass the focus to the element with the next highest TABINDEX property.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <SELECT> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <SELECT> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <SELECT> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <SELECT> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <SELECT> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <SELECT> element for scripting purposes. Any <SELECT> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

DATAFLD="Column Name"
The DATAFLD attribute can be used to specify a data column name from the Data source (see DATASRC) that the <SELECT> is bound to. For more information on the DATAFLD attribute, see the Data Binding topic.

DATASRC="Data Source"
The DATASRC attribute can be used to specify a data source that the <SELECT> is bound to. For more information on the DATASRC attribute, see the Data Binding topic.

DISABLED
The DISABLED flag (as with other form elements can be set to prevent the drop-down list from accepting the users focus.

The <SELECT> element is typically rendered as a pull down or pop-up list. For example (from the previous form fragment):

<SELECT NAME="Choice">
<OPTION>Outstanding
<OPTION>Very good
<OPTION>Good
<OPTION>Average
<OPTION>Below Average
<OPTION>Awful
<OPTION SELECTED>My response would be "indecent" under the CDA Act.
</SELECT>

Every <SELECT> element in a document is an object that can be manipulated through scripting. Scripting of the <SELECT> element is supported by both browsers (Netscape supports scripting through the Forms collection/array and Elements Object/Array. See those topics for details of Netscape support for scripting the <SELECT> element.)

<SELECT...> Properties
The <SELECT...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.
The <SELECT> element also has the following properties:

accessKey
The accessKey property directly reflects the setting of the ACCESSKEY attribute (see above).

dataFld
The dataFld property directly reflects the setting of the DATAFLD attribute (see above).

dataSrc
The dataSrc property directly reflects the setting of the DATASRC attribute (see above).

disabled
The disabled property has a boolean value representing whether (disabled=true) or not (disabled=false) the DISABLED flag has been set for the <SELECT> element.

form
The form property contains a reference to the form on which the particular <INPUT> element resides.

length
The length property returns a value representing the number of <OPTION> choices that are present in the <SELECT> element. It is read-writable, meaning that the number of choices can be shrunk/increased through scripting.

multiple
The multiple property has a boolean value (true or false) representing whether or not the MULTIPLE attribute flag has been set for the <SELECT> box.

name
The name property reflects the value of the NAME attribute.

recordNumber
The recordNumber property represents the number of the record, from the recordset that provided data for the element. For more information on data-aware HTML elements and data binding, see the Data Binding topic.

selectedIndex
The selectedIndex property returns (or can set) the index of the selected option in the <SELECT> element. The <OPTION> elements contained in the <SELECT> element are all referenced by their index number, starting at 0 for the first <OPTION> and incrementing in the order they appear in the document.

size
The size property directly reflects the value of the SIZE attribute (see above).

tabIndex
The tabIndex property reflects (or sets) the value of the TABINDEX attribute, when used in <SELECT> elements.

type
The type property returns either 'select-one' or 'select-multiple' for the <SELECT> element, depending on whether the MULTIPLE flag has been set or not.

<SELECT...> Methods
The <SELECT...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.
The <SELECT> element also supports the following methods:

add
The add method can be used to add new options to a <SELECT> element. Note that before an option can be added, its element must first be created using the createElement method of the Document Object (see that topic for details).

The add method accepts arguments of element and index, which represent the element to be added and the index (i.e. position) at which it is to be inserted into the option list. For example, an option element, created with

newOpt=document.createElement(OPTION)

can be added as the first option in a <SELECT> element (whose ID is 'selMain')

selMain.add(newOpt,0)

blur
The blur method can be used to force the users focus away from the referenced <SELECT> element, causing the onblur event (see below) to fire.

focus
The focus method can be used to force the users to focus on the referenced <SELECT> element, causing the onfocus event (see below) to fire.

item
The item method retrieves an element, or collection, from a given collection - in this case, the options collection contained within the <SELECT> element. It has the syntax:

element = Selectobject.item(index [, subindex])

where element is a reference to the returned element (or collection), Selectobject is the <SELECT> element object being referenced, index is a number or string referencing the element to retrieve from the collection and subindex is an optional parameter used when the index argument returns a collection of objects. For example, if the index property is a string value, then subindex could be a numerical value, determining which object is retrieved from the collection of elements whose name or id properties are equal to the value of the index argument.

remove
The remove method can be used to remove any option from the options contained in the <SELECT> element. It requires just the single argument of index, which should be the index of the choice to be removed.

<SELECT...> Events
The <SELECT...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.
The <SELECT> element also supports the following events:

onafterupdate
The onafterupdate event is fired after data is transferred from the element to the data provider and will only fire after the onbeforeupdate event has fired and was successful. For more information on Data Binding, see the Data Binding topic.

onbeforeupdate
onbeforeupdate fires when a data bound element loses the focus, or the current document is unloaded and will only fire if the value of the element is different to the original value that was present when the element received the users focus. Note that onbeforeupdate is a cancelable event (setting returnValue=false for the Event object), which allows the document /script author a chance to validate the new data entered by the user on the client-side, before sending the data to the data provider. For more information on Data Binding, see the Data Binding topic.

onblur
The onblur event is fired whenever the referenced <SELECT> element loses the users focus (either by the user clicking another section of the document, by 'tabbing' away, or by a script function using the blur method.

onchange
The onchangesubmitting event is fired when the user commits changes to a <SELECT> element. The event does not fire when the actual changes are made, but when the user 'commits' them, by either submitting the form, or by 'blurring' (i.e. removing focus from) the element. Any code using the onchange event is executed before the onblur event (see above), if the change is committed by the user removing the focus.

onerrorupdate
The onerrorupdate event fires when a data transfer error occurs, through some action by the user (i.e. pressing the 'Stop' button on the browser for example), but not if a script generates the transfer error. For more information on Data Binding, see the Data Binding topic.

onfocus
Whenever the <SELECT> element receives the users focus, the onfocus event is fired, causing whatever script functions that are linked to it to be executed.

onrowenter
The onrowenter event fires on the data source control when the current record has been changed, so new data is available to populate the HTML display elements that are bound to the data source. Somewhat confusingly, this will typically happen after the onrowexit event has been fired. For more information on Data Binding, see the Data Binding topic.

onrowexit
The onrowexit event is fired immediately before the data source changes the current record (i.e. when the user has requested another record, or set of records by pressing a button perhaps). Note that unlike the onafterupdate and onbeforeupdate events, onrowexit is fired by the data source, not any of the HTML elements used to display the data. Changes to the data in the HTML elements should have been transferred to the data source (with validation being taken care of in the on*update events). onrowexit will also fire if the record position is changed through scripting. For more information on Data Binding, see the Data Binding topic.

© 1995-1998, Stephen Le Hunte


<TEXTAREA...>

The TEXTAREA element lets users enter more than one line of text.

Any text included up to the end element is used to initialise the field's value. This end element is always required even if the field is initially blank. When submitting a form, lines in a TEXTAREA should be terminated using CR/LF.

In a typical rendering, the ROWS and COLS attributes determine the visible dimension of the field in characters. The field is rendered in a fixed-width font. HTML user agents should allow text to extend beyond these limits by scrolling as needed.

The WRAP attribute can be used to specify how to handle word-wrapping display in text input areas in forms.

<TEXTAREA WRAP=OFF> -- the default setting - Wrapping doesn't happen. Lines are sent exactly as typed.
<TEXTAREA WRAP=VIRTUAL> -- The display word-wraps, but long lines are sent as one line without new-lines.
<TEXTAREA WRAP=PHYSICAL> -- The display word-wraps, and the text is transmitted at all wrap points.

NOTE : Internet Explorer (version 3.0), by default wraps text in a <TEXTAREA> box, while Internet Explorer 4.0 supports the WRAP attribute. Also, these values have changed in Netscape 4.0 and Internet Explorer 4.0 and above to WRAP="off|soft|hard" respectively.

the <TEXTAREA> can also take the NAME attribute, which can be used to set the name of the element for scripting purposes.

ACCESSKEY
The ACCESSKEY attribute can be used to specify a shortcut key for the <TEXTAREA> (activated by pressing 'Alt' and the ACCESSKEY together - like standard Windows applications menu shortcuts). The ACCESSKEY setting can be any valid key character and the <TEXTAREA> is not modified in any way to reflect that an ACCESSKEY has been defined.

TABINDEX
The TABINDEX attribute can be used to set a tabbing order for the user to navigate around the main <FORM>. For example, if <FORM> elements have TABINDEX properties set, when the user is focused on an element, pressing the 'Tab' key will pass the focus to the element with the next highest TABINDEX property.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <TEXTAREA> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <TEXTAREA> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <TEXTAREA> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <TEXTAREA> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <TEXTAREA> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <TEXTAREA> element for scripting purposes. Any <TEXTAREA> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

ALIGN="Alignment"
The ALIGN attribute can be used to set the alignment for the drop-down list. It accepts the standard ALIGN attribute values of absbottom, absmiddle, baseline, bottom, left, middle, right, texttop and top.

DATAFLD="Column Name"
The DATAFLD attribute can be used to specify a data column name from the Data source (see DATASRC) that the <TEXTAREA> is bound to. For more information on the DATAFLD attribute, see the Data Binding topic.

DATASRC="Data Source"
The DATASRC attribute can be used to specify a data source that the <TEXTAREA> is bound to. For more information on the DATASRC attribute, see the Data Binding topic.

DISABLED
Setting the DISABLED flag for a <TEXTAREA> box disables it from receiving any user input, or focus. It can still display values, text etc., but the user will not be able to make any changes to those values.

READONLY
The READONLY flag is slightly different to the DISABLED flag in that an <TEXTAREA> element labelled as READONLY can still receive the users focus, but the contents of the control can not be changed.

Every <TEXTAREA> element in a document is an object that can be manipulated through scripting. Scripting of the <INPUT> element is supported by both browsers (Netscape supports scripting through the Forms collection/array and Elements Object/Array. See those topics for details of Netscape support for scripting the <INPUT> element.)

<TEXTAREA...> Properties
The <TEXTAREA...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.
The <TEXTAREA> element also supports the following properties:

accessKey
The accessKey property directly reflects the value of the ACCESSKEY attribute (see above).

align
The align property directly reflects the value of the ALIGN attribute (see above).

clientHeight
The clientHeight property reflects the height (in pixels) of the contents of the <TEXTAREA> element.

clientWidth
The clientWidth property reflects the width (in pixels) of the contents of the <TEXTAREA> element.

cols
The cols property directly reflects the value of the COLS attribute, if set. (See above)

dataFld
The dataFld property directly reflects the value of the DATAFLD attribute, setting the column name for Data Binding of the <TEXTAREA> element.

dataSrc
The dataSrc property directly reflects the value of the DATASRC attribute, taking the ID attribute of the data source for Data Binding of the <TEXTAREA> element.

disabled
The disabled contains a boolean value representing whether the DISABLED flag has been set for the <TEXTAREA> element.

name
The name property directly reflects the value of the NAME attribute for the <TEXTAREA> text box.

readOnly
The readOnly contains a boolean value representing whether the READONLY flag has been set for the <TEXTAREA> element.

rows
The rows property directly reflects the value of the ROWS attribute for the <TEXTAREA> text box.

scrollHeight
The scrollHeight property reflects the contents of the <TEXTAREA> elements total scrollable height (in pixels).

scrollLeft
The scrollLeft property reflects a value representing the distance between the left-most edge of the element and the left-most visible edge of the element. While the contents of the <TEXTAREA> element are totally visible on the screen, the scrollLeft property is 0, only increasing if the left-most edge of the <TEXTAREA> elements contents are scrolled off the left hand edge of the current viewing window.

scrollTop
The scrollTop property returns a value that represents the distance between the top-most edge of the element and the top-most edge of the current viewing window. When used with the <TEXTAREA> element, the scrollTop property is a value indicative of the extent to which the referenced element has been scrolled vertically. If the contents of the <TEXTAREA> element are visible, then the scrollTop property will be 0, only increasing as the contents of the element are scrolled off the top of the current viewing window.

scrollWidth
Like the scrollHeight property, the scrollWidth property reflects a value that represents the total scrollable width of the contents of the <TEXTAREA> element.

tabIndex
The tabIndex property reflects (or sets) the value of the TABINDEX attribute, when used in <TEXTAREA> elements.

type
The type property returns 'textarea' for the <TEXTAREA> element. It represents a string value giving a description of the type of form element being referenced.

value
The value property reflects (or sets), the VALUE attribute for the <TEXTAREA> element.

wrap
The wrap property directly reflects any settings of the WRAP attribute (see above).

<TEXTAREA...> Methods
The <TEXTAREA...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.
Additionally, the <TEXTAREA> element supports the following methods:

blur
The blur event can be used to force the users focus away from the referenced <TEXTAREA> element, firing the onblur event.

createTextRange
The createTextRange method can be invoked to create a TextRange object from the contents of the <TEXTAREA> element. See the TextRange object topic for details of properties, methods and events applicable to text ranges.

focus
The focus method can be used to pass the users focus to the referenced <TEXTAREA> element, forcing the onfocus event to fire.

<TEXTAREA...> Events
The <TEXTAREA...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.
The following events are also supported by the <TEXTAREA> element:

onafterupdate
The onafterupdate event is fired after data is transferred from the element to the data provider and will only fire after the onbeforeupdate event has fired and was successful. For more information on Data Binding, see the Data Binding topic.

onbeforeupdate
onbeforeupdate fires when a data bound element loses the focus, or the current document is unloaded and will only fire if the value of the element is different to the original value that was present when the element received the users focus. Note that onbeforeupdate is a cancelable event (setting returnValue=false for the Event object), which allows the document /script author a chance to validate the new data entered by the user on the client-side, before sending the data to the data provider. For more information on Data Binding, see the Data Binding topic.

onblur
When the referenced <TEXTAREA> element loses the users focus, the onblur event is fired. On the fly form validation can make use of the onblur event to check form elements as the user is entering information.

onchange
The onchange event is fired when the user commits changes to an <TEXTAREA> element. The event does not fire when the actual changes are made, but when the user 'commits' them, by either submitting the form, or by 'blurring' (i.e. removing focus from) the element. Any code using the onchange event is executed before the onblur event (see above), if the change is committed by the user removing the focus.

onerrorupdate
The onerrorupdate event fires when a data transfer error occurs, through some action by the user (i.e. pressing the 'Stop' button on the browser for example), but not if a script generates the transfer error. For more information on Data Binding, see the Data Binding topic.

onfocus
When the user passes the focus to any <TEXTAREA> element, the onfocus event is fired for that element.

onrowenter
The onrowenter event fires on the data source control when the current record has been changed, so new data is available to populate the HTML display elements that are bound to the data source. Somewhat confusingly, this will typically happen after the onrowexit event has been fired. For more information on Data Binding, see the Data Binding topic.

onrowexit
The onrowexit event is fired immediately before the data source changes the current record (i.e. when the user has requested another record, or set of records by pressing a button perhaps). Note that unlike the onafterupdate and onbeforeupdate events, onrowexit is fired by the data source, not any of the HTML elements used to display the data. Changes to the data in the HTML elements should have been transferred to the data source (with validation being taken care of in the on*update events). onrowexit will also fire if the record position is changed through scripting. For more information on Data Binding, see the Data Binding topic.

onscroll
The onscroll event is fired when the <TEXTAREA> text box is scrolled, by the user using the scrollbars on the <TEXTAREA> box.

© 1995-1998, Stephen Le Hunte


Frames overview

Frames

NOTE : The use of Frames is currently only supported by recent versions of Netscape (from version 2.0) and Internet Explorer (3.0 and above)

Frames allow the browser display window to be sub-divided into separate sections, each of which can be updated, or have new documents loaded into it separately from the remaining frame sections. As such, a frame based layout can be especially useful for HTML applications where some information is required across a whole range of pages (such as a table of contents, or title graphics for example). Within this reference for example, frames are employed to allow constant access to the navigation controls.

Frames are generated by two elements: FRAMESET and FRAME. Netscape only supports full framed documents, while the Internet Explorer also supports floating frames

Frame Document
A Frame document has a basic structure very much like a normal HTML document, except the <BODY> container is replaced by a FRAMESET container which describes the sub-HTML documents, or Frames, that will make up the page.

<HTML>
<HEAD>
</HEAD>
<FRAMESET>
...
</FRAMESET>
</HTML>

No HTML that would normally be included within the <BODY> section of a HTML document should be included within the <FRAMESET> ... </FRAMESET> elements.

NOTE : For an explanation of a working frame example, see the example page.

© 1995-1998, Stephen Le Hunte


Frames examples

First, a standard frame based layout shall be discussed. Below that, there is an example of the use of Internet Explorer Floating Frames

For the purposes of this example, the layout of an imaginary frame based HTMLib (actually the first version of the HTML based HTMLib) will be used for discussion. Firstly, the main document setting up the framed display shall be explained, then a more detailed examination of the use of the TARGET and NAME attributes shall be looked at.

The initial page that sets up the framed display is called index.htm and looks like this :

The framed layout it generates can be seen below

<HTML>
<HEAD>
<TITLE>The HTML Reference Library - HTMLib</TITLE>
</HEAD>
<FRAMESET COLS="25%,*"> 1
<FRAMESET ROWS="100, *"> 2
3 <FRAME SRC="buttons.htm" NORESIZE SCROLLING="no" NAME="buttons">
4 <FRAME SRC="qr.htm" NORESIZE SCROLLING="yes" NAME="QR">
</FRAMESET> 5
<FRAMESET ROWS="75, *"> 6
7 <FRAME SRC="title.htm" NORESIZE SCROLLING="no" NAME="TITLE">
8 <FRAME SRC="intro.htm" NORESIZE SCROLLING="auto" NAME="main">
</FRAMESET> 9
</FRAMESET> 10
</HTML>

Each line has been labelled with a number. This is for the following line by line breakdown:

1 <FRAMESET COLS="25%,*">
This line splits the viewing window into two vertical sections, the first being 25% of the viewing window and the second column comprising of the rest of the available window space. This is the same as using <FRAMESET COLS="25%","75%">

2 <FRAMESET ROWS="100,*">
This line specifies a frameset that is inside the first vertical column specified in line 1. It divides the column into two horizontal sections, the top section being 100 pixels high, the lower section using the rest of the available viewing window.

3 <FRAME SRC="buttons.htm" NORESIZE SCROLLING="yes" NAME="buttons">
This is the first FRAME element in the document. It specifies the contents of the top frame defined in line 2 as being the file buttons.htm (which lays out the buttons for accessing the Quick Reference sections easily). This frame is set to not allow resizing and is allowed to use scroll bars whenever necessary.

4 <FRAME SRC="qr.htm" NORESIZE SCROLLING="yes" NAME="QR">
Like line 3, this line specifies a document called qr.htm (the document containing the quick reference look up information) to be the contents of the lower frame defined in line 2. As with the above definition, the frame can not be resized and is allowed scroll bars where necessary. It has been named QR. All the links in the file buttons.htm (the file used in the above section) use TARGET="QR" attributes to enable the button graphics to link to certain sections of the file qr.htm.

5 </FRAMESET>
This line closes the FRAMESET definition opened in line 2

6 <FRAMESET ROWS="75,*">
This line (similar to line 2) defines the horizontal division of the right hand frame defined in line 1. It splits it into two section, the top being 75 pixels high and the lower section comprising of the rest of the available viewing space.

7 <FRAME SRC="title.htm" NORESIZE SCROLLING="no" NAME="TITLE">
This line (similar to line 3) specifies the file to be used for the contents of the top section as defined in line 6. The file is title.htm (which contains the ever present 'site' title). This time, the section has been set to be non-scrollable. It is not a problem if some of the title is missing due to an altered viewing area (at least not that much of a problem).

8 <FRAME SRC="intro.htm" NORESIZE SCROLLING="auto" NAME="main">
This line (similar to line 3) specifies the contents of the lower section of the frame defined in line 6. This has been named main and is the main window for the content of the 'site'. Its scrolling attribute has been set to "auto" as some topics will be bigger than others, requiring scrolling, but where the topic is small enough to fit in the window, scroll bars will not be displayed, maximising the space available to the frame.

9 </FRAMESET>
This line closes the FRAMESET definition opened in line 6

10 </FRAMESET>
This line closes the initial FRAMESET definition opened in line 1

The following diagram can be used to show how the TARGET and NAME attributes are used within the frame set up of this 'site'.

A screenshot of this 'site'.

The section labelled 1 is NAMEd "buttons". All of its links use TARGET="QR" in them, to specify that the documents to be loaded by the link (all of the graphics are links) are to be loaded into the frame section that is NAMEd "QR", which in this case is the frame labelled 2.

For example, the button 'M' in the top section, has the following as its link:

<A HREF="qr.htm#QRM" TARGET="QR">
<IMG SRC="images/m.gif" BORDER="0" WIDTH="17" HEIGHT="17" ALT="M">
</A>

which specifies that the document qr.htm#QRM (in this case, the fragment of qr.htm that has been set as <A NAME="QRM">) is to be loaded into the frame NAMEd "QR" (the section labelled 2) when the graphic 'M' is clicked on.

The section labelled 4 is NAMEd "main". All of the links from the file "qr.htm" (displayed in the frame labelled 2) use TARGET="main" in them, so that activating any of the links in the Quick Reference, will load the required document into this window. All of the links in documents that appear in this window do not use any TARGET attributes, which means that any documents they load will be loaded on top of the one containing the link.

Most care should be taken when using external links within a framed set up. If you don't specify a TARGET using one of the special reserved names (see Frames), or set the TARGET to use a name not specified anywhere in your frame set up then the new document will be loaded into whichever frame of your own frame layout the link originated from. If the external target is also a framed document, this can get exceedingly messy.
By far the best way to avoid this 'frame retention' is to always use TARGET="_top" in all links of your site that link to documents external to your own site. That way, the browser will load the document you have linked to, in a clean window, removing all of your frame set up first.

Floating frames
The Internet Explorer allows floating frames to be used within standard documents. To do this, it only requires that a frame be employed within a standard HTML document. For example, for the main interface to the 'Activated HTMLib' section of the HTMLib web site, a floating frame is specified for all of the subsequent HTML documents (both framed and normal) to be displayed in.

The HTML used to do this is :

<IFRAME NAME="content_frame" width="488" height="244" SRC="welcome.htm"></IFRAME>

This sets the frame as being called "content_frame" and being initially loaded with the file "welcome.htm" . The WIDTH and HEIGHT attributes serve to set the size of the frame within the page. The image below shows the resulting floating frame (highlighted with a red border)

ScreenShot showing a floating frame

© 1995-1998, Stephen Le Hunte


<IFRAME...>

The Internet Explorer (version 3 and above) has introduced the concept of floating frames. These are much like standard frames, except they can be anywhere within a standard HTML document. A floating frame must be enclosed within <IFRAME> ... </IFRAME> elements. Any HTML between the start and end elements will be displayed by browsers that do not support floating frames, while the frame specified in the <IFRAME> elements will be displayed by those browsers that do.

For example :

<IFRAME NAME="content_frame" width="488" height="244" SRC="welcome.htm">This site uses floating frames</IFRAME>

The above HTML fragment would display the file "content_frame" in Internet Explorer, but would display the text 'This site uses floating frames' to any other browser.

The other main difference between floating and normal frames, is that floating frames accept WIDTH, HEIGHT and standard <IMG> HSPACE, VSPACE and ALIGN attributes, to set the display size and alignment of the frame within the document. They can have other files loaded into them exactly as normal frames (by use of the TARGET attribute in the link and the NAME attribute of the frame).

For an example of floating frames, see the examples page

The other floating frame attributes are:

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <IFRAME> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <IFRAME> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <IFRAME> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <IFRAME> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <IFRAME> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <IFRAME> element for scripting purposes. Any <IFRAME> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

BORDER="Border Size"
The BORDER attribute can be used to specify the thickness of the border to be rendered around the floating frame. Note that it requires the FRAMEBORDER attribute to be set.

BORDERCOLOR="#rrggbb or Colour Name"
The BORDERCOLOR attribute sets the colour of the border to be rendered around the frame. Note that it requires the frame to have a border, by setting the FRAMEBORDER attribute.

DATAFLD="Column Name"
The DATAFLD attribute can be used to specify a data column name from the Data source (see DATASRC) that the <IFRAME> is bound to. For more information on the DATAFLD attribute, see the Data Binding topic. As with <FRAME>, the data retrieved from the data source will be used for the SRC attribute of the <IFRAME> element, so should contain valid URLs/URL fragments.

DATASRC="Data Source"
The DATASRC attribute can be used to specify a data source that the <IFRAME> is bound to. For more information on the DATASRC attribute, see the Data Binding topic.

FRAMEBORDER="Sets Border"
The FRAMEBORDER attribute accepts boolean values of either "yes" (or "1") or "no" (or "0") to specify whether the frame will be rendered with a border. The default (and also if no FRAMEBORDER attribute is set is "yes"/"1".

NAME="Frame Name"
The NAME attribute names the frame to allow it to be referenced through the Frames collection.

SCROLLING="Scrollbars"
By default, scrollbars will be presented to the reader if the contents of the frame are larger than the specified HEIGHT and WIDTH attributes. To remove the scrollbars, use SCROLLING="no". Using SCROLLING="auto" will only apply scrollbars if the content is too large and using SCROLLING="no" will disable the scrollbars completely.

Every <IFRAME> element in a document is an object that can be manipulated through scripting. Scripting of the <IFRAME> element is only supported by Internet Explorer as Netscape doesn't support the <IFRAME> element.

<IFRAME...> Properties
The <IFRAME...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics. Also, the <IFRAME> element supports the following properties, which all reflect the values in the attributes described above: align, border, borderColor, dataFld, dataSrc, frameBorder, height, hspace, scrolling, src, vspace and width.

<IFRAME...> Methods
The <IFRAME...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<IFRAME...> Events
The <IFRAME...> element/object supports the following events:

onblur
As a <IFRAME> element essentially describes different windows, using the onblur event (fired when the user removes the focus from the <IFRAME> and therefore the window) is equivalent to using the onblur event of the Window Object.

onfocus
Again, using the onfocus event for a <IFRAME> element (fired when the user focuses on the <IFRAME> window definition) is the same as using the onfocus event of the Window Object.

onload
The onload event is fired when the <IFRAME> window definition loads. Using the event in the <IFRAME> element is the same as using it from the Window Object.

onunload
The onload event is fired when the <IFRAME> window definition is un-loaded (by the user shutting the browser down, or by navigating to another page. Using the event in the <IFRAME> element is the same as using it from the Window Object.

© 1995-1998, Stephen Le Hunte


<FRAME...>

<FRAME>
This element defines a single frame in a frameset. Its possible attributes are:

SRC="url"
This attribute is used to specify the HTML document that will be used as the display in the particular frame section of the frame set.

NAME="frame_name"
The NAME attribute is used to assign a name to a frame so it can be targeted by links in other documents, by using <A HREF="URL" TARGET="frame_name"> (These would usually be from other documents in the same frame set.) The NAME attribute is optional; by default all windows are unnamed.

Names must begin with an alphanumeric character. Several reserved names have been defined, which start with an underscore.
These are currently:

_blank | Always load this link into a new, unnamed window
_self | Always load this link over the document that originated the link.
_parent | Always load this link over the parent frame. (becomes self if the frame has no parent, or is the parent frame).
_top | Always load this link at the top level. (becomes self if the frame is the top frame).

NOTE : Although these are reserved names for the NAME attribute of the <FRAME> element, they should only be referred to using an Anchor Target. That is, used to target specific windows, allowing smoother transition between framed documents and between framed and non-framed documents (for example when providing a link to documents on a foreign server that may not be framed documents).

MARGINWIDTH="value"
This accepts an absolute pixel value and forces indentation from the left and right hand side of the frame pane according to the number of pixels. It cannot be set to a value less than 1 as this would cause the contents of the frame to be displayed right up against the left hand margin. By default, the browser will choose its own MARGINWIDTH when trying to produce the best possible display.

MARGINHEIGHT="value"
This is analogous to the MARGINWIDTH attribute, but it controls the top and bottom margins.

SCROLLING="yes|no|auto"
This attribute can be used to control the appearance of any scroll bars that may appear as a result of the frame contents being too much to display in the set pane. Using "no" may be dangerous, because the HTML author cannot know the resolution/display window size of the client browser and so information may not be displayable.

NORESIZE
By default, all frames specified in a framed document can be resized by the client. Setting this flag (it requires no value) prevents the frame from being resized.

FRAMEBORDER="yes|no|0"
This attribute allows control of the frame border display. With this attribute set to "0" (Internet Explorer), the borders for the specific frame are not drawn. Netscape claims supports use of this attribute (using values of "yes|no") in the <FRAME> and <FRAMESET> elements, but on testing didn't appear to. Netscape can support borderless frames, using the example given below.

A note about borderless frames
Internet Explorer and Netscape have different methods for producing borderless frames. In Netscape specifying BORDER="0" in the first <FRAMESET> element is sufficient to remove all the borders from the frame set. Internet Explorer on the other hand, doesn't support this attribute and requires setting of the FRAMEBORDER and FRAMESPACING attributes (both to "0") in the first frame set to remove all the borders. For a browser independent (i.e. working in Netscape and Internet Explorer) borderless frame layout, use :

<HTML>
<HEAD>
<TITLE>Borderless Frames example</TITLE>
</HEAD>
<FRAMESET FRAMEBORDER="0" FRAMESPACING="0" BORDER="0" COLS="165,*" >
<FRAME SRC="contents.htm" NAME="contents">
... other <FRAME> elements (including other <FRAMESET> elements)
...

FRAMESPACING="value"
This attribute is also Internet Explorer specific and allows the setting of extra space around frames, to give the appearance of floating frames. The "value" should be the distance required around the frame in pixels.

<FRAME FRAMESPACING="40" ...>

would present the frame with an invisible "border" of 40 pixels.

BORDERCOLOR
This Netscape specific attribute sets the colours for the border of the specified frame. It can also be used in the <FRAMESET> element (see above) for globally setting the border colours of a whole frameset. It accepts any #rrggbb hex triplet as a value. Setting the BORDERCOLOR attribute in the <FRAME> element over-rides any setting given in the <FRAMESET> element, of which the <FRAME> is a part.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. The value of the TITLE attribute aren't presented as a ToolTip for the <FRAME> element.

LANG="language setting"
The LANG attribute can be used to specify what language the <FRAME> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <FRAME> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <FRAME> element as using a particular style sheet class. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <FRAME> element for scripting purposes. Any <FRAME> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

DATAFLD="Column Name"
The DATAFLD attribute can be used to specify a data column name from the Data source (see DATASRC) that the <FRAME> is bound to. For more information on the DATAFLD attribute, see the Data Binding topic. For the <FRAME> element, the data received from the data source is used for the SRC attribute, therefore, the data source column should contain valid URL's/URL fragments.

DATASRC="Data Source"
The DATASRC attribute can be used to specify a data source that the <FRAME> is bound to. For more information on the DATASRC attribute, see the Data Binding topic.

Every <FRAME> element in a document is an object that can be manipulated through scripting. Scripting of the <FRAME> element is supported by both Internet Explorer and Netscape, although Netscape only supports the events - none of the properties, or methods for the <FRAME> element are available to Netscape.

<FRAME...> Properties
Of the standard Dynamic HTML properties, the <FRAME...> element/object supports the following: className, document, id, isTextEdit, lang, language, parentElement, parentTextEdit, sourceIndex, tagName and title. Details of these can be found in the standard Dynamic HTML properties topics.
Also, the <FRAME> element supports the following properties, which all reflect the values in the attributes described above: borderColor, dataFld, dataSrc, frameBorder, marginHeight, marginWidth, noResize and src.

<FRAME...> Methods
Of the standard Dynamic HTML methods, the <FRAME...> element/object supports the following: contains, getAttribute, removeAttribute, scrollIntoView and setAttribute. Details of these can be found in the standard Dynamic HTML Methods topics.

<FRAME...> Events
The <FRAME...> element/object doesn't support any events.

© 1995-1998, Stephen Le Hunte


<FRAMESET...>

<FRAMESET>
This is the main container for a Frame. The FRAMESET element has a matching end element, and within the FRAMESET you can only have other nested FRAMESET, FRAME, or the NOFRAMES elements.

ROWS="row_height_value_list"
This takes a list of values, separated by comma marks. They can represent either absolute pixel, percentage, or relative scaling values. The total set by the values given in the ROWS attribute should not exceed 100% (as the total rows are extended across the whole available browser display window).

If any of the values are single numerical values then these are considered to be absolute pixel values. It is not recommended to fix a frame set by using a complete set of pixel values, because browsers use a variety of different screen resolutions when viewing documents, so the layout may become distorted. Percentage values can be given for this attribute. If the total percentage values given exceed 100% then all values will be scaled down by the browser so that the total is 100%. The remaining value option is to use a * character. This tells the browser that the frame is a relative size frame and should be displayed accordingly. Numerical values can be used with the * character, to scale the relative frame sections within the browser window.

E.g.
To specify a three vertical framed layout, where the first section uses 20% of the display window, the second uses 100 pixels and the third section uses the remaining screen, use:

<FRAMESET ROWS="20%, 100, *">

To split the layout into two vertical frames, the first using a quarter of the display window, the second using three-quarters of the window, use:

<FRAMESET ROWS="25%, 75%">

NOTE : This would be exactly the same as using <FRAMESET ROWS="*, 3*">

COLS="column_width_list"
The COLS attribute takes as its value a comma separated list of values that is of the exact same syntax as the list described above for the ROWS attribute.

The FRAMESET element can be nested. In this way, frame sections can be set up where the display window can be split into either horizontal or vertical sections, with any of these being further sub-divided by nested FRAMESET elements.

BORDER="pixel value"
Netscape allows the global setting of frame border thicknesses by using this attribute within the <FRAMESET> element. It accepts a pixel value, which determines the thickness of any borders used within the frame set.

BORDERCOLOR="#rrggbb or colour name"
This Netscape specific attribute sets the colours for the border of the specified frameset. It can also be used in the <FRAME> element (see below) for setting the border colours of a specific frame. It accepts any #rrggbb hex triplet as a value. Any BORDERCOLOR setting in a <FRAMESET> element is over-ridden by a setting present in the <FRAME> element.

FRAMEBORDER="yes|no|0"
Netscape claims support for this attribute (in a similar fashion to that supported by Internet Explorer in the <FRAME> element) to set the borders globally for an entire <FRAMESET>, using values of either "yes" or "no". However, on testing, didn't appear to. Internet Explorer does support the use of this attribute in the <FRAMESET> element, using the value "0" to produce borderless frames. To produce this effect, it also requires using the FRAMESPACING="0" attribute. (The FRAMESPACING attribute sets the amount of 'grey' space between each frame of the frame set.) See the <FRAME> topic for an example of browser-independent borderless frames.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. The <FRAMESET> element is not rendered on screen and so doesn't produce a ToolTip with the contents of the TITLE attribute.

LANG="language setting"
The LANG attribute can be used to specify what language the <FRAMESET> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <FRAMESET> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <FRAMESET> element as using a particular style sheet class. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <FRAMESET> element for scripting purposes. Any <FRAMESET> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <FRAMESET> element in a document is an object that can be manipulated through scripting. Scripting of the <FRAMESET> element is supported by both Internet Explorer and Netscape, although Netscape only supports the events - none of the properties, or methods for the <FRAMESET> element are available to Netscape.

<FRAMESET...> Properties
Of the standard Dynamic HTML properties, the <FRAMESET...> element/object supports the following: className, document, id, isTextEdit, lang, language, parentElement, parentTextEdit, sourceIndex, tagName and title. Details of these can be found in the standard Dynamic HTML properties topics.
Also, the <FRAMESET> element supports the following properties, which all reflect the values in the attributes described above: border, borderColor, cols, frameBorder, frameSpacing and rows.

<FRAMESET...> Methods
Of the standard Dynamic HTML methods, the <FRAMESET...> element/object supports the following: contains, getAttribute, removeAttribute, scrollIntoView and setAttribute. Details of these can be found in the standard Dynamic HTML Methods topics.

<FRAMESET...> Events
The <FRAMESET...> element/object supports the following events:

onblur
As a <FRAMESET> element essentially describes different windows, using the onblur event (fired when the user removes the focus from the <FRAMESET> and therefore the window) is equivalent to using the onblur event of the Window Object.

onfocus
Again, using the onfocus event for a <FRAMESET> element (fired when the user focuses on the <FRAMESET> window definition) is the same as using the onfocus event of the Window Object.

onload
The onload event is fired when the <FRAMESET> window definition loads. Using the event in the <FRAMESET> element is the same as using it from the Window Object.

onunload
The onload event is fired when the <FRAMESET> window definition is un-loaded (by the user shutting the browser down, or by navigating to another page. Using the event in the <FRAMESET> element is the same as using it from the Window Object.

© 1995-1998, Stephen Le Hunte


<NOFRAMES...>

<NOFRAMES>
This element is provided for HTML authors who want to create alternative content for browsers that can not display frames. This is especially useful if the author is making the very first document of the site a framed document. It should be noted that this element is not actually recognised by non-frame capable browsers. As with any HTML, if the browser does not recognise the element, it ignores it. Non frame-capable browsers would ignore all the <FRAMESET> and <FRAME> elements, but will display whatever is enclosed in the <NOFRAMES> ... </NOFRAMES> elements, which can be any HTML at all, because that is what it recognises. On the other hand, frame capable browsers will preferentially display what is set up by the frame elements, unless they provide any mechanism where the display of frames can be turned off, in which case they may display this alternative content.

© 1995-1998, Stephen Le Hunte


List elements overview

Lists

HTML supports several types of lists, all of which may be nested. If used they should be present in the <BODY> of a HTML document.

<DL> - Definition list
<DIR> - Directory list
<MENU> - Menu list
<OL> - Ordered list
<UL> - Unordered list

© 1995-1998, Stephen Le Hunte


<DIR...>

Note : <DIR> is deprecated in HTML 4.0. Authors are encouraged to use <UL> instead.

A Directory List element can be used to present a list of items, which may be arranged in columns, typically 24 characters wide. Some browsers will attempt to optimise the column width as function of the widths of individual elements.

A directory list must begin with the <DIR> element which is immediately followed by a <LI> (list item) element:

E.g. :

<DIR>
<LI>A-H
<LI>I-M
<LI>M-R
<LI>S-Z
</DIR>

Would render as:

  • A-H
  • I-M
  • M-R
  • S-Z

    • TITLE="informational ToolTip"
    The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <DIR> section. Note that <LI> element also support use of the TITLE attribute. The ToolTip presented to the user will be that set in the <DIR> element, if no <LI> element has a TITLE attribute.

    LANG="language setting"
    The LANG attribute can be used to specify what language the <DIR> (or <LI>) element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

    LANGUAGE="Scripting language"
    The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <DIR> (or <LI>) element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

    CLASS="Style Sheet class name"
    The CLASS attribute is used to specify the <DIR> (or <LI>) element as using a particular style sheet class. See the Style Sheets topic for details.

    STYLE="In line style setting"
    As well as using previously defined style sheet settings, the <DIR> (or <LI>) element can have in-line stylings attached to it. See the Style Sheets topic for details.

    ID="Unique element identifier"
    The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <DIR> (or <LI>) element for scripting purposes. Any <DIR> (or <LI>) element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

    Every <DIR> (or <LI>) element in a document is an object that can be manipulated through scripting. Note that scripting of the <DIR> and/or <LI> elements/objects is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <DIR> or <LI> elements at all.

    <DIR...> and <LI> Properties
    The <DIR...> elements support all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.

    <DIR...> and <LI> Methods
    The <DIR...> elements support all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

    <DIR...> and <LI> Events
    The <DIR...> elements support all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

    © 1995-1998, Stephen Le Hunte


<DL...>

A definition list is a list of terms and corresponding definitions. Definition lists are typically formatted with the term flush-left and the definition, formatted paragraph style, indented after the term.

Example of use:

<DL>
<DT>&lt;PRE&gt;<DD>Allows for the presentation of preformatted text.
<DT>&lt;P&gt;<DD>This is used to define paragraph blocks.
</DL>

Would render as:

<PRE>
Allows for the presentation of preformatted text
<P>
This is used to define paragraph blocks

If the <DT> term does not fit in the <DT> column (one third of the display area), it may be extended across the page with the <DD> section moved to the next line, or it may be wrapped onto successive lines of the left hand column.

The opening list element must be <DL> and must be immediately followed by the first term (<DT>).

The definition list type can take the COMPACT attribute, which suggests that a compact rendering be used, because the list items are small and/or the entire list is large.

Unless you provide the COMPACT attribute, the HTML user agent may leave white space between successive <DT>, <DD> pairs. The COMPACT attribute may also reduce the width of the left-hand (<DT>) column.

<DL COMPACT>
<DT>&lt;PRE&gt;<DD>Allows for the presentation of preformatted text.
<DT>&lt;P&gt;<DD>This is used to define paragraph blocks.
</DL>

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <DL> section. Note that <DT> and <DD> also support use of the TITLE attribute. The ToolTip presented to the user will be that set in the <DT> or <DD> element. If they don't have a TITLE attribute, that set for the main <DL> element will be used. For example:

<DL TITLE="A definition list">
<DT TITLE="A definition term">&lt;PRE&gt;<DD TITLE="Definition data">Allows for the presentation of preformatted text.
<DT>&lt;P&gt;<DD>This is used to define paragraph blocks.
</DL>

As you can see below, when the mouse hovers over the first <DT> or <DD> elements, their TITLE properties are presented, but hovering the mouse over the latter elements, presents the TITLE ToolTip given in the main <DL> element.

<PRE>
Allows for the presentation of preformatted text.
<P>
This is used to define paragraph blocks.

LANG="language setting"
The LANG attribute can be used to specify what language the <DL> (or <DT> or <DD> elements) is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <DL> (or <DT> or <DD> elements) element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <DL> (or <DT> or <DD> elements) as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <DL> (or <DT> or <DD>) element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <DL> (or <DT> or <DD>) element for scripting purposes. Any <DL> (or <DT> or <DD>) element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <DL> (or <DT> or <DD>) element in a document is an object that can be manipulated through scripting. Note that scripting of the <DL>, <DT> and <DD> elements/objects is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <DL>, <DT> or <DD> element at all.

<DL...> (<DT> and <DD>) Properties
The <DL...> elements support all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.
The <DL> element also support the compact property, which reflects its COMPACT attribute setting (see above).

<DL...> (<DT> and <DD>) Methods
The <DL...> elements support all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<DL...> (<DT> and <DD>) Events
The <DL...> elements support all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<MENU...>

Note : <MENU> is deprecated in HTML 4.0. Authors are encouraged to use <UL> instead.

Menu lists are typically rendered as discrete items on a single line. It is more compact than the rendering of an unordered list. Typically, a menu list will be rendered as a bulleted list, but this is at the discretion of the browser.

A menu list must begin with a <MENU> element which is immediately followed by a <LI> (list item) element:

E.g :

<MENU>
<LI>First item in the list.
<LI>Second item in the list.
<LI>Third item in the list.
</MENU>

Would render as:

  • First item in the list.
  • Second item in the list.
  • Third item in the list.

    • TITLE="informational ToolTip"
    The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <MENU> section. Note that <LI> element also support use of the TITLE attribute. The ToolTip presented to the user will be that set in the <MENU> element, if no <LI> element has a TITLE attribute.

    LANG="language setting"
    The LANG attribute can be used to specify what language the <MENU> (or <LI>) element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

    LANGUAGE="Scripting language"
    The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <MENU> (or <LI>) element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

    CLASS="Style Sheet class name"
    The CLASS attribute is used to specify the <MENU> (or <LI>) element as using a particular style sheet class. See the Style Sheets topic for details.

    STYLE="In line style setting"
    As well as using previously defined style sheet settings, the <MENU> (or <LI>) element can have in-line stylings attached to it. See the Style Sheets topic for details.

    ID="Unique element identifier"
    The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <MENU> (or <LI>) element for scripting purposes. Any <MENU> (or <LI>) element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

    Every <MENU> (or <LI>) element in a document is an object that can be manipulated through scripting. Note that scripting of the <MENU> and/or <LI> elements/objects is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <MENU> or <LI> elements at all.

    <MENU...> and <LI> Properties
    The <MENU...> elements support all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.

    <MENU...> and <LI> Methods
    The <MENU...> elements support all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

    <MENU...> and <LI> Events
    The <MENU...> elements support all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

    © 1995-1998, Stephen Le Hunte


<OL...>

The Ordered List element is used to present a numbered list of items, sorted by sequence or order of importance and is typically rendered as a numbered list, but this is as the discretion of individual browsers. (NOTE : The list elements are not sorted by the browser when displaying the list. This sorting should be done manually when adding the HTML elements to the desired list text.) Ordered lists can be nested.

An ordered list must begin with the <OL> element which is immediately followed by a <LI> (list item) element:

E.g. :

<OL>
<LI>Click on the desired file to download.
<LI>In the presented dialog box, enter a name to save the file with.
<LI>Click 'OK' to download the file to your local drive.
</OL>

Would render as:

  1. Click on the desired file to download.
  2. In the presented dialog box, enter a name to save the file with.
  3. Click 'OK' to download the file to your local drive.

The Ordered List element can take the COMPACT attribute, which suggests that a compact rendering be used.

As mentioned above, the average ordered list counts 1, 2, 3, ... etc. The TYPE attribute allows authors to specify whether the list items should be marked with:

(TYPE=A) - capital letters. e.g. A, B, C ...
(TYPE=a) - small letters. e.g. a, b, c ...
(TYPE=I) - large roman numerals. e.g. I, II, III ...
(TYPE=i) - small roman numerals. e.g. i, ii, iii ...
(TYPE=1) - or the default numbers. e.g. 1, 2, 3 ...

For lists that wish to start at values other than 1 the new attribute START is available.

START is always specified in the default numbers, and will be converted based on TYPE before display. Thus START=5 would display either an 'E', 'e', 'V', 'v', or '5' based on the TYPE attribute.

E.g., changing the above example to :

<OL TYPE=a START=3>
<LI>Click on the desired file to download.
<LI>In the presented dialog box, enter a name to save the file with.
<LI>Click 'OK' to download the file to your local drive.
</OL>

would present the list as using lower case letters, starting at 'c'.

  3. Click on the desired file to download.
  4. In the presented dialog box, enter a name to save the file with.
  5. Click 'OK' to download the file to your local drive.

To give even more flexibility to lists, the TYPE attribute can be used with the <LI> element. It takes the same values as <OL> and it changes the list type for that item, and all subsequent items. For ordered lists the VALUE attribute is also allowed, which can be used to set the count, for that list item and all subsequent items.

NOTE : The TYPE attribute used in the <OL> Element and the <LI> Element and the START attribute in the <OL> Element are supported only by Netscape and the Internet Explorer.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <OL> section. Note that <LI> element also support use of the TITLE attribute. The ToolTip presented to the user will be that set in the <OL> element, if no <LI> element has a TITLE attribute.

LANG="language setting"
The LANG attribute can be used to specify what language the <OL> (or <LI>) element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <OL> (or <LI>) element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <OL> (or <LI>) element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <OL> (or <LI>) element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <OL> (or <LI>) element for scripting purposes. Any <OL> (or <LI>) element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <OL> (or <LI>) element in a document is an object that can be manipulated through scripting. Note that scripting of the <OL> and/or <LI> elements/objects is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <OL> or <LI> elements at all.

<OL...> and <LI> Properties
The <OL...> elements support all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.
The <OL> element also supports the start and type properties, which reflect any settings of the START and TYPE attributes (see above). When used in an <OL> list, the <LI> element also supports the type and value properties, which reflect their attribute settings (see above).

<OL...> and <LI> Methods
The <OL...> elements support all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<OL...> and <LI> Events
The <OL...> elements support all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<UL...>

The Unordered List element is used to present a list of items which is typically separated by white space and/or marked by bullets, but this is at the discretion of individual browsers.

An unordered list must begin with the <UL> element which is immediately followed by a <LI> (list item) element. Unordered lists can be nested.

E.g.

<UL>
<LI>First list item
<LI>Second list item
<LI>Third list item
</UL>

Would render as:

  • First list item
  • Second list item
  • Third list item

The Unordered List element can take the COMPACT attribute, which suggests that a compact rendering be used.

The basic bulleted list has a default progression of bullet types that changes as you move through indented levels. From a solid disc, to a circle to a square. The TYPE attribute can be used in the <UL> element so that no matter what the indent level the bullet type can be specified thus :

TYPE=disc
TYPE=circle
TYPE=square

To give even more flexibility to lists, the TYPE attribute to the <LI> element is also allowed. It takes the same values as <UL> and it changes the list type for that item, and all subsequent items.

NOTE : The TYPE attribute when used in the <UL> and <LI> elements is supported by Netscape only.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <UL> section. Note that <LI> element also support use of the TITLE attribute. The ToolTip presented to the user will be that set in the <UL> element, if no <LI> element has a TITLE attribute.

LANG="language setting"
The LANG attribute can be used to specify what language the <UL> (or <LI>) element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <UL> (or <LI>) element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <UL> (or <LI>) element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <UL> (or <LI>) element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <UL> (or <LI>) element for scripting purposes. Any <UL> (or <LI>) element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <UL> (or <LI>) element in a document is an object that can be manipulated through scripting. Note that scripting of the <UL> and/or <LI> elements/objects is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <UL> or <LI> elements at all.

<UL...> and <LI> Properties
The <UL...> elements support all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.
The <UL> (and <LI> when used in a <UL> element) also supports the type property, which reflect any settings of the TYPE attribute (see above).

<UL...> and <LI> Methods
The <UL...> elements support all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<UL...> and <LI> Events
The <UL...> elements support all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


Tables

At present, the table HTML elements are :

<TABLE> - The Table delimiter
<TR ...> - Used to specify number of rows in a table
<TD ...> - Specifies table data cells
<TH ...> - Table Header cell
<CAPTION ...> - Specifies the table Caption

Internet Explorer has introduced support for various HTML 3.0 table elements. Those introduced are:

<THEAD> - specifies the Table head
<TBODY> - specifies the Table body
<TFOOT> - specifies the Table footer
<COLGROUP> - used to group column alignments
<COL> - used to specify individual column alignments

Also, some new attributes have been introduced. These are:

<TABLE BACKGROUND="..."> - specifies a background image for the table
<TH BACKGROUND="..."> - specifies a background image for the table header
<TD BACKGROUND="..."> - specifies a background image for table data cell
<TABLE FRAME="..."> - specifies the appearance of the Table frame
<TABLE RULES="..."> - specifies the appearance of the Table dividing lines

For some table examples, see the examples page.

Tables and Style Sheets.
All table elements (in fitting with being allowed in the <BODY> of a HTML document) can have style sheet information applied to them. This means that they can take the CLASS, ID and STYLE attributes within the elements as well as having their own definitions within the <STYLE> settings in the <HEAD> element. There are special considerations for tables within the style sheet specification though. Some detail about this can be found in the Tables and Style Sheets topic.

© 1995-1998, Stephen Le Hunte


<CAPTION...>

This represents the caption for a table. <CAPTION> elements should appear inside the <TABLE> but not inside table rows or cells. The caption accepts an alignment attribute that defaults to ALIGN=top but can be explicitly set to ALIGN=bottom. Like table cells, any document body HTML can appear in a caption. Captions are, by default horizontally centred with respect to the table, and the may have their lines broken to fit within the width of the table.

The <CAPTION> element can accept the following attributes:

ALIGN="top|bottom|left|center|right"
The ALIGN attribute controls whether the caption appears above or below the table, using the top and bottom values, defaulting to top. The Internet Explorer allows the <CAPTION> element to be left, right or center aligned. For the Internet Explorer to set the <CAPTION> at the top or bottom of the table, it is necessary to use the VALIGN attribute.

VALIGN="top|bottom"
The Internet Explorer allows use of the VALIGN attribute inside the <CAPTION> element. It specifies whether the caption text should be displayed at the top or bottom of the table.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <CAPTION> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <CAPTION> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <CAPTION> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <CAPTION> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <CAPTION> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <CAPTION> element for scripting purposes. Any <CAPTION> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <CAPTION> element in a document is an object that can be manipulated through scripting. Note that scripting of the <CAPTION> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <CAPTION> element at all.

<CAPTION...> Properties
Of the standard Dynamic HTML properties, the <CAPTION...> element/object supports the following: className, document, id, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title. Details of these can be found in the standard Dynamic HTML properties topics.
The <CAPTION> element also supports the following properties:

align
The align property reflects (or sets) the value of the ALIGN attribute described above.

clientHeight
The clientHeight property reflects the height (in pixels) of the contents of the <CAPTION> element.

clientWidth
The clientWidth property reflects the width (in pixels) of the contents of the <CAPTION> element.

vAlign
The vAlign property reflects (or sets) the value of the VALIGN attribute described above.

<CAPTION...> Methods
The <CAPTION...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.
The <CAPTION> element also supports the following methods:

blur
The blur event can be used to force the users focus away from the referenced <CAPTION> element, firing the onblur event.

focus
The focus method can be used to pass the users focus to the referenced <CAPTION> element, forcing the onfocus event to fire.

<CAPTION...> Events
The <CAPTION...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.
Also, the <CAPTION> element supports the following events:

onblur
When the referenced <CAPTION> element loses the users focus, the onblur event is fired, executing any script events that are attached to it.

onfocus
When the user passes the focus to any <CAPTION> element, the onfocus event is fired for that element.

onresize
The onresize event is fired whenever the contents of the <CAPTION> element are resized, by window movement, or dynamically through scripting.

© 1995-1998, Stephen Le Hunte


<COL...>

This element, which is Internet Explorer specific, can be used to specify the text alignment for table columns. It accepts the following attributes:

ALIGN="center|justify|left|right"
This sets the text alignment within the column group. The default value is "center"

VALIGN="Vertical alignment"
This sets the vertical text alignment for the column (or column group). It accepts values of baseline, bottom, middle or top, with middlebeing the default value.

SPAN="value"
This can be used to set the number of columns upon which the ALIGN attribute is to act.

WIDTH="initial column width"
The WIDTH attribute can be used to set the initial column width for the column(s) that the <COL> element covers.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. As the <COL> element doesn't render in the document, the TITLE text will not get used as a ToolTip.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <COL> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <COL> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <COL> element for scripting purposes. Any <COL> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <COL> element in a document is an object that can be manipulated through scripting. Note that scripting of the <COL> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <COL> element at all.

<COL...> Properties
Of the standard Dynamic HTML properties, the <COL...> element/object supports the following: className, document, id, isTextEdit, parentElement, parentTextEdit, sourceIndex, style, tagName and title. Details of these can be found in the standard Dynamic HTML properties topics.
Also, the <COL> element supports properties of align, span, vAlign and width, all of which reflect the values of their respective attributes.

<COL...> Methods
Of the standard Dynamic HTML methods, the <COL...> element/object supports the following: click, contains, getAttribute, removeAttribute and setAttribute. Details of these can be found in the standard Dynamic HTML Methods topics.

<COL...> Events
The <COL...> element/object doesn't support any events.

© 1995-1998, Stephen Le Hunte


<COLGROUP...>

This element, which is Internet Explorer specific, can be used to group columns together to set their alignment properties. It accepts the following attributes:

ALIGN="center|justify|left|right"
This sets the text alignment within the column group. The default value is "center"

VALIGN="baseline|bottom|middle|top"
This sets the vertical text alignment within the column group.

SPAN="value"
This can be used to set the number of columns upon which the ALIGN and VALIGN attributes are to act.

WIDTH="initial column width"
The WIDTH attribute can be used to set the initial column width for the column(s) that the <COLGROUP> element covers.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. As the <COLGROUP> element doesn't render in the document, the TITLE text will not get used as a ToolTip.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <COLGROUP> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <COLGROUP> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <COLGROUP> element for scripting purposes. Any <COLGROUP> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <COLGROUP> element in a document is an object that can be manipulated through scripting. Note that scripting of the <COLGROUP> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <COLGROUP> element at all.

<COLGROUP...> Properties
Of the standard Dynamic HTML properties, the <COLGROUP...> element/object supports the following: className, document, id, isTextEdit, parentElement, parentTextEdit, sourceIndex, style, tagName and title. Details of these can be found in the standard Dynamic HTML properties topics.
Also, the <COLGROUP> element supports properties of align, span, vAlign and width, all of which reflect the values of their respective attributes.

<COLGROUP...> Methods
Of the standard Dynamic HTML methods, the <COLGROUP...> element/object supports the following: click, contains, getAttribute, removeAttribute and setAttribute. Details of these can be found in the standard Dynamic HTML Methods topics.

<COLGROUP...> Events
The <COLGROUP...> element/object doesn't support any events.

© 1995-1998, Stephen Le Hunte


<TABLE...>

This is the main wrapper for all the other table elements, and other table elements will be ignored if they aren't wrapped inside of a <TABLE> ... </TABLE> element.

The <TABLE> element has the following attributes :

BORDER="value"
This attribute can be used to both control and set the borders to be displayed for the table. If present, then a border will be drawn around all data cells. The exact thickness and display of this default border is at the discretion of individual browsers. If the attribute isn't present, then the border is not displayed, but the table is rendered in the same position as if there were a border (i.e. allowing room for the border). It can also be given a value, i.e. BORDER=<value> which specifies the thickness that the table border should be displayed with. The border value can be set to 0, which regains all the space that the browser has set aside for any borders (as in the case where no border has been set described above)

CELLPADDING="value"
The CELLPADDING is the amount of white space between the borders of the table cell and the actual cell data (whatever is to be displayed in the cell). It defaults to an effective value of 1

CELLSPACING="value"
The CELLSPACING is the amount of space inserted between individual table data cells. It defaults to an effective value of 2.

<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0">
gives the most compact table possible.

COLS="number of columns"
Both Netscape (4.0 and above) and Internet Explorer (3.01 and above) claim to support the <TABLE COLS="n"> attribute. The purpose of this attribute is to allow the browser to incrementally display large tables as the cell data is downloaded. It is part of the 'Complex Table Model' as defined in the W3C draft HTML 3 Tables draft specification. However, use of this attribute appears to do nothing in Internet Explorer or Netscape (Communicator preview 2). (It has been included here for completeness).

WIDTH="value or percent"
If used, this attribute can specify either the exact width of the table in pixels, or the width of the table as a percentage of the browser display window.

HEIGHT="value or percent"
If used, this attribute can specify either the exact height of the table in pixels, or the height of the table as a percentage of the browser display window.

ALIGN="left|right"
Some browsers (Internet Explorer and Netscape) support the ALIGN attribute to the <TABLE> element. Like that used for floating images, it allows a table to be aligned to the left or right of the page, allowing text to flow around the table. Also, as with floating images, it is necessary to have knowledge of the <BR CLEAR= ...> element, to be able to organise the text display so as to minimise poor formatting.

VALIGN="top|bottom|center"
The Internet Explorer and Netscape support this attribute that specifies the vertical alignment of the text displayed in the table cells. The default (which is also used if the attribute is not set is centre-aligned.)

BGCOLOR="#rrggbb|colour name"
Internet Explorer and Netscape support use of this attribute (also supported in the <BODY> element). It allows the background colour of the table to be specified, using either the specified colour names, or a rrggbb hex triplet.

BORDERCOLOR="#rrggbb|colour name"
Internet Explorer includes support for this attribute which sets the border colour of the table. Any of the pre-defined colour names can be used, as well as any colour defined by a rrggbb hex triplet. It is necessary for the BORDER attribute to be present in the main <TABLE> element for border colouring to work.

BORDERCOLORLIGHT="#rrggbb|colour name"
Internet Explorer allows use of the BORDERCOLORLIGHT attribute to set independently, the lighter colour to be displayed on a 3-dimensional table border. It is the opposite of BORDERCOLORDARK. Any of the pre-defined colour names can be used, as well as any colour defined by a rrggbb hex triplet. It is necessary for the BORDER attribute to be present in the main <TABLE> element for border colouring to work.

BORDERCOLORDARK="#rrggbb|colour name"
Internet Explorer allows use of the BORDERCOLORDARK attribute to set independently, the darker colour to be displayed on a 3-dimensional table border. It is the opposite of BORDERCOLORLIGHT. Any of the pre-defined colour names can be used, as well as any colour defined by a rrggbb hex triplet. It is necessary for the BORDER attribute to be present in the main <TABLE> element for border colouring to work.

NOTE : The BGCOLOR, BORDERCOLOR, BORDERCOLORLIGHT and BORDERCOLORDARK attributes can also be used in <TH>, <TR> and <TD> elements, with the colour defined in the last element over-riding those defined before. E.g. if a <TD> element contains a BORDERCOLOR attribute setting, the setting specified will be used instead of any colour settings that may have been specified in the <TR> element, which in turn over-rides any colour settings in the <TABLE> element.

BACKGROUND="URL of image"
Internet Explorer and Netscape support the placing of images in the <TABLE> element. (Also in the <TD> and <TH> elements) If used in the <TABLE> element, the image in question will be tiled behind all of the table cells. Any of the supported graphic file formats can be used as a graphic behind a table.

FRAME
Only Internet Explorer supports the use of this attribute. It requires the BORDER attribute to be set and affects the display of the table borders. It can accept any of the following values:

void | this removes all the external borders
above | this displays external borders at the top of the table only
below | this displays external borders at the bottom of the table only
hsides | this displays external borders at the horizontal sides of the table. I.e. at the top and bottom of the table.
lhs | this displays external borders at the left hand edges of the table only.
rhs | this displays external borders at the right hand edges of the table only.
vsides | this displays external borders at both left and right hand edges of the table.
box | this displays a box around the table (i.e. top, bottom, left and right hand sides)

RULES
Internet Explorer supports this new attribute. It requires the BORDER value to be set and may only be used in tables where the <THEAD>, <TBODY> and <TFOOT> sections have been set. It affects the display of the internal table borders ("rules"). It can accept the following values:

none | this removes all the internal rules
basic | this displays horizontal borders between the <THEAD>, <TBODY> and <TFOOT> sections.
rows | this displays horizontal borders between all rows
cols | this displays horizontal borders between all columns
all | this displays all the internal rules.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <TABLE> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <TABLE> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <TABLE> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <TABLE> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <TABLE> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <TABLE> element for scripting purposes. Any <TABLE> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

DATAPAGESIZE="Number of records to show"
The DATAPAGESIZE attribute specifies how many records will be displayed at any one time when the <TABLE> is set up as a repeating data-bound table. For more information, see the Data Binding topic.

DATASRC="Data Source"
The DATASRC attribute is used to specify which data source provider the table is using to gather its data. For more information, see the Data Binding topic.

DATAFLD="Column Name"
The DATAFLD attribute specifies which column of the data source is to be used to provide the data for the table. For more information, see the Data Binding topic.

Every <TABLE> element in a document is an object that can be manipulated through scripting. Note that scripting of the <TABLE> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <TABLE> element at all.

<TABLE...> Properties
Of the standard Dynamic HTML properties, the <TABLE...> element/object supports the following: className, document, id, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.
The <TABLE> element also supports the following properties, all of which directly reflect their attribute values: align, background, bgColor, border, borderColor, borderColorDark, borderColorLight, cellPadding, cellSpacing, cols, dataFld, dataPageSize, dataSrc, frame, height, rules and width.

caption
The caption property contains a reference to the <TABLE> elements <CAPTION> element if one exists.

clientHeight
The clientHeight property reflects the height (in pixels) of the contents of the <CAPTION> element.

clientWidth
The clientWidth property reflects the width (in pixels) of the contents of the <CAPTION> element.

scrollHeight
The scrollHeight property reflects the contents of the <TABLE> elements total scrollable height (in pixels).

scrollLeft
The scrollLeft property reflects a value representing the distance between the left-most edge of the element and the left-most visible edge of the element. While the contents of the <TABLE> element are totally visible on the screen, the scrollLeft property is 0, only increasing if the left-most edge of the <TABLE> elements contents are scrolled off the left hand edge of the current viewing window.

scrollTop
The scrollTop property returns a value that represents the distance between the top-most edge of the element and the top-most edge of the current viewing window. When used with the <TABLE> element, the scrollTop property is a value indicative of the extent to which the referenced element has been scrolled vertically. If the contents of the <TABLE> element are visible, then the scrollTop property will be 0, only increasing as the contents of the element are scrolled off the top of the current viewing window.

scrollWidth
Like the scrollHeight property, the scrollWidth property reflects a value that represents the total scrollable width of the contents of the <TABLE> element.

<TABLE...> Methods
The <TABLE...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.
The <TABLE> element also supports the following method:

blur
The blur event can be used to force the users focus away from the referenced <TABLE> element, firing the onblur event.

createCaption
The createCaption method can be used to create a <CAPTION> element for the referenced <TABLE> element. If one already exists, then the method returns a pointer to it. For example:

elCaption=document.all("tblExample").createCaption()

would create and empty <CAPTION> element for the <TABLE> element referenced by ...all("tblExample"). This new <CAPTION> element can then be manipulated using the various methods and properties of the <CAPTION> element (see that element for details).

createTFoot
The createTFoot method can be used to create a <TFOOT> element for the referenced <TABLE> element. If one already exists, then the method returns a pointer to it. For example:

elTFoot=document.all("tblExample").createTFoot()

would create and empty <TFOOT> element for the <TABLE> element referenced by ...all("tblExample"). This new <TFOOT> element can then be manipulated using the various methods and properties of the <TFOOT> element (see that element for details).

createTHead
The createTHead method can be used to create a <THEAD> element for the referenced <TABLE> element. If one already exists, then the method returns a pointer to it. For example:

elTHead=document.all("tblExample").createTHead()

would create and empty <THEAD> element for the <TABLE> element referenced by ...all("tblExample"). This new <THEAD> element can then be manipulated using the various methods and properties of the <THEAD> element (see that element for details).

deleteCaption
The deleteCaption method can be used to delete an existing <CAPTION> element for the referenced <TABLE> element (either one that is there in the document source, or one created with the createCaption method. For example:

document.all("tblExample").deleteCaption()

deletes the existing (or created) <CAPTION> element for the <TABLE> element referenced by ...all("tblExample").

deleteRow
The deleteRow method deletes the row referenced by the index argument for the referenced <TABLE> element, also removing it from the Rows Collection for the <TABLE> element. Note that when using the deleteRow method for the <TABLE> element, the rowIndex property of the <TR> element to be deleted must be used. For example:

document.all("tblExample").deleteRow(1)

would delete the second <TR> element contained in the <TABLE> element, whether it's in a <THEAD>, <TBODY>, or <TFOOT> section of the <TABLE>

deleteTFoot
The deleteTFoot method can be used to delete an existing <TFOOT> element for the referenced <TABLE> element (either one that is there in the document source, or one created with the createTFoot method. For example:

document.all("tblExample").deleteTFoot()

deletes the existing (or created) <TFOOT> element for the <TABLE> element referenced by ...all("tblExample").

deleteTHead
The deleteTHead method can be used to delete an existing <THEAD> element for the referenced <TABLE> element (either one that is there in the document source, or one created with the createTHead method. For example:

document.all("tblExample").deleteTHead()

deletes the existing (or created) <THEAD> element for the <TABLE> element referenced by ...all("tblExample").

insertRow
The insertRow method inserts a new <TR> element into the referenced <TABLE> element. It can take an optional index argument which should specify where in the <TABLE> the new row is to be inserted. Note that inserting a new row into a <TABLE> element also inserts it into the Rows Collection for the <TABLE> element. For example:

rowNew=document.all("tblExample").insertRow(3)

inserts a new fourth row into the main <TABLE> element, which may impact the Rows Collection for the <THEAD>, <TBODY>, or <TFOOT> elements, depending on the number of rows in each section.

focus
The focus method can be used to pass the users focus to the referenced <TABLE> element, forcing the onfocus event to fire.

nextPage
The nextPage re-renders the <TABLE> with the next block of data records (the size being set by the DATAPAGESIZE attribute), if the <TABLE> has been set up as a data-bound repeating table. For more information, see the Data Binding topic.

previousPage
The previousPage method will display the 'previous' block of records, if the table is a data-bound repeating table. For more information, see the Data Binding topic.

refresh
The refresh method causes the table (and its data) to be refreshed, if the table is a data-bound, repeating table. For more information, see the Data Binding topic.

<TABLE...> Events
The <TABLE...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.
Additionally, the <TABLE> element supports the following events:

onafterupdate
The onafterupdate event is fired after data is transferred from the element to the data provider and will only fire after the onbeforeupdate event has fired and was successful. For more information on Data Binding, see the Data Binding topic.

onbeforeupdate
onbeforeupdate fires when a data bound element loses the focus, or the current document is unloaded and will only fire if the value of the element is different to the original value that was present when the element received the users focus. Note that onbeforeupdate is a cancelable event (setting returnValue=false for the Event object), which allows the document /script author a chance to validate the new data entered by the user on the client-side, before sending the data to the data provider. For more information on Data Binding, see the Data Binding topic.

onblur
When the referenced <TABLE> element loses the users focus, the onblur event is fired, executing any script events that are attached to it.

onfocus
When the user passes the focus to any <TABLE> element, the onfocus event is fired for that element.

onresize
The onresize event is fired whenever the contents of the <TABLE> element are resized, by window movement, or dynamically through scripting.

onrowenter
The onrowenter event fires on the data source control when the current record has been changed, so new data is available to populate the HTML display elements that are bound to the data source. Somewhat confusingly, this will typically happen after the onrowexit event has been fired. For more information on Data Binding, see the Data Binding topic.

onrowexit
The onrowexit event is fired immediately before the data source changes the current record (i.e. when the user has requested another record, or set of records by pressing a button perhaps). Note that unlike the anafterupdate and onbeforeupdate events, onrowexit is fired by the data source, not any of the HTML elements used to display the data. Changes to the data in the HTML elements should have been transferred to the data source (with validation being taken care of in the on*update events). onrowexit will also fire if the record position is changed through scripting. For more information on Data Binding, see the Data Binding topic.

© 1995-1998, Stephen Le Hunte


<TBODY...>

This element, which is Internet Explorer specific, is used to specify the body section of the table. It is somewhat analogous to the <BODY> element. It doesn't directly affect the rendering of the table on the screen, but is required if RULES wish to be set in the <TABLE>.

Possible <TBODY> attributes are:

ALIGN="Alignment"
The ALIGN attribute takes values of center, left and right, and specifies the alignment of the <TBODY> section relative to the rest of the table.

BGCOLOR="Background Colour"
Background colouring can be applied to the <TBODY> section, by using the BGCOLOR attribute. It accepts any valid #rrggbb hex triplet, or Colour Name.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. The <TBODY> element does not display its TITLE attribute as a ToolTip.

LANG="language setting"
The LANG attribute can be used to specify what language the <TBODY> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <TBODY> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <TBODY> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <TBODY> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <TBODY> element for scripting purposes. Any <TBODY> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

VALIGN="Vertical Alignment"
The VALIGN attribute takes values of baseline, bottom, middle and top, and specifies the vertical alignment of the <TBODY> section relative to the rest of the table.

Every <TBODY> element in a document is an object that can be manipulated through scripting. Note that scripting of the <TBODY> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <TBODY> element at all.

<TBODY...> Properties
Of the standard Dynamic HTML properties, the <TBODY...> element/object supports the following className, document, id, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, parentElement, parentTextEdit, sourceIndex, style, tagName and title. Details of these can be found in the standard Dynamic HTML properties topics.
The <TBODY> element also supports properties of align, bgColor and vAlign, which reflect their attribute settings.

<TBODY...> Methods
Of the standard Dynamic HTML methods, the <TBODY...> element/object supports the following: click, contains, getAttribute, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics. Additionally, the <TBODY> element supports the following events:

deleteRow
The deleteRow method deletes the row referenced by the index argument for the referenced <TBODY> element, also removing it from the Rows Collection for the <TBODY> and <TABLE> elements.

document.all("tbodyExample").deleteRow(1)

would delete the second <TR> element contained in the <TBODY> element referenced by ...all("tbodyExample"), impacting the Rows Collection for the <TBODY> and <TABLE> elements.

insertRow
The insertRow method inserts a new <TR> element into the referenced <TBODY> element. It can take an optional index argument which should specify where in the <TBODY> the new row is to be inserted. Note that inserting a new row into a <TBODY> element also inserts it into the Rows Collection for the <TBODY> element and the Rows Collection for the <TABLE>. For example:

rowNew=document.all("tbodyExample").insertRow(3)

inserts a new fourth row into the <TBODY> element, which will impact the Rows Collection for the <TBODY> and <TABLE> elements.

<TBODY...> Events
The <TBODY...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<TD...>

This stands for table data, and specifies a standard table data cell. Table data cells must only appear within table rows. Each row need not have the same number of cells specified as short rows will be padded with blank cells on the right. A cell can contain any of the HTML elements normally present in the body of an HTML document.

<TD ...> ... </TD> can accept the following attributes.

ALIGN="left|center|right"
This attribute controls whether text inside the table cell(s) is aligned to the left, right or centred within the cell.

VALIGN="top|middle|bottom|baseline"
The VALIGN attribute controls whether text inside the table cell(s) is aligned to the top, bottom, or vertically centred within the cell. It can also specify that all the cells in the row should be vertically aligned to the same baseline.

WIDTH="value_or_percent"
If used, this attribute can specify either the exact width of the data cell in pixels, or the width of the data cell as a percentage of the table being displayed. Only one data cell can set the width for an entire column, so it is good practice to specify all data cells in the same column as having the same width, if the attribute is set at all.

HEIGHT="value_or_percent"
If used, this attribute can specify either the exact height of the data cell in pixels, or the height of the data cell as a percentage of the browser display window. Only one data cell can set the height for an entire row.

NOTE : Netscape supports use of the WIDTH="value%" and "pixel_value" for this element (it only supports the HEIGHT="%value" attribute for the main <TABLE> element). Internet Explorer supports both percentage and pixel values for both the HEIGHT and WIDTH attributes.
For WIDTH="%value" settings, the WIDTH="%value" also needs to be set in the main <TABLE> element and the cell/header columns (affected by any cell with a WIDTH="%value" setting) will be scaled as a percentage of the table width (which would be scaled as a percentage of the browser window). Also, for WIDTH="value" settings, the table will only be sized to the maximum extent of the browser window width (with cells/headers being scaled accordingly), unless the WIDTH="value" setting is used in the main <TABLE> element, set to the combined size of the cells/headers.
For HEIGHT="%value" settings, the cell (and any rows it is part of) will be rendered as the percentage of the browser window, regardless of any HEIGHT settings in the main <TABLE>. If only one cell has a WIDTH or HEIGHT attribute set, then that setting is used for all the columns/rows of the table that the cell is part of. If more than one cell in a row or column have WIDTH or HEIGHT attributes set, then the largest setting of all the constituent data cells will be used for the entire row/column of the table.

NOWRAP
If this attribute appears in any table cell (<TH> or <TD>) it means the lines within this cell cannot be broken to fit the width of the cell. Be cautious in use of this attribute as it can result in excessively wide cells.

COLSPAN="value"
This attribute can appear in any table cell (<TH> or <TD>) and it specifies how many columns of the table this cell should span. The default COLSPAN for any cell is 1.

ROWSPAN="value"
This attribute can appear in any table cell (<TH> or <TD>) and it specifies how many rows of the table this cell should span. The default ROWSPAN for any cell is 1. A span that extends into rows that were never specified with a <TR> will be truncated.

BGCOLOR="#rrggbb|colour name"
Internet Explorer and Netscape support use of this attribute (also supported in the <BODY> element). It allows the background colour of the data cell to be specified, using either the specified colour names, or a rrggbb hex triplet.

BORDERCOLOR="#rrggbb|colour name"
Internet Explorer includes support for this attribute which sets the border colour of the data cell. Any of the pre-defined colour names can be used, as well as any colour defined by a rrggbb hex triplet. It is necessary for the BORDER attribute to be present in the main <TABLE> element for border colouring to work.

BORDERCOLORLIGHT="#rrggbb|colour name"
Internet Explorer allows use of the BORDERCOLORLIGHT attribute to set independently, the lighter colour to be displayed on a 3-dimensional data cell border. It is the opposite of BORDERCOLORDARK. Any of the pre-defined colour names can be used, as well as any colour defined by a rrggbb hex triplet. It is necessary for the BORDER attribute to be present in the main <TABLE> element for border colouring to work.

BORDERCOLORDARK="#rrggbb|colour name"
Internet Explorer allows use of the BORDERCOLORDARK attribute to set independently, the darker colour to be displayed on a 3-dimensional data cell border. It is the opposite of BORDERCOLORLIGHT. Any of the pre-defined colour names can be used, as well as any colour defined by a rrggbb hex triplet. It is necessary for the BORDER attribute to be present in the main <TABLE> element for border colouring to work.

NOTE : The BGCOLOR, BORDERCOLOR, BORDERCOLORLIGHT and BORDERCOLORDARK attributes can also be used in <TABLE>, <TH> and <TR> elements, with the colour defined in the last element over-riding those defined before. E.g. if a <TD> element contains a BORDERCOLOR attribute setting, the setting specified will be used instead of any colour settings that may have been specified in the <TR> element, which in turn over-rides any colour settings in the <TABLE> element.

BACKGROUND="URL of image"
Internet Explorer and Netscape support the placing of images inside the <TD> element. (Also in the <TABLE>, and <TH> elements) If used in the <TD> element, the image in question will be tiled behind the particular data cell. Any of the supported graphic file formats can be used as a graphic behind a table.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <TD> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <TD> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <TD> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <TD> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <TD> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <TD> element for scripting purposes. Any <TD> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <TD> element in a document is an object that can be manipulated through scripting. Note that scripting of the <TD> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <TD> element at all.

<TD...> Properties
Of the standard Dynamic HTML properties, the <TD...> element/object supports the following: className, document, id, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title. Details of these can be found in the standard Dynamic HTML properties topics.
<TD> also supports the following properties, which directly reflect attributes of the <TD> element: align, background, bgColor, borderColor, borderColorDark, borderColorLight, colSpan, height, noWrap, rowSpan, vAlign and width; and also supports:

cellIndex
The cellIndex property returns the index of the referenced <TD> elements position in the Cells Collection for a given row. If a cell spans several rows (using the ROWSPAN attribute), it only has a cellIndex property in the first row in which it is contained.

clientHeight
The clientHeight property reflects the height (in pixels) of the contents of the <TD> element.

clientWidth
The clientWidth property reflects the width (in pixels) of the contents of the <TD> element.

<TD...> Methods
The <TD...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.
Additionally, the <TD> element supports:

blur
The blur event can be used to force the users focus away from the referenced <TD> element, firing the onblur event.

focus
The focus method can be used to pass the users focus to the referenced <TD> element, forcing the onfocus event to fire.

<TD...> Events
The <TD...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.
Also, the <TD> element supports:

onafterupdate
The onafterupdate event is fired after data is transferred from the element to the data provider and will only fire after the onbeforeupdate event has fired and was successful. For more information on Data Binding, see the Data Binding topic.

onbeforeupdate
onbeforeupdate fires when a data bound element loses the focus, or the current document is unloaded and will only fire if the value of the element is different to the original value that was present when the element received the users focus. Note that onbeforeupdate is a cancelable event (setting returnValue=false for the Event object), which allows the document /script author a chance to validate the new data entered by the user on the client-side, before sending the data to the data provider. For more information on Data Binding, see the Data Binding topic.

onblur
When the referenced <TD> element loses the users focus, the onblur event is fired, executing any script events that are attached to it.

onfocus
When the user passes the focus to any <TD> element, the onfocus event is fired for that element.

onresize
The onresize event is fired whenever the contents of the <TD> element are resized, by window movement, or dynamically through scripting.

onrowenter
The onrowenter event fires on the data source control when the current record has been changed, so new data is available to populate the HTML display elements that are bound to the data source. Somewhat confusingly, this will typically happen after the onrowexit event has been fired. For more information on Data Binding, see the Data Binding topic.

onrowexit
The onrowexit event is fired immediately before the data source changes the current record (i.e. when the user has requested another record, or set of records by pressing a button perhaps). Note that unlike the anafterupdate and onbeforeupdate events, onrowexit is fired by the data source, not any of the HTML elements used to display the data. Changes to the data in the HTML elements should have been transferred to the data source (with validation being taken care of in the on*update events). onrowexit will also fire if the record position is changed through scripting. For more information on Data Binding, see the Data Binding topic.

© 1995-1998, Stephen Le Hunte


<TR...>

This stands for table row. The number of rows in a table is exactly specified by how many <TR> elements are contained within it, regardless of cells that may attempt to use the ROWSPAN attribute to span into non-specified rows.

The <TR> element can have the following attributes.

ALIGN="left|center|right"
This controls whether text inside the table cell(s) is aligned to the left, right or centre of the cell.

VALIGN="top|middle|bottom|baseline"
This attribute controls whether text inside the table cell(s) is aligned to the top, bottom, or vertically centred within the cell. It can also specify that all the cells in the row should be vertically aligned to the same baseline.

BGCOLOR="#rrggbb|colour name"
Internet Explorer and Netscape support use of this attribute (also supported in the <BODY> element). It allows the background colour of the table to be specified, using either the specified colour names, or a rrggbb hex triplet.

BORDERCOLOR="#rrggbb|colour name"
Internet Explorer includes support for this attribute which sets the border colour of the row. Any of the pre-defined colour names can be used, as well as any colour defined by a rrggbb hex triplet. It is necessary for the BORDER attribute to be present in the main <TABLE> element for border colouring to work.

BORDERCOLORLIGHT="#rrggbb|colour name"
Internet Explorer allows use of the BORDERCOLORLIGHT attribute to set independently, the lighter colour to be displayed on a 3-dimensional row border. It is the opposite of BORDERCOLORDARK. Any of the pre-defined colour names can be used, as well as any colour defined by a rrggbb hex triplet. It is necessary for the BORDER attribute to be present in the main <TABLE> element for border colouring to work.

BORDERCOLORDARK="#rrggbb|colour name"
Internet Explorer allows use of the BORDERCOLORDARK attribute to set independently, the darker colour to be displayed on a 3-dimensional row border. It is the opposite of BORDERCOLORLIGHT. Any of the pre-defined colour names can be used, as well as any colour defined by a rrggbb hex triplet. It is necessary for the BORDER attribute to be present in the main <TABLE> element for border colouring to work.

BACKGROUND="URL of image"
Netscape supports the placing of images inside the <TR> element. (Also in the <TABLE>, and <TH> elements) If used in the <TR> element, the image in question will be tiled behind the entire table row. Any of the supported graphic file formats can be used as a graphic behind a table row.

NOTE : The BGCOLOR, BORDERCOLOR, BORDERCOLORLIGHT and BORDERCOLORDARK attributes can also be used in <TABLE>, <TH> and <TD> elements, with the colour defined in the last element over-riding those defined before. E.g. if a <TD> element contains a BORDERCOLOR attribute setting, the setting specified will be used instead of any colour settings that may have been specified in the <TR> element, which in turn over-rides any colour settings in the <TABLE> element.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <TR> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <TR> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <TR> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <TR> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <TR> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <TR> element for scripting purposes. Any <TR> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <TR> element in a document is an object that can be manipulated through scripting. Note that scripting of the <TR> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <TR> element at all.

<TR...> Properties
Of the standard Dynamic HTML properties, the <TR...> element/object supports the following: className, document, id, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title. Details of these can be found in the standard Dynamic HTML properties topics.
<TR> also supports the following properties, which directly reflect attributes of the <TD> element: align, background, bgColor, borderColorDark, borderColorLight and vAlign and:

rowIndex
The rowIndex property returns the referenced <TR> elements index in the Rows Collection for the main <TABLE> element, which is subtly different to the sectionRowIndex property (see below).

sectionRowIndex
The sectionRowIndex property returns the referenced <TR> elements index in the Rows Collection for either the <THEAD>, <TBODY>, or <TFOOT> element. Note that the referenced <TR> element can only have a sectionRowIndex property in one of the <THEAD>, <TBODY> or <TFOOT> sections, but will always have a rowIndex (see above) property value for its position in the Rows Collection for the main <TABLE>.

<TR...> Methods
Of the standard Dynamic HTML methods, the <TR...> element/object supports the following: click, contains, getAttribute, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics. Additionally, the <TD> element supports:

blur
The blur event can be used to force the users focus away from the referenced <TR> element, firing the onblur event.

deleteCell
The deleteCell method deletes a given <TD> element from the referenced Cells Collection for the referenced <TR> element. The index, if used, should be the cellIndex of the <TD> element to be deleted from the <TR>. If no index is given, the last cell in the Cells Collection referenced, will be deleted. For example:

document.all("tblExample").rows(2).deleteCell(1)

would delete the second <TD> element contained in the third <TR> element of the <TABLE> element, referenced by tblExample

focus
The focus method can be used to pass the users focus to the referenced <TR> element, forcing the onfocus event to fire.

insertCell
The insertCell method inserts a new <TD> element into the referenced <TR> (row) element. For example:

cellNew=document.all("tblExample").rows("rowMain").insertCell(1)

would insert a new <TD> element into the <TR> element referenced by rowMain

<TR...> Events
The <TR...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics. Also, the <TR> element supports:

onafterupdate
The onafterupdate event is fired after data is transferred from the element to the data provider and will only fire after the onbeforeupdate event has fired and was successful. For more information on Data Binding, see the Data Binding topic.

onbeforeupdate
onbeforeupdate fires when a data bound element loses the focus, or the current document is unloaded and will only fire if the value of the element is different to the original value that was present when the element received the users focus. Note that onbeforeupdate is a cancelable event (setting returnValue=false for the Event object), which allows the document /script author a chance to validate the new data entered by the user on the client-side, before sending the data to the data provider. For more information on Data Binding, see the Data Binding topic.

onblur
When the referenced <TR> element loses the users focus, the onblur event is fired, executing any script events that are attached to it.

onfocus
When the user passes the focus to any <TR> element, the onfocus event is fired for that element.

onresize
The onresize event is fired whenever the contents of the <TR> element are resized, by window movement, or dynamically through scripting.

onrowenter
The onrowenter event fires on the data source control when the current record has been changed, so new data is available to populate the HTML display elements that are bound to the data source. Somewhat confusingly, this will typically happen after the onrowexit event has been fired. For more information on Data Binding, see the Data Binding topic.

onrowexit
The onrowexit event is fired immediately before the data source changes the current record (i.e. when the user has requested another record, or set of records by pressing a button perhaps). Note that unlike the anafterupdate and onbeforeupdate events, onrowexit is fired by the data source, not any of the HTML elements used to display the data. Changes to the data in the HTML elements should have been transferred to the data source (with validation being taken care of in the on*update events). onrowexit will also fire if the record position is changed through scripting. For more information on Data Binding, see the Data Binding topic.

© 1995-1998, Stephen Le Hunte


<TH...>

This stands for table header. Header cells are identical to data cells in all respects, with the exception that header cells are in a bold font, and have a default ALIGN=center.

<TH ...> ... </TH> can contain the following attributes:

ALIGN="left|center|right"
This attribute controls whether text inside the table header is aligned to the left, right or centred within the cell.

VALIGN="top|middle|bottom|baseline"
The VALIGN attribute controls whether text inside the table header is aligned to the top, bottom, or vertically centred within the cell.

WIDTH="value_or_percent"
If used, this attribute can specify either the exact width of the header cell in pixels, or the width of the header cell as a percentage of the table being displayed. Only one header cell can set the width for an entire column, so it is good practice to specify all header cells in the same column as having the same width, if the attribute is set at all.

HEIGHT="value_or_percent"
If used, this attribute can specify either the exact height of the header cell in pixels, or the height of the header cell as a percentage of the browser display window. Only one header cell can set the height for an entire row.

NOTE : Netscape supports use of the WIDTH="value%" and "pixel_value" for this element (it only supports the HEIGHT="%value" attribute for the main <TABLE> element). Internet Explorer supports both percentage and pixel values for both the HEIGHT and WIDTH attributes.
For WIDTH="%value" settings, the WIDTH="%value" also needs to be set in the main <TABLE> element and the headers/cells columns (affected by any header with a WIDTH="%value" setting) will be scaled as a percentage of the table width (which would be scaled as a percentage of the browser window). Also, for WIDTH="value" settings, the table will only be sized to the maximum extent of the browser window width (with headers/cells being scaled accordingly), unless the WIDTH="value" setting is used in the main <TABLE> element, set to the combined size of the headers/cells.
For HEIGHT="%value" settings, the header (and any rows it is part of) will be rendered as the percentage of the browser window, regardless of any HEIGHT settings in the main <TABLE>. If only one header has a WIDTH or HEIGHT attribute set, then that setting is used for all the columns/rows of the table that the header is part of. If more than one header in a row or column have WIDTH or HEIGHT attributes set, then the largest setting of all the constituent headers/cells will be used for the entire row/column of the table. <TH> WIDTHs are also affected by any subsequent <TD> WIDTH settings, with the largest setting of the <TH> and <TD> elements being used for the entire column of the table.

NOWRAP
If this attribute appears in any table cell (<TH> or <TD>) it means the lines within this cell cannot be broken to fit the width of the cell. Be cautious in use of this attribute as it can result in excessively wide cells.

COLSPAN="value"
This attribute can appear in any table cell (<TH> or <TD>) and it specifies how many columns of the table this cell should span. The default COLSPAN for any cell is 1.

ROWSPAN="value"
This attribute can appear in any table cell (<TH> or <TD>) and it specifies how many rows of the table this cell should span. The default ROWSPAN for any cell is 1. A span that extends into rows that were never specified with a <TR> will be truncated.

BGCOLOR="#rrggbb|colour name"
Internet Explorer and Netscape support use of this attribute (also supported in the <BODY> element). It allows the background colour of the header cell to be specified, using either the specified colour names, or a rrggbb hex triplet.

BORDERCOLOR="#rrggbb|colour name"
Internet Explorer includes support for this attribute which sets the border colour of the header cell. Any of the pre-defined colour names can be used, as well as any colour defined by a rrggbb hex triplet. It is necessary for the BORDER attribute to be present in the main <TABLE> element for border colouring to work.

BORDERCOLORLIGHT="#rrggbb|colour name"
Internet Explorer allows use of the BORDERCOLORLIGHT attribute to set independently, the lighter colour to be displayed on a 3-dimensional header cell border. It is the opposite of BORDERCOLORDARK. Any of the pre-defined colour names can be used, as well as any colour defined by a rrggbb hex triplet. It is necessary for the BORDER attribute to be present in the main <TABLE> element for border colouring to work.

BORDERCOLORDARK="#rrggbb|colour name"
Internet Explorer allows use of the BORDERCOLORDARK attribute to set independently, the darker colour to be displayed on a 3-dimensional header cell border. It is the opposite of BORDERCOLORLIGHT. Any of the pre-defined colour names can be used, as well as any colour defined by a rrggbb hex triplet. It is necessary for the BORDER attribute to be present in the main <TABLE> element for border colouring to work.

NOTE : The BGCOLOR, BORDERCOLOR, BORDERCOLORLIGHT and BORDERCOLORDARK attributes can also be used in <TABLE>, <TD> and <TR> elements, with the colour defined in the last element over-riding those defined before. E.g. if a <TD> element contains a BORDERCOLOR attribute setting, the setting specified will be used instead of any colour settings that may have been specified in the <TR> element, which in turn over-rides any colour settings in the <TABLE> element.

BACKGROUND="URL of image"
Internet Explorer and Netscape support the placing of images inside the <TH> element. (Also in the <TABLE>, and <TD> elements) If used in the <TH> element, the image in question will be tiled behind the particular data cell. Any of the supported graphic file formats can be used as a graphic behind a table.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <TH> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <TH> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <TH> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <TH> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <TH> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <TH> element for scripting purposes. Any <TH> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <TH> element in a document is an object that can be manipulated through scripting. Note that scripting of the <TH> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <TH> element at all.

<TH...> Properties
Of the standard Dynamic HTML properties, the <TH...> element/object supports the following: className, document, id, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, parentElement, parentTextEdit, sourceIndex, style, tagName and title. Details of these can be found in the standard Dynamic HTML properties topics.
Additionally, the <TH> element supports the following properties, all of which directly reflect attribute values: align, background, bgColor, borderColor, borderColorDark, borderColorLight, colSpan, noWrap, rowSpan and vAlign.

<TH...> Methods
Of the standard Dynamic HTML methods, the <TH...> element/object supports the following: click, contains, getAttribute, removeAttribute, scrollIntoView and setAttribute. Details of these can be found in the standard Dynamic HTML Methods topics.

<TH...> Events
The <TH...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<THEAD...>

This element, which is Internet Explorer specific, is used to specify the head section of the table. It is somewhat analogous to the <HEAD> element. It doesn't directly affect the rendering of the table on the screen, but is required if RULES wish to be set in the <TABLE>.

Possible <THEAD> attributes are:

ALIGN="Alignment"
The ALIGN attribute takes values of center, left and right, and specifies the alignment of the <THEAD> section relative to the rest of the table.

BGCOLOR="Background Colour"
Background colouring can be applied to the <THEAD> section, by using the BGCOLOR attribute. It accepts any valid #rrggbb hex triplet, or Colour Name.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. The <THEAD> element does not display its TITLE attribute as a ToolTip.

LANG="language setting"
The LANG attribute can be used to specify what language the <THEAD> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <THEAD> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <THEAD> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <THEAD> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <THEAD> element for scripting purposes. Any <THEAD> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

VALIGN="Vertical Alignment"
The VALIGN attribute takes values of baseline, bottom, middle and top, and specifies the vertical alignment of the <THEAD> section relative to the rest of the table.

Every <THEAD> element in a document is an object that can be manipulated through scripting. Note that scripting of the <THEAD> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <THEAD> element at all.

<THEAD...> Properties
Of the standard Dynamic HTML properties, the <THEAD...> element/object supports the following className, document, id, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, parentElement, parentTextEdit, sourceIndex, style, tagName and title. Details of these can be found in the standard Dynamic HTML properties topics.
The <THEAD> element also supports properties of align, bgColor and vAlign, which reflect their attribute settings.

<THEAD...> Methods
Of the standard Dynamic HTML methods, the <THEAD...> element/object supports the following: click, contains, getAttribute, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics. Additionally, the <THEAD> element supports the following methods:

deleteRow
The deleteRow method deletes the row referenced by the index argument for the referenced <THEAD> element, also removing it from the Rows Collection for the <THEAD> and <TABLE> elements.

document.all("theadExample").deleteRow(1)

would delete the second <TR> element contained in the <THEAD> element referenced by ...all("theadExample"), impacting the Rows Collection for the <THEAD> and <TABLE> elements.

insertRow
The insertRow method inserts a new <TR> element into the referenced <THEAD> element. It can take an optional index argument which should specify where in the <THEAD> the new row is to be inserted. Note that inserting a new row into a <THEAD> element also inserts it into the Rows Collection for the <THEAD> element and the Rows Collection for the <TABLE>. For example:

rowNew=document.all("theadExample").insertRow(3)

inserts a new fourth row into the <THEAD> element, which will impact the Rows Collection for the <THEAD> and <TABLE> elements.

<THEAD...> Events
The <THEAD...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<TFOOT...>

This element, which is Internet Explorer specific, is used to specify the footer section of the table. It doesn't directly affect the rendering of the table on the screen, but is required if RULES wish to be set in the <TABLE>.

Possible <TFOOT> attributes are:

ALIGN="Alignment"
The ALIGN attribute takes values of center, left and right, and specifies the alignment of the <TFOOT> section relative to the rest of the table.

BGCOLOR="Background Colour"
Background colouring can be applied to the <TFOOT> section, by using the BGCOLOR attribute. It accepts any valid #rrggbb hex triplet, or Colour Name.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. The <TFOOT> element does not display its TITLE attribute as a ToolTip.

LANG="language setting"
The LANG attribute can be used to specify what language the <TFOOT> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <TFOOT> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <TFOOT> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <TFOOT> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <TFOOT> element for scripting purposes. Any <TFOOT> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

VALIGN="Vertical Alignment"
The VALIGN attribute takes values of baseline, bottom, middle and top, and specifies the vertical alignment of the <TFOOT> section relative to the rest of the table.

Every <TFOOT> element in a document is an object that can be manipulated through scripting. Note that scripting of the <TFOOT> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <TFOOT> element at all.

<TFOOT...> Properties
Of the standard Dynamic HTML properties, the <TFOOT...> element/object supports the following className, document, id, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, parentElement, parentTextEdit, sourceIndex, style, tagName and title. Details of these can be found in the standard Dynamic HTML properties topics.
The <TFOOT> element also supports properties of align, bgColor and vAlign, which reflect their attribute settings.

<TFOOT...> Methods
Of the standard Dynamic HTML methods, the <TFOOT...> element/object supports the following: click, contains, getAttribute, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics. Additionally, the <TFOOT> element supports the following methods:

deleteRow
The deleteRow method deletes the row referenced by the index argument for the referenced <TFOOT> element, also removing it from the Rows Collection for the <TFOOT> and <TABLE> elements.

document.all("tfootExample").deleteRow(1)

would delete the second <TR> element contained in the <TFOOT> element referenced by ...all("tfootExample"), impacting the Rows Collection for the <TFOOT> and <TABLE> elements.

insertRow
The insertRow method inserts a new <TR> element into the referenced <TFOOT> element. It can take an optional index argument which should specify where in the <TFOOT> the new row is to be inserted. Note that inserting a new row into a <TFOOT> element also inserts it into the Rows Collection for the <TFOOT> element and the Rows Collection for the <TABLE>. For example:

rowNew=document.all("tfootExample").insertRow(3)

inserts a new fourth row into the <TFOOT> element, which will impact the Rows Collection for the <TFOOT> and <TABLE> elements.

<TFOOT...> Events
The <TFOOT...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


Tables and Style Sheets

Tables & Style Sheets

NOTE : presented here is an overview of the table section of the Style Sheet specification. More complete information can be obtained from the Style Sheet specification, available from http://www.w3.org/pub/WWW/Style Sheets/

For simple styling of tables, normal Style Sheet methods can be employed (i.e. defining the elements style within the <STYLE> elements, or by using CLASS, ID and STYLE attributes. For more information, see the Style Sheets topic).

For example :

<STYLE>
TABLE { font-size : 12pt;
color : #FF0000}
TH { font-size : 14pt;
font-weight : bold}
</STYLE>
are acceptable.

The problem with tables comes when considering the borders present and therefore any border styling methods. According to the HTML 3 table model, there are only three sections of a table that can be considered as having well defined borders (the <TABLE> itself, row groups (as defined by <THEAD>, <TBODY> and <TFOOT>) and table cells - <TD> and <TH>). Table rows can be considered to be nested within the table and table cells can be considered to be nested within the table rows. It is counter-intuitive to think of tables like this (as a three level nested object) and so the Style Sheet table model treats tables as single level objects (i.e. the border/edge of a cell at the edge of a table and the table are considered to share a border). Essentially, considering elements in the nesting order of a table, elements higher in the nesting order will take precedence. That is, the border style of a <TABLE> will be used, but the border style of rows, or cells will only be used when there is no border specified for the table.

The style sheet table model adds a couple of values to the border-style property and adds a new elevation property. For details of style sheet properties and values, see the Properties and Values topic.

Additions to the 'border-style' property.
The table model adds the blank and bevel values to the border property. Blank differs from the 'none' property allowed for borders by preventing the border style being over-ridden by elements lower in the table nesting order. Bevel specifies that the table has a 3-D border style (necessary to allow the elevation property below)

The 'elevation' property.
This property specifies the elevation (in the z-direction - towards the viewer from the screen) of the table border-styles. It will only work if the border-style of bevel is used. The elevations of <TR>, <THEAD>, <TBODY> and <TFOOT> are used to determine the elevation of table cells (but aren't displayed) while the elevation of the <TABLE> element is used to determine the elevation of the cells contained within the table. It requires a unitless value which is used as the size of the 3-D border.

© 1995-1998, Stephen Le Hunte


Table Examples

Below are some sample HTML <TABLE> fragments together with their accompanying renderings.

NOTE : Some of the tables are browser specific, where this is the case, the 'browser dependancy graphic' is displayed (i.e. the browser logo will be visible).

NOTE : Tables no 5 and 6 use <TH> elements nested inside <TD> elements. While the examples render correctly, it is not good practice to nest headers inside data cells and using those tables as the basis of other tables may cause the new tables to render incorrectly. It would be better to emphasis data cells to make them appear as headers, by using the <STRONG> element.

The tables are:
1) A Simple table
2) A table using ROWSPAN
3) A table using COLSPAN
4) A table using headers
5) A table using all of the above
6) A table using ALIGN/VALIGN
7) Nested tables
8) Floating tables
9) A coloured table
10) A HTML 3.2 table

1) A simple table

<TABLE BORDER>
<TR>
<TD>Data cell 1</TD><TD>Data cell 2</TD>
</TR>
<TR>
<TD>Data cell 3</TD><TD>Data cell 4</TD>
</TR>
</TABLE>

Data cell 1 | Data cell 2
Data cell 3 | Data cell 4

top

2) A table using ROWSPAN

<TABLE BORDER>
<TR>
<TD ROWSPAN=2>This cell spans two rows</TD>
<TD>These cells</TD><TD>would</TD>
</TR>
<TR>
<TD>contain</TD><TD>other data</TD>
</TR>
</TABLE>

This cell spans two rows | These cells | would
 | contain | other data

top

3) A table using COLSPAN

<TABLE BORDER>
<TR>
<TD>Data cell 1</TD>
<TD COLSPAN=2>This cell spans 2 columns</TD>
</TR>
<TR>
<TD>Data cell 2</TD><TD>Data cell 3</TD><TD>Data cell 4</TD>
</TR>
</TABLE>

Data cell 1 | This cell spans 2 columns
Data cell 2 | Data cell 3 | Data cell 4

top

4) A table using headers

<TABLE BORDER>
<TR>
<TH>Netscape</TH><TH>Internet Explorer</TH><TH>Mosaic</TH>
</TR>
<TR>
<TD>X</TD><TD>X</TD><TD>-</TD>
</TR>
<TR>
<TD>X</TD><TD>-</TD><TD>X</TD>
</TR>
</TABLE>

Netscape | Internet Explorer | Mosaic
X | X | -
X | - | X

top

5) A table using all of the above

<TABLE BORDER>
<TR>
<TD><TH ROWSPAN=2></TH>
<TH COLSPAN=3>Browser</TH></TD>
</TR>
<TR>
<TD><TH>Netscape</TH><TH>Internet Explorer</TH>
<TH>Mosaic</TH></TD>
</TR>
<TR>
<TH ROWSPAN=2>Element</TH>
<TH><DFN></TH><TD>-</TD><TD>X</TD>
<TD>-</TD>
</TR>
<TR>
<TH><DIR></TH><TD>X</TD><TD>X</TD>
<TD>X</TD>
</TR>
</TABLE>

 |  | Browser
 |  | Netscape | Internet Explorer | Mosaic
Element | <DFN> | - | X | -
 | <DIR> | X | X | X

top

6) A table using ALIGN/VALIGN
This table adds ALIGN and VALIGN attributes to the above example to improve the layout of the table.

<TABLE BORDER>
<TR>
<TD><TH ROWSPAN=2></TH>
<TH COLSPAN=3>Browser</TH></TD>
</TR>
<TR>
<TD><TH>Netscape</TH><TH>Internet Explorer</TH>
<TH>Mosaic</TH></TD>
</TR>
<TR>
<TH ROWSPAN=2 VALIGN=top>Element</TH>
<TH><DFN></TH>
<TD ALIGN=center>-</TD>
<TD ALIGN=center>X</TD>
<TD ALIGN=center>-</TD>
</TR>
<TR>
<TH><DIR></TH>
<TD ALIGN=center>X</TD>
<TD ALIGN=center>X</TD>
<TD ALIGN=center>X</TD>
</TR>
</TABLE>

 |  | Browser
 |  | Netscape | Internet Explorer | Mosaic
Element | <DFN> | - | X | -
 | <DIR> | X | X | X

top

7) Nested tables
To show that tables can be nested within each other. This table uses the ROWSPAN table, including the 'simple' table inside one of the data cells.

<TABLE BORDER>
<TR>
<TD ROWSPAN=2>This cell spans two rows
<TABLE BORDER>
<TR>
<TD>Data cell 1</TD><TD>Data cell 2</TD>
</TR>
<TR>
<TD>Data cell 3</TD><TD>Data cell 4</TD>
</TR>
</TABLE>
</TD>
<TD>These cells</TD><TD>would</TD>
</TR>
<TR>
<TD>contain</TD><TD>other data</TD>
</TR>
</TABLE>

This cell spans two rows
Data cell 1 | Data cell 2
Data cell 3 | Data cell 4
 These cells would
contain other data

top

8) Floating tables

<TABLE ALIGN=left BORDER WIDTH=50%>
<TR> <TD>This is a two row table</TD>
</TR>
<TR>
<TD>It is aligned to the left of the page</TD>
</TR>
</TABLE>
This text will be to the right of the table, and will fall neatly beside the table
<BR CLEAR=all>
<HR>
<TABLE ALIGN=right BORDER WIDTH=50%>
<TR>
<TD>This is a two row table</TD>
</TR>
<TR>
<TD>It is aligned to the right of the page</TD>
</TR>
</TABLE>
This text will be to the left of the table, and will tall neatly beside the table
<BR CLEAR=all>
<HR>

This is a two row table
It is aligned to the left of the page
This text will be to the right of the table, and will fall neatly beside the table
This is a two row table
It is aligned to the right of the page
This text will be to the left of the table, and will fall neatly beside the table

top

9) A coloured table
NOTE :Netscape does not display the border colourings of this table.

<TABLE BORDER BGCOLOR=Silver BORDERCOLOR=Black WIDTH=50%>
<TR>
<TD>This is the first cell</TD>
<TD>This is the second cell</TD>
</TR>
<TR BORDERCOLOR=Red BGCOLOR=Green>
<TD>This is the third cell</TD>
<TD>This is the fourth cell</TD>
</TR>
<TR BORDERCOLOR=Red BGCOLOR=Green>
<TD BORDERCOLOR=Yellow>This is the fifth cell</TD>
<TD BGCOLOR=White>This is the sixth cell</TD>
</TR>
</TABLE>

This is the first cell | This is the second cell
This is the third cell | This is the fourth cell
This is the fifth cell | This is the sixth cell

top

IEx 10) A HTML 3.2 table IEx

<TABLE BORDER FRAME=hsides RULES=cols>
<COL ALIGN=left>
<COLGROUP SPAN=3 ALIGN=center VALIGN=middle>
<THEAD>
<CAPTION ALIGN=center><FONT SIZE=+1><B>
A section of the Comparison Table</B></FONT>
</CAPTION>
<TR>
<TD>Element</TD><TD><B>Internet Explorer</B></TD>
<TD><B>Netscape</B></TD><TD><B>Mosaic</B></TD>
</TR>
</THEAD>
<TBODY>
<TR>
<TD><B></TD><TD>X</TD><TD>X</TD><TD>X</TD>
</TR>
<TR>
<TD>&lt;BASE ...&gt;</TD><TD>X</TD><TD>X</TD><TD>X</TD>
</TR>
<TR>
<TD> ...HREF</TD><TD>X</TD><TD>X</TD><TD>X</TD>
</TR>
<TR>
<TD> ...TARGET</TD><TD>X</TD><TD>X</TD><TD></TD>
</TR>
<TR>
<TD>&lt;BASEFONT ...&gt;</TD><TD>X</TD><TD>X</TD><TD></TD>
</TR>
<TR>
<TD VALIGN=top> ...SIZE</TD><TD>X<BR><FONT SIZE=-1>
(only visible<BR>when FONT<BR>SIZE= used<BR>
as well)</FONT></TD><TD VALIGN=top>X</TD>
<TD></TD>
</TR>
<TR>
<TD> ...FACE</TD><TD>X</TD><TD></TD><TD></TD>
</TR>
<TR>
<TD VALIGN=top>&lt;BGSOUND ...&gt;</TD><TD VALIGN=top>X</TD>
<TD></TD><TD>X<BR><FONT SIZE=-1>(will spawn<BR>player for<BR>
.mid files)</FONT></TD>
</TR>
</TBODY>
<TFOOT></TFOOT>
</TABLE>

A section of the Comparison Table
Element | Internet Explorer | Netscape | Mosaic
<B> | X | X | X
<BASE ...> | X | X | X
...HREF | X | X | X
...TARGET | X | X |
<BASEFONT ...> | X | X |
...SIZE | X (only visible when FONT SIZE= used as well) | X |
...FACE | X |  |
<BGSOUND ...> | X |  | X (will spawn player for .mid files)

top

© 1995-1998, Stephen Le Hunte


Text Formatting Elements

The following information type and character formatting elements are supported by most browsers.

Information type elements:
NOTE : Different information type elements may be rendered in the same way. The following are what are sometimes called Logical formatting elements. They suggest to the browser that the enclosed text should be rendered in a way set by the browser, rather than physically fixing the display type. Elements that do this, are character formatting elements (see below, also known as Physical elements) that produce strict rendering of the text. Note : The browse sequence for this chapter orders the elements according to the lists below, not alphabetically.

<!-- ... --> - Defining comments
<ACRONYM> - Define an Acronym
<CITE> - Citation
<COMMENT> - Comment
<CODE> - An example of Code
<DEL> - Deleted Text
<DFN> - Defining Instance
<EM> - Emphasis
<INS> - Inserted Text
<KBD> - User typed text
<Q> - An in-line quote
<SAMP> - A sequence of literal characters
<STRONG> - Strong typographic emphasis
<VAR> - Indicates a variable name

Character formatting elements:

<B> - Boldface type
<BIG> - Big text
<BLINK> - Blinking text
<BUTTON> - HTML content button
<FONT> - Font setting
<ILAYER> - In-line layer
<I> - Italics
<SMALL> - Small text
<SPAN> - Text span
<STRIKE> (or <S> ... </S>)- Text that has been struck through
<SUB> - Subscript
<SUP> - Superscript
<TT> - TypeType (or Teletype)
<U> - Underlined text

While Character formatting elements (physical elements) may be nested within the content of other character formatting elements browsers are not required to render nested character- level elements distinctly from non-nested elements:

plain <B>bold <I>italic</I></B>

may be rendered the same as

plain <B>bold </B><I>italic</I>

© 1995-1998, Stephen Le Hunte


<ACRONYM...>

The <ACRONYM> element specifies that the enclosed text is an acronym (e.g. 'WWW') It is one of the new HTML 4.0 elements (actually a 'hanger-on' from the ill-fated HTML 3.0 specification) and is currently only supported by Internet Explorer 4.0.

<ACRONYM TITLE="HyperText Markup Language">HTML</ACRONYM>

The <ACRONYM> element is ideally targeted at speech synthesis and other non-visual web browsers, so may not render visually on all browsers.

<ACRONYM> supports the following attributes:

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. For the <ACRONYM> element, the TITLE attribute should be used to provide the extended definition of the acronym. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <ACRONYM> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <ACRONYM> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <ACRONYM> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <ACRONYM> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <ACRONYM> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <ACRONYM> element for scripting purposes. Any <ACRONYM> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <ACRONYM> element in a document is an object that can be manipulated through scripting. Note that scripting of the <ACRONYM> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model as Netscape doesn't support the <ACRONYM> element.

<ACRONYM...> Properties
The <ACRONYM...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics. Additionally, the <ACRONYM> element supports the cite and datetime properties, which directly reflect the CITE and DATETIME attribute values.

<ACRONYM...> Methods
The <ACRONYM...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<ACRONYM...> Events
The <ACRONYM...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<BIG...>

The <BIG> element specifies that the enclosed text should be displayed, if practical, using a big font (compared with the current font).

This is normal text, with <BIG>this bit</BIG> being big text.

would be rendered as:

This is normal text, with this bit being big text.

NOTE : Use of this element is currently supported by Netscape and the Internet Explorer only. They also allow the <BIG> ... </BIG> element to be used surrounding the <SUB> ... </SUB> and <SUP> ... </SUP> elements to force rendering of the sub/superscript text as normal size text as opposed to the default slightly smaller text normally used. The exact appearance of the big text will change depending on any <FONT SIZE=...> and <BASEFONT SIZE=...> settings, if specified.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <BIG> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <BIG> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <BIG> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <BIG> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <BIG> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <BIG> element for scripting purposes. Any <BIG> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <BIG> element in a document is an object that can be manipulated through scripting. Note that scripting of the <BIG> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <BIG> element at all.

<BIG...> Properties
The <BIG...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.

<BIG...> Methods
The <BIG...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<BIG...> Events
The <BIG...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<BLINK...>

Surrounding any text with this element will cause the selected text to blink on the viewing page. This can serve to add extra emphasis to selected text.

<BLINK>This text would blink on the page</BLINK>

Would render as:

Note : The <BLINK> ... </BLINK> element is currently only supported by Netscape (The example uses ActiveX trickery, using the label and timer controls.)

© 1995-1998, Stephen Le Hunte


<B...>

The Bold element specifies that the text should be rendered in boldface, where available. Otherwise, alternative mapping is allowed.

The instructions <B>must be read</B> before continuing.

would be rendered as :

The instructions must be read before continuing.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <B> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <B> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <B> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <B> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <B> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <B> element for scripting purposes. Any <B> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <B> element in a document is an object that can be manipulated through scripting. Note that scripting of the <B> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <B> element at all.

<B...> Properties
The <B...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.

<B...> Methods
The <B...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<B...> Events
The <B...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<BUTTON...>

Note : The <BUTTON> element is a new element introduced in HTML 4.0 draft specifications and is currently only supported by Internet Explorer 4.0.

The <BUTTON> element can be used to create buttons that are embedded into the document. The main difference between <BUTTON> and <INPUT TYPE="button"...>, is that the <BUTTON> element takes the entire content between the opening and closing elements and creates a pushable button from them. This means that most HTML content can be rendered as a button. For example:

<BUTTON>
<TABLE BORDER="1">
<TR>
<TD>A</TD><TD>B</TD>
</TR><TR>
<TD>C</TD><TD>D</TD>
</TR>
</TABLE>
</BUTTON>

...produces a button with a HTML <TABLE> rendered on it:

The attributes for the <BUTTON> element are:

ACCESSKEY
The ACCESSKEY attribute can be used to specify a shortcut key for the <BUTTON> (activated by pressing 'Alt' and the ACCESSKEY together - like standard Windows applications menu shortcuts). The ACCESSKEY setting does not have to be a character in the actual button contents and the button is not modified in any way to reflect that an ACCESSKEY has been defined.

CLASS
The CLASS attribute is used to specify the <BUTTON> element as using a particular style sheet class. See the Style Sheets topic for details.

DATAFLD
The DATAFLD attribute can be used to specify a data column name from the Data source (see DATASRC) that the <BUTTON> is bound to. For more information on the DATAFLD attribute, see the Data Binding topic.

DATAFORMATAS
When the <BUTTON> element is data-bound, it can accept straight text, or HTML from the data source. The DATAFORMATAS attribute should be set to "TEXT" or "HTML" accordingly. with DATAFORMATAS="HTML", the data provided for the <BUTTON> element is parsed and rendered when it's displayed.
For more information on the DATAFORMATAS attribute, see the Data Binding topic.

DATASRC
The DATASRC attribute can be used to specify a data source that the <BUTTON> is bound to. For more information on the DATASRC attribute, see the Data Binding topic.

DISABLED
The DISABLED attribute can be used to disable the <BUTTON>. This means it won't respond to user input, or take the users focus.

ID
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <BUTTON> element for scripting purposes. Any <BUTTON> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

LANG
The LANG attribute can be used to specify what language the <BUTTON> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <BUTTON> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

STYLE
As well as using previously defined style sheet settings, the <BUTTON> element can have in-line stylings attached to it. See the Style Sheets topic for details.

TITLE
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <BUTTON> section.

Note : <SELECT>, <A> or <INPUT> elements shouldn't be included in a <BUTTON>

Every <BUTTON> element in a document is an object that can be manipulated through scripting. Note that scripting of the <BUTTON> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <BUTTON> element at all.

<BUTTON...> Properties
The <BUTTON...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.
Additionally, the <BUTTON> element supports the accessKey, dataFld, dataFormatAs, dataSrc and disabled, which directly reflect the attributes of the same name.

<BUTTON...> Methods
The <BUTTON...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.
The <BUTTON> element also supports the following methods:

blur
The blur event can be used to force the users focus away from the referenced <BUTTON> element, firing the onblur event.

createTextRange
The createTextRange method can be invoked to create a TextRange object from the contents of the <BUTTON> element. See the TextRange object topic for details of properties, methods and events applicable to text ranges.

focus
The focus method can be used to pass the users focus to the referenced <BUTTON> element, forcing the onfocus event to fire.

<BUTTON...> Events
The <BUTTON...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.
The <BUTTON> element also supports:

onblur
When the referenced <BUTTON> element loses the users focus, the onblur event is fired.

onfocus
When the user passes the focus to any <INPUT> element, the onfocus event is fired for that element.

© 1995-1998, Stephen Le Hunte


<CITE...>

The Citation element specifies a citation and is typically rendered in an italic font.

This sentence, contains a <CITE>citation reference</CITE>

would look like:

This sentence, contains a citation reference

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <CITE> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <CITE> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <CITE> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <CITE> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <CITE> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <CITE> element for scripting purposes. Any <CITE> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <CITE> element in a document is an object that can be manipulated through scripting. Note that scripting of the <CITE> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <CITE> element at all.

<CITE...> Properties
The <CITE...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.

<CITE...> Methods
The <CITE...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<CITE...> Events
The <CITE...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<CODE...>

The Code element should be used to indicate an example of code and is typically rendered in a mono spaced font. This should not be confused with the Preformatted Text (<PRE>) element.

The formula is : <CODE>x=(-b+/-(b2-4ac)½)/2a</CODE>.

Would look like :

The formula is : x=(-b+/-(b2-4ac)½)/2a

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <CODE> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <CODE> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <CODE> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <CODE> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <CODE> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <CODE> element for scripting purposes. Any <CODE> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <CODE> element in a document is an object that can be manipulated through scripting. Note that scripting of the <CODE> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <CODE> element at all.

<CODE...> Properties
The <CODE...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.

<CODE...> Methods
The <CODE...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<CODE...> Events
The <CODE...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<COMMENT...>

The <COMMENT> element can be used to 'comment' out text. As such, it is similar to the <!-- ... --> element.

Any text placed between the <COMMENT> and </COMMENT> elements will not render on the screen, allowing comments to be placed in HTML documents.

<COMMENT>This text won't render.
I can say what I like here,
it wont appear</COMMENT>

Would not render on the screen.

NOTE : This element is only supported by the Internet Explorer and Mosaic.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. For the <COMMENT> element, the TITLE attribute maybe useful for providing information to authors.

LANG="language setting"
The LANG attribute can be used to specify what language the <COMMENT> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <COMMENT> element for scripting purposes. Any <COMMENT> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <COMMENT> element in a document is an object that can be manipulated through scripting. Note that scripting of the <COMMENT> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <COMMENT> element at all.

<COMMENT...> Properties
The <COMMENT...> element/object supports some of the standard Dynamic HTML properties (i.e. document, id, isTextEdit, lang, parentElement, parentTextEdit, sourceIndex, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.

<COMMENT...> Methods
The <COMMENT...> element/object supports some of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, removeAttribute, and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<COMMENT...> Events
The <COMMENT...> element/object supports no events.

© 1995-1998, Stephen Le Hunte


<!-- ... -->

<!--...-->

To include comments in an HTML document that will be ignored by the HTML user agent, surround them with <!-- and -->. After the comment delimiter, all text up to the next occurrence of --> is ignored. Hence comments cannot be nested. White space is allowed between the closing -- and >, but not between the opening <! and --. Comments can be used anywhere within an HTML document and are generally used as markers to improve the readability of complex HTML documents.

For example:

<HEAD>
<TITLE>The HTML Reference Library</TITLE>
<!-- First created by Stephen Le Hunte, March 1995 -->
</HEAD>

NOTE: Some browsers incorrectly consider a > sign to terminate a comment.

© 1995-1998, Stephen Le Hunte


<DEL...>

The <DEL> element specifies that the enclosed text should be regarded as deleted, since the document was originally written. Along with <INS>, it is one of the HTML 4.0 elements used to mark document revisions and is currently only supported by Internet Explorer 4.0. Typically it renders as struck-through text, but any style can be used with the <DEL> element. For example:

Our sales figures <DEL CITE="http://yourcomp.com/procs/salesoffline.proc" DATETIME="1997-06-01T17:53:12+0:00">are no longer available
</DEL>

would be rendered as:

Our sales figures are no longer available

<DEL> supports the following attributes:

CITE="citation"
The CITE attribute should contain a URL, defining a document that specifies the details of the deleted text. For example, an author who deletes text in a document, could use the CITE attribute to specify the URL of a document that explains the removal of the text.

DATETIME="Date/time of insertion"
The DATETIME attribute can be used to specify the date and time that the deletion was made. The DATETIME attribute value is of a specific format, being YYYY-MM-DDThh:mm:ssTZD to specify the year, month, date, hours (using 24-hour clock notation), minutes, seconds and a Time Zone identifier. For example, in the above example, the DATETIME attribute is set to 1997-06-01T17:53:12+0.00, which would mark the deletion at 5.53:12pm on the 6th January 1997, Greenwich Mean Time, also referencing the source of deletion.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <DEL> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <DEL> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <DEL> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <DEL> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <DEL> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <DEL> element for scripting purposes. Any <DEL> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <DEL> element in a document is an object that can be manipulated through scripting. Note that scripting of the <DEL> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model as Netscape doesn't support the <DEL> element.

<DEL...> Properties
The <DEL...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics. Additionally, the <DEL> element supports the cite and datetime properties, which directly reflect the CITE and DATETIME attribute values.

<DEL...> Methods
The <DEL...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<DEL...> Events
The <DEL...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<DFN...>

Use of the <DFN> element is currently only supported by the Internet Explorer.

The <DFN> element can be used to mark the Defining Instance of a term. For example, the first time some text is mentioned in a paragraph.

Typically, it will render italicised.

The <DFN>Internet Explorer</DFN> is Microsoft's Web browser.

Would render as:

The Internet Explorer is Microsoft's Web browser.

NOTE : This element is Internet Explorer specific

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <DFN> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <DFN> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <DFN> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <DFN> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <DFN> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <DFN> element for scripting purposes. Any <DFN> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <DFN> element in a document is an object that can be manipulated through scripting. Note that scripting of the <DFN> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <DFN> element at all.

<DFN...> Properties
The <DFN...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.

<DFN...> Methods
The <DFN...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<DFN...> Events
The <DFN...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<EM...>

The Emphasis element indicates typographic emphasis and is typically rendered in an italic font.

The <EM>Emphasis</EM> element typically renders as Italics.

would render :

The Emphasis element typically render as Italics.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <EM> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <EM> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <EM> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <EM> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <EM> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <EM> element for scripting purposes. Any <EM> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <EM> element in a document is an object that can be manipulated through scripting. Note that scripting of the <EM> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <EM> element at all.

<EM...> Properties
The <EM...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.

<EM...> Methods
The <EM...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<EM...> Events
The <EM...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<FONT...>

Netscape 1.0 (and above) and Microsoft's Internet Explorer support different sized fonts within HTML documents. This should be distinguished from Headings.

The element is <FONT SIZE=value>. Valid values range from 1-7. The default FONT size is 3. The value given to size can optionally have a '+' or '-' character in front of it to specify that it is relative to the document BASEFONT. The default BASEFONT is 3, and can be changed with the <BASEFONT SIZE ...> element.

<FONT SIZE=4>changes the font size to 4</FONT>
<FONT SIZE=+2>changes the font size to BASEFONT SIZE ... +2</FONT>

Internet Explorer and Netscape support the ability to change the font colour as well as face type. They use COLOR and FACE attributes to the <FONT> element.

COLOR = #rrggbb or COLOR = color
The colour attribute sets the colour which text will appear in on the screen. #rrggbb is a hexadecimal colour denoting a RGB colour value. Alternately, the colour can be set to one the available pre-defined colours (see <BODY BGCOLOR=...>). These colour names can be used for the BGCOLOR, TEXT, LINK, and VLINK attributes of the <BODY> element as well. NOTE : The use of names for colouring text is currently only supported by the Internet Explorer and Netscape. Also, it should be noted that HTML attributes of this kind (that format the presentation of the content) can also be controlled via the use of style sheets.

Example:

<FONT COLOR="#FF0000">This text is red.</FONT>
or
<FONT COLOR="Red">This text is also red.</FONT>

would render as :

This text is red

FACE=name [,name] [,name]
The FACE attribute sets the typeface that will be used to display the text on the screen. The type face displayed must already be installed on the users computer. Substitute type faces can be specified in case the chosen type face is not installed on the customers computer. If no match is found, the text will be displayed in the default type that the browser uses for displaying 'normal' text.

Example:

<FONT FACE="Courier New, Comic Sans MS"> This text will be displayed in either Courier New, or Comic Sans MS, depending on which fonts are installed on the browsers system. </FONT>

NOTE : When using this element, care should be taken to try to use font types that will be installed on the users computer if you want the text to appear as desired. Changing the font face is only supported by Netscape and Internet Explorer, while Internet Explorer can also set font sizes/colours/faces within a style sheet. Also note that in a document whose layout/colouring etc., is defined in a style sheet, using the <FONT> element will have no effect.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <FONT> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <FONT> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <FONT> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <FONT> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <FONT> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <FONT> element for scripting purposes. Any <FONT> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

POINT-SIZE="Font pt. size"
The POINT-SIZE attribute is Netscape specific and allows total sizing control over the contents of the element. For example:

<FONT POINT-SIZE="24">This is 24pt. font</FONT>

Note that Internet Explorer supports font sizings primarily through Style Sheets (as does Netscape 4.0).

WEIGHT
This Netscape specific <FONT> attribute can be used to specify a relative font weight (boldness). It accepts values ranging between 100 and 900 (in steps of 100 - i.e. 100, 200, 300 etc.) It allows finer control of the font's boldness, rather than using <B>, <STRONG>, or the font-weight style sheet attribute.

Every <FONT> element in a document is an object that can be manipulated through scripting. Note that scripting of the <FONT> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <FONT> element at all.

<FONT...> Properties
The <FONT...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.
In addition, the <FONT> element also supports the color, face and size properties, which directly reflect their attribute settings (see above).

<FONT...> Methods
The <FONT...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<FONT...> Events
The <FONT...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<ILAYER...>

The <ILAYER> element (currently only supported by the Navigator component of Netscape Communicator) allows in-line 'layers' to be produced in document. As fixed-position layers (see <LAYER>), they can contain any normal HTML content and are positioned relative to the point where they occur within the document.

The <ILAYER> element accepts the following attributes :

NAME
The NAME attribute can be supplied to uniquely identify the layer for scripting purposes. By default, all layers are unnamed.

LEFT
LEFT specifies the layers relative x coordinate, in pixels, where "0" (the default value) is the point in the document where the <ILAYER> element occurs. The LEFT attribute can be given negative, or positive values, displaying the in-line layer 'floating' above other document content.

TOP
The TOP attribute specifies the relative y coordinate in pixels, where "0" (again, the default value) is the top-most point at which the <ILAYER> element occurs.

SRC
The SRC attribute can be used to reference a separate document that contains the content of the layer. Currently (for Communicator pre-release 2), the document referenced must not include <HEAD> or <BODY> elements.

Z-INDEX
The Z-INDEX attribute is mutually exclusive with the ABOVE and BELOW attributes. It is supplied with a numerical value which determines the layers z-order setting (which determines how various layers overlap each other). The Z-INDEX attribute is generally more useful when using exact positioning with layers, using the <LAYER> element. See <LAYER> for more details.

ABOVE
The ABOVE attribute (mutually exclusive with Z-INDEX and BELOW attributes) can be used to specify the layer immediately above the current layer. The ABOVE attribute is generally more useful when using exact positioning with layers, using the <LAYER> element. See <LAYER> for more details.

BELOW
Similar to the ABOVE attribute (and mutually exclusive with it and the Z-INDEX attribute), the BELOW attribute specifies the layer to be displayed immediately below the current layer, with the same restrictions as the ABOVE attribute. The BELOW attribute is generally more useful when using exact positioning with layers, using the <LAYER> element. See <LAYER> for more details.

WIDTH
The WIDTH attribute can be specified (with a pixel value) to set the width of the layer, to determine how the content of the layer is wrapped within the layer. Layer heights are automatically defined according to the content of the layer. (NOTE : Not currently supported in preview release 2 of Communicator)

CLIP
The CLIP attribute can be used to specify a certain portion of the layer as being visible. Anything outside the CLIP region is transparent and won't be displayed. It accepts 4 pixel values (comma delimited) which are used to set the CLIP rectangles left, top, right and bottom coordinates. Left and right values start from the left hand edge of the layer, while top and bottom values start from the top of the layer. If only two values are supplied, then the left and top coordinates are set to 0. For example :

<LAYER CLIP="10,10,50,20">
. . .

specifies a clipping region of 40 (x direction) by 10 (y direction) pixels for the layer, starting at the position 10,10 (x,y), while :

<LAYER CLIP="50,20">
. . .

specifies a clipping region of 50 (x direction) by 20 (y direction) pixels for the layer, starting at the position 0,0 (x,y).

VISIBILITY
The VISIBILITY attribute controls whether the layer is currently visible or not. It can accept values of show, hide or inherit. Show and hide explicitly set the layers visibility, while inherit makes the current layer inherit the VISIBILITY of its parent layer(s) (layers can be nested). If the current layer is a parent layer (or contains no child layers), 'show' and 'inherit' are identical, since the layer will be visible (unless VISIBILITY="hide" is used).

BGCOLOR
BGCOLOR can be used to set the background colour of the current layer. By default, layers are transparent, specifying a BGCOLOR makes the layer opaque, using the colour specified. Any standard rrgggbb triplet, or a named colour can be used. For more details on document colouring, see the <BODY> element.

BACKGROUND
The BACKGROUND attribute can be used to reference a background image for the layer. Note that is the image used is wider than the layers WIDTH attribute value (see above), then the width of the layer will be extended to display the image fully.

© 1995-1998, Stephen Le Hunte


<INS...>

The <INS> element specifies that the enclosed text has been inserted, since the document was originally written. Along with <DEL>, it is one of the HTML 4.0 elements used to mark document revisions and is currently only supported by Internet Explorer 4.0. Typically it renders underlined, but any style can be used with the <INS> element. For example:

<INS CITE="http://yourcomp.com/procs/sales1.proc" DATETIME="1997-06-01T17:53:12+0:00">New procedure information...
</INS>

would be rendered as:

New procedure information...

<INS> supports the following attributes:

CITE="citation"
The CITE attribute should contain a URL, defining a document that specifies the details of the newly inserted text. For example, an author who inserts some text in a document, based on a new company procedure for example, could use the CITE attribute to specify the URL of a document that defines the new procedure.

DATETIME="Date/time of insertion"
The DATETIME attribute can be used to specify the date and time that the insertion was made. The DATETIME attribute value is of a specific format, being YYYY-MM-DDThh:mm:ssTZD to specify the year, month, date, hours (using 24-hour clock notation), minutes, seconds and a Time Zone identifier. For example, in the above example, the DATETIME attribute is set to 1997-06-01T17:53:12+0.00, which would mark the new procedure information as being inserted as 5.53:12pm on the 6th January 1997, Greenwich Mean Time, also referencing the source of the new procedure information.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <INS> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <INS> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <INS> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <INS> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <INS> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <INS> element for scripting purposes. Any <INS> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <INS> element in a document is an object that can be manipulated through scripting. Note that scripting of the <INS> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model as Netscape doesn't support the <INS> element.

<INS...> Properties
The <INS...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics. Additionally, the <INS> element supports the cite and datetime properties, which directly reflect the CITE and DATETIME attribute values.

<INS...> Methods
The <INS...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<INS...> Events
The <INS...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<I...>

The Italic element specifies that the text should be rendered in italic font, where available. Otherwise, alternative mapping is allowed.

Anything between the <I>I elements</I> should be italics.

would render as :

Anything between the I elements should be italics.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <I> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <I> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <I> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <I> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <I> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <I> element for scripting purposes. Any <I> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <I> element in a document is an object that can be manipulated through scripting. Note that scripting of the <I> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <I> element at all.

<I...> Properties
The <I...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.

<I...> Methods
The <I...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<I...> Events
The <I...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<KBD...>

The Keyboard element can be used to indicate text to be typed by a user and is typically rendered in a mono spaced font. It might commonly be used in an instruction manual.

To login to the system, enter <KBD>"GUEST"</KBD> at the command prompt.

would render as :

To login to the system, enter "GUEST" at the command prompt.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <KBD> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <KBD> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <KBD> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <KBD> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <KBD> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <KBD> element for scripting purposes. Any <KBD> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <KBD> element in a document is an object that can be manipulated through scripting. Note that scripting of the <KBD> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <KBD> element at all.

<KBD...> Properties
The <KBD...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.

<KBD...> Methods
The <KBD...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<KBD...> Events
The <KBD...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<Q...>

The <Q> element specifies that the enclosed text is an in-line quote. This is different from the <BLOCKQUOTE>, because it doesn't generate paragraph breaks before or after. The contents of the <Q> element are rendered with the flow of the surrounding text. It is one of the new HTML 4.0 elements (actually a 'hanger-on' from the ill-fated HTML 3.0 specification) and is currently only supported by Internet Explorer 4.0.

ECMAScript is a <Q CITE="http://www.ecma.ch/">A general purpose, cross-platform programming language</Q>

<Q> supports the following attributes:

CITE="reference URL"
The CITE attribute should be used to specify the source of, or a reference to the contained quote. In the above example, the CITE attribute is used to provide the URL of the ECMA Web site, the authors of the ECMAScript specification.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <Q> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <Q> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <Q> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <Q> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <Q> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <Q> element for scripting purposes. Any <Q> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <Q> element in a document is an object that can be manipulated through scripting. Note that scripting of the <Q> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model as Netscape doesn't support the <Q> element.

<Q...> Properties
The <Q...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics. Additionally, the <Q> element supports the cite and datetime properties, which directly reflect the CITE and DATETIME attribute values.

<Q...> Methods
The <Q...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<Q...> Events
The <Q...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<SAMP...>

The Sample element can be used to indicate a sequence of literal characters and is typically rendered in a mono spaced font.

A sequence of <SAMP>literal characters</SAMP> commonly renders in a monospaced font.

would render as :

A sequence of literal characters commonly renders in a mono spaced font.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <SAMP> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <SAMP> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <SAMP> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <SAMP> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <SAMP> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <SAMP> element for scripting purposes. Any <SAMP> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <SAMP> element in a document is an object that can be manipulated through scripting. Note that scripting of the <SAMP> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <SAMP> element at all.

<SAMP...> Properties
The <SAMP...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.

<SAMP...> Methods
The <SAMP...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<SAMP...> Events
The <SAMP...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<SMALL...>

The Small element specifies that the enclosed text should be displayed, if practical, using a small font (compared with the current font).

This is normal text, with <SMALL>this bit</SMALL> being small text.

would be rendered as:

This is normal text, with this bit being small text.

NOTE : Use of this element is currently supported by Netscape and the Internet Explorer only. They also allow the <SMALL> ... </SMALL> element to be used surrounding the <SUB> ... </SUB> and <SUP> ... </SUP> elements to force rendering of the sub/superscript text as text even smaller than the default slightly smaller (compared to the normal) text normally used. The exact appearance of the small text will change depending on any <FONT SIZE=...> and <BASEFONT SIZE=...> settings, if specified.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <SMALL> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <SMALL> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <SMALL> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <SMALL> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <SMALL> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <SMALL> element for scripting purposes. Any <SMALL> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <SMALL> element in a document is an object that can be manipulated through scripting. Note that scripting of the <SMALL> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <SMALL> element at all.

<SMALL...> Properties
The <SMALL...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.

<SMALL...> Methods
The <SMALL...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<SMALL...> Events
The <SMALL...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<SPAN...>

The <SPAN> element is used to apply a style to text which doesn't play any structural role, or where use of standard HTML elements is not desirable. For example, it may be useful for text to be highlighted by rendering it with a different background colour. For text such as this, using a standard HTML element such as <EM> with an applied style, would possibly be inappropriate, because browsers that don’t support style sheets would render the text as italicised. The <SPAN> element is recommended in such situations as other browsers simply ignore it.

The <SPAN> element can be used within text blocks to apply a style as defined in a style sheet, according to a CLASS or ID attribute, or the STYLE can be specified within the <SPAN> attribute. As with other elements used within the <BODY> of a HTML document, <SPAN> can also have a certain style applied to it in the style sheet definition.

e.g. If

.redtext : { color : #FF0000}

has been defined in a style sheet, then the following :

some text<SPAN CLASS="redtext"> some red text</SPAN> some more text
would render the some red text section in red.
<SPAN STYLE="{color : #FF0000}">some red text</SPAN>
would do exactly the same

Internet Explorer also supports the use of the DIR attribute for specifying the reading direction of the text. Using :

<SPAN DIR="rtl">some right-to-left text</SPAN>

causes the text to be rendered, reading from right to left, instead of the standard left to right. Note that this only occurs on systems that support right to left text rendering, for example, Arabic and Hebrew systems.

See the Style Sheets topic for more information about style sheets.

Viewing the source of any page of this reference may also provide some clues. The <SPAN> element is used quite extensively for setting the styles of various text.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <SPAN> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <SPAN> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <SPAN> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <SPAN> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <SPAN> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <SPAN> element for scripting purposes. Any <SPAN> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

DATAFLD
The DATAFLD attribute can be used to specify a data column name from the Data source (see DATASRC) that the <SPAN> is bound to. For more information on the DATAFLD attribute, see the Data Binding topic.

DATAFORMATAS
When the <SPAN> element is data-bound, it can accept straight text, or HTML from the data source. The DATAFORMATAS attribute should be set to "TEXT" or "HTML" accordingly. with DATAFORMATAS="HTML", the data provided for the <SPAN> element is parsed and rendered when its displayed.
For more information on the DATAFORMATAS attribute, see the Data Binding topic.

DATASRC
The DATASRC attribute can be used to specify a data source that the <SPAN> is bound to. For more information on the DATASRC attribute, see the Data Binding topic.

Every <SPAN> element in a document is an object that can be manipulated through scripting. Note that scripting of the <SPAN> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <SPAN> element at all.

<SPAN...> Properties
The <SPAN...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.
The <SPAN> element also supports the following properties:

clientHeight
The clientHeight property reflects the height (in pixels) of the contents of the <SPAN> element.

clientWidth
The clientWidth property reflects the width (in pixels) of the contents of the <SPAN> element.

dataFld

dataFormatAs

dataSrc

scrollHeight
The scrollHeight property reflects the contents of the <SPAN> elements total scrollable height (in pixels).

scrollLeft
The scrollLeft property reflects a value representing the distance between the left-most edge of the element and the left-most visible edge of the element. While the contents of the <SPAN> element are totally visible on the screen, the scrollLeft property is 0, only increasing if the left-most edge of the <SPAN> elements contents are scrolled off the left hand edge of the current viewing window.

scrollTop
The scrollTop property returns a value that represents the distance between the top-most edge of the element and the top-most edge of the current viewing window. When used with the <SPAN> element, the scrollTop property is a value indicative of the extent to which the referenced element has been scrolled vertically. If the contents of the <SPAN> element are visible, then the scrollTop property will be 0, only increasing as the contents of the element are scrolled off the top of the current viewing window.

scrollWidth
Like the scrollHeight property, the scrollWidth property reflects a value that represents the total scrollable width of the contents of the <SPAN> element.

<SPAN...> Methods
The <SPAN...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<SPAN...> Events
The <SPAN...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<STRIKE...> or <S...>

The Strikethrough element states that the enclosed text should be displayed with a horizontal line striking through the text. Alternative mappings are allowed if this is not practical.

This text would be <STRIKE>struck through</STRIKE>

would be rendered as :

This text would be struck through

NOTE : The element for this effect in the HTML 3.2 specification is actually <S> ... </S>, which is supported by all three browsers as well as the <STRIKE> element

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <S> or <STRIKE> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <S> or <STRIKE> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <S> or <STRIKE> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <S> or <STRIKE> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <S> or <STRIKE> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <S> or <STRIKE> element for scripting purposes. Any <S> or <STRIKE> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <S> or <STRIKE> element in a document is an object that can be manipulated through scripting. Note that scripting of the <S> and <STRIKE> elements/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <S> element at all.

<S...>/<STRIKE...> Properties
The <S...> or <STRIKE> elements/objects support all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.

<S...>/<STRIKE...> Methods
The <S...> or <STRIKE> elements/objects support all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<S...>/<STRIKE...> Events
The <S...> or <STRIKE> elements/objects support all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<STRONG...>

The Strong element can be used to indicate strong typographic emphasis and is typically rendered in a bold font.

The instructions <STRONG>must be read</STRONG> before continuing.

would be rendered as :

The instructions must be read before continuing.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <STRONG> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <STRONG> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <STRONG> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <STRONG> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <STRONG> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <STRONG> element for scripting purposes. Any <STRONG> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <STRONG> element in a document is an object that can be manipulated through scripting. Note that scripting of the <STRONG> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <STRONG> element at all.

<STRONG...> Properties
The <STRONG...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.

<STRONG...> Methods
The <STRONG...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<STRONG...> Events
The <STRONG...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<SUB...>

The Subscript element specifies that the enclosed text should be displayed as a subscript, and if practical, using a smaller font (compared with normal text).

This is the main text, with <SUB>this bit</SUB> being subscript.

Would render as :

This is the main text, with this bit being subscript.

NOTE : The selected text will be made a superscript to the main text, formatting the selected text slightly smaller than the normal text. Netscape and the Internet Explorer can be forced to make subscripts even smaller by compounding the <SUB> ... </SUB> element with the <SMALL> ... </SMALL> element, or be forced to render the subscript the same size as the normal text, by compounding the <SUB> ... </SUB> element with the <BIG> ... </BIG> element. The exact appearance of the subscript text will change depending on any <FONT SIZE=...> and <BASEFONT SIZE=...> settings, if specified.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <SUB> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <SUB> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <SUB> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <SUB> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <SUB> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <SUB> element for scripting purposes. Any <SUB> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <SUB> element in a document is an object that can be manipulated through scripting. Note that scripting of the <SUB> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <SUB> element at all.

<SUB...> Properties
The <SUB...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.

<SUB...> Methods
The <SUB...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<SUB...> Events
The <SUB...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<SUP...>

The Superscript element specifies that the enclosed text should be displayed as a superscript, and if practical, using a smaller font (compared with normal text). This is an HTML 3.0 element and may not be widely supported.

This is the main text, with <SUP>this bit</SUP> being superscript.

Would render as:

This is the main text, with this bit being superscript.

NOTE : The selected text will be made a superscript to the main text, formatting the selected text slightly smaller than the normal text. Netscape and the Internet Explorer can be forced to make superscripts even smaller by compounding the <SUP> ... </SUP> element with the <SMALL> ... </SMALL> element, or be forced to render the superscript the same size as the normal text, by compounding the <SUP> ... </SUP> element with the <BIG> ... </BIG> element. The exact appearance of the superscript text will change depending on any <FONT SIZE=...> and <BASEFONT SIZE=...> settings, if specified.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <SUP> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <SUP> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <SUP> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <SUP> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <SUP> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <SUP> element for scripting purposes. Any <SUP> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <SUP> element in a document is an object that can be manipulated through scripting. Note that scripting of the <SUP> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <SUP> element at all.

<SUP...> Properties
The <SUP...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.

<SUP...> Methods
The <SUP...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<SUP...> Events
The <SUP...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<TT...>

The Teletype element specifies that the text should be rendered in fixed-width typewriter font where available. Otherwise, alternative mapping is allowed.

Text between the <TT>typetype elements</TT> should be rendered in fixed width typewriter font.

would render as :

Text between the typetype elements should be rendered in fixed width typewriter font.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <TT> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <TT> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <TT> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <TT> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <TT> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <TT> element for scripting purposes. Any <TT> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <TT> element in a document is an object that can be manipulated through scripting. Note that scripting of the <TT> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <TT> element at all.

<TT...> Properties
The <TT...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.

<TT...> Methods
The <TT...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<TT...> Events
The <TT...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<U...>

The Underline elements state that the enclosed text should be rendered, if practical, underlined.

The <U>main point</U> of the exercise...

would be rendered as :

The main point of the exercise...

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <U> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <U> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <U> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <U> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <U> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <U> element for scripting purposes. Any <U> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <U> element in a document is an object that can be manipulated through scripting. Note that scripting of the <U> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <U> element at all.

<U...> Properties
The <U...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.

<U...> Methods
The <U...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<U...> Events
The <U...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<VAR...>

The Variable element can be used to indicate a variable name and is typically rendered in an italic font.

When coding, <VAR>LeftIndent()</VAR> must be a variable

would render as :

When coding LeftIndent() must be a variable.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <VAR> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <VAR> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <VAR> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <VAR> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <VAR> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <VAR> element for scripting purposes. Any <VAR> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <VAR> element in a document is an object that can be manipulated through scripting. Note that scripting of the <VAR> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <VAR> element at all.

<VAR...> Properties
The <VAR...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.

<VAR...> Methods
The <VAR...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<VAR...> Events
The <VAR...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


White Space Elements

These elements are used within a document to break up the flow of the content. Mostly (except for <HR> and <SPACER>) they do not render anything on the screen, except for some extra space.

The 'White Space' elements are :

<BR>
<HR>
<NOBR>
<SPACER>
<WBR>

© 1995-1998, Stephen Le Hunte


<BR...>

The Line Break element specifies that a new line must be started at the given point. The amount of line space used is dependant on the particular browser, but is generally the same as it would use when wrapping a paragraph of text over multiple lines.

Example of use:

<P>
Mary had a little lamb<BR>
It's fleece was white as snow<BR>
Everywhere that Mary went<BR>
She was followed by a little lamb.

With the addition of floating images (I.e. the ability to align an embedded image to the left or right of the browser display window) it became necessary to expand the <BR> element. Normal <BR> still just inserts a line break. A CLEAR attribute was added to <BR>, so :

CLEAR=left will break the line, and move vertically down until you have a clear left margin (I.e. where there are no floating images).
CLEAR=right does the same for the right margin.
CLEAR=all moves down until both margins are clear of images.

NOTE : The CLEAR attribute (as well as floating images) are currently only supported by Netscape and the Internet Explorer.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <BR> element as using a particular style sheet class. For <BR> elements, style sheet settings such as line-height adjustments are useful. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <BR> element can have in-line stylings attached to it. See the Style Sheets topic for details. For <BR> elements, style sheet settings such as line-height adjustments are useful.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier.

Every <BR> element in a document is an object that exposes certain properties and can be manipulated with certain methods. Note that scripting of the <BR> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <BR> element at all.

<BR...> Properties
Of the standard Dynamic HTML properties, the <BR...> element/object supports the following className, document, id, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title. Details of these can be found in the standard Dynamic HTML properties topics.
The <BR> element also supports the clear property that reflects the value of the CLEAR attribute (as described above).

<BR...> Methods
Of the standard Dynamic HTML methods, the <BR...> element/object supports the following contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute. Details of these can be found in the standard Dynamic HTML Methods topics.

<BR...> Events
The <BR...> element/object doesn't support any events.

© 1995-1998, Stephen Le Hunte


<HR...>

A Horizontal Rule element is a divider between sections of text such as a full width horizontal rule or equivalent graphic.

Example of use:

<HR>
<ADDRESS>August 20<SUP>th</SUP>, 1996, Swansea</ADDRESS>
</BODY>

would render as :

August 20th, 1996, Swansea

The <HR> element specifies that a horizontal rule of some sort (The default being a shaded engraved line) be drawn across the page. Recent browsers have added new attributes to this element, which can be used to describe the colouring, size and position of the horizontal rule.

<HR SIZE=number>
The SIZE attributes lets the author give an indication of how thick they wish the horizontal rule to be.

<HR WIDTH=number|percent>
The default horizontal rule is always as wide as the page. With the WIDTH attribute, the author can specify an exact width in pixels, or a relative width measured in percent of document width.

<HR ALIGN=left|right|center>
Now that horizontal rules do not have to be the width of the page it is necessary to allow the author to specify whether they should be pushed up against the left margin, the right margin, or centred in the page.

<HR NOSHADE>
For those times when a solid bar is required, the NOSHADE attribute lets the author specify that the horizontal rule should not be shaded at all.

<HR COLOR>=name|#rrggbb
Internet Explorer allows the specifying of the hard rule colour. Accepted values are any of the Internet Explorer supported colour names (see <BODY BGCOLOR=...>, or any acceptable rrggbb hex triplet.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <HR> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <HR> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <HR> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <HR> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <HR> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <HR> element for scripting purposes. Any <HR> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Examples:

<HR>
<HR SIZE="5">
<HR WIDTH="50%">
<HR WIDTH="50%" ALIGN="right">
<HR WIDTH="50%" ALIGN="center" NOSHADE>

would render as :

Every <HR> element in a document is an object that can be manipulated through scripting. Note that scripting of the <HR> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <HR> element at all.

<HR...> Properties
Of the standard Dynamic HTML properties, the <HR...> element/object supports the following: className, document, id, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title. Details of these can be found in the standard Dynamic HTML properties topics.
It also supports the align, color, noShade, size and width properties, which directly reflect the attribute values (described above).

<HR...> Methods
The <HR...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<HR...> Events
The <HR...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<NOBR...>

The <NOBR> element stands for NO BReak. This means all the text between the start and end of the <NOBR> elements cannot have line breaks inserted. While <NOBR> may be essential for those character sequences that don't want to be broken, it should be used carefully; long text strings inside of <NOBR> elements can look rather odd, especially if during viewing, the user adjusts the page size by altering the window size.

NOTE : The <NOBR> Element is supported only by Netscape and the Internet Explorer.

© 1995-1998, Stephen Le Hunte


<SPACER...>

This Netscape specific attribute can be used to include hard coded white space in a document. It accepts the following attributes :

TYPE="horizontal|vertical|block"
The TYPE of <SPACER> can be either horizontal, vertical or block. A horizontal <SPACER> inserts horizontal white space in between words. A vertical <SPACER> inserts vertical space between lines and the block <SPACER> behaves like an image (except doesn't display an image.) It essentially, reserves a block of space within the document.

SIZE="value"
When a <SPACER TYPE="horizontal"> or <SPACER TYPE="vertical"> is used, the SIZE attribute specifies its size in pixels. Any setting of this attribute is ignored if a <SPACER TYPE="block"> is used.

WIDTH="value"
When a <SPACER TYPE="block"> is used, the WIDTH attribute specifies the WIDTH of the block to be reserved as white space.

HEIGHT="value"
When a <SPACER TYPE="block"> is used, the HEIGHT attributes specifies the HEIGHT of the block to be reserved as white space.

ALIGN="alignment"
When a <SPACER TYPE="block"> is used, the ALIGN attributes specifies the alignment of the white space block and can accept any alignments as used by the <IMG> element for embedding images.

Example
The following HTML fragment inserts a horizontal spacer of 25 pixels between two words, as shown below

<P>Hello and Welcome<SPACER TYPE="horizontal" SIZE="25">to the HTML Reference Library. To those of you familiar with the previous incarnation of this project (The HTML Reference Library - HTMLib in Windows .HLP format) the content and working of these pages will probably be obvious.

would display as :

Hello and Welcome to the HTML Reference Library. To those of you familiar with the previous incarnation of this project (The HTML Reference Library - HTMLib in Windows .HLP format) the content and working of these pages will probably be obvious.

© 1995-1998, Stephen Le Hunte


<WBR...>

The <WBR> element stands for Word BReak. This is for the very rare case when a <NOBR> section requires an exact break. Also, it can be used any time the browser can be helped by telling it where a word is allowed to be broken. The <WBR> element does not force a line break (<BR> does that) it simply lets the browser know where a line break is allowed to be inserted if needed.

NOTE : The <WBR> Element is supported only by Netscape and the Internet Explorer.

© 1995-1998, Stephen Le Hunte


Media Embedding

Recent enhancements to HTML mean that now almost any type of file can be embedded into a HTML document. The <APPLET> element allows the inclusion of Java applets; the <OBJECT> allows the inclusion of ActiveX controls and other objects; <BGSOUND> and <SOUND> allow for the inclusion of sound files in documents and the <EMBED> facilitates the embedding of almost any file type by the Netscape plug-in method. The inclusion of non-textual media into HTML documents has come a long way since HTML 2.0

Also, the <IMG> element has undergone a large enhancement since HTML 2.0. This is due to the <IMG> element being probably the second most important mark up element (behind the Anchor element) as it handles nearly all image embedding in HTML documents.

The attributes commonly supported by the <IMG> element have had some recent additions to allow Client side Image Maps, embedded In-line video clips and also embedded In-line VRML worlds

A note about formats.
Netscape and Mosaic (and most other browsers) will only support use of .GIF and .JPG images ( Netscape also supports progressive JPEG images) within HTML documents. This can be extended with Netscape, by embedding image formats within pages, providing the format is one that the user will have software to handle installed on their system, or they have a plug-in module specifically to handle that type of image (see <EMBED>).

The Internet Explorer though, will allow the use .GIF, .JPG, progressive JPEG images, .PNG (portable network graphics) images and also .BMP files, giving the author a wider variety of image formats from which to choose.

Netscape and Internet Explorer now fully support the GIF89a format, which means that multi-image GIF files can be used to create animation sequences. Users are encouraged to seek out the GIF Construction Kit for more details and tools for the preparation of multi-image GIF files.

The 'non-dithering palette'
As described in the <BODY> topic, both Netscape and Internet Explorer will dither graphics that don't use the 'non-dithering palette' for their colour scheme. For more information on the colour options supplied by the 'non-dithering palette', see the relevant section in the <BODY...> topic.

© 1995-1998, Stephen Le Hunte


<APPLET...>

NOTE : The information provided here only describes the necessary HTML elements that allow pre-compiled HotJava applets to be added to your HTML documents. It does not describe how to actually write HotJava applets. Such information is well beyond the scope of this document. More information can be found about writing HotJava applets and how to obtain a copy of the HotJava browser and Java development kit from :

http://java.sun.com/

Also, Microsoft recently released their Java SDK, to complement their Visual J++ product. For more details, visit http://www.microsoft.com/java/

To add an applet to an HTML page, you need to use the <APPLET> HTML element.

<APPLET CODE="Applet.class" WIDTH=200 HEIGHT=150>
</APPLET>

This tells the viewer or browser to load the applet whose compiled code is in Applet.class (in the same directory as the current HTML document), and to set the initial size of the applet to 200 pixels wide and 150 pixels high. (The <APPLET> element supports standard image type attributes - see below).

Below is a more complex example of an <APPLET> element:

<APPLET CODEBASE="http://java.sun.com/JDK-prebeta1/applets/ NervousText" CODE="NervousText.class"
width=400 height=75 align=center>
<PARAM NAME="text" VALUE="This is the Applet Viewer.">
<BLOCKQUOTE>
<HR>
If you were using a Java-enabled browser, you would see dancing text instead of this paragraph.
<HR>
</BLOCKQUOTE>
</APPLET>

This tells the viewer or browser to load the applet whose compiled code is at the URL http://java.sun.com/JDK-prebeta1/applets/NervousText/NervousText.class, to set the initial size of the applet to 400x75 pixels, and to align the applet in the centre of the line. The viewer/browser must also set the applet's "text" attribute (which customizes the text this applet displays) to be "This is the Applet Viewer." If the page is viewed by a browser that can't execute applets written in the Java Programming Language, then the browser will ignore the <APPLET> and <PARAM> elements, displaying the HTML between the <BLOCKQUOTE> elements.

The complete syntax for the <APPLET> element is as follows :

<APPLET
[ALIGN]="Alignment"
[ALT]="alternateText"
[ARCHIVE]="compressed_file"
[CLASS]="Style Sheet class"
[CODE]="appletFile"
[CODEBASE]="URL"
[DATAFLD]="Column Name"
[DATASRC]="Date Source"
[HEIGHT]="pixels"
[HSPACE]="pixels"
[ID]="Unique Identifier"
[MAYSCRIPT]
[NAME]="appletInstanceName"
[SRC]="URL"
[STYLE]="Styling"
[TITLE]="ToolTip"
[VSPACE]="pixels"
[WIDTH]="pixels"
>
[<PARAM NAME = appletAttribute1 VALUE = value>]
[<PARAM NAME = appletAttribute2 VALUE = value>]
. . .
[alternateHTML]
</APPLET>

ALIGN=alignment
This required attribute specifies the alignment of the applet. The possible values of this attribute are the same as those for the <IMG> element: left, right, top, texttop, middle, absmiddle, baseline, bottom, absbottom.

ALT=alternateText
This optional attribute specifies any text that should be displayed if the browser understands the APPLET element but can't run applets written in the Java Programming Language.

ARCHIVE=compressed file
This optional attribute specifies the location (relative to the CODEBASE of the main class file) of a compressed file (consisting of all the necessary class files and support images/sounds etc.) that may be downloaded to the users Hard Disk, to save download time should they return to the page at a later date. Any files not contained in this archive that are needed will be searched for by the browser in the normal way. NOTE : The ARCHIVE attribute is Netscape specific.

CLASS=Style Sheet class
The CLASS attribute is used to specify the <APPLET> element as using a particular style sheet class. See the Style Sheets topic for details.

CODE=appletFile
This required attribute gives the name of the file that contains the applet's compiled Applet subclass. This file is relative to the base URL of the applet. It cannot be absolute.

CODEBASE=URL
This optional attribute specifies the base URL of the applet -- the directory that contains the applet's code. If this attribute is not specified, then the document's URL is used.

DATAFLD=Column Name
The DATAFLD attribute can be used to specify a data column name from the Data source (see DATASRC) that the <APPLET> is bound to. For more information on the DATAFLD attribute, see the Data Binding topic.

DATASRC=Data Source
The DATASRC attribute can be used to specify a data source that the <APPLET> is bound to. For more information on the DATASRC attribute, see the Data Binding topic.

HEIGHT=pixels WIDTH=pixels
These required attributes give the initial width and height (in pixels) of the applet display area, not counting any windows or dialogs that the applet brings up.

HSPACE=pixels VSPACE=pixels
These option attributes specify the number of pixels above and below the applet (VSPACE) and on each side of the applet (HSPACE). They're treated the same way as the <IMG> element's VSPACE and HSPACE attributes.

ID=Unique Identifier
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <APPLET> element for scripting purposes. Any <APPLET> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

MAYSCRIPT
This attribute is a flag that when used, specifies that the applet is scriptable by JavaScript functions.

NAME=appletInstanceName
This optional attribute specifies a name for the applet instance, which makes it possible for applets on the same page to find (and communicate with) each other.

SRC=URL
The SRC attribute specifies a URL associated with the applet. Such a URL may point to the support site, with development information for example.

STYLE=Styling
As well as using previously defined style sheet settings, the <APPLET> element can have in-line stylings attached to it. See the Style Sheets topic for details.

TITLE=ToolTip
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <APPLET> section.

<PARAM NAME=appletAttribute1 VALUE=value>
This element is the only way to specify an applet-specific attribute. Applets access their attributes with the getParameter() method.
The <PARAM> element supports the following attributes:

DATAFLD
The DATAFLD attribute can be used to specify a data column name from the Data source (see DATASRC) that the <PARAM> is bound to. For more information on the DATAFLD attribute, see the Data Binding topic.

DATAFORMATAS
When the <PARAM> element is data-bound, it can accept straight text, or HTML from the data source. The DATAFORMATAS attribute should be set to "TEXT" or "HTML" accordingly. with DATAFORMATAS="HTML", the data provided for the <BUTTON> element is parsed and rendered when its displayed.
For more information on the DATAFORMATAS attribute, see the Data Binding topic.

DATASRC
The DATASRC attribute can be used to specify a data source that the <PARAM> is bound to. For more information on the DATASRC attribute, see the Data Binding topic.

NAME
The NAME attribute is used to specify which property of the specific attribute is being set, by the value of the VALUE attribute.

VALUE
Specifies the value of the property named in the NAME attribute.

Every <APPLET> element in a document is an object that can be manipulated through scripting. Note that scripting of the <APPLET> element/object is largely only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does support the Applets collection/applets array, but the scripting opportunities are not as large as those supported by Internet Explorer 4.0.

<APPLET...> Properties
The <APPLET...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.
Also, the <APPLET> element supports the following properties:

align
The align property directly reflects any settings of the ALIGN attribute (see above).

code
The code property directly reflects any settings of the CODE attribute (see above).

codebase
The codebase property directly reflects any settings of the CODEBASE attribute (see above).

dataFld
The dataFld property directly reflects any settings of the DATAFLD attribute (see above).

dataSrc
The dataSrc property directly reflects any settings of the DATASRC attribute (see above).

height
The height property directly reflects any settings of the HEIGHT attribute (see above).

hspace
The hspace property directly reflects any settings of the HSabovePACE attribute (see above).

The readyState property can be one of 4 values, depending on the current state of the applet referenced in the <APPLET> element. The possible values of the readyState property are:

Value | Meaning
complete | The resource has completely loaded and is available to the document and therefore manipulation.
interactive | The resource hasn't completely downloaded, but is available to the document and scripting
loading | The resource is being downloaded
uninitialized | The resource is not available - normally, this value indicates that the resource is downloading

src
The src property directly reflects any settings of the SRC attribute (see above).

vspace
The vspace property directly reflects any settings of the VSPACE attribute (see above).

width
The width property directly reflects any settings of the WIDTH attribute (see above).

<APPLET...> Methods
The <APPLET...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.
The <APPLET> element also supports the following methods:

blur
The blur method can be used to force the applet to lose the users focus. This then fires the onblur event (see below).

focus
The focus method can be used to force the applet to gain the users focus. This then fires the onfocus event (see below).

<APPLET...> Events
The <APPLET...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.
The <APPLET> element also supports the following events:

onafterupdate
The onafterupdate event is fired after data is transferred from the element to the data provider and will only fire after the onbeforeupdate event has fired and was successful. For more information on Data Binding, see the Data Binding topic.

onbeforeupdate
onbeforeupdate fires when a data bound element loses the focus, or the current document is unloaded and will only fire if the value of the element is different to the original value that was present when the element received the users focus. Note that onbeforeupdate is a cancelable event (setting returnValue=false for the Event object), which allows the document /script author a chance to validate the new data entered by the user on the client-side, before sending the data to the data provider. For more information on Data Binding, see the Data Binding topic.

onblur
onblur is fired whenever the users focus moves away from the applet (either by them clicking on another part of the document, or by 'tabbing' away from the contents of the <APPLET> element, or by using the blur method (see above).

ondataavailable
The ondataavailable event being fired indicates that more records for the referenced Data Source Object are available. It doesn't necessarily fire for every single additional record though. For more information on Data Binding, see the Data Binding topic.

ondatasetchanged
The ondatasetchanged event is fired when a new set of data is available and a recordset can be retrieved from that set of data, or when an existing set of data has been changed - for example after a filter has been applied to the data. For more information on Data Binding, see the Data Binding topic.

ondatasetcomplete
When all the data in the referenced recordset is available, the ondatasetcomplete event fires. For the ondatasetcomplete event, a reason parameter is available through the Event Object, which can have values of 0, 1 or 2, corresponding to successful completion, Aborted completion (i.e. 'Stop' button pressed for example), or Error (some other error) respectively. For more information on Data Binding, see the Data Binding topic.

onerrorupdate
The onerrorupdate event fires when a data transfer error occurs, through some action by the user (i.e. pressing the 'Stop' button on the browser for example), but not if a script generates the transfer error. For more information on Data Binding, see the Data Binding topic.

onfocus
The onfocus event is fired whenever the user passes the focus to the applet - by clicking on it, tabbing to it, or by a script function using the focus method (see above).

onload
The onload event is fired when the applet referenced in the <APPLET> element starts to download. Note that the event is fired as soon as the <APPLET> element is encountered, so any script functions fired from the onload event should be before the referenced <APPLET> element in the document, otherwise script errors will occur.

onreadystatechange
At any time, the applet may change its readyState property and when this happens, the onreadystatechange event is fired.

onresize
The onresize event is fired whenever the applet is resized, through scripting, or by the user changing their browser window size.

onrowenter
The onrowenter event fires on the data source control when the current record has been changed, so new data is available to populate the HTML display elements that are bound to the data source. Somewhat confusingly, this will typically happen after the onrowexit event has been fired. For more information on Data Binding, see the Data Binding topic.

onrowexit
The onrowexit event is fired immediately before the data source changes the current record (i.e. when the user has requested another record, or set of records by pressing a button perhaps). Note that unlike the anafterupdate and onbeforeupdate events, onrowexit is fired by the data source, not any of the HTML elements used to display the data. Changes to the data in the HTML elements should have been transferred to the data source (with validation being taken care of in the on*update events). onrowexit will also fire if the record position is changed through scripting. For more information on Data Binding, see the Data Binding topic.

© 1995-1998, Stephen Le Hunte


<BGSOUND...>

The <BGSOUND> element allows authors to create pages that will play sound clips, or background soundtracks while the page is being viewed Sounds can either be samples (.WAV or .AU format) or MIDI (.MID format).

The HTML used to insert a background sound into a page is:

<BGSOUND SRC="start.wav">

The BGSOUND element accepts the following attributes.

BALANCE=Stereo balancing
The BALANCE attribute can be used to change the stereo balance when the sound file is played. It accepts values between '-10000' and '10000'. The effect of the two extreme values depends on the sound settings on the users system, but using either of the extreme values will force the sound to play from one speaker only.

CLASS=n
The CLASS attribute is used to specify the <DIR> element as using a particular style sheet class. See the Style Sheets topic for details.

ID=n
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <DIR> element for scripting purposes. Any <DIR> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

LANG=n
The LANG attribute can be used to specify what language the <DIR> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LOOP=n
This attribute specifies how many times a sound will loop when activated. If n=-1 or LOOP=INFINITE is specified, the sound will loop indefinitely.

SRC
This attribute specifies the address of a sound to be played.

TITLE=n
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. The <BGSOUND> attribute presents nothing on the screen, so no 'ToolTip' is provided by the TITLE attribute.

VOLUME=n
The VOLUME attribute accepts values between '-10000' and 0 and can be used to set the volume at which the sound file will play. Note that using '0' (i.e. maximum volume), will play the sound file at 100% of the users current volume settings. There is no way in HTML that you can force a sound file to play at a volume indecent to the user. They will always have total control.

Example
This page has a background soundtrack playing if you are using Internet Explorer. The code used is:

<BGSOUND SRC="../Dynamic_Documents/clouds.mid">

NOTE : Internet Explorer now fully supports use of Netscape plug-ins using the <EMBED...> element. Therefore, using :

<EMBED SRC="../Dynamic_Documents/clouds.mid" HIDDEN="True">

will produce the same effect as using the above <BGSOUND...> element (and will also work in Netscape (3.0 and above)). The actual <BGSOUND...> element is still Internet Explorer specific though.

Every <BGSOUND> element in a document is an object that can be manipulated through scripting. Note that scripting of the <BGSOUND> element/object is only supported by Internet Explorer 4.0, as only Internet Explorer supports the <BGSOUND> element.

<BGSOUND...> Properties
The <BGSOUND...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.
Also, the <BGSOUND> element supports the balance, loop, src and volume properties, which directly reflect their attribute settings (see above).

<BGSOUND...> Methods
The <BGSOUND...> element/object supports some of the standard Dynamic HTML methods (i.e. contains, getAttribute, removeAttribute and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<BGSOUND...> Events
The <BGSOUND...> element/object doesn't support any events

© 1995-1998, Stephen Le Hunte


Client Side Image Maps

Adding the USEMAP attribute to an <IMG> element indicates that the image is a client-side image map. The USEMAP attribute can be used with the ISMAP attribute to indicate that the image can be processed as either a client-side or server-side image map (useful to ensure browser independence of HTML documents). The value used in the USEMAP attribute specifies the location of the map definition to use with the image, in a format similar to the HREF attribute on anchors. If the argument to USEMAP starts with a '#', the map description is assumed to be in the same document as the <IMG> element.

<IMG SRC="../images/image.gif" USEMAP="maps.html#map1">

This would use the map described as "map1" in "maps.html" as the overlay for the image file "image.gif". The map definition (see below) can be included either within the HTML document itself where the image is embedded, or in a completely separate file.

The different active regions of the image are described using MAP and AREA elements. The map describes each region in the image and indicates the location of the document to be retrieved when the defined area is activated. The basic format for the MAP element is as follows:

<MAP NAME="name">
<AREA [SHAPE="shape"] COORDS="x,y,..." [HREF="reference"] [NOHREF]>
</MAP>

The NAME specifies the name of the map so that it can be referenced by an <IMG USEMAP=...> element (NOTE : the NAME attribute of the <AREA> element can also be used to reference the particular area for scripting purposes. See the information in the Document Object for more information). The SHAPE gives the shape of the specific area. Currently the shapes "RECT", "CIRCLE" and "POLY" are supported (Mosaic only supports the RECT shape), with RECT being the default shape, if an explicit SHAPE attribute is not specified. The COORDS attribute gives the co-ordinates of the shape, using image pixels as the units. For a rectangle (SHAPE="RECT"), the COORDS are expressed as "left-x,top-y,right-x,bottom-y". For a circle, (SHAPE="CIRCLE"), the COORDS are expressed as "centre-x, centre-y, radius" and for a polygon (SHAPE="POLY") (an irregular shape), the COORDS are expressed in pairs of coordinates (i.e. "x1,y1,x2,y2,x3,y3... ") which defines the pixel coordinates of the various points of the polygonal image hotspot.

The NOHREF attribute indicates that clicks in this region should perform no action. An HREF attribute specifies where a click in that area should lead. Note that a relative anchor specification will be expanded using the URL of the map description as a base, rather than using the URL of the document from which the map description is referenced. If a <BASE> tag is present in the document containing the map description, that URL will be used as the base to resolve partial URL's

An arbitrary number of AREA elements may be specified. If two areas intersect, the one which appears first in the map definition takes precedence in the overlapping region.

Both the <MAP> and <AREA> elements also support the following attributes:

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present in the <AREA>, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the section of the image defined by the <AREA> element. The TITLE attribute in the <MAP> element can be used for informational purposes only (no ToolTip is presented to the user)

LANG="language setting"
The LANG attribute can be used to specify what language the <MAP> or <AREA> elements are using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <MAP> and/or <AREA> elements. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <MAP> or <AREA> elements as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <MAP> or <AREA> elements can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <MAP> or <AREA> element for scripting purposes. Any <MAP> or <AREA> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Examples
The following images all use a <MAP...> element and USEMAP attributes to specify them as image maps. Use the View Source option in the browser to see the source for these maps.

Circle image map | A Circular image map - using SHAPE="CIRCLE"
Rectangle image map | A Rectangular image map - using SHAPE="RECT"
Polygon image map | A Polygonal image map - using SHAPE="POLY"

NOTE : The links in the above example don't actually exist, they're just there as an example. When the image is surrounded by an anchor element, which runs a script function, Netscape will only activate the script function when the actual hotspot as defined in the <MAP> element is clicked. Internet Explorer will activate the script when _any_ part of the image is clicked on.

NOTE : The TARGET attribute can be used within the <AREA> element, allowing the use of Client side image maps within framed documents. For more information about the use of TARGET attributes, see the <FRAME> section.

Every <MAP> and <AREA> element in a document is an object that can be manipulated through scripting. Note that scripting of the CLient Side Image Maps elements/objects is supported to a greater extent by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does support some scripting of the <AREA> element, through its appearance in the Links Collection (alongside <A> elements). For details of Netscape scripting support, see the Links Collection topic.

Client Side Image Map Properties
Both <MAP> and <AREA> elements/objects support all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.
Additionally, the <AREA> element supports the following properties:

alt
The alt property directly reflects the ALT attribute (see above) for the <AREA> element.

coords
The coords property directly reflects the COORDS attribute (see above) for the <AREA> element.

hash
The hash property reflects, or sets any 'bookmark' definitions within the hot-spot's HREF attribute. For example:

<AREA HREF="http://www.htmlib.com/files/intro.htm#contents" ID="ContentsLinkHotSpot" COORDS="...">
. . .
<SCRIPT LANGUAGE="VBScript">
strHash=ContentsLinkHotSpot.hash
</SCRIPT>

would make strHash have the value of contents.

host
The host property is essentially a combination of the hostname (see below) and port (see below) properties. For the above example (for the hash property), the host property would be www.htmlib.com:80. (80 is the standard port for Web servers)

hostname
The hostname property reflects, or sets the name of the computer identified in the HREF attribute. Using the above example (for the hash property), the hostname property would be www.htmlib.com.

href
The href property reflects, or sets, the HREF attribute of the hot-spot. It is possible to change a link's href property through scripting.

noHref
The noHref property reflects any setting of the NOHREF attribute for the hot-spot.

pathname
The pathname property reflects, or sets the full path to the target document, as given in the HREF attribute. For example, in the above example for the hash property, the pathname property would be files/intro.htm#contents

port
As mentioned above, the port property reflects, or sets the port setting (if given) in the HREF attribute (if set). If no port is specified in the HREF setting, then port 80 is assumed (the standard port for Web servers).

protocol
The protocol property reflects, or sets the protocol of the HREF attribute (if set). For example:

<AREA HREF="http://www.htmlib.com/" COORDS="..." ...>

would return http:// for the protocol property.

search
The search property reflects, or sets any search strings appended to the URL given in the HREF attribute (if set), after the ? query string de-limiter.

shape
The shape property directly reflects the SHAPE attribute (see above) for the <AREA> element.

target
The target property directly reflects the TARGET attribute (see above) for the <AREA> element.

Client Side Image Map Methods
Both <MAP> and <AREA> elements/objects support all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.
Also, the <AREA> element supports the following methods:

blur
The blur method can be used to force the users focus away from the <AREA> element, thus firing the onblur event.

focus
Opposing the blur method, the focus method can be used to force the users focus to the referenced <AREA> element, which then causes the onfocus event to occur.

Client Side Image Map Events
Both <MAP> and <AREA> elements/objects support all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.
The <AREA> element also supports the following events:

onblur
The onblur event fires when the user removes the focus from the referenced <AREA> element, either by clicking to another section of the document, by 'tabbing' away, or by a script function using the blur method.

onfocus
As you've probably guessed, the onfocus event fires when the user passes the focus to the referenced <AREA> element, by clicking on it, by 'tabbing' to the hot-spot, or by a script function using the focus method to pass the focus to the specific <AREA> element.

© 1995-1998, Stephen Le Hunte


<EMBED...>

The <EMBED> element allows authors to embed objects directly into an HTML page

The basic syntax is:

<EMBED SRC="_URL_">
<NOEMBED>Alternative content</NOEMBED>
</EMBED>

where "_URL_" represents the URL of the object that is to be embedded. See below for a description of the <NOEMBED> element.

The <EMBED> element will allow you to embed documents, or objects of any type. Your user only needs to have an application which can view the data installed correctly on their machine, or have a plug-in (for Netscape and Internet Explorer) that can manipulate the embedded file format.

The <EMBED> element can be used more or less the same as the <IMG> element and so accepts typical image embedding attributes such as ALIGN, ALT, BORDER, WIDTH, HEIGHT, HSPACE, VSPACE and NAME (for referencing the embedded object in a script function). Note that multiple <EMBED> elements can be grouped together with the same NAME attribute value, to provide multiple separate controls for a single embedded sound file).

Plug-ins Netscape plug-ins make use of the <EMBED> element. Essentially, plug-ins are dynamic code modules which are associated with a MIME data type that the Netscape client has no native support for. When Netscape encounters an unknown data type from a server, it will search for a plug-in that is associated with that MIME type and load it, enabling viewing/transforming of the data object. There are many attributes to the <EMBED> element that are plug-in specific (for these, see the relevant plug-in documentation), but as well as the attributes above, the <EMBED> element accepts the following attributes as standard across all embedded data types.

CLASS="Style Sheet class"
The CLASS attribute is used to specify the <EMBED> element as using a particular style sheet class. See the Style Sheets topic for details.

HIDDEN="true|false"
Setting this attribute specified whether the plug-in is visible or not. Some plug-ins (like the LiveAudio plug-in) can control the embedded data type without being visible. The default value is "false", which causes the plug-in controls to be displayed.

ID="Unique identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <EMBED> element for scripting purposes. Any <EMBED> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

PALETTE="foreground|background"
For users browsing in 256 colours, some embedded objects could cause what is known as 'palette flash', where palette differences between the embedded object and the browser/system cause the incorrect colours to be displayed. To avoid this, embedded objects can have their palettes expressly defined as either foreground or background (the default). 'Foreground' causes the embedded object to use the foreground palette and 'background' forces it to use the background palette (the colours not reserved by the browser/system). Note that this attribute only has effect on the Windows platforms.

PLUGINSPACE="_URL_"
If the user doesn't have a plug-in installed to handle the defined object data type (determined from the SRC attribute, or TYPE attribute value), then it is possible to guide the user to a different URL (the value of the PLUGINSPACE attribute) to provide instructions on installing the necessary plug-in module. Generally, this should be the plug-in vendors installation instructions document.

STYLE="Styling"
As well as using previously defined style sheet settings, the <EMBED> element can have in-line stylings attached to it. See the Style Sheets topic for details.

TITLE="Informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <EMBED> section, when the embedded object doesn't provide ToolTips of its own..

TYPE="MIME type"
Either this, or the SRC attribute is necessary when inserting embedded objects into HTML documents, in order for Netscape to be able to determining a suitable plug-in module to use to handle the data type. The TYPE attribute accepts any valid MIME type, to describe the type of object being inserted.

For more information about plug-ins, see the Netscape web site. http://home.netscape.com/. Lots of plug-in modules are available, the additional attributes for which are beyond the scope of this document. The documentation with the plug-in should be consulted for useable HTML element attributes.

NOTE : Microsoft's Internet Explorer (from version 3.0 beta 2) fully supports Netscape plug-ins. When Internet Explorer loads a page designed to use a (Netscape) plug-in module, it will use either the correct plug-in, or a pre-installed ActiveX control to display the content as authored. Microsoft recently released the ActiveVRML and ActiveMovie add-ons for Internet Explorer which can handle VRML worlds, AVI, QuickTime, MPEG video/audio, WAV, Sun AU and AIFF sound files respectively, either using the respective ActiveX <OBJECT> code, or <EMBED> code as used by popular Netscape plug-ins.

Examples
Below is the code used to embed a MIDI file. The displayed control panel (displayed by default) could be used to play the sound file.

<EMBED SRC="clouds.mid" WIDTH="145" HEIGHT="61">

NOTE : Internet Explorer will use the Netscape 'LiveAudio' plug-in (if Netscape 3.0 is installed, the LiveAudio plug-in distributed with Netscape Communicator will not function inside Internet Explorer)), or any installed ActiveX control for manipulation of the above MIDI file)

Below is the code used to embed a VRML world. The Live3D (or whatever ActiveX control is installed to handle VRML files) control panel could be used to manipulate it.

<EMBED SRC="../Media_Embedding/example.wrl" WIDTH="200" HEIGHT="150">

NOTE : Internet Explorer will use the ActiveVRML add-in (if installed), or whatever Netscape plug-in is used within Netscape to handle the above Virtual world. It will display the 'broken object' symbol if no suitable plug-in, or ActiveX control is installed.

<NOEMBED>
Much like the <NOFRAMES> element, <NOEMBED> can be used to provide alternative content for older browsers that don't understand the <EMBED> element. Older browsers will ignore the <EMBED> element (and the <NOEMBED> element to be exact), but will render any HTML content they find in between the <EMBED> and </EMBED> elements. Browsers that do understand the <EMBED> element will not render any content between the <EMBED> and </EMBED> elements. For example :

<EMBED SRC="MyWorld.wrl" WIDTH="200" HEIGHT="150">
<NOEMBED>You need Netscape or Internet Explorer to see this</NOEMBED>
</EMBED>

Netscape (from version 2.0) and Internet Explorer (from version 3.0) would embed the VRML world "MyWorld.wrl" (providing there is a suitable plug-in/ActiveX control installed), while older browsers would display the message 'You need Netscape or Internet Explorer to see this'

Every <EMBED> element in a document is an object that can be manipulated through scripting. Note that most of the scripting of the <EMBED> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape supports some <EMBED> related scripting through the Plug-ins array and Embeds array, but that supported by Internet Explorer is far more versatile.

<EMBED...> Properties
The <EMBED...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.
The <EMBED> element also supports the following properties:
align, alt, border, hidden, height, hspace, vspace, palette, pluginspace and type
They all directly reflect their attribute settings (if any). See the particular attribute for details.

<EMBED...> Methods
The <EMBED...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.
Also, the <EMBED> element supports the following methods:

blur
The blur method can be used to force the embedded object to lose the users focus. This then fires the onblur event (see below).

focus
The focus method can be used to force the embedded object to gain the users focus. This then fires the onfocus event (see below).

<EMBED...> Events
The <EMBED...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.
Also, the <EMBED> element supports the following events:

onblur
onblur is fired whenever the users focus moves away from the embedded object (either by them clicking on another part of the document, or by 'tabbing' away from the contents of the <EMBED> element, or by using the blur method (see above).

onfocus
The onfocus event is fired whenever the user passes the focus to the embedded object - by clicking on it, tabbing to it, or by a script function using the focus method (see above).

© 1995-1998, Stephen Le Hunte


<IMG...>

The Image element is used to incorporate in-line graphics into an HTML document. This element cannot be used for embedding other HTML text.

The Image element, which is empty (no closing element), has these attributes:

ALIGN="left|right|top|texttop|middle|
absmiddle|baseline|bottom|absbottom"
ALIGN=left image will float the image to the left margin (into the next available space there), and subsequent text will wrap around the right hand side of that image.
ALIGN=right will align the image aligns with the right margin, and the text wraps around the left.
ALIGN=top aligns itself with the top of the tallest item in the line.
ALIGN=texttop aligns itself with the top of the tallest text in the line (this is usually but not always the same as ALIGN=top).
ALIGN=middle aligns the baseline of the current line with the middle of the image.
ALIGN=absmiddle aligns the middle of the current line with the middle of the image.
ALIGN=baseline aligns the bottom of the image with the baseline of the current line.
ALIGN=bottom aligns the bottom of the image with the baseline of the current line. (Essentially, this is the same as ALIGN=baseline)
ALIGN=absbottom aligns the bottom of the image with the bottom of the current line.

ALT="Alternative Text"
Optional text as an alternative to the graphic for rendering in non-graphical environments. Alternate text should be provided for whenever the graphic is not rendered (i.e. if the user has image loading turned off). Alternate text is mandatory for Level 0 documents. Internet Explorer and Netscape (4.0 and above) also use any ALT text set as a ToolTip to be displayed when the users mouse pauses over the image. Example of use:

<IMG SRC="triangle.gif" ALT="Warning:"> Be sure to read these instructions.

ISMAP
The ISMAP attribute identifies an image as an image map. Image maps are graphics in which certain regions are mapped to other documents. By clicking on different regions, different resources can be accessed from the same graphic. Example of use:

<A HREF="http://machine/htbin/imagemap/sample">
<IMG SRC="sample.gif" ISMAP></A>

NOTE : To be able to employ this type of image maps in HTML documents, the HTTP server which will be controlling document access must have the correct cgi-bin software installed to control image map behaviour. i.e. the document must have access to an image map handling script and the map file defining the graphic ’hot-spots’

A simpler form of image map, known as client-side image maps are also possible. Currently, this type of map is a proposed extension to HTML. For details, see Client Side Image Maps.

SRC="URL of image"
The value of the SRC attribute is the URL of the image to be displayed. Its syntax is the same as that of the HREF attribute of the <A> element. SRC is the only mandatory attribute of the <IMG> element. Image elements are allowed within anchors.

<IMG SRC="warning.gif">Be sure to read these instructions.

The SRC attribute can accept fully qualified, or partial, relative URL's, or even just image names (providing the image is located in the same directory as the HTML document).

WIDTH=value HEIGHT=value
The WIDTH and HEIGHT attributes allow the browser to determine the text layout surrounding images before the entire image has been downloading, which can significantly speed up display of the document text. If the author specifies these, the viewer of their document will not have to wait for the image to be loaded over the network and its size calculated. Internet Explorer and Netscape use image placement mechanisms, so that if the display of in-line images has been turned off, the space that the images would occupy in the page is marked as if the image were there (with any ALT text being displayed in the place holder). This allows authors to be sure that the text layout on the page will be as desired, even if the user is not displaying the images.

BORDER=value
This lets the document author control the thickness of the border around an image displayed.
It is useful if the image is to be a hyperlink, in that the BORDER can be set to "0" to avoid the display of the standard blue hypertext link border.

VSPACE=value HSPACE=value
For the floating images (i.e. those displayed with an ALIGN=left|right attribute) it is likely that the author does not the text wrapped around the image to be pressed up against the image. VSPACE controls the vertical space above and below the image, while HSPACE controls the horizontal space to the left and right of the image. The Value should be a pixel value.

LOWSRC
Using the LOWSRC attribute, it is possible to use two images in the same space. The syntax is :

<IMG SRC="hiquality.gif" LOWSRC="lowquality.gif">

Browsers that do not recognise the LOWSRC attribute cleanly ignore it and simply load the image specified by the SRC attribute.
Browsers that support this attribute however, will load the image called "lowquality.gif" on their first layout pass through the document. When the rest of the document has been completely loaded and formatted on the page, the browser will then redraw the page and load the image specified by the standard SRC attribute. This allows the author to specify a low resolution (or smaller file size version of the main image - perhaps a grey scale version) image to be displayed initially while the document is loading, which is later replaced by the higher quality version.
Any graphic file format that the browser supports can be used interchangeably within the LOWSRC and SRC attributes. You can also specify width and/or height values in the <IMG> element, and both the high-res and low-res versions of the image will be appropriately scaled to match. However, if no width and height values have been set, the values used for the LOWSRC image (i.e. the dimensions of that image) will be used to re-scale the SRC image. This is to minimise page format disruption that would be caused by the browser trying to load two different sized images into the same page space.

NAME
This attribute sets the name of the image in the document. It can then be accessed by scripting methods (in Netscape 3.0 and Internet Explorer 4.0 and above), by referencing the Images collection.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <IMG> section. Note that any text provided in the TITLE attribute overrides that presented in the ALT attribute as the ToolTip - the contents of the ALT attribute will only be seen if the image can't be loaded for any reason.

LANG="language setting"
The LANG attribute can be used to specify what language the <IMG> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <IMG> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <IMG> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <IMG> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <IMG> element for scripting purposes. Any <IMG> element with an ID attribute can be indirectly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

DATAFLD="Column Name"
The DATAFLD attribute can be used to specify a data column name from the Data source (see DATASRC) that the <IMG> is bound to. For more information on the DATAFLD attribute, see the Data Binding topic. For the <IMG> element, data binding is supported on the SRC attribute, therefore the data in the referenced column should be a valid URL (or URL fragment) pointing to an image file.

DATASRC="Data Source"
The DATASRC attribute can be used to specify a data source that the <IMG> is bound to. For more information on the DATASRC attribute, see the Data Binding topic.

Example
The following HTML fragment produces the display shown below.

<IMG ALIGN="left" SRC="mosaic.gif" HSPACE="20" ALT="Mosaic logo"> Mosaic, from the <B>N</B>ational <B>C</B>entre for <B>S</B>upercomputing <B>A</B>pplications represents the original graphical browser which Netscape development was based on.
<BR CLEAR="all">
<HR>
<IMG ALIGN="right" SRC="netscape.gif" HSPACE="20" ALT="Netscape logo"> Netscape, from <B>Netscape Communications</B>, after initial development from Mosaic, stormed away and became more or less the <I>de facto</I> Web browser.
<BR CLEAR="all">
<HR>
<IMG ALIGN="left" SRC="iexplore.gif" HSPACE="20" ALT="Internet Explorer logo">Internet Explorer, from <B>Microsoft </B>, exhibits Microsoft's serious intentions in the web browser market and compete head-to-head with Netscape, offering the same functionality...and then some more.
<BR CLEAR="all">
<HR>
Mosaic logo Mosaic, from the National Centre for Supercomputing Applications represents the original graphical browser which Netscape development was based on.
Netscape logo Netscape, from Netscape Communications, after initial development from Mosaic, stormed away and became more or less the de facto Web browser.
Internet Explorer logo Internet Explorer, from Microsoft, exhibits Microsoft's serious intentions in the web browser market and competes head-to-head with Netscape, offering the same functionality...and then some more.

Every <IMG> element in a document is an object that can be manipulated through scripting. Note that more scripting of the <IMG> element/object is supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape (from v3.0) does support the Images collection, for manipulation of images within a document. See the Images collection topic for details of Netscape support.

<IMG...> Properties
The <IMG...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.
Additionally, the <IMG> element supports the following properties:

align
The align property reflects the setting of the ALIGN attribute.

alt
The alt property reflects the setting of the ALT attribute.

border
The border property reflects the setting of the BORDER attribute.

complete
The complete property has a boolean (i.e. True or False) value, depending on whether the image has fully loaded or not.

dataFld
The dataFld property reflects the setting of the DATAFLD attribute.

dataSrc
The dataSrc property reflects the setting of the DATASRC attribute.

fileCreatedDate
The Internet Explorer 4.0 specific fileCreatedDate property returns the date that the referenced <IMG> file was created.

fileModifiedDate
The Internet Explorer 4.0 specific fileModifiedDate property returns the date that the referenced <IMG> file was last updated.

fileSize
The Internet Explorer 4.0 specific fileSize property returns the size of the referenced <IMG> file in bytes.

fileUpdatedDate
The Internet Explorer 4.0 specific fileUpdatedDate property returns the date that the referenced <IMG> file was last updated.

height
The height property reflects the setting of the HEIGHT attribute.

hspace
The hspace property reflects the setting of the HSPACE attribute.

isMap
The isMap property reflects the setting of the ISMAP attribute.

lowsrc
The lowsrc property reflects the setting of the LOWSRC attribute.

name
The name property reflects the setting of the NAME attribute.

readyState
The readyState property can be one of 4 values, depending on the current state of the resource, referenced in the HREF attribute. The possible values of the readyState property are:

Value | Meaning
complete | The resource has completely loaded and is available to the document and therefore manipulation.
interactive | The resource hasn't completely downloaded, but is available to the document and scripting
loading | The resource is being downloaded
uninitialized | The resource is not available - normally, this value indicates that the resource is downloading

Note that the readystate property is read-only.

scrollHeight
The scrollHeight property reflects the contents of the <IMG> elements total scrollable height (in pixels).

scrollLeft
The scrollLeft property reflects a value representing the distance between the left-most edge of the element and the left-most visible edge of the element. While the contents of the <IMG> element are totally visible on the screen, the scrollLeft property is 0, only increasing if the left-most edge of the <IMG> elements contents are scrolled off the left hand edge of the current viewing window.

scrollTop
The scrollTop property returns a value that represents the distance between the top-most edge of the element and the top-most edge of the current viewing window. When used with the <IMG> element, the scrollTop property is a value indicative of the extent to which the referenced element has been scrolled vertically. If the contents of the <IMG> element are visible, then the scrollTop property will be 0, only increasing as the contents of the element are scrolled off the top of the current viewing window.

scrollWidth
Like the scrollHeight property, the scrollWidth property reflects a value that represents the total scrollable width of the contents of the <IMG> element.

src
The src property reflects the setting of the SRC attribute.

vspace
The vspace property reflects the setting of the VSPACE attribute.

width
The width property reflects the setting of the WIDTH attribute.

<IMG...> Methods
The <IMG...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.
Also, the <IMG> element supports the following methods:

blur
The blur method can be used to force the users focus away from the image, executing any script functions linked to the onblur event (see below).

focus
The focus event can be used to set the focus on the referenced image, causing the onfocus event to execute

<IMG...> Events
The <IMG...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.
Additionally, the <IMG> element supports the following events:

onabort
If the user stops the download of your HTML document before any images defined in <IMG> elements have finished downloading, then (if present) this event handler will execute whatever script function it is set to activate. For example, if you use large graphics and the user cancels the download because they are accessed slowly, perhaps they would prefer to be transferred to a low-graphics version of your site?

onblur
The onblur event executes any script functions attached to it when the users focus moves away from the image (either by clicking another part of the document, by tabbing away from the image, or by a script using the blur method).

onerror
This event handler can be used to execute script functions if there is an error while the image is downloading (perhaps caused by an incorrect SRC="..." declaration in the <IMG> element, or a network error).

onfocus
onfocus is used to execute script functions when the user focuses on the image, either by clicking it (it then fires after the respective onmouse* events), tabbing to it, or by another script function using the focus method.

onload
The OnLoad event handler can execute script functions when the browser has successfully displayed the image specified in the <IMG> element. For example, as Netscape supports the image object in its Object Model, using this event handler (in conjunction with the OnError event) can be useful for tracking whether the images have been successfully displayed or not.

onresize
The onresize event is fired whenever the <IMG> element is resized, through scripting.

© 1995-1998, Stephen Le Hunte


<OBJECT...>

NOTE : The <OBJECT> element is currently only supported by Internet Explorer (although Mosaic now has limited <OBJECT> insertion capabilities). The object insertion mechanism is the subject of a W3C Working draft available at http://www.w3.org/pub/WWW/TR/WD-object.html. For this and other W3C working drafts, you should visit the W3C site at http://www.w3.org/pub/WWW/TR/

The <OBJECT> element provides a way for the ActiveX controls and other media to be embedded directly into HTML documents. It subsumes the role of the <IMG> element, providing an insertion mechanism for media other than static images. As far as the Internet Explorer is concerned, the <OBJECT> element can be used for the inclusion of ActiveX OLE controls.

An example of the syntax is as follows:

<OBJECT
CLASSID="clsid:99B42120-6EC7-11CF-A6C7-00AA00A47DD2"
ID=lbl1
WIDTH=40
HEIGHT=250
>
<PARAM NAME="angle" VALUE="90">
<PARAM NAME="alignment" VALUE="2">
<PARAM NAME="BackStyle" VALUE="0">
<PARAM NAME="caption" VALUE="Hello there">
<PARAM NAME="FontName" VALUE="Arial">
<PARAM NAME="FontSize" VALUE="30">
<PARAM NAME="FontBold" VALUE="1">
<PARAM NAME="frcolor" VALUE="8388608">
</OBJECT>

(The above example inserts the 'label' ActiveX control to the left of the example text. NOTE : Netscape will not display the 'label')

The object being inserted into the HTML document in this case, is referred to by its CLASSID. This is a unique identifier for the 'label' control, according to the Component Object Model "class id" URL scheme. The ID attribute identifies the specific label with a unique name, allowing interaction with and dynamic updating of the object's properties via active OLE scripting (i.e. Visual Basic Script). The TYPE attribute (if used) should specify the MIME type for the object (for ActiveX controls, this is application/x-ole-object)

Where the ActiveX control that is to be inserted may not be present on the users system, the automatic download mechanism of ActiveX controls (using the CODEBASE attribute) can be employed. This attribute can be used to provide a location from which the control will be downloaded.

For example :

<OBJECT CLASSID="clsid:99B42120-6EC7-11CF-A6C7-00AA00A47DD2"
CODEBASE=http://www.mysite.com/controls/mycontrol.ocx
ID=lbl1
WIDTH=90
...

would look within the system registry to see if the control with the given CLASSID is present on the system and if not, the control will be retrieved from the URL given by the CODEBASE attribute. Full version checking can also be employed using this mechanism.

For example :

<OBJECT CLASSID="clsid:99B42120-6EC7-11CF-A6C7-00AA00A47DD2"
CODEBASE=http://www.mysite.com/controls/mycontrol.ocx#ver=3,10,0,1000"
ID=lbl1
WIDTH=90
...

would only download the control to the users system if the version present on the system is older than that given by the #ver setting. I.e. if it is older than version 3.10.0.1000.

Some objects will require certain code to implement the object. This should be referenced by using the CODE attribute. Also, the DATA attribute can be used to point to a persistent data stream to initialise the object's state. The use of the above attributes is control dependant, so exhaustive examples cannot be given.

In keeping with the role of the <OBJECT> element as a media insertion element (c.f. <IMG>) various standard formatting attributes, such as ALIGN, HEIGHT, WIDTH, ALIGN, BORDER, HSPACE, VSPACE, NAME etc. can also be used to define the positioning of the object on the page.

Other attributes supported by the <OBJECT> element are:

ACCESSKEY
The ACCESSKEY attribute can be used to specify a shortcut key for the <OBJECT> (activated by pressing 'Alt' and the ACCESSKEY together - like standard Windows applications menu shortcuts). The ACCESSKEY setting does not have to be a character contained in the <OBJECT>, which is not modified in any way to reflect that an ACCESSKEY has been defined.

STANDBY="Information"
The STANDBY attribute can be used to present the user with some text, alongside the small graphic present when an ActiveX control is not yet downloaded. It's similar to the ALT text for the <IMG> element. If the user already has the control installed, then the STANDBY text won't be seen.

TABINDEX
The TABINDEX attribute can be used to set a tabbing order for the user to navigate around the document. For example, if <OBJECT> elements have TABINDEX properties set, when the user is focused on an object, pressing the 'Tab' key will pass the focus to the element with the next highest TABINDEX property.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <OBJECT> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <OBJECT> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <OBJECT> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <OBJECT> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <OBJECT> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <OBJECT> element for scripting purposes. Any <OBJECT> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

DATAFLD="Column Name"
The DATAFLD attribute can be used to specify a data column name from the Data source (see DATASRC) that the <OBJECT> is bound to. For more information on the DATAFLD attribute, see the Data Binding topic. Data binding for the <OBJECT> element is supported on the objects default property/value and the contents of the data source column referenced should be data suitable for defining <OBJECT> properties.

DATASRC="Data Source"
The DATASRC attribute can be used to specify a data source that the <OBJECT> is bound to. For more information on the DATASRC attribute, see the Data Binding topic.

The <PARAM> element allows a list of named property values (used to initialise an OLE control, plug-in module or Java applet) to be represented as a sequence of <PARAM> elements. Note that <PARAM> is an empty element and should appear without an end tag. The NAME attribute defines the property to be defined and the VALUE attribute defines the property value. For instance, in the above example, the line:

<PARAM NAME="caption" VALUE="Hello there">

sets the value of the property 'Caption' to be "Hello there" (In this case, this property represents the text that will be displayed for the label.) Object properties are entirely control dependant, so the reference documentation for any control should be read to find out what properties can be set using the PARAM element.

The <PARAM> element also supports the following attributes:

DATAFLD
The DATAFLD attribute can be used to specify a data column name from the Data source (see DATASRC) that the <PARAM> is bound to. For more information on the DATAFLD attribute, see the Data Binding topic.

DATAFORMATAS
When the <PARAM> element is data-bound, it can accept straight text, or HTML from the data source. The DATAFORMATAS attribute should be set to "TEXT" or "HTML" accordingly. with DATAFORMATAS="HTML", the data provided for the <BUTTON> element is parsed and rendered when it's displayed.
For more information on the DATAFORMATAS attribute, see the Data Binding topic.

DATASRC
The DATASRC attribute can be used to specify a data source that the <PARAM> is bound to. For more information on the DATASRC attribute, see the Data Binding topic.

NAME
The NAME attribute is used to specify which property of the specific attribute is being set, by the value of the VALUE attribute.

VALUE
Specifies the value of the property named in the NAME attribute.

Microsoft has released the ActiveX Control Pad, a text editor with added <OBJECT> insertion capabilities. Using this, authoring HTML documents that contain ActiveX components is a breeze, as control insertion/property setting is done through a Visual Basic like forms interface (the ActiveX Control Pad has been jokingly referred to as Visual Notepad). The Control Pad also allows authoring of fixed-layout sections, viewable using the ActiveX HTML Layout Control (available from Microsoft). This allows for presentation of fixed content, where the content will display as authored (something which can't be guaranteed with normal HTML). Users interested in authoring 'Activated' HTML documents, should download the ActiveX Control Pad from the Microsoft Web site at http://www.microsoft.com/workshop/author/cpad/. Also, more and more third-party application vendors are starting to supply HTML editors/Web development packages that support the visual inclusion of ActiveX controls.

Every <OBJECT> element in a document is an object that can be manipulated through scripting. Note that scripting of the <OBJECT> element/object is only supported by Internet Explorer 4.0, as only Internet Explorer supports the <OBJECT> element.

<OBJECT...> Properties
The <OBJECT...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.
As well as those properties, the <OBJECT> element supports the following properties, all of which directly reflect their respective attribute setting (see above).

accessKey, align, classId, code, codeBase, data, dataFld, dataSrc, name, standBy, tabIndex, title, type and width.

The readyState property can be one of 4 values, depending on the current state of the object referenced in the <OBJECT> element. The possible values of the readyState property are:

Value | Meaning
complete | The resource has completely loaded and is available to the document and therefore manipulation.
interactive | The resource hasn't completely downloaded, but is available to the document and scripting
loading | The resource is being downloaded
uninitialized | The resource is not available - normally, this value indicates that the resource is downloading

Note that the readystate property is read-only.

<OBJECT...> Methods
The <OBJECT...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.
The <OBJECT> element also supports the following methods:

blur
The blur method can be used to force the applet to lose the users focus. This then fires the onblur event (see below).

focus
The focus method can be used to force the applet to gain the users focus. This then fires the onfocus event (see below).

<OBJECT...> Events
The <OBJECT...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.
The <OBJECT> element also supports the following events:

onafterupdate
The onafterupdate event is fired after data is transferred from the element to the data provider and will only fire after the onbeforeupdate event has fired and was successful. For more information on Data Binding, see the Data Binding topic.

onbeforeupdate
onbeforeupdate fires when a data bound element loses the focus, or the current document is unloaded and will only fire if the value of the element is different to the original value that was present when the element received the users focus. Note that onbeforeupdate is a cancelable event (setting returnValue=false for the Event object), which allows the document /script author a chance to validate the new data entered by the user on the client-side, before sending the data to the data provider. For more information on Data Binding, see the Data Binding topic.

onblur
onblur is fired whenever the users focus moves away from the applet (either by them clicking on another part of the document, or by 'tabbing' away from the contents of the <APPLET> element, or by using the blur method (see above).

ondataavailable
The ondataavailable event being fired indicates that more records for the referenced Data Source Object are available. It doesn't necessarily fire for every single additional record though. For more information on Data Binding, see the Data Binding topic.

ondatasetchanged
The ondatasetchanged event is fired when a new set of data is available and a recordset can be retrieved from that set of data, or when an existing set of data has been changed - for example after a filter has been applied to the data. For more information on Data Binding, see the Data Binding topic.

ondatasetcomplete
When all the data in the referenced recordset is available, the ondatdasetcomplete event fires. For the ondatasetcomplete event, a reason parameter is available through the Event Object, which can have values of 0, 1 or 2, corresponding to successful completion, Aborted completion (i.e. 'Stop' button pressed for example), or Error (some other error) respectively. For more information on Data Binding, see the Data Binding topic.

onerror
The onerror event is fired when an error occurs attempting to load the referenced <OBJECT> element. Note that error messages can be suppressed by setting objectreference.onerror="null".

onerrorupdate
The onerrorupdate event fires when a data transfer error occurs, through some action by the user (i.e. pressing the 'Stop' button on the browser for example), but not if a script generates the transfer error. For more information on Data Binding, see the Data Binding topic.

onfocus
The onfocus event is fired whenever the user passes the focus to the applet - by clicking on it, tabbing to it, or by a script function using the focus method (see above).

onload
The onload event is fired when the object referenced in the <OBJECT> element starts to download. Note that the event is fired as soon as the <OBJECT> element is encountered, so any script functions fired from the onload event should be before the referenced <OBJECT> element in the document, otherwise script errors will occur.

onreadystatechange
At any time, the resource may change its readyState property and when this happens, the onreadystatechange event is fired.

onresize
The onresize event is fired whenever the applet is resized, through scripting, or by the user changing their browser window size.

onrowenter
The onrowenter event fires on the data source control when the current record has been changed, so new data is available to populate the HTML display elements that are bound to the data source. Somewhat confusingly, this will typically happen after the onrowexit event has been fired. For more information on Data Binding, see the Data Binding topic.

onrowexit
The onrowexit event is fired immediately before the data source changes the current record (i.e. when the user has requested another record, or set of records by pressing a button perhaps). Note that unlike the anafterupdate and onbeforeupdate events, onrowexit is fired by the data source, not any of the HTML elements used to display the data. Changes to the data in the HTML elements should have been transferred to the data source (with validation being taken care of in the on*update events). onrowexit will also fire if the record position is changed through scripting. For more information on Data Binding, see the Data Binding topic.

© 1995-1998, Stephen Le Hunte


<SOUND...>

Mosaic supports use of the <SOUND> element for playing in-line sound. This element allows the playing of *.WAV files in pages. NOTE : The <SOUND> element is only supported by Mosaic.

The syntax is:

<SOUND SRC="filename.wav">

The <SOUND> element supports the following attributes:

LOOP=infinite
This will play the sound sample continuously while the page is being viewed.

DELAY=sec
This will delay playing of the sound file for sec seconds after the page and sound file have finished loading.

NOTE : Although Mosaic will support the use of the <BGSOUND> element (for .WAV files only), it will not play in-line *.MID MIDI files without launching an external application as defined in the 'Helper Application' set up.

© 1995-1998, Stephen Le Hunte


In-Line Video

Microsoft's Internet Explorer allows the user to embed .AVI (Audio Video Interleave) video clips in HTML documents. This is done by adding several new attributes, notably DYNSRC (Dynamic Source) to the <IMG> element. Using the IMG element for this purpose makes it possible to add video clips to pages, but also have non video enabled browsers display still images in their place.

NOTE : In future versions of the Internet Explorer, proprietary additions by Microsoft are to be deprecated (i.e. their support will be removed) in favour of open standard mechanisms for the embedding of objects, such as video and executable content (See <OBJECT>). Netscape can support the embedding of video clips through its plug-in mechanism using the <EMBED> element.

DYNSRC
This attribute specifies the address of a video clip to be displayed in the window. It stands for Dynamic Source.

<IMG SRC="filmclip.gif" DYNSRC="filmclip.avi">

Internet Explorer will display the movie "filmclip.avi"; other browsers will display the image "filmclip.gif"

The attributes used to control the playing of the video clip are as follows.

START
This attribute specifies when the video clip should start playing. It accepts values of FILEOPEN or MOUSEOVER. FILEOPEN means that the video will start playing as soon as it has finished downloading from the web server, or distribution source. This is the default value. MOUSEOVER means start playing when the user moves the mouse cursor over the animation. It is possible to specify both of these values together.

CONTROLS
This attribute has no values. It is a flag that if set, displays the standard Windows AVI control panel to allow the user to control the display of the video clip.

LOOP
Specifies how many times a video clip will loop when activated. If n=-1, or if LOOP=INFINITE is specified, the video will loop indefinitely.

LOOPDELAY
Specifies, in milliseconds, how long a video clip will wait between play loops.

NOTE : As seen in the first example on this page, because the DYNSRC is an attribute of the <IMG> element, other attributes of the IMG element, such as HEIGHT, WIDTH, HSPACE, VSPACE, BORDER etc., are also acceptable and if specified, will format the display window for the video clip.

Example
Below is an included Video clip. The code used to include the video clip is :

<IMG DYNSRC="../Dynamic_Documents/htmlib.avi" LOOP="-1" START="FILEOPEN">

When the <IMG> element is used to embed a video clip, the <IMG> element supports the following properties (in addition to those normally supported).

controls
The controls property reflects the setting of the CONTROL attribute (described above).

dynsrc
The dynsrc property reflects the setting of the DYNSRC attribute (described above).

loop
The loop property reflects the setting of the LOOP attribute (described above).

loopdelay
The loopdelay property reflects the setting of the LOOPDELAY attribute (described above).

start
The start property reflects the setting of the START attribute (described above).

© 1995-1998, Stephen Le Hunte


In-Line VRML

NOTE : As with other <IMG> related object embedding mechanisms (i.e in-line video), future versions of the Internet Explorer will support open standard object embedding mechanisms (see <OBJECT>), instead of relying on proprietary extensions such as those detailed here.

Microsoft's Internet Explorer (from version 2) has added the ability to include in-line embedded VRML viewable by installing the Virtual Explorer plug-in module (for version 2.0. Version 3.0 can use the Netscape Live3D plug-in, or the ActiveVRML ActiveX control), available from the Microsoft ActiveX Web site (http://www.microsoft.com/activex/). It does this by adding the VRML attribute to the <IMG> element.

As the attribute is used in the <IMG> element, it supports many of the other attributes of the <IMG> element, such as HEIGHT, WIDTH, VSPACE, HSPACE etc.

<IMG SRC="picture.gif" VRML="world.wrl" HEIGHT=250 WIDTH=300>

The above example, would embed the VRML world, "world.wrl" into the HTML document, with the navigation controls below the embedding pane. The pane is displayed according to the dimensions specified. For browsers, other than the Virtual Explorer (Internet Explorer with the VRML add-on), the picture "picture.gif" would be displayed.

NOTE : Embedding of VRML worlds is also supported by Netscape, using the Netscape Live3D plug-in module and the <EMBED> element.

© 1995-1998, Stephen Le Hunte


Block Formatting Elements

Block formatting elements are used for the formatting of whole blocks of text within a HTML document, rather than single characters. They should all (if present) be within the body of the document. (I.e. within the <BODY> ... </BODY> elements)

The essential block formatting elements are :

<ADDRESS> - Format an address section
<BLOCKQUOTE> - To quote text from another source.
<CENTER>- Centering text on the page.
<DIV> - Allow centering, or left/right justification of text.
<FIELDSET> - Framed Container.
<Hx> - Format six levels of heading.
<LAYER> - Distinct layers of content.
<LEGEND> - FieldSet legend.
<LISTING> - Text formatting.
<MARQUEE> - Highlighted scrolling text.
<MULTICOL> - Create multi-column layouts.
<P> - Specify what text constitutes a paragraph and its alignment.
<PLAINTEXT> - For text formatting.
<PRE> - Use text already formatted.
<XMP> - Text formatting.

© 1995-1998, Stephen Le Hunte


<ADDRESS...>

The Address element specifies such information as address, signature and authorship, often at the top or bottom of a document.

Typically, an Address is rendered in an italic typeface and may be indented. The Address element implies a paragraph break before and after.

For example :

<ADDRESS>
Mr. Cosmic Kumquat<BR>
SSL Trusters Inc.<BR>
1234 Squeamish Ossifrage Road<BR>
Anywhere<BR>
NY 12345<BR>
U.S.A.
</ADDRESS>

Which would render as :

Mr. Cosmic Kumquat
SSL Trusters Inc.
1234 Squeamish Ossifrage Road
Anywhere
NY 12345
U.S.A.

<ADDRESS> can also accept the following attributes :

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <ADDRESS> section.

For example after adding the following attributes to the example above,

<ADDRESS TITLE="A fictitious address">
...

the <ADDRESS> displayed would change to :

Mr. Cosmic Kumquat
SSL Trusters Inc.
1234 Squeamish Ossifrage Road
Anywhere
NY 12345
U.S.A.

Note that if no TITLE attribute is set, then no ToolTip is presented to the user.

LANG="language setting"
The LANG attribute can be used to specify what language the <ADDRESS> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <ADDRESS> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <ADDRESS> as using a particular style sheet class. For example, a style sheet class defined as:

<STYLE TYPE="text/css">
.SmallAddress {font-size : 8pt; font-family : Arial}
</STYLE>

could then be referenced as:

<ADDRESS CLASS="SmallAddress">1, HTMLib Way, Swansea</ADDRESS>

and would be displayed in an 8pt, Arial font. See the Style Sheets overview for more information and style sheet settings.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <ADDRESS> element can have in-line stylings attached to it. For example:

<ADDRESS STYLE="{font-family:Arial;font-size:8pt}">1, HTMLib Way, Swansea</ADDRESS>

would display exactly as the above example. See the Style Sheets section for more details about style sheet settings.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <ADDRESS> element for scripting purposes. Any <ADDRESS> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <ADDRESS> element in a document is an object that can be manipulated through scripting. Note that scripting of the <ADDRESS> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <ADDRESS> element at all.

<ADDRESS...> Properties
The <ADDRESS...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.

<ADDRESS...> Methods
The <ADDRESS...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<ADDRESS...> Events
The <ADDRESS...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<BLOCKQUOTE...>

The Blockquote element is used to contain text quoted from another source.

Typically, blockquote rendering would be a slight extra left and right indent, and possibly rendered in an italic font. The Blockquote element causes a paragraph break, and typically provides space above and below the quote.

The HTML specification implies that rendering on single-font systems (e.g. on non graphical browsers) may reflect the quotation style of Internet mail, which is normally represented by putting a vertical line of graphic characters, such as the greater than symbol (>), in the left margin.

Example of use:

In "Hard Drive", a former Microsoft project manager has said,
<BLOCKQUOTE>
"Imagine an extremely smart, billionaire genius who is 14 years old and subject to temper tantrums"
</BLOCKQUOTE>

would render as:

In "Hard Drive", a former Microsoft project manager has said,

"Imagine an extremely smart, billionaire genius who is 14 years old and subject to temper tantrums"

Internet Explorer (4.0 and above) also support the use of the TITLE attribute. This can be used for informational purposes, with Internet Explorer treating the value of the TITLE attribute as a 'ToolTip' which is displayed when the reader passes their mouse over the contents of the <BLOCKQUOTE> element. For example, adding :

. . .TITLE="From 'Hard Drive' ISBN : 0-471-94081-X"

to the above example, the section displays as :

In "Hard Drive", a former Microsoft project manager has said,

"Imagine an extremely smart, billionaire genius who is 14 years old and subject to temper tantrums"

displaying the ToolTip when the mouse pauses on the quote.

LANG="language setting"
The LANG attribute can be used to specify what language the <BLOCKQUOTE> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <BLOCKQUOTE> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <BLOCKQUOTE> as using a particular style sheet class. For example, a style sheet class defined as:

<STYLE TYPE="text/css">
.RedQuote {color : #FF0000}
</STYLE>

could then be referenced as:

<BLOCKQUOTE CLASS="RedQuote">The less you know, the more you believe</BLOCKQUOTE>

and would be displayed in red. See the Style Sheets overview for more information and style sheet settings.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <BLOCKQUOTE> element can have in-line stylings attached to it. For example:

<BLOCKQUOTE STYLE="{color : #FF0000}">The less you know, the more you believe</BLOCKQUOTE>

would display exactly as the above example. See the Style Sheets section for more details about style sheet settings.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <BLOCKQUOTE> element for scripting purposes. Any <BLOCKQUOTE> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <BLOCKQUOTE> element in a document is an object that can be manipulated through scripting. Note that scripting of the <BLOCKQUOTE> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <BLOCKQUOTE> element at all.

<BLOCKQUOTE...> Properties
The <BLOCKQUOTE...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.

<BLOCKQUOTE...> Methods
The <BLOCKQUOTE...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<BLOCKQUOTE...> Events
The <BLOCKQUOTE...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<CENTER...>

All lines of text between the begin and end of the <CENTER> element are centred between the current left and right margins.

<CENTER>All this text would be centred in the page</CENTER>

NOTE : Most browsers will internally work-round this element to produce the desired format, but it is an element introduced by Netscape authors.

Internet Explorer (4.0 and above) also support the use of the TITLE attribute. This can be used for informational purposes, with Internet Explorer treating the value of the TITLE attribute as a 'ToolTip' which is displayed when the reader passes their mouse over the contents of the <CENTER> element. For example, adding :

. . .TITLE="Some centered text"

to the above example, the section displays as :

All this text would be centred in the page

displaying the ToolTip when the mouse pauses on the text.

LANG="language setting"
The LANG attribute can be used to specify what language the <CENTER> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <CENTER> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <CENTER> as using a particular style sheet class. For example, a style sheet class defined as:

<STYLE TYPE="text/css">
.RedQuote {color : #FF0000}
</STYLE>

could then be referenced as:

<CENTER CLASS="RedQuote">All this text would be centred in the page</CENTER>

and would be displayed in red. See the Style Sheets overview for more information and style sheet settings.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <CENTER> element can have in-line stylings attached to it. For example:

<CENTER STYLE="{color : #FF0000}">All this text would be centred in the page</CENTER>

would display exactly as the above example. See the Style Sheets section for more details about style sheet settings.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <CENTER> element for scripting purposes. Any <CENTER> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <CENTER> element in a document is an object that can be manipulated through scripting. Note that scripting of the <CENTER> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <CENTER> element at all.

<CENTER...> Properties
The <CENTER...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.

<CENTER...> Methods
The <CENTER...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<CENTER...> Events
The <CENTER...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<DIV...>

The <DIV> element is a block element that is basically used as a 'container' to contain other HTML elements and display them discretely from the rest of the document by adding paragraph breaks before and after the contents of the <DIV> element.

<DIV> can contain any HTML between its opening and closing elements and accepts the following attributes:

ALIGN
The ALIGN attribute sets the alignment of the <DIV> contents block. It can accept values of center, left and right.

CLASS
The CLASS attribute is used to specify the <DIV> element as using a particular style sheet class. See the Style Sheets topic for details.

DATAFLD
The DATAFLD attribute can be used to specify a data column name from the Data source (see DATASRC) that the <DIV> is bound to. For more information on the DATAFLD attribute, see the Data Binding topic. As <DIV> is a container element, the data retrieved from the data source will be used for the contents of the <DIV> element, rather than one of its attributes.

DATAFORMATAS
When the <DIV> element is data-bound, it can accept straight text, or HTML from the data source. The DATAFORMATAS attribute should be set to "TEXT" or "HTML" accordingly. with DATAFORMATAS="HTML", the data provided for the <DIV> element is parsed and rendered when it's displayed.
For more information on the DATAFORMATAS attribute, see the Data Binding topic.

DATASRC
The DATASRC attribute can be used to specify a data source that the <DIV> is bound to. For more information on the DATASRC attribute, see the Data Binding topic.

ID
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <DIV> element for scripting purposes. Any <DIV> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

LANG
The LANG attribute can be used to specify what language the <DIV> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANAGUAGE
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <DIV> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

STYLE
As well as using previously defined style sheet settings, the <DIV> element can have in-line stylings attached to it. See the Style Sheets topic for details.

TITLE
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <DIV> section.

Internet Explorer supports the use of the <DIV> element (as well as the above method) when used with the ActiveX HTML Layout Control and Style Sheets. This allows sections of a HTML document to be authored with a fixed layout, according to the W3C 2-D layout specification. Browsers normally determine the best possible layout for HTML, but sections authored using the HTML Layout Control are fixed. Users should seek out the ActiveX Control Pad for more information about authoring using the fixed layout control. For Internet Explorer 4.0, the HTML Layout Control has been 'rolled into' the browser, instead of being a separate control, which means that fixed layout portions can now be authored directly in HTML, using Style Sheet Positioning. See the Style Sheets overview for more information.

Every <DIV> element in a document is an object that can be manipulated through scripting. Note that scripting of the <DIV> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape doesn't support scripting of the <DIV> element.

<DIV...> Properties
The <DIV...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.
Additionally, the <DIV> element supports the following properties:

clientHeight
The clientHeight property reflects the height (in pixels) of the contents of the <DIV> element.

clientWidth
The clientWidth property reflects the width (in pixels) of the contents of the <DIV> element.

dataFld
The dataFld property directly reflects, or sets the value of the DATAFLD attribute (see above). For more information on the DATAFLD attribute, see the Data Binding topic.

dataFormatAs
The dataFormatAs property directly reflects, or sets the value of the DATAFORMATAS attribute (see above). For more information on the DATAFORMATAS attribute, see the Data Binding topic.

dataSrc
The dataSrc property directly reflects, or sets the value of the DATASRC attribute (see above). For more information on the DATASRC attribute, see the Data Binding topic.

scrollHeight
The scrollHeight property reflects the contents of the <DIV> elements total scrollable height (in pixels).

scrollLeft
The scrollLeft property reflects a value representing the distance between the left-most edge of the element and the left-most visible edge of the element. While the contents of the <DIV> element are totally visible on the screen, the scrollLeft property is 0, only increasing if the left-most edge of the <DIV> elements contents are scrolled off the left hand edge of the current viewing window.

scrollTop
The scrollTop property returns a value that represents the distance between the top-most edge of the element and the top-most edge of the current viewing window. When used with the <DIV> element, the scrollTop property is a value indicative of the extent to which the referenced element has been scrolled vertically. If the contents of the <DIV> element are visible, then the scrollTop property will be 0, only increasing as the contents of the element are scrolled off the top of the current viewing window.

scrollWidth
Like the scrollHeight property, the scrollWidth property reflects a value that represents the total scrollable width of the contents of the <DIV> element.

<DIV...> Methods
The <DIV...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.
Additionally, the <DIV> element supports the following methods:

blur
The blur event can be used to force the users focus away from the referenced <DIV> element, firing the onblur event.

focus
The focus method can be used to pass the users focus to the referenced <DIV> element, forcing the onfocus event to fire.

<DIV...> Events
The <DIV...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.
Additionally, the <DIV> element supports the following events:

onblur
When the referenced <DIV> element loses the users focus, the onblur event is fired. On the fly form validation can make use of the onblur event to check form elements as the user is entering information.

onfocus
When the user passes the focus to any <DIV> element, the onfocus event is fired for that element.

© 1995-1998, Stephen Le Hunte


<FIELDSET...>

Note : The <FIELDSET> element is a new element introduced in HTML 4.0 draft specifications and is only supported by Internet Explorer 4.0 and above.

The <FIELDSET> element can be used to provide a framed container around any other HTML elements. Visual Basic developers will be familiar with the <FIELDSET> frame concept - it being similar to the 'Frame' control in Visual Basic.

<FIELDSET> requires that the first element it contains to the <LEGEND>, to provide the legend for the field set. Note that <FIELDSET> elements can be nested to contain discrete 'groups' of HTML elements, inside a larger fieldset container group.

<FIELDSET> accepts the following attributes :

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <FIELDSET> element as using a particular style sheet class. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <FIELDSET> element for scripting purposes. Any <FIELDSET> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

LANG="language setting"
The LANG attribute can be used to specify what language the <FIELDSET> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <FIELDSET> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <FIELDSET> element can have in-line stylings attached to it. See the Style Sheets topic for details.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <FIELDSET> section.

Examples
The following HTML fragment is part of the HTML that produces the <FIELDSET> displayed below.

<FIELDSET ID="fld1">
<LEGEND ALIGN="left">Choose a colour</LEGEND>
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="100%">
<TR>
<TD><LABEL FOR="radRed">Red : </LABEL></TD>
<TD><INPUT TYPE="radio" NAME="Colour" VALUE="Red" ID="radRed"></TD>
<TD><LABEL FOR="radOrange">Orange : </LABEL></TD>
<TD><INPUT TYPE="radio" NAME="Colour" VALUE="Orange" ID="radOrange"></TD>
</TR>
. . .
</TABLE>
</FIELDSET>

Choose a colour
Red : | Orange :
Green : | Purple :
Blue : | Aqua :

Every <FIELDSET> element in a document is an object that can be manipulated through scripting. Note that scripting of the <FIELDSET> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model as Netscape doesn't support the <FIELDSET> element.

<FIELDSET...> Properties
The <FIELDSET...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.
Additionally, the <FIELDSET> element supports the following properties:

clientHeight
The clientHeight property reflects the height (in pixels) of the contents of the <FIELDSET> element.

clientWidth
The clientWidth property reflects the width (in pixels) of the contents of the <FIELDSET> element.

scrollHeight
The scrollHeight property reflects the contents of the <FIELDSET> elements total scrollable height (in pixels).

scrollLeft
The scrollLeft property reflects a value representing the distance between the left-most edge of the element and the left-most visible edge of the element. While the contents of the <FIELDSET> element are totally visible on the screen, the scrollLeft property is 0, only increasing if the left-most edge of the <FIELDSET> elements contents are scrolled off the left hand edge of the current viewing window.

scrollTop
The scrollTop property returns a value that represents the distance between the top-most edge of the element and the top-most edge of the current viewing window. When used with the <FIELDSET> element, the scrollTop property is a value indicative of the extent to which the referenced element has been scrolled vertically. If the contents of the <FIELDSET> element are visible, then the scrollTop property will be 0, only increasing as the contents of the element are scrolled off the top of the current viewing window.

scrollWidth
Like the scrollHeight property, the scrollWidth property reflects a value that represents the total scrollable width of the contents of the <FIELDSET> element.

<FIELDSET...> Methods
The <FIELDSET...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.
Additionally, the <FIELDSET> element supports the following methods:

blur
The blur event can be used to force the users focus away from the referenced <FIELDSET> element, firing the onblur event.

focus
The focus method can be used to pass the users focus to the referenced <FIELDSET> element, forcing the onfocus event to fire.

<FIELDSET...> Events
The <FIELDSET...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.
Additionally, the <FIELDSET> element supports the following events:

onblur
When the referenced <FIELDSET> element loses the users focus, the onblur event is fired. On the fly form validation can make use of the onblur event to check form elements as the user is entering information.

onfocus
When the user passes the focus to any <FIELDSET> element, the onfocus event is fired for that element.

© 1995-1998, Stephen Le Hunte


<Hx...>

HTML defines six levels of heading. A Heading element implies all the font changes, paragraph breaks before and after, and white space necessary to render the heading.

The highest level of headings is <H1>, followed by <H2> ... <H6>.

Example of use:

<H1>This is a first level heading heading</H1>
Here is some normal paragraph text
<H2>This is a second level heading</H2>
Here is some more normal paragraph text.

The rendering of headings is determined by the HTML user agent, but typical renderings are:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Although heading levels can be skipped (for example, from H1 to H3), this practice is not recommended as skipping heading levels may produce unpredictable results when generating other representations from HTML. For example, much talked about automatic contents/index generation scripts could use heading settings to generate contents 'trees' where <H2> would be considered to label the start of a section that is a sub-section of a section denoted by a <H1> element and so on.

Included since the HTML 3.2 specification is the ability to align Headings. The ALIGN="left|center|right" attribute was been added to the <H1> through to <H6> elements. e.g:

<H1 ALIGN=center>This is a centred heading</H1>

would align a heading of style 1 in the centre of the page.

Internet Explorer (4.0 and above) also support the use of the TITLE attribute. This can be used for informational purposes, with Internet Explorer treating the value of the TITLE attribute as a 'ToolTip' which is displayed when the reader passes their mouse over the contents of the <Hx> element. For example, adding :

. . .TITLE="A centered heading"

to the above example, the section displays as :

This is a centred heading

NOTE : Currently, Internet Explorer doesn't show the ToolTip for the <Hx> elements.

LANG="language setting"
The LANG attribute can be used to specify what language the <Hx> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <Hx> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <Hx> as using a particular style sheet class. For example, a style sheet class defined as:

<STYLE TYPE="text/css">
.Gold {color : gold}
</STYLE>

could then be referenced as:

<H1 CLASS="gold">A gold heading</H1>

and would be displayed in red. See the Style Sheets overview for more information and style sheet settings.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <Hx> elements can have in-line stylings attached to it. For example:

<H3 STYLE="{color : gold}">A small gold heading</H3>

would display in the same colour as the above example. See the Style Sheets section for more details about style sheet settings.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <Hx> element for scripting purposes. Any <Hx> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <Hx> element in a document is an object that can be manipulated through scripting. Note that scripting of the <Hx> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <Hx> element at all.

<Hx...> Properties
As well as supporting all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title), the Hx elements also support the extra align property, which reflects any ALIGN attribute settings for the heading. Details of the standard properties can be found in the standard Dynamic HTML properties topics.

<Hx...> Methods
The <Hx...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<Hx...> Events
The <Hx...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<LAYER...>

The <LAYER> element (currently only supported by the Navigator component of Netscape Communicator) allows discrete 'layers' of documents to be produced. It was introduced in Navigator 4.0, pre-empting the widespread adoption of standards based positioning (using style sheets), as supported by Internet Explorer 4.0 (and also Navigator 4.0). The standards based style sheet positioning mechanism is preferable to use of the <LAYER> element. For details, see the Style Sheets section for details.

Layers can contain any normal HTML content and can be exactly positioned in (or even outside of) the browser window and be displayed overlapping one another to create complex layouts in HTML documents. There are two basic types of layers, one that is given a fixed position (using the <LAYER> element) and one that can be placed relative to its position in the flow of document text (using the <ILAYER> element). Each defined layer in a document can be controlled by JavaScript, to produce almost limitless visual effects. For details, see the Layer Object in the Scripting Reference.

The <LAYER> element accepts the following attributes :

NAME
The NAME attribute can be supplied to uniquely identify the layer for scripting purposes. By default, all layers are unnamed.

LEFT
LEFT specifies the layers exact x coordinate, in pixels, where "0" (the default value) is the left-hand edge of the current browser window. Care should be taken in specifying the LEFT (and indeed TOP attribute) as you cannot guarantee the size of the users window. However, with JavaScript 1.2 (supported in Communicator) it is possible to dynamically resize and move any browser windows. See the Layer Object for more information. The LEFT attribute can be given negative, or large positive values, initially displaying the layer off the current browser window (useful for when scripting transition effects with layers).

TOP
The TOP attribute specifies the exact y coordinate in pixels, where "0" (again, the default value, as with the LEFT attribute) is the top-most edge of the current browser window. As with the LEFT attribute, care should be taken, unless you are dynamically resizing the browser window for the layered effect. The TOP attribute can be set with negative, or large positive values, initially displaying the layer outside the current browser window (useful for scripting layer transition effects).

SRC
The SRC attribute can be used to reference a separate document that contains the content of the layer. Currently (for Communicator pre-release 2), the document referenced must not include <HEAD> or <BODY> elements. Referencing external layer source files may be extremely useful if you provide the same frequently changing layer in several documents. As with Client Side Image Maps, only the layer source file needs to be altered to update all the documents that contain the particular layer. Note that there is currently no way to set the height of a particular layer (just the width - see below), which could affect the layout of any other layers in documents if a layer using an external source has its contents size drastically changed.

Z-INDEX
The Z-INDEX attribute is mutually exclusive with the ABOVE and BELOW attributes. It is supplied with a numerical value which determines the layers z-order setting (which determines how various layers overlap each other). The z-order can be thought of as the z axis of the browser window, with increasing values as the axis originates from the page out towards the user. Hence, a layer with a Z-INDEX of 2 would overlap a layer whose Z-INDEX is 1. The differences need not be incremental values, basically, with any number of layers, the one with the highest Z-INDEX will be displayed above the others.

ABOVE
The ABOVE attribute (mutually exclusive with Z-INDEX and BELOW attributes) can be used to specify the layer immediately above the current layer. For example,

<LAYER NAME="Red">
. . . Layer content
</LAYER>
<LAYER NAME="Green" ABOVE="Red">
. . . Layer content
</LAYER>

The layer NAMEd "Red" would be displayed on-top of the layer NAMEd "Green". Note that currently, any layer specified as being ABOVE another, must be defined before the lower layer in the document.

BELOW
Similar to the ABOVE attribute (and mutually exclusive with it and the Z-INDEX attribute), the BELOW attribute specifies the layer to be displayed immediately below the current layer, with the same restrictions as the ABOVE attribute.

WIDTH
The WIDTH attribute can be specified (with a pixel value) to set the width of the layer, to determine how the content of the layer is wrapped within the layer. Layer heights are automatically defined according to the content of the layer.

CLIP
The CLIP attribute can be used to specify a certain portion of the layer as being visible. Anything outside the CLIP region is transparent and won't be displayed. It accepts 4 pixel values (comma delimited) which are used to set the CLIP rectangles left, top, right and bottom coordinates. Left and right values start from the left hand edge of the layer, while top and bottom values start from the top of the layer. If only two values are supplied, then the left and top coordinates are set to 0. For example :

<LAYER CLIP="10,10,50,20">
. . .

specifies a clipping region of 40 (x direction) by 10 (y direction) pixels for the layer, starting at the position 10,10 (x,y), while :

<LAYER CLIP="50,20">
. . .

specifies a clipping region of 50 (x direction) by 20 (y direction) pixels for the layer, starting at the position 0,0 (x,y).

VISIBILITY
The VISIBILITY attribute controls whether the layer is currently visible or not. It can accept values of show, hide or inherit. Show and hide explicitly set the layers visibility, while inherit makes the current layer inherit the VISIBILITY of its parent layer(s) (layers can be nested). If the current layer is a parent layer (or contains no child layers), 'show' and 'inherit' are identical, since the layer will be visible (unless VISIBILITY="hide" is used).

BGCOLOR
BGCOLOR can be used to set the background colour of the current layer. By default, layers are transparent, specifying a BGCOLOR makes the layer opaque, using the colour specified. Any standard rrgggbb triplet, or a named colour can be used. For more details on document colouring, see the <BODY> element.

BACKGROUND
The BACKGROUND attribute can be used to reference a background image for the layer. Note that is the image used is wider than the layers WIDTH attribute value (see above), then the width of the layer will be extended to display the image fully.

Layer examples
The following (very simple) HTML fragment specifies a number of different document layers, mainly using ABOVE and BELOW attributes to set the z-order of the layers. Style sheet settings and script functions have not been included for brevity. For more details about JavaScript interactions with layers, see the Layer Object and for style sheet information, see the Style Sheets topic.

. . .
<LAYER LEFT="-50" TOP="100" NAME="QMark">
<SPAN CLASS="QMark">?</SPAN>
</LAYER>
<LAYER LEFT="25" TOP="100" NAME="What" ABOVE="QMark">
<SPAN CLASS="What">What</SPAN>
</LAYER>
<LAYER LEFT="135" TOP="100" NAME="Do" BELOW="QMark">
<SPAN CLASS="Do">do</SPAN>
</LAYER>
<LAYER LEFT="187" TOP="100" NAME="You" ABOVE="QMark">
<SPAN CLASS="You">you</SPAN>
</LAYER>
<LAYER LEFT="264" TOP="100" NAME="Want" BELOW="QMark">
<SPAN CLASS="Want">want</SPAN>
</LAYER>
<LAYER LEFT="365" TOP="100" NAME="To" ABOVE="QMark">
<SPAN CLASS="To">to</SPAN>
</LAYER>
<LAYER LEFT="100" TOP="125" NAME="Know" BELOW="QMark">
<SPAN CLASS="Know">know</SPAN>
</LAYER>
<LAYER LEFT="210" TOP="125" NAME="Today" ABOVE="QMark">
<SPAN CLASS="Today">today</SPAN>
</LAYER>
. . .

can be used to create the following effect :

What do you want to ? know today

NOTE : As you've probably guessed, the functional example above is not using layers, but Style Sheet positioning of various elements to achieve the same effect as using layers in Netscape Communicator.

The <LAYER> element does have various properties and methods that can be manipulated and invoked in a document. These are accessed through the Layer Object and are only supported by Netscape 4.0 and above.

© 1995-1998, Stephen Le Hunte


<LEGEND...>

Note : The <LEGEND> element is a new element introduced in HTML 4.0 draft specifications and is only supported by Internet Explorer 4.0 and above.

The <LEGEND> element provides a label for the <FIELDSET> element. For the <LEGEND> element to be used as the <FIELDSET> label, it must be the first element contained in the <FIELDSET> block.

<LEGEND> accepts the following attributes :

ALIGN="Alignment"
The ALIGN attribute specifies where the <LEGEND> text is located on the <FIELDSET> border. It can accept vales of bottom, center, left, right and top.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <LEGEND> element as using a particular style sheet class. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <LEGEND> element for scripting purposes. Any <LEGEND> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

LANG="language setting"
The LANG attribute can be used to specify what language the <LEGEND> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <LEGEND> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <LEGEND> element can have in-line stylings attached to it. See the Style Sheets topic for details.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <LEGEND> section.

Examples For an example of the <LEGEND> element, see the <FIELDSET> topic.

Every <LEGEND> element in a document is an object that can be manipulated through scripting. Note that scripting of the <LEGEND> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model as Netscape doesn't support the <LEGEND> element.

<LEGEND...> Properties
The <LEGEND...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.
Additionally, the <LEGEND> element supports the following properties:

align
The align property directly reflects the value of the ALIGN attribute.

clientHeight
The clientHeight property reflects the height (in pixels) of the contents of the <LEGEND> element.

clientWidth
The clientWidth property reflects the width (in pixels) of the contents of the <LEGEND> element.

scrollHeight
The scrollHeight property reflects the contents of the <LEGEND> elements total scrollable height (in pixels).

scrollLeft
The scrollLeft property reflects a value representing the distance between the left-most edge of the element and the left-most visible edge of the element. While the contents of the <LEGEND> element are totally visible on the screen, the scrollLeft property is 0, only increasing if the left-most edge of the <LEGEND> elements contents are scrolled off the left hand edge of the current viewing window.

scrollTop
The scrollTop property returns a value that represents the distance between the top-most edge of the element and the top-most edge of the current viewing window. When used with the <LEGEND> element, the scrollTop property is a value indicative of the extent to which the referenced element has been scrolled vertically. If the contents of the <LEGEND> element are visible, then the scrollTop property will be 0, only increasing as the contents of the element are scrolled off the top of the current viewing window.

scrollWidth
Like the scrollHeight property, the scrollWidth property reflects a value that represents the total scrollable width of the contents of the <LEGEND> element.

<LEGEND...> Methods
The <LEGEND...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.
Additionally, the <LEGEND> element supports the following methods:

blur
The blur event can be used to force the users focus away from the referenced <LEGEND> element, firing the onblur event.

focus
The focus method can be used to pass the users focus to the referenced <LEGEND> element, forcing the onfocus event to fire.

<LEGEND...> Events
The <LEGEND...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.
Additionally, the <LEGEND> element supports the following events:

onblur
When the referenced <LEGEND> element loses the users focus, the onblur event is fired. On the fly form validation can make use of the onblur event to check form elements as the user is entering information.

onfocus
When the user passes the focus to any <LEGEND> element, the onfocus event is fired for that element.

© 1995-1998, Stephen Le Hunte


<LISTING...>

NOTE : The <LISTING> element was designated as obsolete in recent drafts of the HTML 4.0 specification, which makes it likely that browsers will stop supporting it. While it's supported in Internet Explorer 3.02 (and preview versions of 4.0) and versions of Netscape up to 4.01, it is recommended that for new documents, <PRE> is used instead.

The <LISTING> element can be used to presents blocks of text in fixed-width font, and so is suitable for text that has been formatted on screen. As such, it is similar to the <PRE> and <XMP> elements, but has a different syntax.

Typically, it will render as fixed width font with white space separating it from other text. It should be rendered such that 132 characters fit on the line.

For example :

Some might say <LISTING> that two heads </LISTING> are better than one

Would render as:

Some might saythat two headsare better than one

NOTE : Netscape and Internet Explorer 4.0 will translate any special characters included within <LISTING> elements. I.e. if characters such as &lt;, &gt; etc. are used, they will be translated to < and >. Mosaic and Internet Explorer 3.0x treat the text contained within the elements literally.

Internet Explorer (4.0 and above) also support the use of the TITLE attribute. This can be used for informational purposes, with Internet Explorer treating the value of the TITLE attribute as a 'ToolTip' which is displayed when the reader passes their mouse over the contents of the <LISTING> element. For example, adding:

. . .TITLE="An anonymous quote"

would display the ToolTip ("An anonymous quote") when the mouse pauses on the text.

LANG="language setting"
The LANG attribute can be used to specify what language the <LISTING> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <LISTING> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <CENTER> as using a particular style sheet class. For example, a style sheet class defined as:

<STYLE TYPE="text/css">
.BigText {font-size : 14pt}
</STYLE>

could then be referenced as:

<LISTING CLASS="BigText">that two heads</LISTING>

and would be displayed in a slightly larger font. See the Style Sheets overview for more information and style sheet settings.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <LISTING> element can have in-line stylings attached to it. For example:

<LISTING STYLE="{font-size : 14pt}">that two heads</LISTING>

would display exactly as the above example. See the Style Sheets section for more details about style sheet settings.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <LISTING> element for scripting purposes. Any <LISTING> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <LISTING> element in a document is an object that can be manipulated through scripting. Note that scripting of the <LISTING> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <LISTING> element at all.

<LISTING...> Properties
The <LISTING...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.

<LISTING...> Methods
The <LISTING...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<LISTING...> Events
The <LISTING...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<MARQUEE...>

NOTE : This element is currently only supported by the Microsoft Internet Explorer. For authors writing specifically for Netscape, a marquee effect can be obtained through the use of a Java applet, JavaScript script, or by using a multi-block GIF 'banner' (these can be constructed using the GIF construction kit).

The <MARQUEE> element allows the author to create a region of text that can be made to scroll across the screen (much like the Windows Marquee screen saver)

E.g. :

<MARQUEE>This text will scroll from right to left slowly</MARQUEE>

appears thus:

This text will scroll from right to left slowly

NOTE : If you are not viewing this page with Internet Explorer then the example <MARQUEE>s will not display properly.

Marquees can be aligned to the left or right hand side in the HTML document and have a variety of attributes to control them.

ALIGN="left|right|top|middle|bottom"
This attribute can be set to either LEFT, RIGHT, TOP, MIDDLE or BOTTOM and specifies that the text around the marquee should align with the top, middle , or bottom of the marquee.

For example:

<MARQUEE ALIGN=TOP>Hello in browser land.</MARQUEE>Welcome to this page

The text "Welcome to this page'" would be aligned with the top of the Marquee (which scrolls the text "Hello in browser land" across the screen. (NOTE : Until the Marquee width is limited by setting the WIDTH attribute, then the Marquee will occupy the whole width of the browser window and any following text will be rendered below the Marquee.)

BEHAVIOR="scroll|slide|alternate"
This can be set to SCROLL, SLIDE or ALTERNATE. It specifies how the text displayed in the Marquee should behave. SCROLL (the default) makes the Marquee test start completely off one side of the browser window, scroll all the way across and completely off the opposite side, then start again. SLIDE causes the text to scroll in from one side of the browser window, then stick at the end of its scroll cycle. ALTERNATE means bounce back and forth within the marquee.

E.g.

<MARQUEE BEHAVIOR=ALTERNATE>
This marquee will "bounce" across the screen</MARQUEE>

will appear thus :
This marquee will "bounce" across the screen

BGCOLOR="#rrggbb|colour name"
This specifies a background colour for the marquee, either as a rrggbb hex triplet, or as one of the pre-named colours. (See <BODY BGCOLOR> for more information)

E.g.

<MARQUEE BGCOLOR="#F0F8FF">Nice Background colour!<MARQUEE>

will appear thus :
Nice Background colour!

CLASS="Style Sheet class"
The CLASS attribute is used to specify the <PLAINTEXT> as using a particular style sheet class. See the Style Sheets overview for more information and style sheet settings.

DATAFLD="Data column name"
The DATAFLD attribute can be used to specify a data column name from the Data source (see DATASRC) that the <MARQUEE> is bound to. For more information on the DATAFLD attribute, see the Data Binding topic.

DATAFORMATAS="HTML|text"
When the <MARQUEE> element is data-bound, it can accept straight text, or HTML from the data source. The DATAFORMATAS attribute should be set to "TEXT" or "HTML" accordingly. with DATAFORMATAS="HTML", the data provided for the <BUTTON> element is parsed and rendered when it's displayed.
For more information on the DATAFORMATAS attribute, see the Data Binding topic.

DATASRC="Data source"
The DATASRC attribute can be used to specify a data source that the <BUTTON> is bound to. For more information on the DATASRC attribute, see the Data Binding topic.

DIRECTION="left|right"
This specifies in which direction the text should scroll. The default is LEFT, which means scrolling to the left from the right. This attribute can also be set to RIGHT, which would cause the marquee to scroll from the left to the right.

HEIGHT="value|value%"
This specifies the height of the marquee, either in pixels (HEIGHT=n) or as a percentage of the screen height (HEIGHT=n%).

ID="Style Sheet/Scripting identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <MARQUEE> element for scripting purposes. Any <MARQUEE> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

HSPACE="value"
This attribute is the same as that for images. It is used to specify the number of pixels of free space at the left and right hand sides of the <MARQUEE> so that text that flows around the <MARQUEE> doesn't push up against the sides.

LANG="Language identifier"
The LANG attribute can be used to specify what language the <MARQUEE> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <MARQUEE> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

LOOP="value|-1|infinite"
LOOP=n specifies how many times a marquee will loop when activated. If n=-1, or LOOP=INFINITE is specified, the marquee action will loop indefinitely. NOTE : By default, <MARQUEE...>'s will loop indefinitely.

SCROLLAMOUNT="value"
Specifies the number of pixels between each successive draw of the marquee text. That is, the amount for the text to move between each draw.

SCROLLDELAY="value"
SCROLLDELAY specifies the number of milliseconds between each successive draw of the marquee text. That is, it controls the speed at which text draw takes place.

For example :

<MARQUEE SCROLLDELAY=1 SCROLLAMOUNT=75>I'm fast</MARQUEE>

would render thus

I'm fast

STYLE="In line styling"
As well as using previously defined style sheet settings, the <MARQUEE> element can have in-line stylings attached to it. For example:

<MARQUEE STYLE="{font-family:Arial;font-size:8pt}">1, HTMLib Way, Swansea</MARQUEE>

would display the <MARQUEE> in an 8pt Arial font. See the Style Sheets section for more details about style sheet settings.

TITLE="Informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <MARQUEE> section.

TRUESPEED="Speed flag"
With the TRUESPEED flag set, all SCROLLDELAY values are used as specified. If the TRUESPEED flag is not set, then any values of SCROLLDELAY of less than 59 mS are rounded to 60mS.

VSPACE="value"
This attribute is the same as that for images. It is used to specify the number of pixels of free space at the top and bottom of the <MARQUEE> so that text that flows around the <MARQUEE> doesn't push up against the top or bottom.

WIDTH="value|value%"
This specifies the width of the marquee, either in pixels (WIDTH=n) or as a percentage of the screen height (WIDTH=n%).

NOTE :If you wish to set the <FONT> to be displayed in the <MARQUEE>, then the <FONT> declaration needs to be outside the <MARQUEE>

E.g.

<FONT FACE="Comic Sans MS"><MARQUEE>Hello</MARQUEE></FONT>

will appear thus:
Hello

Every <MARQUEE> element in a document is an object that can be manipulated through scripting. Note that scripting of the <MARQUEE> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <MARQUEE> element at all.

<MARQUEE...> Properties
In addition to the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title. Details of these can be found in the standard Dynamic HTML properties topics.), the <MARQUEE> element also supports the following properties:

behavior
The behavior property directly reflects, or sets the value of the BEHAVIOR attribute.

bgColor
The bgColor property directly reflects, or sets the value of the BGCOLOR attribute. It takes any valid #rrggbb hex triplet, or any of the possible Colour Names.

clientHeight
The clientHeight property reflects the height (in pixels) of the contents of the <MARQUEE> element.

clientWidth
The clientWidth property reflects the width (in pixels) of the contents of the <MARQUEE> element.

dataFld
The dataFld property directly reflects, or sets the value of the DATAFLD attribute (see above). For more information on the DATAFLD attribute, see the Data Binding topic.

dataFormatAs
The dataFormatAs property directly reflects, or sets the value of the DATAFORMATAS attribute (see above). For more information on the DATAFORMATAS attribute, see the Data Binding topic.

dataSrc
The dataSrc property directly reflects, or sets the value of the DATASRC attribute (see above). For more information on the DATASRC attribute, see the Data Binding topic.

direction
The behavior property directly reflects, or sets the value of the BEHAVIOR attribute.

height
The height property directly reflects, or sets the value of the HEIGHT attribute.

hspace
The hspace property directly reflects, or sets the value of the HSPACE attribute.

loop
The loop property directly reflects, or sets the value of the LOOP attribute.

scrollAmount
The scrollAmount property directly reflects, or sets the value of the SCROLLAMOUNT attribute.

scrollDelay
The scrollDelay property directly reflects, or sets the value of the SCROLLDELAY attribute.

scrollHeight
The scrollHeight property reflects the contents of the <MARQUEE> elements total scrollable height (in pixels).

scrollLeft
The scrollLeft property reflects a value representing the distance between the left-most edge of the element and the left-most visible edge of the element. While the contents of the <MARQUEE> element are totally visible on the screen, the scrollLeft property is 0, only increasing if the left-most edge of the <MARQUEE> elements contents are scrolled off the left hand edge of the current viewing window.

scrollTop
The scrollTop property returns a value that represents the distance between the top-most edge of the element and the top-most edge of the current viewing window. When used with the <MARQUEE> element, the scrollTop property is a value indicative of the extent to which the referenced element has been scrolled vertically. If the contents of the <MARQUEE> element are visible, then the scrollTop property will be 0, only increasing as the contents of the element are scrolled off the top of the current viewing window.

scrollWidth
Like the scrollHeight property, the scrollWidth property reflects a value that represents the total scrollable width of the contents of the <MARQUEE> element.

trueSpeed
The trueSpeed property directly reflects, or sets the value of the TRUESPEED flag.

vspace
The vspace property directly reflects, or sets the value of the VSPACE attribute.

width
The width property directly reflects, or sets the value of the WIDTH attribute.

<MARQUEE...> Methods
In addition to the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute. Details of these can be found in the standard Dynamic HTML Methods topics.), the <MARQUEE> element also supports the following methods:

blur
The blur event can be used to force the users focus away from the referenced <MARQUEE> element, firing the onblur event.

focus
The focus method can be used to pass the users focus to the referenced <MARQUEE> element, forcing the onfocus event to fire.

start
The start method can be used to start a <MARQUEE> through scripting.

stop
Unsurprisingly, the stop method can be used to stop a <MARQUEE> through scripting.

For example:

Start and Stop me using the buttons

<MARQUEE...> Events
In addition to the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart. Details of these can be found in the standard Dynamic HTML events topics.), the <MARQUEE> element also supports the following events:

onblur
When the referenced <MARQUEE> element loses the users focus, the onblur event is fired.

onbounce
The onbounce event fires when the <MARQUEE> 'bounces' on the side of the screen. Note that this requires BEHAVIOR="alternate" set for the <MARQUEE>. For example, the following <MARQUEE> will tell you how many times it's 'bounced'

Bouncy bouncy, boing boing

Number of bounces : 0

onfinish
When a <MARQUEE> finishes its scrolling, it will fire the onfinish event. Note that <MARQUEE>'s loop indefinitely, unless their LOOP attributes are set to a value. If the <MARQUEE> is set to loop indefinitely, the onfinish event will never fire.

onfocus
When the user passes the focus to any <MARQUEE> element, the onfocus event is fired for that element.

onresize
Whenever the <MARQUEE> is resized (i.e. through scripting, or browser size changes perhaps), the onresize event fires. Dynamic resizing of the content of the <MARQUEE> element could be scripted in the onresize event for example.

onscroll
The onscroll event occurs whenever the <MARQUEE> scrolls. Note that for the <MARQUEE> element, the onscroll event occurs every time the <MARQUEE> text scrolls, so depending on the SCROLLDELAY and SCROLLAMOUNT settings, there could be a huge amount of onscroll events fired. For example, the <MARQUEE> element below counts the number of scrolls. It will only scrolls. To start it, press the Start button. When you're bored of watching the count, press the Stop button.

Scrolly scrolly, scroing scroing

Number of onscroll events : 0

onstart
The onstart event fires when a 'bounce' cycle begins. Note that when a <MARQUEE> is bouncing (i.e. BEHAVIOR="alternate"), it fires the onstart event only once, when it first starts 'bouncing'.

© 1995-1998, Stephen Le Hunte


<MULTICOL...>

This Netscape specific attribute allows text to be formatted in multiple columns. The <MULTICOL> element can be nested, producing multiple column layouts within multiple column layouts. It takes the following attributes :

COLS="value"
This specifies the number of columns to be used to render the text. It accepts a numerical values. It is the only required attribute for the <MULTICOL> element.

GUTTER="value"
If specified this setting (which accepts a pixel value) controls the amount of white space separating adjacent columns in the layout.

WIDTH="value"
This specifies the width of the entire layout and can accept a pixel value, or a percentage value (which will be calculated as a percentage value of the browser window).

NOTE : As this element is Netscape specific, it may be wise to consider using a borderless <TABLE> based layout for the same effect. While this will not allow every available browser to view the content, it ensures a wider possible audience.

Example
The following HTML fragment will display as three columns, using 25 pixels white space between each column, as shown below the example.

<MULTICOL COLS="3" GUTTER="25">
<P>Hello and Welcome to the HTML Reference Library. To those of you familiar with the previous incarnation of this project (The HTML Reference Library - HTMLib in Windows .HLP format) the content and working of these pages will probably be obvious. <P>To those of you new to the world of the HTML Reference Library, a little introduction :
</MULTICOL>

displays as :

Hello and Welcome to the HTML Reference Library. To those of you familiar with the previous incarnation of this project (The HTML Reference Library - HTMLib in Windows .HLP format) the content and working of these pages will probably be obvious.

To those of you new to the 		world of the HTML Reference Library, a little introduction

NOTE : The above example display is not entirely accurate. In Netscape resizing the browser window causes the text to be broken at different points, the above example doesn't, but it gives an idea of the use of the <MULTICOL> element.

As the <MULTICOL> element is Netscape specific and the Netscape scripting object model doesn't cover every element within documents, there are no properties, methods, or events for the <MULTICOL> element.

© 1995-1998, Stephen Le Hunte


<P...>

The Paragraph element indicates a paragraph of text. No specification has ever attempted to define exactly the indentation of paragraph blocks and this may be a function of other elements, style sheets, etc.

Typically, paragraphs should be surrounded by a vertical space of between one and one and a half lines.. With some HTML user agents, the first line in a paragraph may be indented.

Example of use:

<H1>The Paragraph element</H1>
<P>The paragraph element is used to denote paragraph blocks</P>
<P>This would be the second paragraph.</P>

Included since the HTML 3.2 specification is the ability to align paragraphs. Basically, the ALIGN=left|center|right attribute and values were been added to the <P> element.

e.g :

<P ALIGN=LEFT> ... </P>

All text with in the paragraph will be aligned to the left side of the page layout. This setting is equal to the default <P> element.

<P ALIGN=CENTER> ... </P>

All text within the paragraph will be aligned to the centre of the page. (c.f. <CENTER> ... </CENTER>)

<P ALIGN=RIGHT> ... </P>

All text will be aligned to the right side of the page.

Internet Explorer (4.0 and above) also support the use of the TITLE attribute. This can be used for informational purposes, with Internet Explorer treating the value of the TITLE attribute as a 'ToolTip' which is displayed when the reader passes their mouse over the contents of the <P> element. For example, adding :

. . .TITLE="A right-justified paragraph"

to the above example, the section displays as :

All this text will be aligned to the right side of the page

LANG="language setting"
The LANG attribute can be used to specify what language the <P> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <P> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <P> element as using a particular style sheet class. For example, a style sheet class defined as:

<STYLE TYPE="text/css">
.FirstPara {text-indent : 0.5in;
margin-left : 1in}
</STYLE>

could then be referenced as:

<P CLASS="FirstPara">The first line of this paragraph will be slightly indented from the rest of the text, which will then flow neatly down the left margin. Note that the whole paragraph is also indented.</P>

and would display as:

The first line of this paragraph will be slightly indented from the rest of the text, which will then flow neatly down the left margin. Note that the whole paragraph is also indented.

See the Style Sheets overview for more information and style sheet settings.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <P> element can have in-line stylings attached to it. For example:

<P STYLE="{text-indent : 0.5in;margin-left : 1in}">An indented paragraph, with leading space on the first line</P>

would display as the above example. See the Style Sheets section for more details about style sheet settings.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <P> element for scripting purposes. Any <P> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <P> element in a document is an object that can be manipulated through scripting. Note that scripting of the <P> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <P> element at all.

<P...> Properties
As well as supporting all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title), the <P> element also supports the extra align property, which reflects any ALIGN attribute settings for the paragraph. Details of the standard properties can be found in the standard Dynamic HTML properties topics.

<P...> Methods
The <P...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<P...> Events
The <P...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<PLAINTEXT...>

NOTE : The <PLAINTEXT> element was designated as obsolete in recent drafts of the HTML 4.0 specification, which makes it likely that browsers will stop supporting it. While it's supported in Internet Explorer 3.02 (and preview versions of 4.0) and versions of Netscape up to 4.01, it is recommended that for new documents, <PRE> is used instead.

The <PLAINTEXT> element can be used to represent formatted text. As such, it is similar to the <XMP> and <LISTING> element. However, the <PLAINTEXT> element should be an open element, with no closing element. Only Netscape supports this element according to any HTML specification. Internet Explorer (3.02) and Mosaic will both allow the use of a </PLAINTEXT> closing element. Netscape and Internet Explorer 4.0 will treat the closing element literally and display it, with the rest of the document being displayed literally as well.

Typically, it will render as fixed width font with white space separating it from other text.

e.g.

I live<PLAINTEXT>in the rainiest part of the world.

Would render as:

I live

in the rainiest part of the world.

NOTE : As mentioned above, the <PLAINTEXT> element has been made obsolete in recent HTML 4.0 specifications. The above example actually uses the <PRE> to demonstrate how the element would be rendered in oder browsers. The <PRE> is recommended instead of the <PLAINTEXT> element for future documents.

As said above, anything following the opening <PLAINTEXT> element should be treated as text. Netscape (3.0 and above) and Internet Explorer (4.0 and above) behave like this. Older versions of Internet Explorer and all versions of Mosaic will allow the use of a closing </PLAINTEXT> element, allowing discrete blocks of <PLAINTEXT> formatted text to be displayed.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <PLAINTEXT> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <PLAINTEXT> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <PLAINTEXT> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <PLAINTEXT> as using a particular style sheet class. See the Style Sheets overview for more information and style sheet settings.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <PLAINTEXT> element can have in-line stylings attached to it. For example:

<PLAINTEXT STYLE="{font-family:Arial;font-size:8pt}">1, HTMLib Way, Swansea</PLAINTEXT>

would display in an 8pt Arial font. See the Style Sheets section for more details about style sheet settings.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <PLAINTEXT> element for scripting purposes. Any <PLAINTEXT> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <PLAINTEXT> element in a document is an object that can be manipulated through scripting. Note that scripting of the <PLAINTEXT> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <PLAINTEXT> element at all.

<PLAINTEXT...> Properties
The <PLAINTEXT...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.

<PLAINTEXT...> Methods
The <PLAINTEXT...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<PLAINTEXT...> Events
The <PLAINTEXT...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<PRE...>

The Preformatted Text element presents blocks of text in fixed-width font, and so is suitable for text that has been formatted on screen, or formatted for a mono-spaced font.

The <PRE> element may be used with the optional WIDTH attribute, which is a HTML Level 1 feature. The WIDTH attribute specifies the maximum number of characters for a line and allows the HTML user agent to determine which of its available fonts to use and how to indent the text (if at all). If the WIDTH attribute is not present, a width of 80 characters is assumed. Where the WIDTH attribute is supported, widths of 40, 80 and 132 characters should be presented optimally, with other widths being rounded up.

Within preformatted text, any line breaks within the text are rendered as a move to the beginning of the next line. The <P> element should not be used, but if it is found, it should be rendered as a move to the beginning of the next line. It is possible to use Anchor elements and character highlighting elements are allowed. Elements that define paragraph formatting (headings, address, etc.) must not be used. The horizontal tab character (encoded in US-ASCII and ISO-8859-1 as decimal 9) represents a special formatting case. It should be interpreted as the smallest positive nonzero number of spaces which will leave the number of characters so far on the line as a multiple of 8. (However, despite being allowed, its use is not recommended.)

NOTE: It is at the discretion of individual browsers how to render preformatted text and where "beginning of a new line" is to be implied, the browser can render that new line indented if it sees fit.

Example of use:

<PRE WIDTH="80">
This is an example of preformatted text.
</PRE>

NOTE : Internet Explorer 4.0 doesn't change the font pitch when different values are given to the WIDTH attribute.

NOTE: Within a Preformatted Text element, the constraint that the rendering must be on a fixed horizontal character pitch may limit or prevent the ability of the browser to render highlighting elements (such as <B>, <I> etc.) specially.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <PRE> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <PRE> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <PRE> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <PRE> as using a particular style sheet class. See the Style Sheets overview for more information and style sheet settings.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <PLAINTEXT> element can have in-line stylings attached to it. For example:

<PRE STYLE="{font-style:italic}">Some italic pre-formatted text</PRE>

would display in an italic font. See the Style Sheets section for more details about style sheet settings.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <PRE> element for scripting purposes. Any <PRE> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <PRE> element in a document is an object that can be manipulated through scripting. Note that scripting of the <PRE> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <PRE> element at all.

<PRE...> Properties
As well as supporting all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title), the <PRE...> element/object also supports the additional width property, which reflects any settings of the WIDTH attribute. Details of these can be found in the standard Dynamic HTML properties topics.

<PRE...> Methods
The <PRE...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<PRE...> Events
The <PRE...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


<XMP...>

NOTE : The <XMP> element was designated as obsolete in recent drafts of the HTML 4.0 specification, which makes it likely that browsers will stop supporting it. While it's supported in Internet Explorer 3.02 (and preview versions of 4.0) and versions of Netscape up to 4.01, it is recommended that for new documents, <PRE> is used instead.

The <XMP> element can be used to presents blocks of text in fixed-width font, and so is suitable for text that has been formatted on screen. As such, it is similar to the <PRE> and <LISTING> elements, but has a different syntax.

Typically, it will render as fixed width font with white space separating it from other text. It should be rendered such that 80 characters fit on the line.

e.g.

The <XMP>Netscape Navigator</XMP> supports coloured tables.

Would render as:

The

Netscape Navigator supports coloured tables.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <XMP> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <XMP> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <XMP> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <XMP> as using a particular style sheet class. See the Style Sheets overview for more information and style sheet settings.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <XMP> element can have in-line stylings attached to it. See the Style Sheets section for more details about style sheet settings.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <XMP> element for scripting purposes. Any <XMP> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

Every <XMP> element in a document is an object that can be manipulated through scripting. Note that scripting of the <XMP> element/object is only supported by Internet Explorer 4.0 in its Dynamic HTML object model. Netscape does not support direct scripting of the <XMP> element at all.

<XMP...> Properties
The <XMP...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.

<XMP...> Methods
The <XMP...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.

<XMP...> Events
The <XMP...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.

© 1995-1998, Stephen Le Hunte


HTML 4.0 Reference

HTML 4.0 became a W3C Recommendation in December of 1997. The new HTML standard provides a number of significant improvements over previous versions of the language while emphasizing the concepts of accessibility and structural markup.

Contents

What's New in HTML 4.0
A summary of the new features in HTML 4.0 and a look at the key concepts behind the new standard.
Structure of an HTML 4.0 Document
An explanation of elements, tags, and attributes, and how they are used in an HTML 4.0 document.
Organizational List of HTML 4.0 Elements
All HTML 4.0 elements organized by their function.
Alphabetical List of HTML 4.0 Elements
All HTML 4.0 elements listed alphabetically.
HTML 4.0 Entities
All character entity references in HTML 4.0 along with their numeric character references and rendering in your browser.
Offline Versions
Downloadable versions of this reference suitable for offline use.

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


Copyright Details

This modified HTML 4.0 reference has it's basis is the Web Design Groups edition of the HTML 4.0 spec.
Thanks go to the Web Design Group, in particular Liam Quinn (who wrote most of the original HTML source) and John Pozadzides.

In the process of modifying this HTML spec, I may have introduced some errors. If so please email me and not the Web Design Group (i.e. all errors are mine).
All the pages in this combined Sausage Software and Web Design Group spec are copyright of Liam Quinn and Sausage Software 1998.
All modifications to the orginal WDG spec are copyrighted to Sausage Software 1998.

Contact Details

Liam Quinn (Web Design Group)
Peter Hurst (Sausage Software)

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


Structure of an HTML 4.0 Document

  • Elements and Tags
  • Attributes
  • Special Characters
  • Comments
  • A Complete HTML 4.0 Document
  • Validating your HTML

Elements and Tags

Elements are the structures that describe parts of an HTML document. For example, the P element represents a paragraph while the EM element gives emphasized content.

An element has three parts: a start tag, content, and an end tag. A tag is special text--"markup"--that is delimited by "<" and ">". An end tag includes a "/" after the "<". For example, the EM element has a start tag, <EM>, and an end tag, </EM>. The start and end tags surround the content of the EM element:

<EM>This is emphasized text</EM>

Element names are always case-insensitive, so <em>, <eM>, and <EM> are all the same.

Elements cannot overlap each other. If the start tag for an EM element appears within a P, the EM's end tag must also appear within the same P element.

Some elements allow the start or end tag to be omitted. For example, the LI end tag is always optional since the element's end is implied by the next LI element or by the end of the list:

<UL>
  <LI>First list item; no end tag
  <LI>Second list item; optional end tag included</LI>
  <LI>Third list item; no end tag
</UL>

Some elements have no end tag because they have no content. These elements, such as the BR element for line breaks, are represented only by a start tag and are said to be empty.

Attributes

An element's attributes define various properties for the element. For example, the IMG element takes a SRC attribute to provide the location of the image and an ALT attribute to give alternate text for those not loading images:

<IMG SRC="wdglogo.gif" ALT="Web Design Group">

An attribute is included in the start tag only--never the end tag--and takes the form Attribute-name="Attribute-value". The attribute value is delimited by single or double quotes. The quotes are optional if the attribute value consists solely of letters in the range A-Z and a-z, digits (0-9), hyphens ("-"), and periods (".").

Attribute names are case-insensitive, but attribute values may be case-sensitive.

Special Characters

Certain characters in HTML are reserved for use as markup and must be escaped to appear literally. The "<" character may be represented with an entity, &lt;. Similarly, ">" is escaped as &gt;, and "&" is escaped as &amp;. If an attribute value contains a double quotation mark and is delimited by double quotation marks, then the quote should be escaped as &quot;.

Other entities exist for special characters that cannot easily be entered with some keyboards. For example, the copyright symbol ("©") may be represented with the entity &copy;. See the Entities section for a complete list of HTML 4.0 entities.

As an alternative to entities, authors may also use numeric character references. Any character may be represented by a numeric character reference based on its "code position" in Unicode. For example, one could use &#169; for the copyright symbol or &#1575; for the Arabic letter ALEF.

Comments

Comments in HTML have a complicated syntax that can be simplified by following this rule: Begin a comment with "<!--", end it with "-->", and do not use "--" within the comment.

<!-- An example comment -->

A Complete HTML 4.0 Document

An HTML 4.0 document begins with a DOCTYPE declaration that declares the version of HTML to which the document conforms. The HTML element follows and contains the HEAD and BODY. The HEAD contains information about the document, such as its title and keywords, while the BODY contains the actual content of the document, made up of block-level elements and inline elements. A basic HTML 4.0 document takes on the following form:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
        "http://www.w3.org/TR/REC-html40/strict.dtd">
<HTML>
  <HEAD>
    <TITLE>The document title</TITLE>
  </HEAD>
  <BODY>
    <H1>Main heading</H1>
    <P>A paragraph.</P>
    <P>Another paragraph.</P>
    <UL>
      <LI>A list item.</LI>
      <LI>Another list item.</LI>
    </UL>
  </BODY>
</HTML>

In a Frameset document, the FRAMESET element replaces the BODY element.

Validating your HTML

Each HTML document should be validated to check for errors such as missing quotation marks (<A HREF="oops.html>Oops</A>), misspelled element or attribute names, and invalid structures. Such errors are not always apparent when viewing a document in a browser since browsers are designed to recover from an author's errors. However, different browsers recover in different ways, sometimes resulting in invisible text on one browser but not on others.

The W3C HTML Validation Service checks the validity of HTML 4.0 documents.

Note that some programs claim to be validators but really are not. A validator checks a document against a formal document type definition (DTD) while other programs such as lints warn about valid but unsafe HTML. Both kinds of programs are useful, but validation should never be forgotten.

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


HTML 4.0 Elements

The following is an alphabetical list of all HTML 4.0 elements. An organizational list is also available.

  • A - Anchor
  • ABBR - Abbreviation
  • ACRONYM - Acronym
  • ADDRESS - Address
  • APPLET - Java applet
  • AREA - Image map region
  • B - Bold text
  • BASE - Document base url
  • BASEFONT - Base font change
  • BDO - BiDi override
  • BIG - Large text
  • BLOCKQUOTE - Block quotation
  • BODY - Document body
  • BR - Line break
  • BUTTON - Button
  • CAPTION - Table caption
  • CENTER - Centered block
  • CITE - Citation
  • CODE - Computer code
  • COL - Table column
  • COLGROUP - Table column group
  • DD - Definition description
  • DEL - Deleted text
  • DFN - Defined term
  • DIR - Directory list
  • DIV - Generic block-level container
  • DL - Definition list
  • DT - Definition term
  • EM - Emphasis
  • FIELDSET - Form control group
  • FONT - Font change
  • FORM - Interactive form
  • FRAME - Frame
  • FRAMESET - Frameset
  • H1 - Level-one heading
  • H2 - Level-two heading
  • H3 - Level-three heading
  • H4 - Level-four heading
  • H5 - Level-five heading
  • H6 - Level-six heading
  • HEAD - Document head
  • HR - Horizontal rule
  • HTML - HTML document
  • I - Italic text
  • IFRAME - Inline frame
  • IMG - Inline image
  • INPUT - Form input
  • INS - Inserted text
  • ISINDEX - Input prompt
  • KBD - Text to be input
  • LABEL - Form field label
  • LEGEND - Fieldset caption
  • LI - List item
  • LINK - Document relationship
  • MAP - Image map
  • MENU - Menu list
  • META - Metadata
  • NOFRAMES - Frames alternate content
  • NOSCRIPT - Alternate script content
  • OBJECT - Object
  • OL - Ordered list
  • OPTGROUP - Option group
  • OPTION - Menu option
  • P - Paragraph
  • PARAM - Object parameter
  • PRE - Preformatted text
  • Q - Short quotation
  • S - Strike-through text
  • SAMP - Sample output
  • SCRIPT - Client-side script
  • SELECT - Option selector
  • SMALL - Small text
  • SPAN - Generic inline container
  • STRIKE - Strike-through text
  • STRONG - Strong emphasis
  • STYLE - Embedded style sheet
  • SUB - Subscript
  • SUP - Superscript
  • TABLE - Table
  • TBODY - Table body
  • TD - Table data cell
  • TEXTAREA - Multi-line text input
  • TFOOT - Table foot
  • TH - Table header cell
  • THEAD - Table head
  • TITLE - Document title
  • TR - Table row
  • TT - Teletype text
  • U - Underlined text
  • UL - Unordered list
  • VAR - Variable

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


HTML 4.0 Common Attributes

A number of attributes in HTML 4.0 are common to most elements. These attributes are divided into core attributes, internationalization attributes, and scripting events.

Core Attributes

ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=secondp>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}

STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

Common Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


HTML 4.0 Deprecated Features

A number of elements and attributes are deprecated in HTML 4.0 as an indication that other methods of accomplishing the same task are preferred. Deprecated features may become obsolete in future versions of HTML, though browsers that support the features will likely continue to support them. Deprecated features are included in HTML 4.0 Transitional and HTML 4.0 Frameset but not HTML 4.0 Strict.

Many presentational elements and attributes are deprecated in favor of style sheets, which allow authors to suggest a presentation with more flexibility and without sacrificing accessibility. Presentational attributes that cannot currently be replaced with style sheets are in most cases not deprecated.

The following elements are deprecated in favor of style sheets:

  • BASEFONT - Base font change
  • CENTER - Centered block
  • FONT - Font change
  • S - Strike-through text
  • STRIKE - Strike-through text
  • U - Underlined text

The following elements are also deprecated:

  • APPLET - Java applet (deprecated in favor of OBJECT)
  • DIR - Directory list (deprecated in favor of UL)
  • ISINDEX - Input prompt (deprecated in favor of INPUT)
  • MENU - Menu list (deprecated in favor of UL)

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


HTML 4.0 Entities

Entities

Character entity references, or entities for short, provide a method of entering characters that cannot be expressed in the document's character encoding or that cannot easily be entered on a keyboard. Entities are case-sensitive and take the form &name;. Examples of entities include &copy; for the copyright symbol and &Alpha; for the Greek capital letter alpha.

In addition to entities, authors can use numeric character references. While entities are limited to a subset of Unicode characters, numeric character references can specify any character. Numeric character references may be given in decimal or hexadecimal, though browser support is stronger for decimal references. Decimal references are of the form &#number; while hexadecimal references take the case-insensitive form &#xnumber;. Examples of numeric character references include &#169; or &#xA9; for the copyright symbol, &#913; or &#x391; for the Greek capital letter alpha, and &#1575; or &#x627; for the Arabic letter ALEF.

Note that hexadecimal character references will cause errors with current validators since these references are defined in a recent revision to the SGML standard that is not yet supported by validators.

The following documents feature tables of the character entity references in HTML 4.0, along with the numeric character reference in decimal and hexadecimal. A rendering of each character reference is provided so that users may check their browsers' compliance.

  • Latin-1 Entities
  • Symbols and Greek Letters
  • Other Special Characters

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


HTML 4.0 Frames

Frames

Frames allow an author to display multiple documents in a single window that is divided into rectangular subspaces called frames. Visual browsers allow these frames to be scrolled independently of each other, and links can be loaded in a frame without changing the content of other frames.

The HTML 4.0 frames model has significant flaws that make frames hated by many users. Frames should only be used with great care; see the Guide to frames usage for some guidelines on suitable use of frames.

In a Frameset document, the outermost FRAMESET element takes the place of BODY and immediately follows the HEAD. Contained within the FRAMESET element are FRAME elements that define each frame, other FRAMESET elements for complex layouts, and a NOFRAMES element to provide alternate content for browsers with frames disabled or not supported.

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


HTML 4.0 Inline Elements

Most HTML 4.0 elements permitted within the BODY are classified as either block-level elements or inline elements. Inline elements typically may only contain text and other inline elements. When rendered visually, inline elements do not usually begin on a new line.

The following are defined as inline elements in HTML 4.0:

  • A - Anchor
  • ABBR - Abbreviation
  • ACRONYM - Acronym
  • B - Bold text
  • BASEFONT - Base font change
  • BDO - BiDi override
  • BIG - Large text
  • BR - Line break
  • CITE - Citation
  • CODE - Computer code
  • DFN - Defined term
  • EM - Emphasis
  • FONT - Font change
  • I - Italic text
  • IMG - Inline image
  • INPUT - Form input
  • KBD - Text to be input
  • LABEL - Form field label
  • Q - Short quotation
  • S - Strike-through text
  • SAMP - Sample output
  • SELECT - Option selector
  • SMALL - Small text
  • SPAN - Generic inline container
  • STRIKE - Strike-through text
  • STRONG - Strong emphasis
  • SUB - Subscript
  • SUP - Superscript
  • TEXTAREA - Multi-line text input
  • TT - Teletype text
  • U - Underlined text
  • VAR - Variable

The following elements may be used as either block-level elements or inline elements. If used as inline elements (e.g., within another inline element or a P), these elements should not contain any block-level elements.

  • APPLET - Java Applet
  • BUTTON - Button
  • DEL - Deleted text
  • IFRAME - Inline frame
  • INS - Inserted text
  • MAP - Image map
  • OBJECT - Object
  • SCRIPT - Client-side script

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


HTML 4.0 Attributes Values

HTML 4.0 Attribute Values

There are various kinds of attribute values in HTML 4.0. This document describes common types of values.

CDATA

Attribute values of type CDATA are made up of a sequence of characters that may include entities. Line feeds are ignored while each carriage return and tab is replaced with a space. Browsers may ignore leading and trailing whitespace within the attribute value.

CDATA attribute values are typically case-sensitive, though this is not the case with all attributes that take CDATA values.

ID and NAME

Attribute values of type ID and NAME must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods ("."). These values are case-sensitive.

IDREF and IDREFS

IDREF and IDREFS values refer to values of other elements' ID attributes. An IDREF value is a single ID while an IDREFS value is a space-separated list of IDs. IDREF and IDREFS are case-sensitive.

Number

Number attribute values are numbers made of at least one digit in the range 0-9.

Text

Text attribute values are CDATA values intended to be human readable strings.

url

url attribute values are Uniform Resource Identifiers (urls), as defined in the url Internet-Draft, a work-in-progress that is expected to replace RFC 1738 and RFC 1808.

url attribute values may include full urls such as http://www.htmlhelp.com/ as well as relative urls such as foo.html and ../foo/.

While parts of a url may be case-insensitive, in general url values are case-sensitive.

Color

Color attribute values give a color definition. The value can be any hexadecimal number, specified according to the sRGB color space, or one of sixteen color names. Hexadecimal numbers must be prefixed by a "#" character.

The case-insensitive color names and their sRGB values are as follows:

Color Name | sRGB Value
Black | #000000
Silver | #C0C0C0
Gray | #808080
White | #FFFFFF
Maroon | #800000
Red | #FF0000
Purple | #800080
Fuchsia | #FF00FF
Green | #008000
Lime | #00FF00
Olive | #808000
Yellow | #FFFF00
Navy | #000080
Blue | #0000FF
Teal | #008080
Aqua | #00FFFF

Note that the hexadecimal form is better supported than the color names for the color attributes of BODY.

Pixels

These attribute values are integers that represent a number of pixels.

Length

Length attribute values may be either an integer--interpreted as a number of pixels--or a percentage of the horizontal or vertical space. The value 50% means half the available space while 50 means 50 pixels.

MultiLength and MultiLengths

MultiLength attribute values may be an integer in pixels, a percentage of the horizontal or vertical space, or a relative length expressed as i* where i is an integer. In allotting space, a browser first allots pixel and percentage lengths, then divides the remaining space among all elements with a relative length. An element with a length of 3* will be allotted three times the space of an element with length 1*. The value * is equivalent to 1* and is often used to mean "fill the remaining space."

A MultiLengths value is a comma-separated list of MultiLength values.

ContentType and ContentTypes

These attribute values are content types (also known as media types or MIME types) of a linked or embedded resource. Values of type ContentType give a single content type while values of type ContentTypes give a comma-separated list of content types. Content types are case-insensitive.

Commonly used content types include text/html, image/jpeg, model/vrml, video/quicktime, application/java, text/css, and text/javascript. Many common content types are registered at the IANA.

LanguageCode

Attribute values of type LanguageCode specify a language code according to RFC 1766. Examples of language codes include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code, which is case-insensitive.

Charset and Charsets

These attribute values specify character encodings of linked resources. Values of type Charset give a single character encoding while values of type Charsets give a space- and/or comma-separated list of character encodings. Character encodings are case-insensitive.

Examples of character encodings include ISO-8859-1, SHIFT_JIS, and UTF-8. A list of registered character encodings is available at the IANA.

Character

Character attribute values take a single Unicode character. The character may be specified with an entity.

Datetime

Datetime attribute values give a date and time in the format YYYY-MM-DDThh:mm:ssTZD where YYYY is a four-digit year, MM is a two-digit month (01 through 12), DD is a two-digit day (01 through 31), hh is a two-digit hour (00 through 23), mm is a two-digit minute (00 through 59), ss is a two-digit second (00 through 59), and TZD is the time zone designator. Note that the T separating the date from the time must appear literally and is case-sensitive.

The time zone designator may be one of the following:

  • Z (case-sensitive), which indicates Universal Coordinated Time (UTC, basically the same as GMT);
  • +hh:mm, the time ahead of UTC in hours and minutes;
  • -hh:mm, the time behind UTC in hours and minutes.

If any of the two-digit components of the Datetime value are unknown, 00 should be used.

LinkTypes

Attribute values of type LinkTypes give a space-separated list of link types. A link type is case-insensitive and may not contain whitespace. Each link type may be used any number of times in a given document.

While link types are case-insensitive, the Lynx browser will render LINK elements with the same case as is given in the REL or REV attribute. Authors should therefore be consistent in their case, and may wish to capitalize the first letter while using lowercase for the rest.

The following link types are defined in HTML 4.0, though authors may use other link types. The Made link type, widely used as <LINK REV=Made HREF="mailto:liam@htmlhelp.com"> to provide a contact link for the document author, is notably missing from the list of link types defined in HTML 4.0.

  • Alternate specifies an alternate version of the document. When used with the LINK element's HREFLANG attribute, this value implies a translation of the document. When used with LINK's MEDIA attribute, a media-specific version (e.g., for printing) is implied.
  • StyleSheet specifies an external style sheet for the document. This link type can be combined with the Alternate link type to define an alternate style sheet for the user to choose.
  • Start specifies the first document in a collection.
  • Next specifies the next document in a suggested sequence of reading. Browsers such as WebTV will preload documents identified as "next" to improve the perceived load time.
  • Prev specifies the previous document in a suggested sequence of reading.
  • Contents specifies a table of contents for the document.
  • Index gives an index for the document.
  • Glossary gives a glossary of terms used in the document.
  • Copyright specifies a document with copyright information.
  • Chapter specifies the chapter of a collection of documents.
  • Section specifies the section of a collection of documents.
  • Subsection specifies a subsection of a collection of documents.
  • Appendix gives an appendix for the collection of documents.
  • Help specifies a help document.
  • Bookmark refers to a key related document. The TITLE attribute provides a label for the bookmark.

MediaDesc

Attribute values of type MediaDesc are media descriptors--a comma-separated list of media for which the linked resource is tailored. Media descriptors are case-sensitive.

The following media descriptors are defined in HTML 4.0:

  • screen (the default), for non-paged computer screens;
  • tty, for fixed-pitch character grid displays (such as the display used by Lynx);
  • tv, for television-type devices with low resolution and limited scrollability;
  • projection, for projectors;
  • handheld, for handheld devices (characterized by a small, monochrome display and limited bandwidth);
  • print, for output to a printer;
  • braille, for braille tactile feedback devices;
  • aural, for speech synthesizers;
  • all, for all devices.

Script

Script attribute values are client-side scripts, typically a function call or a few short statements. The value may contain entities (e.g., &quot;).

StyleSheet

Attribute values of type StyleSheet are style sheet data. The value may contain entities.

FrameTarget

Attribute values of type FrameTarget must begin with a letter in the range A-Z or a-z, with the exception of the following special values that begin with an underscore:

  • _blank renders the link in a new, unnamed window
  • _self renders the link in the current frame (useful for overriding a BASE TARGET)
  • _parent renders the link in the immediate FRAMESET parent
  • _top renders the link in the full, unframed window

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


A - Anchor

Syntax
<A>...</A>

Attribute Specifications
[Key] [3.2] HREF=URL (hypertext reference)
[3.2] METHODS=list of HTTP Methods.
[Key] [3.2] NAME=CDATA (named link destination)
[3.2] REL=LinkTypes (relationship to link)
[3.2] REV=LinkTypes (relationship from link)
[3.2] SDAPREF
[3.2] TITLE
[3.2] URN
[3.2] TARGET=FrameTarget (frame to render link in)
[4.0] ACCESSKEY=Character (shortcut key)
[4.0] CHARSET=Charset (character encoding of link)
[4.0] CLASS
[4.0] COORDS
[4.0] DIR
[4.0] ID
[4.0] LANG
[4.0] SYSTEM EVENTS (ONCLICK etc.)
[4.0] SHAPE=[ rect | circle | poly | default ] (client-side image map)
[4.0] STYLE
[4.0] TABINDEX=Number (position in tabbing order)

Common Attributes

Can Contain:
Inline elements except A

Contained in:
Block-level elements, inline elements except A

Description

The A element denotes an anchor--a hypertext link or the destination of a link. The HREF attribute specifies a hypertext link to another resource, such as an HTML document or a JPEG image. Examples:
  • <A HREF="album.html">My photo album</A>
  • <A HREF="images/me.jpg">Picture of me</A>
  • <A HREF="/sounds/auldlang.mid" TYPE="audio/midi" ACCESSKEY=A>Auld Lang Syne (5 kB MIDI)</A>
  • <A HREF="section2.html" TARGET="content" TITLE="Elements of the HEAD" REL=next>Section 2</A>
  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www.htmlhelp.com/" TARGET="_top">Web Design Group</A>
  • <A HREF="http://babel.alis.com:8080/langues/iso639.zh.htm" CHARSET="big5" HREFLANG=zh>ISO 639</A>

[Key] [3.2] HREF

The value of the HREF attribute is the URL of the link. The TYPE attribute can be used to specify the Internet media type of the link, allowing browsers to avoid fetching a resource that they cannot handle.

[3.2] METHODS

"This is a comma separated list of HTTP methods supported by the linked object. The browser might choose a different way of rendering the link for say searchable objects." (HTML+).
METHODS is expected to be a white-space-separated list of HTTP methods supported by the object and accessible to the user. RFC 1866 suggests that the content of the anchor element may be rendered differently depending upon the HTTP method.
(From the HTML COMPENDIUM)

[Key] [3.2] NAME

NAME and ID values must be unique in any document, and different values must differ by more than just the case. Values must begin with a letter in the range A-Z or a-z, and may be followed by A-Z, a-z, 0-9, hyphens, underscores, colons, or periods. When linking to a named anchor, the name is treated as case sensitive.

[3.2] REL & REV

The REL and REV attributes define relationships between an anchor and the linked resource. REL defines a link relationship from the current document to the linked document while REV defines a relationship in the opposite direction. For example,

<A HREF="foo.html" REL=glossary>...</A>

indicates that foo.html is a glossary for the current document while

<A HREF="bar.html" REV=subsection>...</A>

indicates that the current document is a subsection of bar.html. The value of the REL and REV attributes is a space-separated list of link types.

[3.2] SDAPREF

Unknown at this time

[3.2] TITLE

The TITLE attribute can be used to briefly describe the contents of the link and is rendered as a "tooltip" by some visual browsers. With mailto links, some browsers use the TITLE attribute value as a subject for the e-mail message.
Note: The content of an A element used as a link should be as context-free as possible. In other words, a user should be able to pull all A elements from a document and still have an idea what lies behind each link. Link text that contains Click here or simply here is extremely bad form.

[3.2] URN
Universal Resource Indicator. See the HTML Compendium for more details.

[3.2] TARGET

The TARGET attribute is used with frames to specify in which frame the link should be rendered. If no frame with such a name exists, the link is rendered in a new window unless overridden by the user. Special frame names begin with an underscore:

  • _blank renders the link in a new, unnamed window
  • _self renders the link in the current frame (useful for overriding a BASE TARGET)
  • _parent renders the link in the immediate FRAMESET parent
  • _top renders the link in the full, unframed window
[4.0] ACCESSKEY

The ACCESSKEY attribute specifies a single Unicode character as a shortcut key for following the link. Entities (e.g. &eacute;) may be used as the ACCESSKEY value.

[4.0] CHARSET

The CHARSET attribute defines the character set the borwser should use when rendering the page pointed to by by the link.

[4.0] CLASS

Used with Cascading Style Sheets. For more information, see the WDG help on Cascading Style Sheets. xxxx-->

[4.0] COORDS

The SHAPE and COORDS attributes of A can be used to create client-side image maps via the OBJECT element. The default SHAPE value is rect, which defines a rectangular region using COORDS="left, top, right, bottom". Other SHAPE values are

  • default, which specifies the entire image;
  • circle, which specifies a circular region using COORDS="center-x, center-y, radius";
  • poly, which specifies a polygonal region using COORDS="x1, y1, x2, y2, ..., xN, yN".

Coordinate values are relative to the top left corner of the object and may be expressed as pixels or percentages. A percentage radius value for circular regions is calculated relative to the smaller of the object's width and height. If two or more regions overlap, the earliest specified region takes precedence.

In addition to the core events common to most elements, A accepts the following event attributes for client-side scripting:

[4.0] DIR

The DIR attribute value is one of LTR for left to right, or RTL for right to left, e.g. DIR=RTL. Currently this attribute is supported by niether Netscape or MS Internet Explorer.

[4.0] ID

The NAME attribute defines a destination for a link. For example, a document containing

<H1><A NAME=foo>My Heading</A></H1>

defines a link destination named "foo" at the indicated heading. One could then use HREF="#foo" in an A element within the same document or HREF="somedoc.html#foo" from within another document.

An A element cannot contain another A element, so one must be careful that named anchors do not contain link anchors. Authors can use both the NAME and HREF attributes in a single A element to avoid this problem.

HTML 4.0's ID attribute is intended to eliminate the need for A NAME. The ID attribute can be used with almost any element to define a link destination, so that the following could be used in place of the previous example:

<H1 ID=foo>My heading</H1>

However, browser support for ID link destinations is very poor, so A NAME will be needed for quite awhile.

[4.0] LANG

This attrbute describes the language and dialect that the text is written in. For example:

<tag lang="en-cockney"> or <tag lang="i-cherokee">

[4.0] SYSTEM EVENTS

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.
[4.0] SHAPE

The SHAPE and COORDS attributes of A can be used to create client-side image maps via the OBJECT element. The default SHAPE value is rect, which defines a rectangular region using COORDS="left, top, right, bottom". Other SHAPE values are

  • default, which specifies the entire image;
  • circle, which specifies a circular region using COORDS="center-x, center-y, radius";
  • poly, which specifies a polygonal region using COORDS="x1, y1, x2, y2, ..., xN, yN".

Coordinate values are relative to the top left corner of the object and may be expressed as pixels or percentages. A percentage radius value for circular regions is calculated relative to the smaller of the object's width and height. If two or more regions overlap, the earliest specified region takes precedence.

In addition to the core events common to most elements, A accepts the following event attributes for client-side scripting:

[4.0] STYLE

One of several ways of using Cascading Style Sheets in your documents, the 'STYLE' attribute is used to set a previously defined style to a tag. For example:

<A STYLE="background-color:'lime'">

[4.0] TABINDEX

The TABINDEX attribute specifies a number between 0 and 32767 to indicate the tabbing order of the element. An anchor with TABINDEX=0 or no TABINDEX attribute will be visited after any elements with a positive TABINDEX. Among positive TABINDEX values, the lower number receives focus first. In the case of a tie, the element appearing first in the HTML document takes precedence.

More Information

  • A in W3C HTML 4.0 Recommendation
  • A in W3C HTML 3.2 Recommendation
  • A in HTML 2.0 Standard
  • A in WDG HTML 3.2 Reference
  • A in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


ABBR - Abbreviation

Syntax

<ABBR>...</ABBR>

Attribute Specifications

[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements

Contained in

Inline elements, block-level elements

Description

The ABBR element is used to markup abbreviations. The TITLE attribute is useful in conjunction with ABBR to give the long form of the abbreviation, allowing visual browsers to provide the long form as a "tooltip". If the short form is a pronounceable word, the ACRONYM element should be used instead of ABBR.

Examples:

  • <ABBR TITLE="United Nations">U.N.</ABBR>
  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Some short forms, such as "SQL" and "URL," are pronounced as words by some but pronounced letter-by-letter by others. In such cases, the ABBR element should be favored over ACRONYM. A style sheet could be used to suggest the aural rendering. For example, one could use

<ABBR TITLE="Uniform Resource Locator">URL</ABBR>

with the following CSS2 style sheet:

abbr[title="Uniform Resource Locator"] { speak: spell-out }

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • ABBR in W3C HTML 4.0 Recommendation

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


ACRONYM - Acronym

Syntax

<ACRONYM>...</ACRONYM>

Attribute Specifications

[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements

Contained in

Inline elements, block-level elements

Description

The ACRONYM element is used to markup acronyms. The TITLE attribute is useful in conjunction with ACRONYM to give the long form of the acronym, allowing visual browsers to provide the long form as a "tooltip". Examples:

  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>
  • <ACRONYM TITLE="radio detecting and ranging">radar</ACRONYM>
  • <ABBR TITLE="Federal Bureau of Investigation">FBI</ABBR>

Unlike other kinds of abbreviations, acronyms are pronounceable words, though in some cases the pronunciation is strictly a presentation issue. For example, "SQL" and "URL" are pronounced as words by some people and pronounced letter-by-letter by others. In such cases, authors should use the ABBR element, possibly with a style sheet rule specifying the pronunciation for aural rendering.

More Information

  • ACRONYM in W3C HTML 4.0 Recommendation

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


ADDRESS - Contact Information

Syntax

<ADDRESS>...</ADDRESS>

Attribute Specifications

[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Can Contain
  • HTML 4.0 Strict: inline elements
  • HTML 4.0 Transitional: inline elements, P
Contained in:

APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

Description

The ADDRESS element provides contact information for a document or part of a document. Information provided by ADDRESS may include the names of the document's maintainers, links to the maintainers' Web pages, e-mail addresses for feedback, postal addresses, phone numbers, and so on. The ADDRESS element is not appropriate for all postal and e-mail addresses; it should be reserved for providing such information about the contact people for the document.

The following example, most appropriate at the end of a document, gives contact information about the maintainer:

<ADDRESS>Maintained by <A HREF="/%7Eliam/">Liam Quinn</A>
&lt;<A HREF="mailto:liam@htmlhelp.com">liam@htmlhelp.com</A>&gt;</ADDRESS>

ADDRESS can also be used to provide contact information for a portion of a document, typically a form. The next example gives users contact information to use in conjunction with an order form:

<FORM METHOD=post ACTION="/cgi-bin/order.cgi">

  <FIELDSET>
    <LEGEND ACCESSKEY=C>Credit Card Information<BR></LEGEND>
    <P>
      <LABEL ACCESSKEY=V>
        <INPUT TYPE=radio NAME=card VALUE=visa> Visa
      </LABEL>
      <LABEL ACCESSKEY=M>
        <INPUT TYPE=radio NAME=card VALUE=mc> MasterCard
      </LABEL>
      <BR>
      <LABEL ACCESSKEY=N>
        Number: <INPUT TYPE=text NAME=number>
      </LABEL>
      <LABEL ACCESSKEY=E>
        Expiry: <INPUT TYPE=text NAME=expiry>
      </LABEL>
    </P>
  </FIELDSET>

  <P>
    <INPUT TYPE=submit VALUE="Submit order" ACCESSKEY=S>
  </P>

  <ADDRESS>
    If you have any questions about ordering, contact us at
    <A HREF="mailto:orders@htmlhelp.com">orders@htmlhelp.com</A>,
    or phone our offices at 555-5555.
  </ADDRESS>

</FORM>

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=secondp>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}

[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • ADDRESS in W3C HTML 4.0 Recommendation
  • ADDRESS in W3C HTML 3.2 Recommendation
  • ADDRESS in HTML 2.0 Standard
  • ADDRESS in WDG HTML 3.2 Reference
  • ADDRESS in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


APPLET - Java Applet

Syntax

<APPLET>...</APPLET>

Attribute Specifications

[3.2] ALT=Text (alternate text)
[3.2] CODE=CDATA (class file)
[3.2] CODEBASE=url (base url for class files)
[3.2] WIDTH=Length (applet width)
[3.2] HEIGHT=Length (applet height)
[3.2] HSPACE=Pixels (horizontal gutter)
[3.2] VSPACE=Pixels (vertical gutter)
[3.2] NAME=CDATA (name for inter-applet communication)
[Netscape] [3.2] ALIGN=[ top | middle | bottom | left | right ] (applet alignment)
[Netscape] ARCHIVE=CDATA (archive files)
[Netscape] MAYSCRIPT
[IE] DOWNLOAD
[4.0] OBJECT=CDATA (serialized applet)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Can Contain:

PARAM elements followed by block-level elements and/or inline elements

Contained in:

Inline elements, block-level elements except PRE

Description:

The APPLET element is used to embed Java applets. It has been deprecated in HTML 4.0 in favor of the more generalized OBJECT element. However, since the few browsers that support OBJECT do so with significant bugs, APPLET is currently a more reliable method of embedding Java applets.

An APPLET may contain PARAM elements to define applet-specific parameters. PARAM elements should be specified before any other content of the APPLET element. In the following example, a decorative Java applet takes two parameters. The APPLET contains an animated GIF as an alternative for non-Java browsers.

<APPLET CODE="Animate.class" WIDTH=100 HEIGHT=100>
<PARAM NAME=img1 VALUE="/images/1.jpg">
<PARAM NAME=img2 VALUE="/images/2.jpg">
<IMG SRC="animation.gif" ALT="" WIDTH=100 HEIGHT=100>
</APPLET>

[3.2] ALT

The ALT attribute can be used to give alternate text for browsers that recognize the APPLET element but do not support Java or do not have Java enabled. Authors can also give alternate content between the start and end tags of the APPLET element--a better method than using the ALT attribute since it allows authors to include HTML markup in the alternate content and also works with pre-HTML 3.2 browsers that do not support APPLET.

[3.2] CODE & CODEBASE

APPLET's CODE attribute specifies the name of the class file that contains the compiled Applet subclass. The value is relative to the url specified in the CODEBASE attribute, or to the HTML document's base url if the CODEBASE attribute is not given.

<APPLET CODE="Animate.class" WIDTH=100 HEIGHT=100>
<PARAM NAME=img1 VALUE="/images/1.jpg">
<PARAM NAME=img2 VALUE="/images/2.jpg">
<IMG SRC="animation.gif" ALT="" WIDTH=100 HEIGHT=100>
</APPLET>

[3.2] HEIGHT & WIDTH

The required WIDTH and HEIGHT attributes define the dimensions of the applet. The value may be given in pixels or as a percentage of the parent element's width or height.

[3.2] VSPACE & HSPACE

The HSPACE and VSPACE attributes allow an author to suggest horizontal gutters and vertical gutters, respectively, around the applet. The value must be in pixels and applies to both sides of the applet. Style sheets provide more flexibility in specifying the space around applets.

[3.2] NAME

"This attribute specifies a name for the applet instance, which makes it possible for applets on the same page to find (and communicate with) each other." (W3C)

[Netscape] ARCHIVE

The ARCHIVE attribute can specify a comma-separated list of archived files (either absolute urls or urls relative to the CODEBASE), allowing the browser to download many files with a single connection and hence decreasing the total download time. The standard archive format for Java files is JAR. JAR files can be created with the jar tool included with the Java Development Kit 1.1 and up.

Note that some browsers do not support the ARCHIVE attribute, so all necessary files should be available unarchived as well. Other browsers only support a single url as the ARCHIVE value.

[Netscape] MAYSCRIPT

"...permits the applet to access JavaScript. Use this attribute to determine whether or not an applet can access JavaScript on a page without your knowledge. Accessing JavaScript when the MAYSCRIPT attribute is not specified results in an exception." (Netscape 4.0)

[3.2] [Netscape] ALIGN

The ALIGN attribute specifies the alignment of the applet. The values top, middle, and bottom specify the applet's position with respect to surrounding content on its left and right.

ALIGN=middle aligns the center of the applet with the current baseline. To center the applet horizontally on the page, place the applet in a centered block, e.g.,

<P ALIGN=center><APPLET CODE="Game.class" WIDTH=300 HEIGHT=100></APPLET></P>

The other ALIGN values, left and right, specify a floating applet; the applet is placed at the left or right margin and content flows around it. To place content below the applet, use <BR CLEAR=left|right|all> as appropriate.

The vertical-align and float properties of Cascading Style Sheets provide more flexible methods of aligning applets.

[IE] DOWNLOAD

"Indicates the order of image download" Web TV 1.2 DTD.
It seems doubtful whether this attribute works under IE and Netscape.

[IE] OBJECT

The OBJECT attribute specifies a serialized (saved) representation of an applet. The CODE attribute should not be used if and only if the OBJECT attribute is specified. When the applet is deserialized, its init() method is not invoked, but its start() method is. Sun recommends restraint in using this poorly supported feature.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=secondp>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • APPLET in W3C HTML 4.0 Recommendation
  • APPLET in W3C HTML 3.2 Recommendation
  • APPLET in WDG HTML 3.2 Reference
  • APPLET in Learning HTML 3.2 by Examples
  • The APPLET Tag (JDK 1.1 Documentation)
  • The Java Tutorial
    • Using the <APPLET> Tag
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


AREA - Image Map Region

Syntax

<AREA>

Attribute Specifications

[3.2] SHAPE=[ rect | circle | poly | default ] (shape of region)
[3.2] ALT=Text (alternate text)
[3.2] COORDS=Coords (coordinates of region)
[3.2] HREF=url (linked resource)
[3.2] NOHREF (inactive region)
[4.0] TARGET=FrameTarget (frame to render link in)
[4.0] TABINDEX=Number (position in tabbing order)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string
[4.0] ONFOCUS=Script (region received focus)
[4.0] ONBLUR=Script (region lost focus)

Can Contain

Nothing

Contained in:

MAP

Description:

The AREA element defines a map region in a client-side image map. Each map region is a piece of the image with a different action when clicked.

[3.2] SHAPE & COORDS

The SHAPE and COORDS attributes of AREA specify what part of the image is included in the region. The default SHAPE value is rect, which defines a rectangular region using COORDS="left, top, right, bottom". Other SHAPE values are

  • default, which specifies the entire image;
  • circle, which specifies a circular region using COORDS="center-x, center-y, radius";
  • poly, which specifies a polygonal region using COORDS="x1, y1, x2, y2, ..., xN, yN".

Coordinate values are relative to the top left corner of the object and may be expressed as pixels or percentages. A percentage radius value for circular regions is calculated relative to the smaller of the object's width and height. If two or more regions overlap, the earliest specified region takes precedence.

[3.2] HREF & NOHREF

The HREF attribute specifies a link to another resource, such as an HTML document or a JPEG image. The TITLE attribute can be used to briefly describe the contents of the link and is rendered as a "tooltip" by some visual browsers. The boolean NOHREF attribute indicates that the region has no link.

[3.2] ALT

The required ALT attribute provides alternate text for those not loading images. Effective ALT text should generally give the function of the map region rather than a description of the region. For example, ALT="WDG Home" or ALT="Web Design Group" would be more appropriate than ALT="WDG Logo" for a map region whose link went to the WDG home page. Good ALT text is crucial to the document's accessibility for the significant portion of users who do not load images.

[4.0] TARGET

The TARGET attribute is used with frames to specify in which frame the link should be rendered. If no frame with such a name exists, the link is rendered in a new window unless overridden by the user. Special frame names begin with an underscore:

  • _blank renders the link in a new, unnamed window
  • _self renders the link in the current frame (useful for overriding a BASE TARGET)
  • _parent renders the link in the immediate FRAMESET parent
  • _top renders the link in the full, unframed window
[4.0] ACCESSKEY

The ACCESSKEY attribute specifies a single Unicode character as a shortcut key for following the link. Entities (e.g. &eacute;) may be used as the ACCESSKEY value.

[4.0] TABINDEX

The TABINDEX attribute specifies a number between 0 and 32767 to indicate the tabbing order of the map region. A region with TABINDEX=0 or no TABINDEX attribute will be visited after any elements with a positive TABINDEX. Among positive TABINDEX values, the lower number receives focus first. In the case of a tie, the element appearing first in the HTML document takes precedence.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=secondp>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

In addition to the core events common to most elements, AREA accepts the following event attributes for client-side scripting:

  • ONFOCUS, when the region receives focus;
  • ONBLUR, when the region loses focus.

More Information

  • AREA in W3C HTML 4.0 Recommendation
  • AREA in W3C HTML 3.2 Recommendation
  • AREA in WDG HTML 3.2 Reference
  • AREA in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


B - Bold Text

Syntax

<B>...</B>

Attribute Specifications

[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Can Contain

Inline elements

Contained in

Inline elements, block-level elements

Description

The B element suggests that text be rendered as bold text. In most cases, use of a phrase element such as STRONG is more appropriate since such elements express the meaning of the text more clearly.

The B element is a suitable choice for marking a structure for which no phrase element exists. For example, vectors in mathematics have no structural element in HTML 4.0, but bold text is often an appropriate visual rendering:

If two vectors <B CLASS=vector>v</B> and <B CLASS=vector>w</B> are orthogonal, we write <B CLASS=vector>v</B> &perp; <B CLASS=vector>w</B>.

Note the use of the CLASS attribute to add structural significance to the B elements. This allows greater flexibility when applying style sheets to different kinds of bold text.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=secondp>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • B in W3C HTML 4.0 Recommendation
  • B in W3C HTML 3.2 Recommendation
  • B in HTML 2.0 Standard
  • B in WDG HTML 3.2 Reference
  • B in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


BASE - Document Base url

Syntax

<BASE>

Attribute Specifications

[3.2] HREF=url (base url reference)
[4.0] TARGET=FrameTarget (frame to render links in)

Contained in

HEAD

Description

The BASE element defines the document's base url for resolving relative urls contained within the document. A document cannot contain more than one BASE element. When present, the BASE element must appear in the HEAD, prior to any elements that include a partial url.

[3.2] HREF

BASE's HREF attribute, required in HTML 4.0 Strict, specifies the absolute url used to resolve relative urls. See Using Relative URLs for more details on using and resolving relative urls.

Most Web pages do not require an explicit base url since the document's url is a suitable base. An explicit base url is only required when the same document may be accessed at different urls or when the document has no url (e.g., sending an HTML document by e-mail).

[4.0] TARGET

The TARGET attribute is used with frames to specify in which frame all links in document should be rendered by default. The target frame specified by BASE can be overridden by a given link using the link's TARGET attribute.

If no frame with the specified target name exists, the links are rendered in a new window unless overridden by the user. Special frame names begin with an underscore:

  • _blank renders the links in a new, unnamed window
  • _self renders the links in the current frame
  • _parent renders the links in the immediate FRAMESET parent
  • _top renders the links in the full, unframed window

More Information

  • BASE in W3C HTML 4.0 Recommendation
  • BASE in W3C HTML 3.2 Recommendation
  • BASE in HTML 2.0 Standard
  • BASE in WDG HTML 3.2 Reference
  • BASE in Learning HTML 3.2 by Examples
  • RFC 1808: Relative Uniform Resource Locators
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


BASEFONT - Base Font Change

Syntax

<BASEFONT>

Attribute Specifications

[3.2] COLOR=Color (font color adjustment)
[3.2] SIZE=CDATA (font size adjustment)
[4.0] FACE=CDATA (font face adjustment)
[4.0] ID=string
[4.0] CLASS=string
[4.0] LANG=Language (i.e. RU - Russian)

Contents

Empty

Contained in

Inline elements, block-level elements except PRE

Description

The BASEFONT element, deprecated in HTML 4.0 in favor of style sheets, allows authors to suggest rudimentary font changes. Use of the BASEFONT element brings the same usability and accessibility problems as FONT, as discussed in the article What's Wrong With FONT?

Unlike FONT, BASEFONT's changes affect the base font, and so apply to all content following the BASEFONT element except for headings. However, most browsers fail to apply changes in the base font size and color to TABLEs.

[3.2] SIZE

BASEFONT's required SIZE attribute specifies the font size to use on a browser-dependent scale of 1 to 7, with the default being 3.

[3.2] COLOR & FACE

The poorly supported COLOR and FACE attributes suggest a font color and face, respectively. Style sheets are better supported and more flexible than BASEFONT's COLOR and FACE attributes.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=secondp>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

More Information

  • BASEFONT in W3C HTML 4.0 Recommendation
  • BASEFONT in W3C HTML 3.2 Recommendation
  • BASEFONT in WDG HTML 3.2 Reference
  • BASEFONT in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


BDO - BiDi Override

Syntax

<BDO>...</BDO>

Attribute Specifications

[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements

Contained in
Inline elements, block-level elements
Description

The BDO element overrides the bidirectional algorithm for the enclosed text. Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, occasionally authors must override the bidirectional algorithm and specify the directionality of the text. One such case is when Hebrew characters are stored in visual order, where the first character of a word is after the second character. Unicode assumes that the characters are stored in logical order, where the first character of a word is before the second character, so the bidirectional algorithm would result in a rendering with the first character incorrectly to the left of the second character.

The BDO element requires the DIR attribute to specify the directionality of the enclosed text. If a document contains Hebrew characters stored in visual order, one should use <BDO DIR=ltr>text</BDO> to force the proper presentation for that text.

Authors may alternatively override the bidirectional algorithm using the Unicode character &#x202D; to force left-to-right directionality or &#x202E; to force right-to-left directionality. The character &#x202C; ends the overriding of the algorithm. These characters should not be used in combination with the DIR attribute.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=secondp>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • BDO in W3C HTML 4.0 Recommendation
  • Introduction to the bidirectional algorithm
  • Unicode
  • Middle Eastern Language Issues
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


BIG - Large Font

Syntax

<BIG>...</BIG>

Attribute Specifications

[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements

Contained in

Inline elements, block-level elements except PRE

Description

The BIG element suggests that text be rendered in a larger font. In most cases, use of a structural element such as STRONG or a heading (e.g., H3) is more appropriate since these elements express the meaning of the text more clearly. One can suggest that STRONG text be rendered in a larger font with the following Cascading Style Sheet:

STRONG { font-size: larger }

Most browsers support nested BIG elements, but authors should be wary of making significant changes to the font size. Different users have different font sizes, eyesight, and window sizes. Large changes in font size may look right to the author but ridiculous to some users.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=secondp>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • BIG in W3C HTML 4.0 Recommendation
  • BIG in W3C HTML 3.2 Recommendation
  • BIG in WDG HTML 3.2 Reference
  • BIG in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


HTML 4.0 Block-Level Elements

Most HTML 4.0 elements permitted within the BODY are classified as either block-level elements or inline elements. Block-level elements typically contain inline elements and other block-level elements. When rendered visually, block-level elements usually begin on a new line.

The following are defined as block-level elements in HTML 4.0:

  • ADDRESS - Address
  • BLOCKQUOTE - Block quotation
  • CENTER - Centered block
  • DIR - Directory list
  • DIV - Generic block-level container
  • DL - Definition list
  • FIELDSET - Form control group
  • FORM - Interactive form
  • H1 - Level-one heading
  • H2 - Level-two heading
  • H3 - Level-three heading
  • H4 - Level-four heading
  • H5 - Level-five heading
  • H6 - Level-six heading
  • HR - Horizontal rule
  • ISINDEX - Input prompt
  • MENU - Menu list
  • NOFRAMES - Frames alternate content
  • NOSCRIPT - Alternate script content
  • OL - Ordered list
  • P - Paragraph
  • PRE - Preformatted text
  • TABLE - Table
  • UL - Unordered list

The following elements may also be considered block-level elements since they may contain block-level elements:

  • DD - Definition description
  • DT - Definition term
  • FRAMESET - Frameset
  • LI - List item
  • TBODY - Table body
  • TD - Table data cell
  • TFOOT - Table foot
  • TH - Table header cell
  • THEAD - Table head
  • TR - Table row

The following elements may be used as either block-level elements or inline elements. If used as inline elements (e.g., within another inline element or a P), these elements should not contain any block-level elements.

  • APPLET - Java applet
  • BUTTON - Button
  • DEL - Deleted text
  • IFRAME - Inline frame
  • INS - Inserted text
  • MAP - Image map
  • OBJECT - Object
  • SCRIPT - Client-side script

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


BLOCKQUOTE - Block Quotation

Syntax

<BLOCKQUOTE>...</BLOCKQUOTE>

Attribute Specifications

[4.0] CITE=url (source of quotation)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

  • In HTML 4.0 Strict: one or more block-level elements or SCRIPT
  • In HTML 4.0 Transitional: inline elements or block-level elements

Contained in

APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

Description

The BLOCKQUOTE element defines a block quotation. Unlike inline quotations, block quotations may contain block-level elements such as P and TABLE, but BLOCKQUOTE may not be contained within a paragraph or inline element.

[4.0] CITE

The optional CITE attribute of BLOCKQUOTE provides the url of the source of the quotation. This attribute, not widely supported among browsers, allows readers to verify the authenticity of the quotation and also find related information.

The content of the BLOCKQUOTE element should be contained within other block-level elements, typically P. The following example features a quotation that includes multiple paragraphs and its own block quotation:

<BLOCKQUOTE CITE="http://www.bibliomania.com/Fiction/joyce/ulysses/telemac.html">
<P>He pointed his finger in friendly jest and went over to the parapet, laughing to himself. Stephen Dedalus stepped up, followed him wearily half way and sat down on the edge of the gunrest, watching him still as he propped his mirror on the parapet, dipped the brush in the bowl and lathered cheeks and neck.</P>
<P>Buck Mulligan's gay voice went on.</P>
<BLOCKQUOTE><P>My name is absurd too: Malachi Mulligan, two dactyls. But it has a Hellenic ring, hasn't it? Tripping and sunny like the buck himself. We must go to Athens. Will you come if I can get the aunt to fork out twenty quid?</P></BLOCKQUOTE>
</BLOCKQUOTE>

Authors should not use BLOCKQUOTE for unquoted material just to achieve a block indentation in common visual browsers. With the rise of style sheets, such misuse of BLOCKQUOTE will become less reliable while also reducing the author's ability to fully exploit the power of style sheets. Cascading Style Sheets provide the margin-left property to indent a block.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=secondp>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • BLOCKQUOTE in W3C HTML 4.0 Recommendation
  • BLOCKQUOTE in W3C HTML 3.2 Recommendation
  • BLOCKQUOTE in HTML 2.0 Standard
  • BLOCKQUOTE in WDG HTML 3.2 Reference
  • BLOCKQUOTE in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


BODY - Document Body

Syntax

<BODY>...</BODY>

Attribute Specifications

[3.2] BACKGROUND=url (background image for document)
[3.2] BGCOLOR=Color (background color for document)
[3.2] TEXT=Color (text color for document)
[3.2] LINK=Color (link color for document)
[3.2] VLINK=Color (visited link color for document)
[3.2] ALINK=Color (active link color for document)
[4.0] Script (document has been loaded)
[4.0] Script (document has been exited)
[IE] LEFTMARGIN=Pixels (Sets the left margin of the web page)
[IE] RIGHTMARGIN=Pixels (Sets the right margin of the web page)
[IE] TOPMARGIN=Pixels (Sets the top margin of the web page)
[IE] BOTTOMMARGIN=Pixels (Sets the bottom margin of the web page)
[IE] BGPROPERTIES=[FIXED] (Sets the Background property to fixed or scrolling)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

  • In HTML 4.0 Strict: one or more block-level elements or SCRIPT, INS, DEL
  • In HTML 4.0 Transitional: inline elements, block-level elements, INS, DEL

Contained in

  • In HTML 4.0 Strict or Transitional: HTML
  • In HTML 4.0 Frameset: NOFRAMES

Description

The BODY element contains the document body. BODY is required in non-frames documents, but its start and end tags are always optional. In frames documents, BODY must be contained within the NOFRAMES element, if NOFRAMES is used.

The BODY element contains the document's content. The content should be contained within block-level elements or SCRIPT elements, though HTML 4.0 Transitional also allows inline elements directly within BODY.

[3.2] BGCOLOR, ALINK, VLINK, TEXT & LINK

BODY takes a number of attributes for specifying the background and colors of the document on visual browsers. These attributes are deprecated in HTML 4.0 in favor of style sheets, which provide greater flexibility in suggesting the presentation of a document. BGCOLOR suggests a background color, TEXT suggests a text color, LINK suggests a link color, VLINK suggests a visited link color, and ACTIVE suggests an active link color (when the link is selected). If one of these attributes is given, then all of them should be included to ensure that the user's chosen colors do not interfere with those suggested in the <BODY> tag. Authors should not rely on the specified colors being used since browsers allow these colors to be overridden by the user.

[3.2] BACKGROUND

The BACKGROUND attribute suggests a background image for tiling on the document canvas. To help ensure a readable document, the BGCOLOR, TEXT, LINK, VLINK, and ALINK attributes should always be included when BACKGROUND is given. The BGCOLOR will be used for those not loading images.

Style sheets allow more flexibility in suggesting a background image, including the ability to specify the position of the image, how the image is tiled, and whether the image should scroll with the document.

In addition to the core events common to most elements, BODY accepts the following event attributes for client-side scripting:

  • ONLOAD, when the document has been loaded;
  • ONUNLOAD, when the document is exited.

[IE] TOP, LEFT, RIGHT, BOTTOMMARGIN

Each margin respectivly sets a border from which the web page is rendered. For example, setting all borders to 20 pixels would result in the entire web page being rendered with a 20 pixel border or buffer surrounding it.

[IE] BGPROPERTIES

Setting this attribute to "fixed" causes the background graphic to not scroll with the foreground text.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=secondp>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • BODY in W3C HTML 4.0 Recommendation
  • BODY in W3C HTML 3.2 Recommendation
  • BODY in HTML 2.0 Standard
  • BODY in WDG HTML 3.2 Reference
  • BODY in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


BR - Line Break

Syntax

<BR>

Attribute Specifications

[3.2] CLEAR=[ left | all | right | none ] (clear floating objects)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Empty

Contained in

Inline elements, block-level elements

Description

The BR element forces a break in the current line of text. BR can be useful in formatting addresses within the ADDRESS element, but it is often misused to break lines of text in a paragraph or table cell when it looks "nice" to the author. This usually results in an awkward presentation when viewed with a font size other than that used by the author.

[3.2] CLEAR

The CLEAR attribute of BR is used to move below floating objects (typically images or tables). In the following example, the second paragraph should be rendered below the floating image:

<P><IMG SRC="toronto.jpg" ALIGN=left ALT="" TITLE="Toronto's CN Tower">Toronto is the largest city in Canada and the fourth largest in North America.</P>
<BR CLEAR=left>
<P>The city is highly multicultural, with over 80 ethnic communities from Africa, Asia, and Europe...

Style sheets provide more flexibility in controlling text flow around objects and eliminate the need to use BR for this purpose since CSS1's clear property can be applied to any element (such as the second paragraph in the preceding example).

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=secondp>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • BR in W3C HTML 4.0 Recommendation
  • BR in W3C HTML 3.2 Recommendation
  • BR in HTML 2.0 Standard
  • BR in WDG HTML 3.2 Reference
  • BR in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


BUTTON - Button

Syntax

<BUTTON>...</BUTTON>

Attribute Specifications

[4.0] NAME=CDATA (key in submitted form)
[4.0] VALUE=CDATA (value in submitted form)
[4.0] TYPE=[ submit | reset | button ] (type of button)
[4.0] DISABLED (disable button)
[4.0] ACCESSKEY=Character (shortcut key)
[4.0] TABINDEX=Number (position in tabbing order)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string
[4.0] ONFOCUS=Script (element received focus)
[4.0] ONBLUR=Script (element lost focus)

Contents

  • Inline elements except A, INPUT, SELECT, TEXTAREA, LABEL, BUTTON, and IFRAME
  • Block-level elements except FORM, ISINDEX, and FIELDSET

Contained in

Block-level elements, inline elements except BUTTON.

Description

The BUTTON element defines a submit button, reset button, or push button. Authors can also use INPUT to specify these buttons, but the BUTTON element allows richer labels, including images and emphasis. However, BUTTON is new in HTML 4.0 and poorly supported among current browsers, so INPUT is a more reliable choice at this time.

[4.0] TYPE

The TYPE attribute of BUTTON specifies the kind of button and takes the value submit (the default), reset, or button.

[4.0] NAME & VALUE

The NAME and VALUE attributes determine the name/value pair sent to the server when a submit button is pushed. These attributes allow authors to provide multiple submit buttons and have the form handler take a different action depending on the submit button used.

Some examples of BUTTON follow:

  • <BUTTON NAME=submit VALUE=modify ACCESSKEY=M>Modify information</BUTTON>
    <BUTTON NAME=submit VALUE=continue ACCESSKEY=C>Continue with application</BUTTON>
  • <BUTTON ACCESSKEY=S>Submit <IMG SRC="checkmark.gif" ALT="&#10004;"></BUTTON>
    <BUTTON TYPE=reset ACCESSKEY=R>Reset <IMG SRC="x.gif" ALT="&#10008;"></BUTTON>
  • <BUTTON TYPE=button ID=toggler ONCLICK="toggle()" ACCESSKEY=H>Hide <strong>non-strict</strong> attributes</BUTTON>
[4.0] ACCESSKEY

The ACCESSKEY attribute, used throughout the preceding examples, specifies a single Unicode character as a shortcut key for pressing the button. Entities (e.g. &eacute;) may be used as the ACCESSKEY value.

[4.0] DISABLED

The boolean DISABLED attribute makes the BUTTON element unavailable. The user is unable to push the button, the button cannot receive focus, and the button is skipped when navigating the document by tabbing.

[4.0] TABINDEX

The TABINDEX attribute specifies a number between 0 and 32767 to indicate the tabbing order of the button. A BUTTON element with TABINDEX=0 or no TABINDEX attribute will be visited after any elements with a positive TABINDEX. Among positive TABINDEX values, the lower number receives focus first. In the case of a tie, the element appearing first in the HTML document takes precedence.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=secondp>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.
[4.0] ONFOCUS & ONBLUR

The BUTTON element also takes a number of attributes to specify client-side scripting actions for various events.

  • ONFOCUS, when the element receives focus;
  • ONBLUR, when the element loses focus.

More Information

  • BUTTON in W3C HTML 4.0 Recommendation
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


CAPTION - Table Caption


CENTER - Centered Block

Syntax

<CENTER>...</CENTER>

Attribute Specifications

[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements, block-level elements

Contained in

APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

Description

The CENTER element defines a block whose contents are centered horizontally on visual browsers. <CENTER> is a shorthand for <DIV ALIGN=center>, though CENTER is slightly better supported among browsers. Both methods of centering are deprecated in favor of style sheets.

CENTER is still useful for centering tables since many browsers lack support for <TABLE ALIGN=center> as well as the method of centering tables with Cascading Style Sheets (setting margin-left and margin-right to auto). An example follows:

<CENTER>
  <TABLE>
    <TR ALIGN=center>
      <TH SCOPE=col>Name</TH>
      <TH SCOPE=col>Age</TH>
      <TH SCOPE=col>Country</TH>
    </TR>
    <TR ALIGN=center>
      <TD>Liam Quinn</TD>
      <TD>20</TD>
      <TD>Canada</TD>
    </TR>
  </TABLE>
</CENTER>

Note that CENTER only centers the table as a whole, not the contents of each table cell. The preceding example uses the ALIGN attribute of TR to center the contents of each cell. The text-align property of Cascading Style Sheets provides greater flexibility in suggesting horizontal alignment.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=secondp>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • CENTER in W3C HTML 4.0 Recommendation
  • CENTER in W3C HTML 3.2 Recommendation
  • CENTER in WDG HTML 3.2 Reference
  • CENTER in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


CITE - Citation

Syntax

<CITE>...</CITE>

Attribute Specifications

[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements

Contained in

Inline elements, block-level elements

Description

The CITE element is used to markup citations, such as titles of magazines or newspapers, ship names, references to other sources, and quotation attributions. Visual browsers typically render CITE as italic text, but authors can suggest a rendering using style sheets. Since CITE is a structural element, it carries meaning, making it preferable to font style elements such as I when marking up citations.

Example:

<CITE>The Toronto Star</CITE> gave its review of the movie <CITE>Titanic</CITE> yesterday.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=secondp>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • CITE in W3C HTML 4.0 Recommendation
  • CITE in W3C HTML 3.2 Recommendation
  • CITE in HTML 2.0 Standard
  • CITE in WDG HTML 3.2 Reference
  • CITE in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


CODE - Computer Code

Syntax

<CODE>...</CODE>

Attribute Specifications

[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements

Contained in

Inline elements, block-level elements

Description

The CODE element denotes computer code. Visual browsers typically render CODE as monospaced text, but authors can suggest a rendering using style sheets. Since CODE is a structural element, it carries meaning, making it preferable to font style elements such as TT when marking up computer code.

Since spacing is often important when presenting computer code, the PRE element can be useful as a container for CODE elements. When used within other containers, a CODE element has multiple spaces collapsed. The following example uses CODE within PRE:

<PRE><CODE>
class HelloWorld {
  public static void main(String[] args) {
    System.out.println("Hello World!");
  }
}
</CODE></PRE>

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=secondp>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • CODE in W3C HTML 4.0 Recommendation
  • CODE in W3C HTML 3.2 Recommendation
  • CODE in HTML 2.0 Standard
  • CODE in WDG HTML 3.2 Reference
  • CODE in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


COL - Table Column

Syntax

<COL>

Attribute Specifications

[3.2] ALIGN=[ left | center | right | justify | char ] (horizontal alignment of cells)
[4.0] VALIGN=[ top | middle | bottom | baseline ] (vertical alignment of cells)
[4.0] SPAN=Number (number of columns)
[4.0] WIDTH=MultiLength (width of each column)
[4.0] CHAR=Character (alignment character for cells)
[4.0] CHAROFF=Length (alignment character offset)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Empty

Contained in

COLGROUP, TABLE

Description

The COL element defines attributes common to a table column. If used, COL must be after the optional CAPTION and before the optional THEAD in the TABLE. Unlike COLGROUP, COL does not group columns structurally; it merely defines attributes common to all cells in one or more columns.

COL also takes a number of presentational attributes, many of which cannot be completely replaced by style sheets. Since few browsers support COL, authors may wish to specify these attributes on the TD or TH elements instead.

[4.0] SPAN

COL's SPAN attribute defines the number of columns that will share the COL element's other attributes; the default value is 1. COL may be contained directly in the TABLE element or it may be contained within a COLGROUP. If COL is in a COLGROUP, the COL's attributes override those of the COLGROUP for the columns spanned by COL.

Example

The next example uses COL elements within COLGROUPs to assign a different CLASS to each column:

<TABLE SUMMARY="This table gives the character entity reference,
                decimal character reference, and hexadecimal character
                reference for 8-bit Latin-1 characters, as well as the
                rendering of each in your browser.">
  <COLGROUP CLASS="character-description">
  <COLGROUP>
    <COL CLASS=entity>
    <COL SPAN=2 CLASS=numeric>
  <COLGROUP>
    <COL CLASS="entity-rendering">
    <COL CLASS="decimal-rendering">
    <COL CLASS="hex-rendering">
  <THEAD>
    <TR>
      <TH SCOPE=col ROWSPAN=2>Character</TH>
      <TH SCOPE=col ROWSPAN=2>Entity</TH>
      <TH SCOPE=col ROWSPAN=2>Decimal</TH>
      <TH SCOPE=col ROWSPAN=2>Hex</TH>
      <TH SCOPE=colgroup COLSPAN=3>Rendering in Your Browser</TH>
    </TR>
    <TR>
      <TH SCOPE=col>Entity</TH>
      <TH SCOPE=col>Decimal</TH>
      <TH SCOPE=col>Hex</TH>
    </TR>
  </THEAD>
  <TBODY>
    <TR>
      <TD SCOPE=row>non-breaking space</TD>
      <TD>&amp;nbsp;</TD>
      <TD>&amp;#160;</TD>
      <TD>&amp;#xA0;</TD>
      <TD>&nbsp;</TD>
      <TD>&#160;</TD>
      <TD>&#xA0;</TD>
    </TR>
    ...
  </TBODY>
</TABLE>

[4.0] WIDTH

The WIDTH attribute specifies a width for each column spanned by COL. The value must be a number in pixels, a percentage of the table width, or a relative length expressed as i* where i is an integer. A column with WIDTH="3*" will be allotted three times the width of a column with WIDTH="1*". The value 0* is equivalent to the minimum width necessary for the column's contents.

[3.2] ALIGN, CHAR & CHAROFF

The ALIGN attribute specifies the horizontal alignment for each cell in the spanned columns. Possible values are left, center, right, justify, and char. ALIGN=char aligns a cell's contents on the character given in the CHAR attribute. The default value for the CHAR attribute is the decimal point of the current language--a period in English. The CHAROFF attribute specifies the offset to the first occurrence of the alignment character. The attribute's value is a number in pixels or a percentage of the cell's width; CHAROFF="50%" centers the alignment character horizontally in a cell.

[4.0] VALIGN

The VALIGN attribute specifies the vertical position of a cell's contents. Possible values are:

  • top, which positions data at the top of the cell;
  • middle, the default value, which centers the cell data vertically;
  • bottom, which positions data at the bottom of the cell;
  • baseline, which specifies that the first line of each cell in the row with ALIGN=baseline should occur on a common baseline.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=secondp>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • COL in W3C HTML 4.0 Recommendation
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


COLGROUP - Table Column Group

Syntax

<COLGROUP>...</COLGROUP>

Attribute Specifications

[4.0] [IE] SPAN=Number (number of columns in group)
[4.0] [IE] WIDTH=MultiLength (width of each column)
[4.0] [IE] ALIGN=[ left | center | right | justify | char ] (horizontal alignment of cells in group)
[4.0] [IE] CHAR=Character (alignment character for cells)
[4.0] [IE] CHAROFF=Length (alignment character offset)
[4.0] [IE] VALIGN=[ top | middle | bottom | baseline ] (vertical alignment of cells in group)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Zero or more COL elements

Contained in

TABLE

Description

The COLGROUP element defines a column group in a table. If used, COLGROUP must be after the optional CAPTION and before the optional THEAD in the TABLE. The structural divisions defined by COLGROUP allow authors to easily suggest a presentation for groups of columns through style sheets.

[4.0] [IE] SPAN

COLGROUP's SPAN attribute defines the number of columns in the group; the default value is 1. A number of other attributes are permitted on COLGROUP, and these are shared among the cells of the group. COLGROUP may contain COL elements that define attributes for the cells of individual columns, overriding attributes defined for the column group. The SPAN attribute should not be used if the COLGROUP contains any COL elements.

Example

The next example features three column groups to structurally divide the table into three parts. The first part is a single column that gives the description of a character. The second part consists of three columns giving different ways of representing the character in HTML. The third part consists of three columns with renderings of the character in the user's browser.

<TABLE SUMMARY="This table gives the character entity reference,
                decimal character reference, and hexadecimal character
                reference for 8-bit Latin-1 characters, as well as the
                rendering of each in your browser.">
  <COLGROUP>
  <COLGROUP SPAN=3>
  <COLGROUP SPAN=3>
  <THEAD>
    <TR>
      <TH SCOPE=col ROWSPAN=2>Character</TH>
      <TH SCOPE=col ROWSPAN=2>Entity</TH>
      <TH SCOPE=col ROWSPAN=2>Decimal</TH>
      <TH SCOPE=col ROWSPAN=2>Hex</TH>
      <TH SCOPE=colgroup COLSPAN=3>Rendering in Your Browser</TH>
    </TR>
    <TR>
      <TH SCOPE=col>Entity</TH>
      <TH SCOPE=col>Decimal</TH>
      <TH SCOPE=col>Hex</TH>
    </TR>
  </THEAD>
  <TBODY>
    <TR>
      <TD SCOPE=row>non-breaking space</TD>
      <TD>&amp;nbsp;</TD>
      <TD>&amp;#160;</TD>
      <TD>&amp;#xA0;</TD>
      <TD>&nbsp;</TD>
      <TD>&#160;</TD>
      <TD>&#xA0;</TD>
    </TR>
    ...
  </TBODY>
</TABLE>

In place of the <COLGROUP SPAN=3> tag in the preceding example, a COLGROUP with three COL elements could have been used:

<COLGROUP>
  <COL CLASS=entity>
  <COL CLASS=decimal>
  <COL CLASS=hex>
</COLGROUP>

Here we have used the CLASS attribute to distinguish the individual columns of the group, allowing us to easily suggest different presentations for the columns through style sheets.

COLGROUP also takes a number of presentational attributes, many of which cannot be completely replaced by style sheets. Since few browsers support COLGROUP, authors may wish to specify these attributes on the TD or TH elements instead.

[4.0] [IE] WIDTH

The WIDTH attribute specifies a width for each column in the group. The value must be a number in pixels, a percentage of the table width, or a relative length expressed as i* where i is an integer. A column with WIDTH="3*" will be allotted three times the width of a column with WIDTH="1*". The value 0* is equivalent to the minimum width necessary for the column's contents.

[4.0] [IE] ALIGN, CHAR & CHAROFF

The ALIGN attribute specifies the horizontal alignment for each cell in the column group. Possible values are left, center, right, justify, and char. ALIGN=char aligns a cell's contents on the character given in the CHAR attribute. The default value for the CHAR attribute is the decimal point of the current language--a period in English. The CHAROFF attribute specifies the offset to the first occurrence of the alignment character. The attribute's value is a number in pixels or a percentage of the cell's width; CHAROFF="50%" centers the alignment character horizontally in a cell.

[4.0] [IE] VALIGN

The VALIGN attribute specifies the vertical position of a cell's contents. Possible values are:

  • top, which positions data at the top of the cell;
  • middle, the default value, which centers the cell data vertically;
  • bottom, which positions data at the bottom of the cell;
  • baseline, which specifies that the first line of each cell in the row with ALIGN=baseline should occur on a common baseline.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=secondp>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • COLGROUP in W3C HTML 4.0 Recommendation
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


DD - Definition Description

Syntax

<DD>...</DD>

Attribute Specifications

[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements, block-level elements

Contained in

DL

Description

The DD element provides the definition of a term in a definition list. The closing tag for DD is optional, but its use prevents common browser bugs with style sheets.

DD may contain block-level elements such as P, H2, TABLE, and DL. This allows definition lists to be nested, as in the following example:

Example

<DL>

  <DT><A NAME="spanning-tree">Spanning tree</A></DT>
  <DD>
    <P>
      A spanning tree of a graph is a <A HREF="#tree">tree</A>
      that contains all the vertices of the graph. There are two
      main types of spanning trees:
    </P>

    <DL>
      <DT>BFS spanning tree</DT>
      <DD>
        A spanning tree formed by a breadth-first search on the graph.
      </DD>
      <DT>DFS spanning tree</DT>
      <DD>
        A spanning tree formed by a depth-first search on the graph.
      </DD>
    </DL>
  </DD>

  <DT><A NAME=tree>Tree</A></DT>
  <DD>
    <P>
      A tree is a connected, undirected graph without cycles.
    </P>
  </DD>

</DL>

A DD element should generally be preceded by a DT element that gives the term defined by the DD. A single definition term may have multiple definitions associated with it, and a single definition may have multiple terms.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=secondp>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • DD in W3C HTML 4.0 Recommendation
  • DD in W3C HTML 3.2 Recommendation
  • DD in HTML 2.0 Standard
  • DD in WDG HTML 3.2 Reference
  • DD in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


DEL - Deleted Text

Syntax

<DEL>...</DEL>

Attribute Specifications

[4.0] CITE=url (reason for deletion)
[4.0] DATETIME=Datetime (date and time of deletion)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements, block-level elements

Contained in

Inline elements, block-level elements

Description

The DEL element contains content that has been deleted. This element is useful in marking changes from one version of a document to the next. Through style sheets, authors can suggest an appropriate rendering, such as not displaying the deleted content or rendering the text with a strike-through style.

DEL may be used as either a block-level element or an inline element. If used as an inline element (e.g., within a P), then DEL may not contain any block-level elements.

[4.0] CITE

The optional CITE attribute of DEL gives a url with information on why the content was deleted. A brief explanation for the deletion can be given with the TITLE attribute, which may be rendered as a "tooltip" by some browsers.

[4.0] DATETIME

The optional DATETIME attribute specifies the date and time of the deletion. The value is case-sensitive and of the form YYYY-MM-DDThh:mm:ssTZD. See the values section for a full explanation of this format.

Example

<DEL CITE="http://www.w3.org/TR/REC-html40/appendix/changes.html#h-A.1.3" DATETIME="1997-12-19T00:00:00-05:00" TITLE="XMP is obsolete"><P>The XMP element contains preformatted text in which markup other than an end tag is treated as literal text.</P></DEL>

Since DEL is poorly supported among browsers, authors may wish to use a font style element such as STRIKE (deprecated in HTML 4.0) to attempt to convey the meaning of DEL to non-supporting visual browsers. The previous example could also be marked up as follows:

<DEL CITE="http://www.w3.org/TR/REC-html40/appendix/changes.html#h-A.1.3" DATETIME="1997-12-19T00:00:00-05:00" TITLE="XMP is obsolete"><P><STRIKE>The XMP element is used for preformatted text in which markup other than an end tag is treated as literal text.</STRIKE></P></DEL>

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=secondp>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • DEL in W3C HTML 4.0 Recommendation
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


DFN - Defined Term

Syntax

<DFN>...</DFN>

Attribute Specifications

[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements

Contained in

Inline elements, block-level elements

Description

The DFN element denotes the defining instance of a term. Visual browsers typically render DFN as italic text, but authors can suggest a rendering using style sheets. Since DFN is a structural element, it carries meaning, making it preferable to font style elements such as I when marking up the defining instance of a term.

Netscape Navigator does not support the DFN element. In most cases, the lack of support is not a significant problem; concerned authors could nest the DFN element within an I element or another font style element.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=secondp>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • DFN in W3C HTML 4.0 Recommendation
  • DFN in W3C HTML 3.2 Recommendation
  • DFN in WDG HTML 3.2 Reference
  • DFN in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


DIR - Directory List

Syntax

<DIR>...</DIR>

Attribute Specifications

[3.2] [IE] [Netscape] COMPACT (compact display)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

One or more LI elements that cannot contain block-level elements

Contained in

APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

Description

The DIR element defines a directory list. The element contains one or more LI elements that define the actual items of the list. The LI elements must not contain block-level elements, which prevents DIRs from being nested.

[3.2] [IE] [Netscape] COMPACT

The COMPACT attribute suggests that visual browsers render the list compactly, perhaps with reduced spacing between items. This attribute is not well supported among browsers.

DIR is deprecated in HTML 4.0 in favor of UL.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=secondp>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • DIR in W3C HTML 4.0 Recommendation
  • DIR in W3C HTML 3.2 Recommendation
  • DIR in HTML 2.0 Standard
  • DIR in WDG HTML 3.2 Reference
  • DIR in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


DIV - Generic Block-level Container

Syntax

<DIV>...</DIV>

Attribute Specifications

[3.2] ALIGN=[ left | center | right | justify ] (horizontal alignment)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements, block-level elements

Contained in

APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

Description

The DIV element defines a generic block-level container, allowing authors to provide style or language information to blocks of content. The element may contain any inline or block-level element, including another DIV.

The DIV element is most useful in combination with the CLASS, ID, or LANG attributes. For example, a navigation bar could be contained within a DIV marked as CLASS=navbar, allowing the author to use style sheets to easily change the background of all navigation bars on a site, or to eliminate navigation bars when printing.

[3.2] ALIGN

The deprecated ALIGN attribute suggests the horizontal alignment for the content of the division on visual browsers. Possible values are left, right, center, and justify. <CENTER> is a slightly better-supported alias for <DIV ALIGN=center>, though both methods of centering are deprecated in favor of style sheets, which provide greater flexibility in suggesting alignment.

SPAN is a text-level equivalent of DIV for use within paragraphs and inline elements.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=secondp>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • DIV in W3C HTML 4.0 Recommendation
  • DIV in W3C HTML 3.2 Recommendation
  • DIV in WDG HTML 3.2 Reference
  • DIV in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


DL - Definition List

Syntax

<DL>...</DL>

Attribute Specifications

[4.0] COMPACT (compact display)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

One or more DT or DD elements

Contained in

APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

Description

The DL element defines a definition list. An entry in the list is created using the DT element for the term being defined and the DD element for the definition of the term.

A definition list can have multiple terms for a given definition as well as multiple definitions for a given term. Authors can also give a term without a corresponding definition, and vice versa, but such a structure rarely makes sense.

An example follows:

<DL>

  <DT>Block-level elements</DT>
  <DD>
    <P>
      In HTML, block-level elements may generally contain
      inline elements and other block-level elements. They are
      usually formatted differently than inline elements,
      typically on a new line in visual browsers.
    </P>
  </DD>

  <DT>Inline elements</DT>
  <DT>Text-level elements</DT>
  <DD>
    <P>
      Inline (or text-level) elements generally only contain
      character data and other inline elements.
    </P>
  </DD>

</DL>

The DL element can be adapted for use with structures that are not strict terms and definitions, a practice that is justified when other HTML elements cannot adequately describe a structure. Some examples follow:

  • <H1>Community Calendar</H1>

<DL CLASS=calendar>

  <DT>March 8</DT>
  <DD>
    The Symphony Orchestra presents <CITE>A Rising Star</CITE>
    at the Anderson Center. Call 555-1234 for details.
  </DD>

  <DT>March 10</DT>
  <DD>
    Bereaved Families Support Night, 7:00 to 9:00 at
    523 Main <ABBR TITLE=Street>St.</ABBR>
  </DD>

</DL>
  • <DL CLASS=play>

  <DT>Brutus</DT>
  <DD CLASS="role Brutus">
    <P>
      I kiss thy hand, but not in flattery, Caesar;<BR>
      Desiring thee that Publius Cimber may<BR>
      Have an immediate freedom of repeal.
    </P>
  </DD>

  <DT>Caesar</DT>
  <DD CLASS="role Caesar">
    <P>
      What, Brutus!
    </P>
  </DD>

  <DT>Cassius</DT>
  <DD CLASS="role Cassius">
    <P>
      Pardon, Caesar; Caesar, pardon:<BR>
      As low as to thy foot doth Cassius fall,<BR>
      To beg enfranchisement for Publius Cimber.
    </P>
  </DD>

</DL>

Note the use of the CLASS attribute in the preceding examples. This allows the author to easily suggest, through style sheets, a distinguishing presentation for different kinds of definition lists.

[4.0] COMPACT

In addition to the common attributes shared by most elements, DL takes a COMPACT attribute. This attribute, deprecated in HTML 4.0 and poorly supported among browsers, suggests that visual browsers render the list compactly, perhaps with reduced spacing between items.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=secondp>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • DL in W3C HTML 4.0 Recommendation
  • DL in W3C HTML 3.2 Recommendation
  • DL in HTML 2.0 Standard
  • DL in WDG HTML 3.2 Reference
  • UL in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


DOCTYPE - Document Type Declaration

Each HTML document must begin with a document type declaration that declares which version of HTML the document adheres to. HTML 4.0 comes in three flavors, each with a different DOCTYPE:

HTML 4.0 Strict

HTML 4.0 Strict is a trimmed down version of HTML 4.0 that emphasizes structure over presentation. Deprecated elements and attributes (including most presentational attributes), frames, and link targets are not allowed in HTML 4.0 Strict. By writing to HTML 4.0 Strict authors can achieve accessible, structurally rich documents that easily adapt to style sheets and different browsing situations. However, since many browsers lack full support for style sheets, HTML 4.0 Strict documents may look bland on common visual browsers such as Netscape Navigator 3.x.

The document type declaration for HTML 4.0 Strict is

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
        "http://www.w3.org/TR/REC-html40/strict.dtd">
HTML 4.0 Transitional

HTML 4.0 Transitional includes all elements and attributes of HTML 4.0 Strict but adds presentational attributes, deprecated elements, and link targets. HTML 4.0 Transitional recognizes the relatively poor browser support for style sheets, allowing many HTML presentation features to be used as a transition towards HTML 4.0 Strict.

The document type declaration for HTML 4.0 Transitional is

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
        "http://www.w3.org/TR/REC-html40/loose.dtd">
HTML 4.0 Frameset

HTML 4.0 Frameset is a variant of HTML 4.0 Transitional for documents that use frames. The FRAMESET element replaces the BODY in a Frameset document.

The document type declaration for HTML 4.0 Frameset is

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
        "http://www.w3.org/TR/REC-html40/frameset.dtd">

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


DT - Definition Term

Syntax

<DT>...</DT>

Attribute Specifications

[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements

Contained in

DL

Description

The DT element defines a term in a definition list. The closing tag for DT is optional, but its use prevents common browser bugs with style sheets. Note that DT cannot contain block-level elements such as P and H2.

A DT element should generally be followed by a DD element that provides the definition for the term given by the DT. A single definition term may have multiple definitions associated with it, and a single definition may have multiple terms.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=secondp>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • DT in W3C HTML 4.0 Recommendation
  • DT in W3C HTML 3.2 Recommendation
  • DT in HTML 2.0 Standard
  • DT in WDG HTML 3.2 Reference
  • DT in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


EM - Emphasis

Syntax

<EM>...</EM>

Attribute Specifications

[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements

Contained in

Inline elements, block-level elements

Description

The EM element gives emphasis to its contents. Visual browsers typically render EM as italic text, but authors can suggest a rendering using style sheets. Since EM is a structural element, it carries meaning, making it preferable to font style elements such as I when emphasis is the intended meaning.

For strong emphasis, use the STRONG element.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=secondp>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • EM in W3C HTML 4.0 Recommendation
  • EM in W3C HTML 3.2 Recommendation
  • EM in HTML 2.0 Standard
  • EM in WDG HTML 3.2 Reference
  • EM in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


FIELDSET - Form Control Group

Syntax

<FIELDSET>...</FIELDSET>

Attribute Specifications

[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

A LEGEND element followed by zero or more block-level elements and inline elements

Contained in

APPLET, BLOCKQUOTE, BODY, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

Description

The FIELDSET element defines a form control group. By grouping related form controls, authors can divide a form into smaller, more manageable parts, improving the usability disaster that can strike when confronting users with too many form controls. The grouping provided by FIELDSET also helps the accessibility of forms to those using aural browsers by allowing these users to more easily orient themselves when filling in a large form.

While FIELDSET is not widely supported by current browsers, it can be used safely by explicitly closing any preceding P element with </P> or by including an empty P prior to the FIELDSET. This causes non-supporting browsers to infer the start of a block-level element even though they ignore the block-level FIELDSET element.

The content of a FIELDSET element must begin with a LEGEND to provide a caption for the group of controls. Following the LEGEND, FIELDSET may contain any inline or block-level element, including another FIELDSET.

An example follows:

<FORM METHOD=post ACTION="/cgi-bin/order.cgi">

  <FIELDSET>
    <LEGEND ACCESSKEY=I>Contact Information</LEGEND>
    <TABLE>
      <TR>
        <TD>
          <LABEL FOR=name ACCESSKEY=N>Name:</LABEL>
        </TD>
        <TD>
          <INPUT TYPE=text NAME=name ID=name>
        </TD>
      </TR>
      <TR>
        <TD>
          <LABEL FOR=email ACCESSKEY=E>E-mail Address:</LABEL>
        </TD>
        <TD>
          <INPUT TYPE=text NAME=email ID=email>
        </TD>
      </TR>
      <TR>
        <TD>
          <LABEL FOR=addr ACCESSKEY=A>Mailing Address:</LABEL>
        </TD>
        <TD>
          <TEXTAREA NAME=address ID=addr ROWS=4 COLS=40></TEXTAREA>
        </TD>
      </TR>
    </TABLE>
  </FIELDSET>

  <FIELDSET>
    <LEGEND ACCESSKEY=O>Ordering Information</LEGEND>
    <P>Please select the product(s) that you wish to order:</P>
    <P>
      <LABEL ACCESSKEY=3>
        <INPUT TYPE=checkbox NAME=products VALUE="HTML 3.2 Reference">
        <A HREF="/reference/wilbur/">HTML 3.2 Reference</A>
      </LABEL>
      <BR>
      <LABEL ACCESSKEY=4>
        <INPUT TYPE=checkbox NAME=products VALUE="HTML 4.0 Reference">
        <A HREF="/reference/html40/">HTML 4.0 Reference</A>
      </LABEL>
      <BR>
      <LABEL ACCESSKEY=S>
        <INPUT TYPE=checkbox NAME=products VALUE="CSS Guide">
        <A HREF="/reference/css/">Cascading Style Sheets Guide</A>
      </LABEL>
    </P>
  </FIELDSET>

  <FIELDSET>
    <LEGEND ACCESSKEY=C>Credit Card Information</LEGEND>
    <P>
      <LABEL ACCESSKEY=V>
        <INPUT TYPE=radio NAME=card VALUE=visa> Visa
      </LABEL>
      <LABEL ACCESSKEY=M>
        <INPUT TYPE=radio NAME=card VALUE=mc> MasterCard
      </LABEL>
      <BR>
      <LABEL ACCESSKEY=u>
        Number: <INPUT TYPE=text NAME=number>
      </LABEL>
      <BR>
      <LABEL ACCESSKEY=E>
        Expiry: <INPUT TYPE=text NAME=expiry>
      </LABEL>
    </P>
  </FIELDSET>

  <P>
    <INPUT TYPE=submit VALUE="Submit order">
    <INPUT TYPE=reset VALUE="Clear order form">
  </P>

</FORM>

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • FIELDSET in W3C HTML 4.0 Recommendation
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


FONT - Font Change

Syntax

<FONT>...</FONT>

Attribute Specifications

SIZE=CDATA (font size adjustment)
COLOR=Color (font color adjustment)
FACE=CDATA (font face adjustment)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements

Contained in

Inline elements, block-level elements except PRE

Description

The FONT element, deprecated in HTML 4.0 in favor of style sheets, allows authors to suggest rudimentary font changes. Use of the FONT element brings numerous usability and accessibility problems, as discussed in the article What's Wrong With FONT?

SIZE

The least harmful use of the FONT element is in suggesting relative changes in font size with <FONT SIZE="+1"> or <FONT SIZE="-1">. These tags increment or decrement the font size relative to the size specified in the BASEFONT element, or relative to a base size of 3 if no BASEFONT element is used. Sizes are based on a seven-point scale (1..7) that is browser dependent.

While authors can specify SIZE values such as -2 and +3, as well as absolute values such as 1, these kinds of changes are strongly discouraged due to the sensitivity some users have to different font sizes. While a value like -2 may look right to you with your eyesight and user settings, it could easily be unreadable to a user with different eyesight and user settings.

COLOR

The COLOR attribute suggests a text color. While most browsers allow users to override author color changes, the widely used Netscape Navigator 2.x, 3.x, and 4.x do not override colors specified with FONT. This makes the COLOR attribute very dangerous from an accessibility point of view.

Authors often use the COLOR attribute as a form of emphasis or to indicate a heading. In these cases, use of structural HTML (e.g., STRONG, H1) along with a style sheet provides a more flexible, accessible document.

FACE

The FACE attribute gives a comma-separated list of font faces in which to display text. The fonts are listed in order of preference, so that if the browser does not have the first font listed, it will try the second, then the third, and so on.

The FONT element is an inline element, meaning that it cannot contain block-level elements such as P and TABLE. Again, style sheets provide much more flexibility in suggesting font styles.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • FONT in W3C HTML 4.0 Recommendation
  • FONT in W3C HTML 3.2 Recommendation
  • FONT in WDG HTML 3.2 Reference
  • FONT in Learning HTML 3.2 by Examples
  • What's Wrong With FONT?
  • <FONT FACE> considered harmful
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


FORM - Interactive Form

Syntax

<FORM>...</FORM>

Attribute Specifications

ACTION=url (form handler)
METHOD=[ get | post ] (HTTP method for submitting form)
ENCTYPE=ContentType (content type to submit form as)
ACCEPT-CHARSET=Charsets (supported character encodings)
TARGET=FrameTarget (frame to render form result in)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string
ONSUBMIT=Script (form was submitted)
ONRESET=Script (form was reset)

Contents

  • In HTML 4.0 Strict, one or more SCRIPT or block-level elements except FORM
  • In HTML 4.0 Transitional, inline elements or block-level elements except FORM

Contained in

APPLET, BLOCKQUOTE, BODY, CENTER, DD, DEL, DIV, FIELDSET, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

Description

The FORM element defines an interactive form. The element should contain form controls--INPUT, SELECT, TEXTAREA, and BUTTON--through which the user interacts.

ACTION

When the user submits the form, through an INPUT or BUTTON element with TYPE=submit, the form values are submitted to the url given in FORM's required ACTION attribute. ACTION usually points to a CGI script or Java servlet that handles the form submission.

A mailto url (e.g., mailto:liam@htmlhelp.com) is also allowed as an ACTION, but this is not supported by all browsers. Non-supporting browsers such as Microsoft Internet Explorer 3.x typically will open a blank e-mail message when the user submits a mailto form. Even on supporting browsers, mailto forms are troublesome in that they fail to provide feedback to the user after the form submission.

Free CGI scripts exist for handling forms; some are even remotely hosted for authors whose providers refuse to allow CGI scripts to be run locally.

METHOD & ENCTYPE

How the form input is sent to the server depends on the METHOD and ENCTYPE attributes. When the METHOD is get (the default), the form input is submitted as an HTTP GET request with ?form_data appended to the url specified in the ACTION attribute.

Using the get method allows the form submission to be contained completely in a URL. This can be advantageous in that it permits bookmarking in current browsers, but it also prevents form data from containing non-ASCII characters such as "é" and "©". As well, the amount of form data that can be handled by the get method is limited by the maximum length of the URL that the server and browser can process. To be safe, any form whose input might contain non-ASCII characters or more than 100 characters should use METHOD=post.

With a METHOD value of post, the form input is submitted as an HTTP POST request with the form data sent in the body of the request. Most current browsers are unable to bookmark POST requests, but POST does not entail the character encoding and length restrictions imposed by GET.

The ENCTYPE attribute specifies the content type used in submitting the form, and defaults to application/x-www-form-urlencoded. This content type results in name/value pairs sent to the server as name1=value1&name2=value2... with space characters replaced by "+" and reserved characters (like "#") replaced by "%HH" where HH is the ASCII code of the character in hexadecimal. Line breaks are encoded as "%0D%0A"--a carriage return followed by a line feed.

Authors should generally only use a different ENCTYPE when the form includes a TYPE=file INPUT element, in which case the ENCTYPE should be multipart/form-data and the METHOD must be post. The format of multipart/form-data requests is given in RFC 1867.

Tools such as cg-eye allow authors to easily create and view a request, simulating the submission of a form. However, authors often do not need to concern themselves with the exact format of the submission; CGI libraries including CGI.pm transparently handle get and post submissions sent as application/x-www-form-urlencoded or multipart/form-data.

ACCEPT-CHARSET

The ACCEPT-CHARSET attribute specifies a list of character encodings that are accepted by the form handler. The value consists of a list of "charsets" separated by commas and/or spaces. The default value is UNKNOWN and is usually considered to be the character encoding used to transmit the document containing the FORM.

TARGET

The TARGET attribute is used with frames to specify in which frame the form response should be rendered. If no frame with such a name exists, the response is rendered in a new window unless overridden by the user. Special frame names begin with an underscore:

  • _blank renders the response in a new, unnamed window
  • _self renders the response in the current frame (useful for overriding a BASE TARGET)
  • _parent renders the response in the immediate FRAMESET parent
  • _top renders the response in the full, unframed window

ONSUBMIT & ONRESET

The FORM element also takes a number of attributes to specify client-side scripting actions for various events. In addition to the core events common to most elements, INPUT accepts the following event attributes:

  • ONSUBMIT, when the form is submitted;
  • ONRESET, when the form is reset.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • FORM in W3C HTML 4.0 Recommendation
  • FORM in W3C HTML 3.2 Recommendation
  • FORM in HTML 2.0 Standard
  • FORM in WDG HTML 3.2 Reference
  • FORM in Learning HTML 3.2 by Examples
  • RFC 1867: Form-based File Upload in HTML
  • The Common Gateway Interface
  • Java Servlets
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


FRAME - Frame

Syntax

<FRAME>

Attribute Specifications

NAME=CDATA (name of frame)
SRC=url (content of frame)
LONGDESC=url (long description of frame)
FRAMEBORDER=[ 1 | 0 ] (frame border)
MARGINWIDTH=Pixels (margin width)
MARGINHEIGHT=Pixels (margin height)
NORESIZE (disallow frame resizing)
SCROLLING=[ yes | no | auto ] (ability to scroll)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Empty

Contained in

FRAMESET

Description

The FRAME element defines a frame--a rectangular subspace within a Frameset document. Each FRAME must be contained within a FRAMESET that defines the dimensions of the frame.

SRC & LONGDESC

The SRC attribute provides the url of the frame's content, which is typically an HTML document. If the frame's content is an image, video, or similar object, and if the object cannot be described adequately using the TITLE attribute of FRAME, then authors should use the LONGDESC attribute to provide the url of a full HTML description of the object.

For better accessibility to disabled users and better indexing with search engines, authors should not use an image or similar object as the content of a frame. Rather, the object should be embedded within an HTML document to allow the indexing of keywords and easier provision of alternate content.

NAME

The NAME attribute gives a name to the frame for use with the TARGET attribute of the A, AREA, BASE, FORM, and LINK elements. The NAME attribute value must begin with a character in the range A-Z or a-z.

The NAME should be human-readable and based on the content of the frame since non-windows browsers may use the NAME as a title for presenting a list of frames to the user. For example, NAME=left would be inappropriate since it says nothing about the content while NAME=nav would be inappropriate since it is not very human-readable. More suitable would be NAME=Content and NAME=Navigation. The TITLE attribute can also be used to provide a slightly longer title for the frame, though this is not widely supported by current browsers.

An example follows:

<FRAMESET ROWS="*,100">
  <FRAMESET COLS="40%,*">
    <FRAME NAME="Menu" SRC="nav.html" TITLE="Menu">
    <FRAME NAME="Content" SRC="main.html" TITLE="Content">
  </FRAMESET>
  <FRAME NAME="Ad" SRC="ad.html" TITLE="Advertisement">
  <NOFRAMES>
    <BODY>
      <H1>Table of Contents</H1>
      <UL>
        <LI>
          <A HREF="reference/html40/">HTML 4.0 Reference</A>
        </LI>
        <LI>
          <A HREF="reference/wilbur/">HTML 3.2 Reference</A>
        </LI>
        <LI>
          <A HREF="reference/css/">CSS Guide</A>
        </LI>
      </UL>
      <P>
        <IMG SRC="ad.gif" ALT="Ad: Does your bank charge too much?">
      </P>
    </BODY>
  </NOFRAMES>
</FRAMESET>

The FRAME element also accepts a number of attributes to specify the presentation on visual browsers. Style sheets provide a more flexible method of defining the presentation of frames, but the element's presentational attributes are more widely supported.

FRAMEBORDER

The FRAMEBORDER attribute specifies whether or not the frame has a visible border. The default value, 1, tells the browser to draw a border between the frame and all adjoining frames. The value 0 indicates that no border should be drawn, though borders from other frames will override this.

To fully remove the border, some browsers also require the use of other, non-standard attributes. See How do I remove the border around frames? for more details.

Note that removing the border of a frame takes away the user's ability to resize the frame on most browsers.

MARGINWIDTH & MARGINHEIGHT

The MARGINWIDTH and MARGINHEIGHT attributes define the number of pixels to use as the left/right margins and top/bottom margins, respectively, within the frame. The value must be greater than one pixel.

NORESIZE

The boolean NORESIZE attribute prevents the user from resizing the frame. This attribute should never be used in a user-friendly Web site.

SCROLLING

The SCROLLING attribute specifies whether scrollbars are provided for the frame. The default value, auto, generates scrollbars only when necessary. The value yes gives scrollbars at all times, and the value no suppresses scrollbars--even when they are needed to see all the content. The value no should never be used.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • FRAME in W3C HTML 4.0 Recommendation
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


FRAMESET - Frameset

Syntax

<FRAMESET>...</FRAMESET>

Attribute Specifications

[3.2] ROWS=MultiLengths (row lengths)
[3.2] COLS=MultiLengths (column lengths)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string
[4.0] ONLOAD=Script (all frames have been loaded)
[4.0] ONUNLOAD=Script (all frames have been removed)

Contents

One or more FRAMESET and FRAME elements, as well as an optional NOFRAMES

Contained in

HTML

Description

The FRAMESET element is a frame container for dividing a window into rectangular subspaces called frames. In a Frameset document, the outermost FRAMESET element takes the place of BODY and immediately follows the HEAD.

The FRAMESET element contains one or more FRAMESET or FRAME elements, along with an optional NOFRAMES element to provide alternate content for browsers that do not support frames or have frames disabled. A meaningful NOFRAMES element should always be provided and should at the very least contain links to the main frame or frames.

[3.2] ROWS & COLS

The ROWS and COLS attributes define the dimensions of each frame in the set. Each attribute takes a comma-separated list of lengths, specified in pixels, as a percentage, or as a relative length. A relative length is expressed as i* where i is an integer. For example, a frameset defined with ROWS="3*,*" (* is equivalent to 1*) will have its first row allotted three times the height of the second row.

The values specified for the ROWS attribute give the height of each row, from top to bottom. The COLS attribute gives the width of each column from left to right. If ROWS or COLS is omitted, the implied value for the attribute is 100%. If both attributes are specified, a grid is defined and filled left-to-right then top-to-bottom.

Example

The following example sets up a grid with two rows and three columns:

<FRAMESET ROWS="70%,30%" COLS="33%,33%,34%">
  <FRAME NAME="Photo1" SRC="Row1_Column1.html">
  <FRAME NAME="Photo2" SRC="Row1_Column2.html">
  <FRAME NAME="Photo3" SRC="Row1_Column3.html">
  <FRAME NAME="Caption1" SRC="Row2_Column1.html">
  <FRAME NAME="Caption2" SRC="Row2_Column2.html">
  <FRAME NAME="Caption3" SRC="Row2_Column3.html">
  <NOFRAMES>
    <BODY>
      <H1>Table of Contents</H1>
        <UL>
          <LI>
            <A HREF="Row1_Column1.html">Photo 1</A>
            (<A HREF="Row2_Column1.html">Caption</A>)
          </LI>
          <LI>
            <A HREF="Row1_Column2.html">Photo 2</A>
            (<A HREF="Row2_Column2.html">Caption</A>)
          </LI>
          <LI>
            <A HREF="Row1_Column3.html">Photo 3</A>
            (<A HREF="Row2_Column3.html">Caption</A>)
          </LI>
      </UL>
    </BODY>
  </NOFRAMES>
</FRAMESET>

The next example features nested FRAMESET elements to define two frames in the first row and one frame in the second row:

<FRAMESET ROWS="*,100">
  <FRAMESET COLS="40%,*">
    <FRAME NAME="Menu" SRC="nav.html" TITLE="Menu">
    <FRAME NAME="Content" SRC="main.html" TITLE="Content">
  </FRAMESET>
  <FRAME NAME="Ad" SRC="ad.html" TITLE="Advertisement">
  <NOFRAMES>
    <BODY>
      <H1>Table of Contents</H1>
      <UL>
        <LI>
          <A HREF="reference/html40/">HTML 4.0 Reference</A>
        </LI>
        <LI>
          <A HREF="reference/wilbur/">HTML 3.2 Reference</A>
        </LI>
        <LI>
          <A HREF="reference/css/">CSS Guide</A>
        </LI>
      </UL>
      <P>
        <IMG SRC="ad.gif" ALT="Ad: Does your bank charge too much?">
      </P>
    </BODY>
  </NOFRAMES>
</FRAMESET>

When pixel lengths are used, they should always be combined with a relative length to handle various window sizes. Pixel lengths should only be used when the frame consists primarily of images or other objects with a fixed size in pixels. Due to their ability to adapt to different window sizes, percentages and relative lengths are generally preferred.

[4.0] ONLOAD & ONUNLOAD

The FRAMESET element also accepts ONLOAD and ONUNLOAD attributes to specify client-side scripting actions to perform when the frames have all been loaded or removed.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=secondp>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • FRAMESET in W3C HTML 4.0 Recommendation
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


H1 - Level-one Heading

Hn - Level-n Heading

Syntax

<Hn>...</Hn> where n=1..6

Attribute Specifications

[3.2] ALIGN=[ left | center | right | justify ] (horizontal alignment)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents
Inline elements
Contained in

APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DEL, DD, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

Description

The Hn element defines a level-n heading. That is a heading from size 1 (the largest) to size 6 (the smallest). A document generally should have exactly one H1 element to mark the most important heading.

[3.2] ALIGN

The deprecated ALIGN attribute suggests the horizontal alignment for the heading on visual browsers. Possible values are left, right, center, and justify. Style sheets provide greater flexibility in suggesting alignment.

Visual browsers typically render H1 in a large, bold font. Authors can suggest a presentation for H1 through style sheets. The following CSS ruleset suggests a presentation for all H1 elements:

h1 {
  color: #c33;
  background: transparent;
  font-weight: bold;
  text-align: center
}

Authors should not choose a heading level based on the font size commonly used by visual browsers. The heading level should be chosen based on the heading's importance and placement in the document. An H1 is typically used as the main heading for a document.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • H1 in W3C HTML 4.0 Recommendation
  • H1 in W3C HTML 3.2 Recommendation
  • H1 in HTML 2.0 Standard
  • H1 in WDG HTML 3.2 Reference
  • H1 in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


HEAD - Document Head

Syntax

<HEAD>...</HEAD>

Attribute Specifications

[4.0] PROFILE=url (dictionary of meta info)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Exactly one TITLE element, optional BASE and ISINDEX elements, and zero or more SCRIPT, STYLE, META, LINK, or OBJECT elements

Contained in

HTML

Description

The HEAD element contains header information about the document, such as its title, keywords, description, and style sheet. HEAD is required in all documents, but its start and end tags are always optional. The HEAD element is followed by the BODY in HTML 4.0 Strict and Transitional documents; in HTML 4.0 Frameset documents, the HEAD is followed by a FRAMESET element.

Content in the HEAD is generally not rendered, with the exception of the required TITLE element. If the </HEAD> end tag is omitted, the first BODY or FRAMESET element infers the end of the HEAD.

[4.0] PROFILE

The optional PROFILE attribute of HEAD gives the location of a metadata profile. A profile defines properties that may be used by META and LINK elements within the HEAD. There is no prescribed format for profiles.

Work is currently underway on improving the use of metadata on the Web. See the W3C's Metadata and Resource Description area for the latest information.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • HEAD in W3C HTML 4.0 Recommendation
  • HEAD in W3C HTML 3.2 Recommendation
  • HEAD in HTML 2.0 Standard
  • HEAD in WDG HTML 3.2 Reference
  • HEAD in Learning HTML 3.2 by Examples
  • Metadata at W3C
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


HR - Horizontal Rule

Syntax

<HR>

Attribute Specifications

ALIGN=[ left | center | right ] (horizontal alignment)
NOSHADE (solid line)
SIZE=Pixels (line height)
WIDTH=Length (line width)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents
Empty
Contained in

APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

Description

The HR element defines a horizontal rule for visual browsers. While this element is inherently presentational, it can be used structurally as a section divider. However, for greater flexibility the HR element can be replaced with the border-bottom or border-top properties of Cascading Style Sheets. For example, the following style rule would suggest a horizontal line above all DIV elements with CLASS=navbar:

div.navbar { border-top: solid medium navy }

ALIGN & WIDTH

HR's deprecated ALIGN attribute suggests the horizontal alignment of the line. Possible values are left, right, and center. The deprecated WIDTH attribute specifies the width of the line as a percentage or a number of pixels. If a width is specified, percentages are generally preferred since they adjust to varying window sizes. The width property of Cascading Style Sheets provides greater flexibility in suggesting the width of horizontal rules.

NOSHADE & SIZE

The boolean NOSHADE attribute suggests that the rule be rendered as a solid line rather than the groove style commonly used. The SIZE attribute suggests the height of the line in pixels. These attributes are both deprecated in favor of style sheets.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • HR in W3C HTML 4.0 Recommendation
  • HR in W3C HTML 3.2 Recommendation
  • HR in HTML 2.0 Standard
  • HR in WDG HTML 3.2 Reference
  • HR in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


HTML - HTML Document

Syntax

<HTML>...</HTML>

Attribute Specifications

VERSION=CDATA (HTML version)
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl

Contents

  • In HTML 4.0 Strict and Transitional: HEAD followed by BODY
  • In HTML 4.0 Frameset: HEAD followed by FRAMESET

Contained in

Not applicable--HTML is a top-level element

Description

The HTML element contains the HTML document, made up of the HEAD followed by the BODY, except in Frameset documents where the FRAMESET element replaces the BODY. The start and end tags of the HTML element are both optional.

The LANG attribute is typically set on the HTML element to specify the base language of the document. The language should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese.

VERSION

The deprecated VERSION attribute specifies the Document Type Definition (DTD) that describes the document. This attribute should not be used since the DOCTYPE declaration makes it redundant.

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

More Information

  • HTML in W3C HTML 4.0 Recommendation
  • HTML in W3C HTML 3.2 Recommendation
  • HTML in HTML 2.0 Standard
  • HTML in WDG HTML 3.2 Reference
  • HTML in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


I - Italic Text

Syntax

<I>...</I>

Attribute Specifications

[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements

Contained in

Inline elements, block-level elements

Description

The I element suggests that text be rendered as italic text. In most cases, use of a phrase element such as EM, DFN, VAR, or CITE is more appropriate since these elements express the meaning of the text more clearly.

The I element is a suitable choice for marking a structure for which no phrase element exists. For example, foreign phrases and taxonomic names have no structural element in HTML 4.0, but italic text is often an appropriate visual rendering:

<H1><I LANG=fr>Chacun son goût !</I></H1>
<P>Some people prefer dogs--<I CLASS=species>Canis familiaris</I>--while others are eternal lovers of cats--<I CLASS=species>Felis cattus</I>.

Note the use of the CLASS and LANG attributes to add structural significance to the I elements. This allows greater flexibility when applying style sheets to different kinds of italic text.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • I in W3C HTML 4.0 Recommendation
  • I in W3C HTML 3.2 Recommendation
  • I in HTML 2.0 Standard
  • I in WDG HTML 3.2 Reference
  • I in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


IFRAME - Inline Frame

Syntax

<IFRAME>...</IFRAME>

Attribute Specifications

SRC=url (url of frame content)
NAME=CDATA (name of frame)
LONGDESC=url (link to long description)
WIDTH=Length (frame width)
HEIGHT=Length (frame height)
ALIGN=[ top | middle | bottom | left | right ] (frame alignment)
FRAMEBORDER=[ 1 | 0 ] (frame border)
MARGINWIDTH=Pixels (margin width)
MARGINHEIGHT=Pixels (margin height)
SCROLLING=[ yes | no | auto ] (ability to scroll)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string

Contents

Inline elements, block-level elements

Contained in

Inline elements, block-level elements

Description

The IFRAME element defines an inline frame for the inclusion of external objects including other HTML documents. IFRAME provides a subset of the functionality of OBJECT; the only advantage to IFRAME is that an inline frame can act as a target for other links. OBJECT is more widely supported than IFRAME, and, unlike IFRAME, OBJECT is included in HTML 4.0 Strict.

SRC & NAME

IFRAME's SRC attribute provides the location of the frame content--typically an HTML document. The optional NAME attribute specifies the name of the inline frame, allowing links to target the frame.

The content of the IFRAME element is used as an alternative for browsers that are not configured to show or do not support inline frames. The content may consist of inline or block-level elements, though any block-level elements must be allowed inside the containing element of IFRAME. For example, an IFRAME within an H1 cannot contain an H2, but an IFRAME within a DIV can contain any block-level elements.

LONGDESC

The LONGDESC attribute gives the url of a long description of the frame's contents. This is particularly useful for full descriptions of embedded objects. Note that LONGDESC describes the frame content while the content of the IFRAME element acts as a replacement when the external resource cannot be inlined.

An example follows:

<IFRAME SRC="recipe.html" TITLE="The Famous Recipe">
<!-- Alternate content for non-supporting browsers -->
<H2>The Famous Recipe</H2>
<H3>Ingredients</H3>
...
</IFRAME>

WIDTH, HEIGHT & FRAMEBORDER

The WIDTH and HEIGHT attributes specify the dimensions of the inline frame in pixels or as a percentage of the available space. The FRAMEBORDER attribute specifies whether or not a border should be drawn. The default value of 1 results in a border while a value of 0 suppresses the border. Style sheets allow greater flexibility in suggesting the border presentation.

ALIGN

The ALIGN attribute specifies the alignment of the inline frame. The values top, middle, and bottom specify the frame's position with respect to surrounding content on its left and right.

ALIGN=middle aligns the center of the frame with the current baseline. To center the frame horizontally on the page, place the frame in a centered block, e.g.,

<P ALIGN=center><IFRAME SRC="foo.html" WIDTH=300 HEIGHT=100></IFRAME></P>

The other ALIGN values, left and right, specify a floating frame; the frame is placed at the left or right margin and content flows around it. To place content below the frame, use <BR CLEAR=left|right|all> as appropriate.

The vertical-align and float properties of Cascading Style Sheets provide more flexible methods of aligning inline frames.

MARGINWIDTH & MARGINHEIGHT

The MARGINWIDTH and MARGINHEIGHT attributes define the number of pixels to use as the left/right margins and top/bottom margins, respectively, within the inline frame. The value must be greater than one pixel.

SCROLLING

The SCROLLING attribute specifies whether scrollbars are provided for the inline frame. The default value, auto, generates scrollbars only when necessary. The value yes gives scrollbars at all times, and the value no suppresses scrollbars--even when they are needed to see all the content. The value no should never be used.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

More Information

  • IFRAME in W3C HTML 4.0 Recommendation
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


IMG - Inline Image

Syntax

<IMG>

Attribute Specifications

SRC=url (location of image)
ALT=Text (alternate text)
LONGDESC=url (link to long description)
WIDTH=Length (image width)
HEIGHT=Length (image height)
USEMAP=url (client-side image map)
ISMAP (server-side image map)
ALIGN=top|middle|bottom|left|right (image alignment)
BORDER=Length (link border width)
HSPACE=Pixels (horizontal gutter)
VSPACE=Pixels (vertical gutter)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Empty

Contained in

Inline elements, block-level elements except PRE

SRC

The IMG element specifies an inline image. The required SRC attribute specifies the location of the image. The image can be any format, though browsers generally only support GIF and JPEG images. Support for the PNG image format is growing slowly.

ALT

The required ALT attribute provides alternate text for those not loading images. Effective ALT text should generally give the function of the image rather than a description of the image. For example, ALT="Welcome to XYZ Corp." would be more appropriate than ALT="XYZ Corp. Logo" for a company's logo on its welcome page. Good ALT text is crucial to the document's accessibility for the significant portion of users who do not load images; see Use of ALT texts in IMGs for a thorough discussion.

LONGDESC

The LONGDESC attribute gives the location of a long description of the image. This attribute should be used to provide a long description of an image where this would be useful. For example, a painting, graph, or corporate logo could be given a description so that blind and other text-only users can develop a mental picture of the image.

WIDTH & HEIGHT

The WIDTH and HEIGHT attributes are most useful when they specify the exact dimensions of the image in pixels. This allows image-loading browsers to reserve the proper amount of space for the image and continue to render the rest of the document, thus giving the appearance of a faster-loading page.

Unfortunately, many graphical browsers will use these dimensions when not loading images, which can cause the ALT text to be cut off if the image is small or the ALT text is large. In such cases, authors may wish to leave off the WIDTH and HEIGHT attributes, depending on the importance of the ALT text and the placement of the image on the page (an image towards the end of the document without WIDTH and HEIGHT attributes will generally not noticeably slow the rendering of the page).

Authors can also specify different dimensions for the WIDTH and HEIGHT attributes, in which case browsers should scale the image. Percentages, relative to the horizontal or vertical space available (not relative to the image's natural size) can also be specified, though these are not as widely supported as pixel lengths. Since browsers typically do a poor job of scaling images, authors should avoid using WIDTH and HEIGHT for this purpose as much as possible.

ALIGN

The ALIGN attribute, deprecated in HTML 4.0, specifies the alignment of the image. The values top, middle, and bottom specify the image's position with respect to surrounding content on its left and right.

ALIGN=middle aligns the center of the image with the current baseline. To center the image horizontally on the page, place the image in a centered block, e.g.,

<H1 ALIGN=center><IMG SRC="logo.gif" ALT="Welcome to XYZ Company"></H1>

The other ALIGN values, left and right, specify a floating image; the image is placed at the left or right margin and content flows around it. To place content below the image, use <BR CLEAR=left|right|all> as appropriate.

The vertical-align and float properties of Cascading Style Sheets provide more flexible methods of aligning images.

BORDER

The BORDER attribute, deprecated in HTML 4.0, specifies the width of the image's border. Specifying BORDER=0 will eliminate the border around a linked image in most browsers, though some allow the user to override this. Authors should only use BORDER=0 if the image would be clearly recognizable as a link, or as a method of de-emphasizing a link. For example:

<A HREF="reference/"><IMG SRC="icon/reference.gif" ALT="" WIDTH=90 HEIGHT=90 BORDER=0>Web Authoring Reference</A>

HSPACE & VSPACE

The deprecated HSPACE and VSPACE attributes allow an author to suggest horizontal gutters and vertical gutters, respectively, around the image. The value must be in pixels and applies to both sides of the image. Style sheets provide more flexibility in specifying the space around images.

USEMAP

The USEMAP attribute is used with client-side image maps to give the location of the map definition. While this value may be a full url--allowing a single map definition to be applied to multiple pages--Netscape Navigator will only find map definitions in the same file, effectively limiting the USEMAP value to a fragment identifier such as "#map".

ISMAP

The ISMAP attribute is used with server-side image maps. When the ISMAP attribute is included with a linked image and the user clicks the image, the image coordinates clicked are sent to the server, from which a location can be returned. The method of handling the coordinates is server-dependent, but the NCSA server's method is most common.

Server-side image maps are better supported than client-side image maps, but almost all browsers today support both methods. Client-side image maps are generally preferred since they do not require an extra request to the server (and so are faster), and since they allow a usable menu to be provided to text-only users. Using both methods in combination is a good approach, since browsers supporting client-side image maps will use that method while older browsers will use the server-side image map. An example follows:

<A HREF="/cgi-bin/imagemap/sitemap.map"><IMG SRC="sitemap.gif" ALT="Site Map" ISMAP USEMAP="#map" WIDTH=100 HEIGHT=100></A>

A MAP element named map would have to be included in the same document.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • IMG in W3C HTML 4.0 Recommendation
  • IMG in W3C HTML 3.2 Recommendation
  • IMG in HTML 2.0 Standard
  • IMG in WDG HTML 3.2 Reference
  • IMG in Learning HTML 3.2 by Examples
  • Use of ALT texts in IMGs
  • Image Use on the Web
  • JPEG FAQ
  • PNG (Portable Network Graphics) Home Page
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


INPUT - Form Input

Syntax

<INPUT>

Attribute Specifications

TYPE=[ text | password | checkbox | radio | submit | reset | file | hidden | image | button ] (type of input)
NAME=CDATA (key in submitted form)
VALUE=CDATA (value of input)
CHECKED (check radio button or checkbox)
SIZE=CDATA (suggested number of characters for text input)
MAXLENGTH=Number (maximum number of characters for text input)
SRC=url (source for image)
ALT=CDATA (alternate text for image input)
USEMAP=url (client-side image map)
ALIGN=[ top | middle | bottom | left | right ] (alignment of image input)
DISABLED (disable element)
READONLY (prevent changes)
ACCEPT=ContentTypes (media types for file upload)
ACCESSKEY=Character (shortcut key)
TABINDEX=Number (position in tabbing order)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string
ONFOCUS=Script (element received focus)
ONBLUR=Script (element lost focus)
ONSELECT=Script (element text selected)
ONCHANGE=Script (element value changed)

Contents

Empty

Contained in

Block-level elements, inline elements except BUTTON

Description

The INPUT element defines a form control for the user to enter input. While INPUT is most useful within a FORM, HTML 4.0 allows INPUT in any block-level or inline element other than BUTTON. However, Netscape Navigator will not display any INPUT elements outside of a FORM.

NAME

When a form is submitted, the current value of each INPUT element within the FORM is sent to the server as name/value pairs. The INPUT element's NAME attribute provides the name used. The value sent depends on the type of form control and on the user's input.

MAXLENGTH, SIZE & TYPE="text"

The type of form control defined by INPUT is given by the TYPE attribute. The default TYPE is text, which provides a single-line text input field. The VALUE attribute specifies the initial value for the text field. The SIZE and MAXLENGTH attributes suggest the number of characters and maximum number of characters, respectively, of the text field.

While the MAXLENGTH attribute can be an effective guide to the user, authors should not depend on the enforcement of a maximum number of characters by the client. A user could copy the HTML document, remove the MAXLENGTH attribute, and submit the form. Thus authors of form handlers should ensure that any necessary input length checks are repeated on the server-side.

TYPE="password"

The password input type is a variation on the text type. The only difference is that the input characters are masked, typically by a series of asterisks, to protect sensitive information from onlookers. Note, however, that the actual value is transmitted to the server as clear text, so password inputs do not provide sufficient securlty for credit card numbers or other highly sensitive information.

The following example uses text and password fields with the LABEL element to bind text labels to the INPUT elements:

<P><LABEL ACCESSKEY=U>User name: <INPUT TYPE=text NAME=username SIZE=8 MAXLENGTH=8></LABEL></P>
<P><LABEL ACCESSKEY=P>Password: <INPUT TYPE=password NAME=pw SIZE=12 MAXLENGTH=12></LABEL></P>

READONLY & DISABLED

The boolean READONLY attribute, new in HTML 4.0 and poorly supported by current browsers, prevents the user from editing the content of the text or password input types. Read-only elements are still submitted with the form. The DISABLED attribute, which applies to all input types but is also poorly supported, disables the control. Disabled elements are read-only elements with the added restrictions that the values are not submitted with the form, the elements cannot receive focus, and the elements are skipped when navigating the document by tabbing.

TYPE="radio", TYPE="checkbox", VALUE & CHECKED

The radio and checkbox input types provide switches that can be turned on and off by the user. The two types differ in that radio buttons are grouped (by specifying the same NAME attribute on each INPUT) so that only one radio button in a group can be selected at any time. Checkboxes can be checked without changing the state of other checkboxes with the same NAME. The VALUE attribute, required for radio buttons and checkboxes, gives the value of the control when it is checked. The boolean CHECKED attribute specifies that the control is initially checked.

Some browsers require one radio button in a group to be selected at all times. To ensure that an appropriate default choice is made, authors may wish to define one of the radio INPUT elements as CHECKED.

In the following example, only one payment method may be selected by the user since the radio buttons have the same NAME:

<P>Please indicate your method of payment:</P>
<P><LABEL ACCESSKEY=C><INPUT TYPE=radio NAME="payment_method" VALUE="credit card" CHECKED> Credit card</LABEL><BR>
<LABEL ACCESSKEY=D><INPUT TYPE=radio NAME="payment_method" VALUE="debit card"> Debit card</LABEL><BR>
<LABEL ACCESSKEY=M><INPUT TYPE=radio NAME="payment_method" VALUE="money order"> Money order</LABEL></P>

<P><LABEL ACCESSKEY=S><INPUT TYPE=checkbox NAME="send_receipt" VALUE="yes" CHECKED> Send receipt by e-mail</LABEL></P>

TYPE="file" & ACCEPT

The file input type creates a field through which users can upload files from their local computer or network. The VALUE attribute specifies the name of the initial file, but it is typically ignored by browsers as a securlty precaution. The ACCEPT attribute gives a comma-separated list of media types accepted, allowing the browser to filter out inappropriate files. Current browsers generally ignore the ACCEPT attribute.

A form that includes a file INPUT must specify METHOD=post and ENCTYPE="multipart/form-data" in the <FORM> tag. CGI libraries such as CGI.pm allow simple handling of such forms.

Form-based file upload is unsupported by many currently deployed browsers. Authors should provide alternative methods of input where possible.

The following example allows the user to upload an HTML document for validation:

<FORM METHOD=post ACTION="/cgi-bin/validate.cgi" ENCTYPE="multipart/form-data">
<P>Select an HTML document to upload and validate. If your browser does not support form-based file upload, use one of our <A HREF="methods.html">alternate methods of validation</A>.</P>
<P><INPUT TYPE=file NAME="html_file" ACCEPT="text/html"></P>
<P><INPUT TYPE=submit VALUE="Validate it!"></P>
</FORM>

TYPE="hidden"

The hidden input type allows authors to include form data without having it rendered to the user. This is particularly useful in form applications that span several HTML documents; user input can be carried from form to form by hidden INPUTs. Some generalized CGI scripts use hidden INPUTs to define variables for the script, as in the following example, which defines a recipient and subject for the e-mailed contents of a form:

<INPUT TYPE=hidden NAME=recipient VALUE="liam@htmlhelp.com">
<INPUT TYPE=hidden NAME=subject VALUE="Feedback on your HTML Reference">

Note that the fields are "hidden" in the sense that they are not rendered by the browser. Anyone can still view the HTML document's source to find the "hidden" fields.

TYPE="reset"

The TYPE value reset defines a button by which the user can reset the form to its initial values. The optional VALUE attribute of a reset button overrides the browser's default text for the button.

TYPE="submit"

The submit input type defines a button for submitting the form. As with reset, the optional VALUE attribute provides the text of the button. The presence of the NAME attribute will cause the browser to send a name/value pair for the submit button if it is used to submit the form. This allows authors to provide multiple submit buttons and have the form handler take a different action depending on the submit button used.

TYPE="image", ALT, USEMAP & SRC

The image input type specifies a graphical submit button. The SRC attribute must be included to specify the url of the image. The ALT attribute should be used to give replacement text for those not loading images. ALT is a new addition in HTML 4.0; many browsers rely on either the NAME or VALUE attribute as alternate text, so authors should use all three attributes for the same purpose where possible. The topic of graphical submit buttons for text users is discussed in detail in the article INPUT TYPE=IMAGE for text users?.

When the graphical submit button is clicked, the coordinates of the click are sent with the form submission as name.x=x-value and name.y=y-value where name is the value of the NAME attribute, x-value is the click's pixels from the left of the image, and y-value is the click's pixels from the top of the image. The USEMAP attribute combined with TYPE=image defines a client-side image map that can be used with client-side scripting, but this method is poorly supported. The USEMAP attribute gives the url of the defining MAP.

ALIGN

The deprecated ALIGN attribute specifies the alignment of the graphical submit button. The values top, middle, and bottom specify the button's position with respect to surrounding content on its left and right. The values left and right specify a floating button; the image is placed at the left or right margin and content flows around it. To place content below the button, use <BR CLEAR=left|right|all> as appropriate.

The vertical-align and float properties of Cascading Style Sheets provide more flexible methods of aligning buttons.

TYPE="button"

The input type button specifies a push button for use with client-side scripting. The VALUE attribute gives the text label of the button. The ONCLICK attribute is typically used to define the action taken when the button is activated. An example follows:

<INPUT TYPE=button VALUE="Hide non-strict attributes" ID=toggler ONCLICK="toggle()">

In this example, the toggle() function, which would be defined earlier in a SCRIPT element, will be executed when the button is clicked. Since the button is only useful with client-side scripting enabled, authors should usually output the <INPUT TYPE=button> tag using the scripting language to avoid providing a non-functioning button to some users. A more complete version of the previous example would thus be as follows:

<SCRIPT TYPE="text/javascript">
<!--
  document.write("<INPUT TYPE=button VALUE=\"Hide non-strict attributes\""
                 + "ID=toggler ONCLICK=\"toggle()\">");
// -->
</script>

The BUTTON element allows richer labels for submit, reset, and push buttons, but a lack of browser support makes INPUT a more reliable choice at this time.

ACCESSKEY

The ACCESSKEY and TABINDEX attributes apply to all input types except hidden. ACCESSKEY specifies a single Unicode character as a shortcut key for giving focus to the form control. Authors can set the access key on the INPUT element or the LABEL element associated with it. Entities (e.g. &eacute;) may be used as the ACCESSKEY value.

TABINDEX

The TABINDEX attribute specifies a number between 0 and 32767 to indicate the tabbing order of the element. A form control with TABINDEX=0 or no TABINDEX attribute will be visited after any elements with a positive TABINDEX. Among positive TABINDEX values, the lower number receives focus first. In the case of a tie, the element appearing first in the HTML document takes precedence.

ONFOCUS, ONBLUR, ONSELECT, ONCHANGE

The INPUT element also takes a number of attributes to specify client-side scripting actions for various events. In addition to the core events common to most elements, INPUT accepts the following event attributes:

  • ONFOCUS, when the element receives focus;
  • ONBLUR, when the element loses focus;
  • ONSELECT, when text in an input of type text or password is selected;
  • ONCHANGE, when the element loses focus and its value has changed since it received focus.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • INPUT in W3C HTML 4.0 Recommendation
  • INPUT in W3C HTML 3.2 Recommendation
  • INPUT in HTML 2.0 Standard
  • INPUT in WDG HTML 3.2 Reference
  • INPUT in Learning HTML 3.2 by Examples
  • RFC 1867: Form-based File Upload in HTML
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


INS - Inserted Text

Syntax

<INS>...</INS>

Attribute Specifications

CITE=url (reason for insertion)
DATETIME=Datetime (date and time of insertion)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements, block-level elements

Contained in

Inline elements, block-level elements

Description

The INS element contains content that has been inserted. This element is useful in marking changes from one version of a document to the next. Through style sheets, authors can suggest an appropriate rendering, such as rendering the inserted content in italics, a different color, or a different voice.

INS may be used as either a block-level element or an inline element. If used as an inline element (e.g., within a P), then INS may not contain any block-level elements.

CITE

The optional CITE attribute of INS gives a url with information on why the content was inserted. A brief explanation for the insertion can be given with the TITLE attribute, which may be rendered as a "tooltip" by some browsers.

DATETIME

The optional DATETIME attribute specifies the date and time of the insertion. The value is case-sensitive and of the form YYYY-MM-DDThh:mm:ssTZD. See the values section for a full explanation of this format.

An example follows:

<P>The CENTER element defines a block whose contents are centered horizontally on visual browsers. <INS CITE="http://www.w3.org/TR/REC-html40/appendix/changes.html#h-A.1.2" DATETIME="1997-12-19T00:00:00-05:00">Note that CENTER is deprecated in HTML 4.0.</INS></P>

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • INS in W3C HTML 4.0 Recommendation
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


ISINDEX - Input Prompt

Syntax

<ISINDEX>

Attribute Specifications

PROMPT=Text (Prompt message)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Empty

Contained in

APPLET, BLOCKQUOTE, BODY, CENTER, DD, DEL, DIV, FIELDSET, FORM, HEAD, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

PROMPT

The ISINDEX element defines a single-line text input. The label of the input field is specified using the element's PROMPT attribute. ISINDEX is deprecated in HTML 4.0 in favor of the INPUT element.

The ISINDEX element is equivalent to a FORM with a single INPUT of type text, a METHOD of get, and an ACTION pointing to the url of the document containing the ISINDEX element.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • ISINDEX in W3C HTML 4.0 Recommendation
  • ISINDEX in W3C HTML 3.2 Recommendation
  • ISINDEX in HTML 2.0 Standard
  • ISINDEX in WDG HTML 3.2 Reference
  • ISINDEX in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


KBD - Text to be Input

Syntax
<KBD>...</KBD>
Attribute Specifications

[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements

Contained in

Inline elements, block-level elements

Description

The KBD element denotes text to be entered by the user. Visual browsers typically render KBD as monospaced text, but authors can suggest a rendering using style sheets. Since KBD is a structural element, it carries meaning, making it preferable to font style elements such as TT when marking up text to be entered by the user.

Example:

<P>If the question does not apply to you, enter <KBD>N/A</KBD>.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • KBD in W3C HTML 4.0 Recommendation
  • KBD in W3C HTML 3.2 Recommendation
  • KBD in HTML 2.0 Standard
  • KBD in WDG HTML 3.2 Reference
  • KBD in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


LABEL - Form Field Label

Syntax

<LABEL>...</LABEL>

Attribute Specifications

FOR=IDREF (associated form field)
ACCESSKEY=Character (shortcut key)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string
ONFOCUS=Script (element received focus)
ONBLUR=Script (element lost focus)

Contents

Inline elements except LABEL

Contained in

Block-level elements, inline elements except BUTTON

Description

The LABEL element associates a label with a form control. By associating labels with form controls, authors give important hints to users of speech browsers while also allowing visual browsers to duplicate common GUI features (e.g., the ability to click on a text label to select a radio button or checkbox).

Each LABEL element is associated with exactly one form control. The element's content is the label of the form control and may include inline elements such as IMG and STRONG.

FOR

The FOR attribute explicitly specifies the control associated with the LABEL. The value of the FOR attribute must match the value of the associated form control's ID attribute. In the absence of the FOR attribute, the LABEL must contain the associated form control. This method of implicit association is convenient in many cases, but not an option when the form control and its label are in different table cells, paragraphs, or divisions. The following example illustrates both explicit and implicit label associations:

<TABLE>
  <TR>
    <TD>
      <LABEL FOR=user ACCESSKEY=U>User</LABEL>
    </TD>
    <TD>
      <SELECT NAME=user ID=user>
        <OPTION>Jean</OPTION>
        <OPTION>Kim</OPTION>
        <OPTION>Brian</OPTION>
      </SELECT>
    </TD>
  </TR>
  <TR>
    <TD><LABEL FOR=passwd ACCESSKEY=P>Password</LABEL></TD>
    <TD><INPUT TYPE=password NAME=password ID=passwd></TD>
  </TR>
</TABLE>
<P>
  <LABEL ACCESSKEY=S>
    <INPUT TYPE=checkbox NAME=save VALUE=yes>
    Save user name and password in a cookie
  </LABEL>
</P>
<P>
  <LABEL ACCESSKEY=C>
    Comments to post:
    <TEXTAREA NAME=comments ROWS=8 COLS=50></TEXTAREA>
  </LABEL>
</P>

ACCESSKEY

The ACCESSKEY attribute, used throughout the preceding example, specifies a single Unicode character as a shortcut key for giving focus to the LABEL, which passes the focus on to the associated form control. Entities (e.g. &eacute;) may be used as the ACCESSKEY value.

ONFOCUS & ONBLUR

The LABEL element also takes a number of attributes to specify client-side scripting actions for various events. In addition to the core events common to most elements, LABEL accepts the following event attributes:

  • ONFOCUS, when the element receives focus;
  • ONBLUR, when the element loses focus.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • LABEL in W3C HTML 4.0 Recommendation
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


LEGEND - Fieldset Caption

Syntax

<LEGEND>...</LEGEND>

Attribute Specifications

ACCESSKEY=Character (shortcut key)
ALIGN=[ top | bottom | left | right ] (alignment relative to fieldset)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements

Contained in

FIELDSET

Description

The LEGEND element defines a caption for form controls grouped by the FIELDSET element. The LEGEND element must be at the start of a FIELDSET, before any other elements.

While the LEGEND element is not widely supported by current browsers, it can still be used safely if a block-level element immediately follows the LEGEND. Combined with careful use of FIELDSET, this will cause non-supporting browsers to render the caption as its own paragraph. Elements such as STRONG, B, and BIG could also be used to help express the meaning of LEGEND to non-supporting browsers.

An example follows:

<FIELDSET>
  <LEGEND ACCESSKEY=C>Credit Card Information</LEGEND>
  <P>
    <LABEL ACCESSKEY=V>
      <INPUT TYPE=radio NAME=card VALUE=visa> Visa
    </LABEL>
    <LABEL ACCESSKEY=M>
      <INPUT TYPE=radio NAME=card VALUE=mc> MasterCard
    </LABEL>
    <BR>
    <LABEL ACCESSKEY=N>
      Number: <INPUT TYPE=text NAME=number>
    </LABEL>
    <BR>
    <LABEL ACCESSKEY=E>
      Expiry: <INPUT TYPE=text NAME=expiry>
    </LABEL>
  </P>
</FIELDSET>
ACCESSKEY

LEGEND's ACCESSKEY attribute, used throughout the preceding example, specifies a single Unicode character as a shortcut key for giving focus to the LEGEND, allowing the user to quickly jump to a group of form controls. Entities (e.g. &eacute;) may be used as the ACCESSKEY value.

ALIGN

The deprecated ALIGN attribute of LEGEND suggests where the caption should be positioned relative to the FIELDSET on visual browsers. Possible values are top, bottom, left, and right. While ALIGN is deprecated, no alternative currently exists in Cascading Style Sheets.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • LEGEND in W3C HTML 4.0 Recommendation
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


LI - List Item

Syntax

<LI>...</LI>

Attribute Specifications

TYPE=[ disc | square | circle | 1 | a | A | i | I ] (style of list item marker)
VALUE=Number (number in sequence)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements, block-level elements (except for LIs used within DIR and MENU, which do not allow block-level elements)

Contained in

OL, UL , DIR, MENU

Description

The LI element defines a list item. The element must be contained within DIR, MENU, OL or UL.

Unless used with the deprecated MENU or DIR elements, LI may contain block-level elements, including H2, TABLE, UL, and OL. This allows OL and UL to be nested, as in the following example:

<UL>
  <LI>
    <H2>HTML Document Type Definitions</H2>
    <UL>
      <LI><A HREF="html.dtd">HTML 2.0</A></LI>
      <LI><A HREF="HTML32.dtd">HTML 3.2</A></LI>
      <LI><A HREF="strict.dtd">HTML 4.0 Strict</A></LI>
    </UL>
  </LI>
  <LI>
    <H2>SGML Character Entity References</H2>
    <UL>
      <LI><A HREF="HTMLlat1.ent">Latin-1 Entities</A></LI>
      <LI><A HREF="HTMLsymbol.ent">Symbols and Greek Letters</A></LI>
      <LI><A HREF="HTMLspecial.ent">Other Special Characters</A></LI>
    </UL>
  </LI>
</UL>

When used with MENU and DIR, LI may not contain block-level elements, and lists cannot be nested.

TYPE

The deprecated TYPE attribute of LI suggests the rendering of the list item marker. Possible values are as follows:

  • Case-insensitive values for LI within a UL, DIR, or MENU:
    • disc (a filled-in circle)
    • square (a square outline)
    • circle (a circle outline)
  • Case-sensitive values for LI within an OL:
    • 1 (decimal numbers: 1, 2, 3, 4, 5, ...)
    • a (lowercase alphabetic: a, b, c, d, e, ...)
    • A (uppercase alphabetic: A, B, C, D, E, ...)
    • i (lowercase Roman numerals: i, ii, iii, iv, v, ...)
    • I (uppercase Roman numerals: I, II, III, IV, V, ...)

Style sheets provide greater flexibility in suggesting list item styles. The list-style property of CSS includes the added abilities to suppress list item markers, use images as markers, and more.

VALUE

LI's VALUE attribute specifies the number of the list item when used with an OL. The number must be given as an integer, though the list item marker may be rendered in another form (for example, as a Roman numeral). Any LI element following in the same list will take its default sequence number based on the first preceding VALUE attribute. VALUE is deprecated in HTML 4.0, but no substitute currently exists in CSS.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • LI in W3C HTML 4.0 Recommendation
  • LI in W3C HTML 3.2 Recommendation
  • LI in HTML 2.0 Standard
  • LI in WDG HTML 3.2 Reference
  • LI in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


LINK - Document Relationship

Syntax

<LINK>

Attribute Specifications

REL=LinkTypes (relationship to link)
REV=LinkTypes (relationship from link)
HREF=url (hypertext reference)
TYPE=ContentType (content-type of link)
TARGET=FrameTarget (frame to render link in)
MEDIA=MediaDesc (media appropriate for link)
HREFLANG=LanguageCode (language of link)
CHARSET=Charset (character encoding of link)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents
Empty
Contained in

HEAD

Description

The LINK element defines document relationships. Any number of LINK elements may be contained in the HEAD of a document. Many browsers lack support for LINK, so authors should not depend on the browser making the links available to the user.

REL, REV, TYPE & HREF

The REL and REV attributes define the nature of the relationship between the documents and the linked resource. REL defines a link relationship from the current document to the linked resource while REV defines a relationship in the opposite direction. For example,

<LINK REL=Glossary HREF="foo.html">

indicates that foo.html is a glossary for the current document while

<LINK REV=Subsection HREF="bar.html">

indicates that the current document is a subsection of bar.html. The value of the REL and REV attributes is a space-separated list of link types.

Commonly used relationships include the next or previous document in a sequence, the starting page in a collection of documents, a document with copyright information, and information about the author. A document could define these relationships as follows:

<LINK REL=Prev HREF="base.html" TITLE="BASE - Document Base url">
<LINK REL=Next HREF="meta.html" TITLE="META - Metadata">
<LINK REL=Start HREF="" TITLE="HTML 4.0 Reference">
<LINK REL=Copyright HREF="/copyright.html" TITLE="Copyright Notice">
<LINK REV=Made HREF="mailto:liam@htmlhelp.com" TITLE="HTML 4.0 Reference Feedback">

While the value of REL and REV is case-insensitive, the Lynx browser renders the relationship exactly as given by the author. Authors should therefore be consistent in their case, and may wish to capitalize the first letter while using lowercase for the rest.

Authors can also use the LINK element to apply an external style sheet. REL=StyleSheet specifies a persistent or preferred style while REL="Alternate StyleSheet" defines an alternate style. A persistent style is one that is always applied when style sheets are enabled. The absence of the TITLE attribute indicates a persistent style.

A preferred style is one that is automatically applied. The combination of REL=StyleSheet and a TITLE attribute specifies a preferred style. Authors cannot specify more than one preferred style.

An alternate style is indicated by REL="Alternate StyleSheet". The user could choose to replace the preferred style sheet with an alternate one, though current browsers generally lack the ability to choose alternate styles.

A single style may also be given through multiple style sheets:

<LINK REL=StyleSheet HREF="basics.css" TITLE="Contemporary" TYPE="text/css">
<LINK REL=StyleSheet HREF="tables.css" TITLE="Contemporary" TYPE="text/css">
<LINK REL=StyleSheet HREF="forms.css" TITLE="Contemporary" TYPE="text/css">

In this example, three style sheets are combined into one "Contemporary" style that is applied as a preferred style sheet. To combine multiple style sheets into a single style, each style sheet's LINK must use the same TITLE.

MEDIA

LINK's MEDIA attribute specifies the media for which the linked resource is designed. With REL=StyleSheet, this allows authors to restrict a style sheet to certain output devices, such as printers or aural browsers. The attribute's value is a comma-separated list of media descriptors. The following media descriptors are defined in HTML 4.0 and are case-sensitive:

  • screen (the default), for non-paged computer screens;
  • tty, for fixed-pitch character grid displays (such as the display used by Lynx);
  • tv, for television-type devices with low resolution and limited scrollability;
  • projection, for projectors;
  • handheld, for handheld devices (characterized by a small, monochrome display and limited bandwidth);
  • print, for output to a printer;
  • braille, for braille tactile feedback devices;
  • aural, for speech synthesizers;
  • all, for all devices.

Netscape Navigator 4.x incorrectly ignores any style sheet linked with a MEDIA value other than screen. For example, MEDIA="screen, projection" will cause the style sheet to be ignored by Navigator 4.x, even if the presentation device is a computer screen. Navigator 4.x also ignores style sheets declared with MEDIA=all. Most other browsers ignore the MEDIA attribute.

HREFLANG & CHARSET

The optional HREFLANG and CHARSET attributes of LINK give the language and character encoding, respectively, of the link. The language should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Examples of character encodings include ISO-8859-1, SHIFT_JIS, and UTF-8.

The Alternate link relationship defines an alternate version of the document. Translations of a page can be identified by using REL=Alternate along with the HREFLANG attribute. Versions of the page tailored for specific media can be provided by combining REL=Alternate with the MEDIA attribute. Some examples follow:

<LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
<LINK REL=Alternate HREF="index.ja.html" HREFLANG=ja CHARSET="SHIFT_JIS" TITLE="Japanese version">
<LINK REL=Alternate HREF="/distribution/html40.pdf" TYPE="application/pdf" MEDIA=print TITLE="PDF version">

Note that the LANG and DIR attributes apply to the text of the TITLE attribute, not to the content of the link.

TARGET

The TARGET attribute is used with frames to specify in which frame the link should be rendered. If no frame with such a name exists, the link is rendered in a new window unless overridden by the user. Special frame names begin with an underscore:

  • _blank renders the link in a new, unnamed window
  • _self renders the link in the current frame (useful for overriding a BASE TARGET)
  • _parent renders the link in the immediate FRAMESET parent
  • _top renders the link in the full, unframed window

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • LINK in W3C HTML 4.0 Recommendation
  • LINK in W3C HTML 3.2 Recommendation
  • LINK in HTML 2.0 Standard
  • LINK in WDG HTML 3.2 Reference
  • LINK in Learning HTML 3.2 by Examples
  • Metadata at W3C
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


MAP - Image Map

Syntax

<MAP>...</MAP>

Attribute Specifications

NAME=CDATA (name of map)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

One or more block-level elements or one or more AREA elements

Contained in

Inline elements, block-level elements

Description

The MAP element defines a client-side image map for use with an IMG or OBJECT. MAP's required NAME attribute is used as an anchor for the USEMAP attribute of the IMG or OBJECT. While a MAP element can define image maps embedded in other files, browsers typically only support client-side image maps with the MAP in the same file as the image.

MAP was originally defined to take one or more AREA elements that specified the coordinates of a clickable region on the image. An example follows:

<MAP NAME=mymap>
<AREA HREF="/reference/" ALT="HTML and CSS Reference" COORDS="5,5,95,195">
<AREA HREF="/design/" ALT="Design Guide" COORDS="105,5,195,195">
<AREA HREF="/tools/" ALT="Tools" COORDS="205,5,295,195">
</MAP>
<IMG SRC="sitemap.gif" ALT="Site map" USEMAP="#mymap" WIDTH=300 HEIGHT=200>

HTML 4.0 extends the MAP element to take one or more block-level elements as an alternative to using AREA elements. Combined with the OBJECT element, this allows rich alternative content for those not loading images. However, due to poor and buggy browser support for OBJECT, client-side image maps through the IMG element are more reliable.

When MAP is given within an OBJECT, its contents are not rendered on image-loading browsers. MAP may also be used outside the OBJECT element so that its contents are rendered.

The following example gives two images, one an alternate if the first type of image is not supported. The images share a single image map definition, which is included within the OBJECT element. The MAP element contains a menu of links to be rendered on browsers not loading images.

<OBJECT DATA="sitemap.png" USEMAP="#map" TYPE="image/png" TITLE="Site map" WIDTH=300 HEIGHT=200>
<OBJECT DATA="sitemap.gif" USEMAP="#map" TYPE="image/gif" TITLE="Site map" WIDTH=300 HEIGHT=200>
<MAP NAME=map>
<UL>
<LI><A HREF="/reference/" COORDS="5,5,95,195">HTML and CSS Reference</A></LI>
<LI><A HREF="/design/" COORDS="105,5,195,195">Design Guide</A></LI>
<LI><A HREF="/tools/index.html" COORDS="205,5,295,195">Tools</A></LI>
</UL>
</MAP>
</OBJECT>
</OBJECT>

NAME

Defines the name of the Image Map.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • MAP in W3C HTML 4.0 Recommendation
  • MAP in W3C HTML 3.2 Recommendation
  • MAP in WDG HTML 3.2 Reference
  • MAP in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


MENU - Menu List

Syntax

<MENU>...</MENU>

Attribute Specifications

COMPACT (compact display)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

One or more LI elements that cannot contain block-level elements

Contained in

APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

Description

The MENU element defines a menu list. The element contains one or more LI elements that define the actual items of the list. The LI elements must not contain block-level elements, which prevents MENUs from being nested.

MENU is deprecated in HTML 4.0 in favor of UL.

COMPACT

The COMPACT attribute suggests that visual browsers render the list compactly, perhaps with reduced spacing between items. This attribute is not well supported among browsers.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • MENU in W3C HTML 4.0 Recommendation
  • MENU in W3C HTML 3.2 Recommendation
  • MENU in HTML 2.0 Standard
  • MENU in WDG HTML 3.2 Reference
  • MENU in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


META - Metadata

Syntax

<META>

Attribute Specifications

NAME=Name (property name)
HTTP-EQUIV=Name (HTTP response header name)
CONTENT=CDATA (associated data)
SCHEME=CDATA (form of data)
internationalization attributes (for the CONTENT)

Contents

Empty

Contained in

HEAD

Description

The META element provides metadata such as a document's keywords, description, and author. Any number of META elements may be contained in the HEAD of a document.

There is no standard list of META properties, so authors may define whatever metadata they like. The following example defines the author of the document:

<META NAME=author CONTENT="Liam Quinn">

Some search engines use keywords and description properties, giving extra weight to a document's keywords and providing its description with the link to the document. Example:

<META NAME="description" CONTENT="A description of HTML 4.0's META element for metadata.">
<META NAME="keywords" CONTENT="META, meta element, metadata, metainformation, meta data, meta information, keywords, description, refresh, HyperText Markup Language, HTML, HTML4, HTML 4.0, Web Design Group, WDG, &lt;meta&gt; tag, &lt;META&gt; tag">

To avoid being truncated by search engines, the description should be brief--no more than 200 characters. Keywords are separated by commas and may be considered case sensitive by search engines. If the same keywords are repeated too often in the META element, some search engines will not index the document. Search engines typically only process the first 1000 characters of the keywords list.

Some search engines also support the robots property for indicating whether a document should be indexed and whether its links should be followed. The associated CONTENT value is a comma-separated list of case-insensitive directives:

  • index specifies that the page should be indexed while noindex specifies that it should not be indexed;
  • follow specifies that the page's links should be followed while nofollow specifies that they should not be followed;
  • all is equivalent to index,follow (the default value);
  • none is equivalent to noindex,nofollow.

NAME & CONTENTS

META's NAME attribute provides a property name while the CONTENT attribute gives the corresponding value. The CONTENT attribute value may contain text and entities, but it may not contain HTML tags.

SCHEME

The optional SCHEME attribute gives the format of the property value. For example, a date property may require SCHEME="Month-Day-Year" to disambiguate the date from other formats such as SCHEME="Day-Month-Year".

HTTP-EQUIV

The HTTP-EQUIV attribute may be used in place of the NAME attribute to indicate that the property is an HTTP header. Some servers will send the HTTP header specified in the META element, and browsers often recognize the header even when it is not sent by the server. Examples:

<META HTTP-EQUIV=Expires CONTENT="Sun, 22 Mar 1998 16:18:35 GMT">
sets the expiry date of the document.
<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
sets the client-side scripting language for inline scripts to JavaScript.
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
sets the style language for inline styles to CSS.
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS">
sets the character encoding for the document to SHIFT_JIS (a Japanese encoding). Note that using META for this purpose rather than a true HTTP header causes some browsers to redraw the page after initially displaying it.
<META HTTP-EQUIV=Refresh CONTENT="10; URL=http://www.htmlhelp.com/">
tells the browser to load http://www.htmlhelp.com/ 10 seconds after the current document has finished loading. Not all browsers support this, so authors should provide an alternate means of moving to the new page where necessary. The Refresh header is sometimes used for "splash screens" or when a page has moved, but the technique is not very effective since users may not even be looking at the window that is to be refreshed and since it messes up the user's history on many browsers. Some search engines penalize pages that use a Refresh of a few seconds or less.

Example

For example, the following META element tells search engines and other robots not to index the page but to follow links on it:

<META NAME=robots CONTENT="noindex,follow">

Few search engines support the robots property at this time. For greater compliance by robots, authors should use the Robots Exclusion Protocol if possible.

More Information

  • META in W3C HTML 4.0 Recommendation
  • META in W3C HTML 3.2 Recommendation
  • META in HTML 2.0 Standard
  • META in WDG HTML 3.2 Reference
  • META in Learning HTML 3.2 by Examples
  • Metadata at W3C
  • The META tag: Controlling how your Web page is indexed by AltaVista
  • Infoseek Submitting Tips
  • HotBot FAQ: Descriptions, Titles, Keywords, and <meta> Tags
  • Lycos Help: Robots Meta Tag
  • Robots Exclusion
    • HTML Author's Guide to the Robots META tag
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


What's New in HTML 4.0

  • New Elements in HTML 4.0
  • Separation of Structure and Presentation
  • Accessibility
  • Internationalization
  • Style Sheets
  • Client-side Scripting
  • Frames
  • Advanced Tables

New Elements in HTML 4.0

The following elements are new in HTML 4.0:

  • ABBR - Abbreviation
  • ACRONYM - Acronym
  • BDO - BiDi override
  • BUTTON - Button
  • COL - Table column
  • COLGROUP - Table column group
  • DEL - Deleted text
  • FIELDSET - Form control group
  • FRAME - Frame
  • FRAMESET - Frameset
  • IFRAME - Inline frame
  • INS - Inserted text
  • LABEL - Form field label
  • LEGEND - Fieldset caption
  • NOFRAMES - Frames alternate content
  • NOSCRIPT - Alternate script content
  • OBJECT - Object
  • OPTGROUP - Option group
  • Q - Short quotation
  • S - Strike-through text
  • SPAN - Generic inline container
  • TBODY - Table body
  • TFOOT - Table foot
  • THEAD - Table head

Separation of Structure and Presentation

By deprecating many presentational features from HTML 3.2 and adding hooks for style sheets, HTML 4.0 encourages separating a document's structure from its presentation. This concept is key to understanding HTML 4.0.

When authors use HTML to markup a document's structure and style sheets to suggest the document's presentation, they can more easily achieve the device-independence that helped bring HTML its initial popularity. A document with a rich structure can be presented in many different ways on different media, allowing the document to adjust to new technologies such as phone or in-car aural browsers. The separation of content and presentation also allows authors to change the presentation of an entire site by editing a single style sheet, providing significant advantages in site maintenance.

Accessibility

Many of HTML 4.0's improvements in the area of accessibility follow from its emphasis on the separation of structure and presentation. When HTML is used structurally, a document can adapt to different browsing environments, accommodating large fonts, special colors, speech synthesizers, and Braille tactile feedback devices. This adaptability allows blind, low-vision, colorblind, and cognitively-challenged users access to the Web, opening a door for the world's 600 million disabled people.

HTML 4.0 includes many new elements and attributes aimed at improving the Web's accessibility. The multi-dimensional nature of HTML tables has long posed problems for non-visual browsing, but new attributes on the TABLE, TH, and TD elements allow table summaries and a more explicit association between a cell and its header information. These attributes give non-visual browsers the ability to render a cell's header information, possibly in an abbreviated form, before giving the cell's content.

New elements in HTML 4.0 also bring accessibility improvements to forms. The new FIELDSET element allows form controls to be grouped together and the LEGEND element provides a caption for the group. By grouping related form controls, authors allow those with non-visual browsers to more easily navigate complicated forms. As well, the new LABEL element associates a text label with a form control so that users can more easily determine what information is required in a given field.

Other accessibility improvements include full image descriptions through the LONGDESC attribute on the IMG element, rich alternatives to images and videos through the OBJECT element, and richer alternatives to image maps through a new content model for the MAP element.

Internationalization

To allow representation of the world's languages, HTML 4.0 adopts the Universal Character Set as its character set. Previous versions of HTML were restricted to ISO-8859-1, a character set that only handled some western European languages. The Universal Character Set is character-by-character equivalent to Unicode 2.0 and contains characters for almost all of the world's languages.

The LANG and DIR attributes are new in HTML 4.0 and apply to almost all elements. These attributes allow authors to specify the language and directionality of text. The BDO element allows authors to override the bidirectional algorithm used when right-to-left text such as Hebrew is presented.

HTML 4.0 also offers new entities for easy entry of mathematical symbols and Greek letters as well as other special characters.

Style Sheets

HTML 4.0 adds new hooks for style sheets, which suggest how a document is presented. The new ID, CLASS, and STYLE attributes allow style information to be attached to specific elements. The LINK and STYLE elements have new TYPE and MEDIA attributes for specifying the style sheet language and target media, respectively.

Client-side Scripting

HTML 4.0 embraces client-side scripting through the addition of a number of new attributes. The SCRIPT element now includes attributes for specifying the scripting language, embedding an external script, and deferring execution of a script. As well, a number of event attributes have been added to enable execution of a script upon events such as the user clicking an element, pressing a key, moving the mouse over an element, or changing the value of a form control.

The NOSCRIPT element, also new in HTML 4.0, provides alternate content for browsers with client-side scripting disabled or not supported.

Frames

The inclusion of frames in HTML 4.0 gives authors the ability to present multiple documents in one window. The frames model used in HTML 4.0 is not changed from the flawed frames model originally proposed by Netscape.

Advanced Tables

The simple table model of HTML 3.2 is expanded in HTML 4.0 to include row and column groups, greater flexibility in defining a table's rules, and accessibility improvements. The use of row groups (THEAD, TFOOT, TBODY) allows visual browsers to render static header and footer rows with scrollable body rows, thus improving the readability of large tables.

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


NOFRAMES - Frames Alternate Content

Syntax

<NOFRAMES>...<NOFRAMES>

Attribute Specifications

[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

  • In HTML 4.0 Transitional: inline elements, block-level elements
  • In HTML 4.0 Frameset: one BODY element that must not contain any NOFRAMES elements

Contained in

APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, FRAMESET, IFRAME, INS, LI, MAP, NOSCRIPT, OBJECT, TD, TH

Description

The NOFRAMES element contains content that should only be rendered when frames are not displayed. NOFRAMES is typically used in a Frameset document to provide alternate content for browsers that do not support frames or have frames disabled.

When used within a FRAMESET, NOFRAMES must contain a BODY element. There must not be any NOFRAMES elements contained within this BODY element.

A meaningful NOFRAMES element should always be provided in a Frameset document and should at the very least contain links to the main frame or frames. NOFRAMES should not contain a message telling the user to upgrade his or her browser. Some browsers support frames but allow the user to disable them.

Various methods of automatically creating non-frames content exist. See Frames design guidelines: automatic no-frames content for more details.

An example follows:

<FRAMESET ROWS="*,100">
  <FRAMESET COLS="40%,*">
    <FRAME NAME="Menu" SRC="nav.html" TITLE="Menu">
    <FRAME NAME="Content" SRC="main.html" TITLE="Content">
  </FRAMESET>
  <FRAME NAME="Ad" SRC="ad.html" TITLE="Advertisement">
  <NOFRAMES>
    <BODY>
      <H1>Table of Contents</H1>
      <UL>
        <LI>
          <A HREF="reference/html40/">HTML 4.0 Reference</A>
        </LI>
        <LI>
          <A HREF="reference/wilbur/">HTML 3.2 Reference</A>
        </LI>
        <LI>
          <A HREF="reference/css/">CSS Guide</A>
        </LI>
      </UL>
      <P>
        <IMG SRC="ad.gif" ALT="Ad: Does your bank charge too much?">
      </P>
    </BODY>
  </NOFRAMES>
</FRAMESET>

In HTML 4.0 Transitional, the NOFRAMES element is also permitted within most block-level elements. This allows authors to include content, such as navigation aids, that should only be displayed if the document is not being viewed within a frameset. Such use helps to ensure that a frame could stand on its own if bookmarked or accessed through a search engine while not burdening the frames user with duplicate content. However, most browsers do not support this use of NOFRAMES and will always display the content.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • NOFRAMES in W3C HTML 4.0 Recommendation
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


NOSCRIPT - Non-script Content

Syntax

<NOSCRIPT>...</NOSCRIPT>

Attribute Specifications

[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Block-level elements , inline elements

Contained in

APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

Description

The NOSCRIPT element provides alternate content for a client-side script that was not executed. A script will fail to execute if the browser does not support the scripting language or if the user has disabled client-side scripting. NOSCRIPT should follow the SCRIPT element for which it provides alternate content.

Note that most browsers will fail to render the contents of NOSCRIPT if the scripting language is not supported and the user has enabled client-side scripting. Most browsers will only render NOSCRIPT when the user has disabled client-side scripting.

Also note that Netscape Navigator 2.x supports JavaScript 1.0 but still renders all NOSCRIPT content.

Since client-side scripts usually provide dynamic interactivity that cannot be replaced by static content, the NOSCRIPT element is generally not useful. Authors should try to use client-side scripts as optional enhancements that are not integral components of the Web page. In the case of form validation, any error checking done by the client-side script should be repeated by the CGI script or Java servlet that handles the submission at the server.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • NOSCRIPT in W3C HTML 4.0 Recommendation
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


OBJECT - Embedded Object

Syntax

<OBJECT>...</OBJECT>

Attribute Specifications

DATA=url (object data)
CLASSID=url (location of implementation)
ARCHIVE=CDATA (archive files)
CODEBASE=url (base url for CLASSID, DATA, ARCHIVE)
WIDTH=Length (object width)
HEIGHT=Length (object height)
NAME=CDATA (name for form submission)
USEMAP=url (client-side image map)
TYPE=ContentType (content-type of object)
CODETYPE=ContentType (content-type of code)
STANDBY=Text (message to show while loading)
TABINDEX=NUMBER (position in tabbing order)
DECLARE (do not instantiate object)
ALIGN=[ top | middle | bottom | left | right ] (object alignment)
BORDER=Length (link border width)
HSPACE=Pixels (horizontal gutter)
VSPACE=Pixels (vertical gutter)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

PARAM elements followed by block-level elements and/or inline elements

Contained in

HEAD, inline elements, block-level elements except PRE

Description

The OBJECT element is used to include objects such as images, videos, Java applets, and VRML worlds. OBJECT is intended to replace the more specific IMG and APPLET elements, as well as the proprietary EMBED and BGSOUND elements, though a lack of browser support and severe bugs in supporting browsers make the other elements a better choice for the time being.

DATA & CODEBASE

OBJECT's DATA attribute specifies the url of the embedded object. Relative urls are interpreted with respect to the CODEBASE attribute if it is given.

WIDTH & HEIGHT

The WIDTH and HEIGHT attributes define the dimensions of the object. The value may be given in pixels or as a percentage of the parent element's width or height. Most browsers require the WIDTH and HEIGHT attributes for all objects embedded using OBJECT.

CLASSID

The CLASSID may be used to specify an implementation for the object. Java applets, Python applets, and ActiveX controls all provide implementations for the embedded object, and so are specified with the CLASSID attribute, as in the following example:

<OBJECT CLASSID="yahtzee.py" CODETYPE="application/x-python" STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
<OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
<OBJECT DATA="yahtzee.gif" TYPE="image/gif" TITLE="A Yahtzee animation" WIDTH=200 HEIGHT=100>
Yahtzee is my <EM>favorite</EM> game!
</OBJECT>
</OBJECT>
</OBJECT>

This example also demonstrates the use of alternate content for browsers that cannot display the embedded object. In the example, a Yahtzee game written in Python is used if the browser supports it. A Java version is provided as an alternate for browsers that do not support Python applets. An image is given for browsers that cannot show the Java or Python applets, and plain text is used as a final alternate if images are not loaded. Note that OBJECT is backwards compatible with pre-HTML 4.0 browsers since they will ignore the <OBJECT> tags and render the innermost alternate content (the text in the example).

TYPE & CODETYPE

The preceding example also makes use of the TYPE and CODETYPE attributes to allow browsers to avoid requesting a file that they cannot render. The TYPE attribute specifies the media type of the resource referenced by the DATA attribute while the CODETYPE attribute specifies the media type of the CLASSID data.

STANDBY

The STANDBY attribute is also utilized in the example. This attribute provides short text to display while the object is loading.

ARCHIVE

The ARCHIVE attribute can specify a space-separated list of archived files (either absolute urls or urls relative to the CODEBASE), allowing the browser to download many files with a single connection and hence decreasing the total download time. The standard archive format for Java files is JAR. JAR files can be created with the jar tool included with the Java Development Kit 1.1 and up.

DECLARE

The DECLARE attribute makes the object a declaration that is not immediately instantiated. This allows the object to be instantiated from a link, button, or object later in the same document. The ID attribute must be used with declared objects as an identifier for the instantiating element. For example:

<OBJECT DECLARE ID=yahtzee CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 TITLE="My Yahtzee Game">
<IMG SRC="yahtzee.gif" ALT="You get the dice!" TITLE="Yahtzee animation">
</OBJECT>
...
<P>Ready to <A HREF="#yahtzee">play Yahtzee</A>?</P>

PARAM

The OBJECT element may contain PARAM elements--before any other content--to provide run-time initialization data. The following example embeds a video, with an audio clip for alternate content, and includes parameters commonly understood by audio/video plug-ins. Note the placement of PARAM elements before alternate content.

<OBJECT DATA="mlk.mov" TYPE="video/quicktime" TITLE="Martin Luther King's &quot;I Have a Dream&quot; speech" WIDTH=150 HEIGHT=150>
<PARAM NAME=pluginspage VALUE="http://quicktime.apple.com/">
<PARAM NAME=autoplay VALUE=true>
<OBJECT DATA="mlk.wav" TYPE="audio/x-wav" TITLE="Martin Luther King's &quot;I Have a Dream&quot; speech">
<PARAM NAME=autostart VALUE=true>
<PARAM NAME=hidden VALUE=true>
<A HREF="mlk.html">Full text of Martin Luther King's "I Have a Dream" speech</A>
</OBJECT>
</OBJECT>

USEMAP

The USEMAP attribute can be used with OBJECT to embed a clickable image where different coordinates have different link destinations. Image maps via the IMG element are better supported, but OBJECT-based image maps allow a full textual alternative for browsers not loading images. The USEMAP attribute points to a MAP element whose contents define the links of the various coordinates. The MAP may be included within the OBJECT, in which case its contents are not rendered on image-loading browsers, or it may be given outside the OBJECT element so that its contents are rendered.

The following example gives two images, one an alternate if the first type of image is not supported. The images share a single image map definition, which is included within the OBJECT element. The MAP element contains a menu of links to be rendered on browsers not loading images.

<OBJECT DATA="sitemap.png" USEMAP="#map" TYPE="image/png" TITLE="Site map" WIDTH=300 HEIGHT=200>
<OBJECT DATA="sitemap.gif" USEMAP="#map" TYPE="image/gif" TITLE="Site map" WIDTH=300 HEIGHT=200>
<MAP NAME=map>
<UL>
<LI><A HREF="/reference/" COORDS="5,5,95,195">HTML and CSS Reference</A></LI>
<LI><A HREF="/design/" COORDS="105,5,195,195">Design Guide</A></LI>
<LI><A HREF="/tools/index.html" COORDS="205,5,295,195">Tools</A></LI>
</UL>
</MAP>
</OBJECT>
</OBJECT>

TABINDEX

The TABINDEX attribute specifies a number between 0 and 32767 to indicate the tabbing order of the element. An object with TABINDEX=0 or no TABINDEX attribute will be visited after any elements with a positive TABINDEX. Among positive TABINDEX values, the lower number receives focus first. In the case of a tie, the element appearing first in the HTML document takes precedence.

ALIGN

The ALIGN attribute, deprecated in HTML 4.0, specifies the alignment of the object. The values top, middle, and bottom specify the object's position with respect to surrounding content on its left and right.

ALIGN=middle aligns the center of the object with the current baseline. To center the object horizontally on the page, place the object in a centered block, e.g.,

<P ALIGN=center><OBJECT DATA="foo.mov" TYPE="video/quicktime"></OBJECT></P>

The other ALIGN values, left and right, specify a floating object; the object is placed at the left or right margin and content flows around it. To place content below the object, use <BR CLEAR=left|right|all> as appropriate.

The vertical-align and float properties of Cascading Style Sheets provide more flexible methods of aligning objects.

BORDER

The BORDER attribute, deprecated in HTML 4.0, specifies the width of the object's border. Specifying BORDER=0 will eliminate the border around a linked object in most browsers, though some allow the user to override this. Authors should only use BORDER=0 if the object would be clearly recognizable as a link, or as a method of de-emphasizing a link. For example:

<A HREF="reference/"><OBJECT DATA="icon/reference.gif" WIDTH=90 HEIGHT=90 BORDER=0></OBJECT>Web Authoring Reference</A>

HSPACE & VSPACE

The deprecated HSPACE and VSPACE attributes allow an author to suggest horizontal gutters and vertical gutters, respectively, around the object. The value must be in pixels and applies to both sides of the object. Style sheets provide more flexibility in specifying the space around objects.

OBJECT

The OBJECT element is most useful as a BODY element and can be contained within either inline or block-level elements. The contents of OBJECT should be elements that can be contained within OBJECT's parent element. For example, an A element containing an OBJECT should not have any block-level elements as the contents of the OBJECT.

NAME

"This provides a way for user agents which support FORMs to determine whether an object within a FORM block should participate in the "submit" process. If NAME is specified and the DECLARE attribute is absent, then the user agent should include the value of the NAME attribute and data obtained from the object along with the information derived from other form fields. The mechanism used to obtain the object's data is specific to each object system." (W3)

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • OBJECT in W3C HTML 4.0 Recommendation
  • The Java Tutorial
  • ActiveX Controls
  • Python Language Home Page
  • PNG (Portable Network Graphics) Home Page
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


OL - Ordered List

Syntax

<OL>...</OL>

Attribute Specifications

TYPE=[ 1 | a | A | i | I ] (numbering style)
START=Number (starting number)
COMPACT (compact display)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

One or more LI elements

Contained in

APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

Description

The OL element defines an ordered list. The element contains one or more LI elements that define the actual items of the list.

Unlike with an unordered list (UL), the items of an ordered list have a definite sequence. Items in an ordered list are numbered by the browser.

TYPE

The deprecated TYPE attribute of OL suggests the numbering style on visual browsers. The case-sensitive values are as follows:

  • 1 (decimal numbers: 1, 2, 3, 4, 5, ...)
  • a (lowercase alphabetic: a, b, c, d, e, ...)
  • A (uppercase alphabetic: A, B, C, D, E, ...)
  • i (lowercase Roman numerals: i, ii, iii, iv, v, ...)
  • I (uppercase Roman numerals: I, II, III, IV, V, ...)

The numbering style on an individual list item can be suggested using the TYPE attribute of LI. The list-style-type property of CSS provides greater flexibility in suggesting numbering styles.

START

The deprecated START attribute suggests the starting number for the list and defaults to 1. The value of START must be an integer, but the number may be presented in a different form (for example, as a Roman numeral). While this attribute is deprecated, there is currently no substitute for it in Cascading Style Sheets.

COMPACT

The deprecated COMPACT attribute suggests that visual browsers render the list compactly, perhaps with reduced spacing between items. This attribute is not well supported among browsers.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • OL in W3C HTML 4.0 Recommendation
  • OL in W3C HTML 3.2 Recommendation
  • OL in HTML 2.0 Standard
  • OL in WDG HTML 3.2 Reference
  • OL in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


HTML 4.0 Elements

The following is an organizational list of all HTML 4.0 elements. An alphabetical list is also available.

Top-level Elements

  • HTML - HTML document
    • HEAD - Document head
    • BODY - Document body
    • FRAMESET - Frameset

Head Elements

  • BASE - Document base url
  • ISINDEX - Input prompt
  • LINK - Document relationship
  • META - Metadata
  • SCRIPT - Client-side script
  • STYLE - Embedded style sheet
  • TITLE - Document title

Generic Block-level Elements

  • ADDRESS - Address
  • BLOCKQUOTE - Block quotation
  • CENTER - Centered block
  • DEL - Deleted text
  • DIV - Generic block-level container
  • H1 - Level-one heading
  • H2 - Level-two heading
  • H3 - Level-three heading
  • H4 - Level-four heading
  • H5 - Level-five heading
  • H6 - Level-six heading
  • HR - Horizontal rule
  • INS - Inserted text
  • ISINDEX - Input prompt
  • NOSCRIPT - Alternate script content
  • P - Paragraph
  • PRE - Preformatted text

Lists

  • DIR - Directory list
  • DL - Definition list
    • DT - Definition term
    • DD - Definition description
  • LI - List item
  • MENU - Menu list
  • OL - Ordered list
  • UL - Unordered list

Tables

  • TABLE - Table
    • CAPTION - Table caption
    • COLGROUP - Table column group
      • COL - Table column
    • THEAD - Table head
    • TFOOT - Table foot
    • TBODY - Table body
    • TR - Table row
      • TD - Table data cell
      • TH - Table header cell

Forms

  • FORM - Interactive form
    • BUTTON - Button
    • FIELDSET - Form control group
      • LEGEND - Fieldset caption
    • INPUT - Form input
    • LABEL - Form field label
    • SELECT - Option selector
      • OPTGROUP - Option group
        • OPTION - Menu option
    • TEXTAREA - Multi-line text input

Special Inline Elements

  • A - Anchor
  • APPLET - Java applet
  • BASEFONT - Base font change
  • BDO - BiDi override
  • BR - Line break
  • FONT - Font change
  • IFRAME - Inline frame
  • IMG - Inline image
  • MAP - Image map
    • AREA - Image map region
  • OBJECT - Object
  • PARAM - Object parameter
  • Q - Short quotation
  • SCRIPT - Client-side script
  • SPAN - Generic inline container
  • SUB - Subscript
  • SUP - Superscript

Phrase Elements

  • ABBR - Abbreviation
  • ACRONYM - Acronym
  • CITE - Citation
  • CODE - Computer code
  • DEL - Deleted text
  • DFN - Defined term
  • EM - Emphasis
  • INS - Inserted text
  • KBD - Text to be input
  • SAMP - Sample output
  • STRONG - Strong emphasis
  • VAR - Variable

Font Style Elements

  • B - Bold text
  • BIG - Large text
  • I - Italic text
  • S - Strike-through text
  • SMALL - Small text
  • STRIKE - Strike-through text
  • TT - Teletype text
  • U - Underlined text

Frames

  • FRAMESET - Frameset
    • FRAME - Frame
  • NOFRAMES - Frames alternate content

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


OPTGROUP - Option Group

Syntax

<OPTGROUP>...</OPTGROUP>

Attribute Specifications

LABEL=Text (group label)
DISABLED (disable group of choices)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

One or more OPTION elements

Contained in

SELECT

Description

The OPTGROUP element defines a group of choices within a SELECT menu. OPTGROUP must contain one or more OPTION elements to define the actual choices.

LABEL

The required LABEL attribute specifies the group label presented to the user. The LABEL should describe the group of choices available through the OPTGROUP's OPTIONs. Each OPTION generally uses a LABEL attribute as well to provide a shortened label that, together with the OPTGROUP's LABEL, gives a complete description of the option. An example follows:

<P>Which Web browser do you use most often?
  <SELECT NAME=browser>
    <OPTGROUP LABEL="Netscape Navigator">
      <OPTION LABEL="4.x or higher">
        Netscape Navigator 4.x or higher
      </OPTION>
      <OPTION LABEL="3.x">Netscape Navigator 3.x</OPTION>
      <OPTION LABEL="2.x">Netscape Navigator 2.x</OPTION>
      <OPTION LABEL="1.x">Netscape Navigator 1.x</OPTION>
    </OPTGROUP>
    <OPTGROUP LABEL="Microsoft Internet Explorer">
      <OPTION LABEL="4.x or higher">
        Microsoft Internet Explorer 4.x or higher
      </OPTION>
      <OPTION LABEL="3.x">Microsoft Internet Explorer 3.x</OPTION>
      <OPTION LABEL="2.x">Microsoft Internet Explorer 2.x</OPTION>
      <OPTION LABEL="1.x">Microsoft Internet Explorer 1.x</OPTION>
    </OPTGROUP>
    <OPTGROUP LABEL="Opera">
      <OPTION LABEL="3.x or higher">Opera 3.x or higher</OPTION>
      <OPTION LABEL="2.x">Opera 2.x</OPTION>
    </OPTGROUP>
    <OPTION>Other</OPTION>
  </SELECT>
</P>

OPTGROUP is not well supported by current browsers, but its design allows authors to use it today without sacrificing compatibility with non-supporting browsers. Supporting browsers will render the preceding example using the LABEL attribute of OPTION to provide just the version number, along with the OPTGROUP's LABEL, which gives the full name of the application. This allows a compact display with easy-to-use cascading menus.

Non-supporting browsers will ignore the OPTGROUP elements and LABEL attributes, providing the full name and version for each choice. Thus authors can fully use OPTGROUP despite its lack of browser support.

Note that, in HTML 4.0, OPTGROUP is limited to containing only OPTION elements, thus preventing nested OPTGROUPs with multi-level cascades. Future versions of HTML may add support for nested option groups.

DISABLED

The boolean DISABLED attribute makes the option group unavailable. The options of a disabled option group cannot be selected by the user and are never submitted with the form.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • OPTGROUP in W3C HTML 4.0 Recommendation
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


OPTION - Menu Option

Syntax

<OPTION>...</OPTION>

Attribute Specifications

VALUE=CDATA (value of option)
SELECTED (choice initially selected)
DISABLED (disable choice)
LABEL=Text (option label)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Plain text (including entities)

Contained in

SELECT, OPTGROUP

Description

The OPTION element defines a menu choice within a SELECT menu.

VALUE

The value of the option, sent with a submitted form, is specified with the VALUE attribute. In the absence of a VALUE attribute, the value is the content of the OPTION element.

SELECTED

The boolean SELECTED attribute defines the OPTION to be initially selected. A SELECT element can only have one OPTION selected at any time unless the MULTIPLE attribute is present on SELECT.

If the SELECT element does not use the MULTIPLE or SIZE attributes, some browsers will automatically (and incorrectly) select an option. To ensure that a suitable option is selected, authors may wish to use the SELECTED attribute on an OPTION. If no option is a suitable default, consider using a dummy option, as in the following example:

<SELECT NAME="marital_status">
<OPTION SELECTED VALUE="">Select...</OPTION>
<OPTION>Single</OPTION>
<OPTION>Married</OPTION>
<OPTION>Separated</OPTION>
<OPTION>Divorced</OPTION>
<OPTION>Widowed</OPTION>
</SELECT>

DISABLED

The boolean DISABLED attribute, new in HTML 4.0 and poorly supported by current browsers, makes the OPTION element unavailable. A disabled option cannot be selected by the user and is never submitted with the form.

LABEL

The LABEL attribute specifies the option label presented to the user. This defaults to the content of the OPTION element, but the LABEL attribute allows authors to more easily use OPTGROUP without sacrificing compatibility with browsers that do not support option groups. The following example illustrates the technique:

<P>Which Web browser do you use most often?
  <SELECT NAME=browser>
    <OPTGROUP LABEL="Netscape Navigator">
      <OPTION LABEL="4.x or higher">
        Netscape Navigator 4.x or higher
      </OPTION>
      <OPTION LABEL="3.x">Netscape Navigator 3.x</OPTION>
      <OPTION LABEL="2.x">Netscape Navigator 2.x</OPTION>
      <OPTION LABEL="1.x">Netscape Navigator 1.x</OPTION>
    </OPTGROUP>
    <OPTGROUP LABEL="Microsoft Internet Explorer">
      <OPTION LABEL="4.x or higher">
        Microsoft Internet Explorer 4.x or higher
      </OPTION>
      <OPTION LABEL="3.x">Microsoft Internet Explorer 3.x</OPTION>
      <OPTION LABEL="2.x">Microsoft Internet Explorer 2.x</OPTION>
      <OPTION LABEL="1.x">Microsoft Internet Explorer 1.x</OPTION>
    </OPTGROUP>
    <OPTGROUP LABEL="Opera">
      <OPTION LABEL="3.x or higher">Opera 3.x or higher</OPTION>
      <OPTION LABEL="2.x">Opera 2.x</OPTION>
    </OPTGROUP>
    <OPTION>Other</OPTION>
  </SELECT>
</P>

OPTGROUP and OPTION's LABEL attribute were introduced together, so browsers should support both features or neither of them. Supporting browsers will render the preceding example using the LABEL attribute of OPTION to provide just the version number, along with the OPTGROUP's LABEL, which gives the full name of the application. This allows a compact display with cascading menus, but many browsers do not yet support OPTGROUP. These browsers will ignore the OPTGROUP elements and LABEL attributes, providing the full name and version for each choice. Thus authors can fully use OPTGROUP despite its lack of browser support.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • OPTION in W3C HTML 4.0 Recommendation
  • OPTION in W3C HTML 3.2 Recommendation
  • OPTION in HTML 2.0 Standard
  • OPTION in WDG HTML 3.2 Reference
  • OPTION in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


P - Paragraph

Syntax

<P>...</P>

Attribute Specifications

ALIGN=[ left | center | right | justify ] (horizontal alignment)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements

Contained in

ADDRESS, APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DEL, DD, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

Description

The P element defines a paragraph. The closing tag for P is optional, but its use prevents common browser bugs with style sheets. Note that P cannot contain block-level elements such as TABLE and ADDRESS.

ALIGN

The deprecated ALIGN attribute suggests the horizontal alignment for the content of the paragraph on visual browsers. Possible values are left, right, center, and justify. Style sheets provide greater flexibility in suggesting paragraph alignment.

HTML does not specify a presentation for the P element. Visual browsers commonly use block paragraphs with no first-line indent and separated by a blank line, but some browsers allow the user to specify a different presentation. An author can suggest paragraph indentation and spacing using style sheets. The following CSS ruleset suggests a possible presentation for paragraphs:

P { margin-top: 0; text-indent: 5% }

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • P in W3C HTML 4.0 Recommendation
  • P in W3C HTML 3.2 Recommendation
  • P in HTML 2.0 Standard
  • P in WDG HTML 3.2 Reference
  • P in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


PARAM - Object Parameter

Syntax

<PARAM>

Attribute Specifications

NAME=CDATA (property name)
VALUE=CDATA (property value)
VALUETYPE=[ data | ref | object ] (type of value)
TYPE=ContentType (content-type of value resource)
[4.0] ID=string

Contents

Empty

Contained in

APPLET, OBJECT

Description

The PARAM element provides parameters for the OBJECT and APPLET elements. An OBJECT or APPLET may contain any number of PARAM elements prior to the alternate content that is also contained within the OBJECT or APPLET element.

NAME

The required NAME attribute of PARAM gives the name of the parameter while the VALUE attribute gives the parameter's value. The parameters recognized are specific to the kind of object being embedded or to the plug-in that renders the embedded object. For example, a clock applet may accept parameters to specify the style of the clock and the colors to use:

<OBJECT CLASSID="java:Clock.class" CODETYPE="application/java" WIDTH=100 HEIGHT=100 TITLE="A real live clock!" STANDBY="Do you know what time it is?">
<PARAM NAME=TYPE VALUE=ANALOG>
<PARAM NAME=BGCOLOR VALUE=WHITE>
<PARAM NAME=FGCOLOR VALUE=NAVY>
</OBJECT>

Note that the PARAM elements used in the preceding example would not change if the APPLET element were used in place of OBJECT.

Objects such as videos, audio clips, and VRML worlds are typically handled by browser plug-ins. Each plug-in recognizes certain parameters, which can make choosing parameters difficult when the author does not know which plug-in the user has. However, unsupported parameters should be safely ignored. The following example uses parameters specific to the QuickTime movie plug-in as well as parameters specific to the LiveAudio audio plug-in:

<OBJECT DATA="mlk.mov" TYPE="video/quicktime" TITLE="Martin Luther King's &quot;I Have a Dream&quot; speech" WIDTH=150 HEIGHT=150>
<PARAM NAME=pluginspage VALUE="http://quicktime.apple.com/">
<PARAM NAME=autoplay VALUE=true>
<OBJECT DATA="mlk.wav" TYPE="audio/x-wav" TITLE="Martin Luther King's &quot;I Have a Dream&quot; speech">
<PARAM NAME=autostart VALUE=true>
<PARAM NAME=hidden VALUE=true>
<A HREF="mlk.html">Full text of Martin Luther King's "I Have a Dream" speech</A>
</OBJECT>
</OBJECT>

Note that only the parameters specified within the OBJECT and prior to the alternate content are passed onto the plug-in, so that the pluginspage and autoplay parameters are used if the QuickTime movie is played while the autostart and hidden parameters are used if the audio clip is played.

VALUETYPE, VALUE & TYPE

The VALUETYPE parameter of PARAM designates the type of the VALUE attribute. The default value for VALUETYPE is data, which indicates that the VALUE attribute contains a string.

The ref value for VALUETYPE indicates that the VALUE attribute contains a url where run-time values are stored. The Internet media type of the resource is specified by the TYPE attribute. The following example uses values with VALUETYPE=ref to specify the location of images to animate and a sound to play durlng the animation:

<OBJECT CLASSID="java:Animator.class" CODETYPE="application/java" WIDTH=200 HEIGHT=300 TITLE="Wedding Photos">
<PARAM NAME=IMAGE1 VALUE="images/wedding/bride.jpg" VALUETYPE=ref TYPE="image/jpeg">
<PARAM NAME=IMAGE2 VALUE="images/wedding/groom.jpg" VALUETYPE=ref TYPE="image/jpeg">
<PARAM NAME=IMAGE3 VALUE="images/wedding/cake.jpg" VALUETYPE=ref TYPE="image/jpeg">
<PARAM NAME=SOUND VALUE="http://www.htmlhelp.com/sounds/weddingmarch.au" VALUETYPE=ref TYPE="audio/basic">
</OBJECT>

The url specified by VALUE is passed to the object without being resolved to a full URL. In the preceding example, the Java class would be responsible for resolving and fetching the contents of partial urls like "images/wedding/cake.jpg".

VALUETYPE also takes an object value, for use when a VALUE attribute specifies an identifier of a separate OBJECT in the document. The following example features a hypothetical application for interactively walking through the frames of an animated GIF. The GIF is loaded in a separate OBJECT from the application that uses it.

<OBJECT DECLARE ID=mygif DATA="animation.gif" TYPE="image/gif">
</OBJECT>
<OBJECT CLASSID="framepicker">
<PARAM NAME=image VALUE="#mygif" VALUETYPE=object>
<IMG SRC="animation.gif" ALT="[Example of an animated GIF]">
</OBJECT>

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

More Information

  • PARAM in W3C HTML 4.0 Recommendation
  • PARAM in W3C HTML 3.2 Recommendation
  • PARAM in WDG HTML 3.2 Reference
  • PARAM in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


PRE - Preformatted Text

Syntax

<PRE>...</PRE>

Attribute Specifications

WIDTH=Number (line width)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements except IMG, OBJECT, APPLET, BIG, SMALL, SUB, SUP , FONT, BASEFONT

Contained in

APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

Description

The PRE element contains preformatted text. Visual browsers should render preformatted text in a fixed-pitch font, should not collapse whitespace, and should not wrap long lines.

PRE is useful for formatting computer code or poetry where whitespace is important, but since preformatted text is inherently visual, authors should avoid dependence on it wherever possible. When using PRE, authors should avoid altering the element's fixed-pitch font or non-collapsing whitespace properties by means of style sheets.

The following example features Java code in a PRE element:

<PRE><CODE CLASS=Java>
class HelloWorld {
  public static void main(String[] args) {
    System.out.println("Hello World!");
  }
}
</CODE></PRE>

The code in the preceding example would be more difficult to read if it were not preformatted, and so PRE is used to provide the proper spacing. Note that the CODE element is also included to add structural information.

WIDTH

The deprecated WIDTH attribute of PRE tells the browser the expected line length of the preformatted block so that a suitable font size or margin can be used. Browsers ignore this attribute in practice.

Note

The bidirectional algorithm that determines the directionality of text still applies within the PRE element.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • PRE in W3C HTML 4.0 Recommendation
  • PRE in W3C HTML 3.2 Recommendation
  • PRE in HTML 2.0 Standard
  • PRE in WDG HTML 3.2 Reference
  • PRE in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


Q - Short Quotation

Syntax

<Q>...</Q>

Attribute Specifications

CITE=url (source of quotation)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements

Contained in

Inline elements, block-level elements

Description

The Q element is used for short, inline quotations. For longer (block) quotations, use the BLOCKQUOTE element.

CITE

The Q element's optional CITE attribute provides a url of the source of the quotation. Some examples follow:

Example

<P>In the words of Albert Einstein, <Q>God does <EM>not</EM> play dice.</Q></P>

<P>According to Dave Raggett, <Q CITE="http://www.w3.org/Press/HTML4-REC">HTML 4.0 gives Web designers the ability to create dynamic visually exciting pages that are accessible to all.</Q></P>

Note that authors should not include their own quotation marks when using the Q element. However, this can be a problem since almost all current browsers lack support for Q. Authors may prefer to avoid Q and insert their own quotation marks. Another alternative is to use I in combination with Q so that the quotation is distinguished from other text in most browsers. The previous example could also be given as follows:

<P>According to Dave Raggett, <I><Q CITE="http://www.w3.org/Press/HTML4-REC">HTML 4.0 gives Web designers the ability to create dynamic visually exciting pages that are accessible to all.</Q></I></P>

Browsers supporting Q should properly handle nested quotations. They should also use quotation marks suitable to the language of the quotation, based on the LANG attribute of Q or the language of its parent.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • Q in W3C HTML 4.0 Recommendation
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


S - Strike-through Text

Syntax

<S>...</S>

Attribute Specifications

[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements

Contained in

Inline elements, block-level elements

Description

The S element, deprecated in HTML 4.0, suggests that text be rendered with a strike-through style. In many cases, use of a phrase element such as DEL is more appropriate since such elements express the meaning of the text more clearly. However, since support for DEL among browsers is weak, S could be useful in combination with DEL, as in the following example:

The latest version of HTML recommended by the W3C is HTML <DEL DATETIME="1997-12-19T00:00:00-05:00"><S>3.2</S></DEL> <INS DATETIME="1997-12-19T00:00:00-05:00">4.0</INS>.

Note that STRIKE is better supported than S (based on Netscape 2.x and 1.22 supporting STRIKE but not S), and so STRIKE should be used in place of S. There does not appear to be any advantage to using both STRIKE and S; all browsers that support S also seem to support STRIKE.

If DEL is not a suitable structure, style sheets should be used to complement or replace instances of S. CSS1 provides the text-decoration property for strike-through text.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • S in W3C HTML 4.0 Recommendation
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


SAMP - Sample Output

Syntax

<SAMP>...</SAMP>

Attribute Specifications

[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements

Contained in

Inline elements, block-level elements

Description

The SAMP element denotes sample output, such as from a program or script. Visual browsers typically render SAMP as monospaced text, but authors can suggest a rendering using style sheets. Since SAMP is a structural element, it carries meaning, making it preferable to font style elements such as TT when marking up sample output.

Example:

<P>When an undefined element is used in an HTML document, a validator will give an error like the following:</P>
<P><SAMP>C:\SP\BIN\NSGMLSU.EXE:test.html:4:7:E: element "FOOBAR" undefined</SAMP></P>

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • SAMP in W3C HTML 4.0 Recommendation
  • SAMP in W3C HTML 3.2 Recommendation
  • SAMP in HTML 2.0 Standard
  • SAMP in WDG HTML 3.2 Reference
  • SAMP in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


SCRIPT - Client-side Script

Syntax

<SCRIPT>...</SCRIPT>

Attribute Specifications

TYPE=ContentType (content-type of scripting language)
LANGUAGE=CDATA (scripting language name)
SRC=url (external script location)
CHARSET=Charset (character encoding of external script)
DEFER (script execution may wait)

Contents

An embedded script

Contained in

HEAD, inline elements, block-level elements

Description

The SCRIPT element includes a client-side script in the document. Client-side scripts allow greater interactivity in a document by responding to user events. For example, a script could be used to check the user's form input prior to submission to provide immediate notice of any errors by the user.

Note that not all browsers support client-side scripting, and supporting browsers allow the user to disable scripting, so authors should avoid dependence on client-side scripting wherever possible. The NOSCRIPT element can be used to provide content for browsers that do not support client-side scripting or have it disabled. In the case of form validation, any error checking done by the client-side script should be repeated by the CGI script or Java servlet that handles the submission at the server.

Also note that different browsers support different variants of scripting languages with different bugs. Authors are encouraged to check their scripts on as many browsers as possible. Browsers that support client-side scripting include Netscape Navigator 2.0 and up, Microsoft Internet Explorer 3.0 and up, and Opera 3.0 and up.

TYPE

The required TYPE attribute of SCRIPT specifies the media type of the scripting language, e.g., text/javascript. However, most browsers only support the deprecated LANGUAGE attribute, which specifies the language name. Examples of supported LANGUAGE values include JavaScript, JavaScript1.1, and VBScript. The values are not case sensitive.

LANGUAGE

Browsers will ignore scripts with LANGUAGE values that they do not support. For example, Netscape Navigator 3.0 will execute scripts with LANGUAGE="JavaScript" or LANGUAGE="JavaScript1.1" but will ignore scripts with LANGUAGE="JavaScript1.2" or LANGUAGE="VBScript".

In the absence of the LANGUAGE attribute, browsers typically assume that the language is JavaScript 1.0. As there is no established convention for indicating the version of JavaScript via the TYPE attribute, we recommend that authors continue to use LANGUAGE to specify the language and version where it differs from JavaScript 1.0.

SRC & CHARSET

An embedded script is given as the content of the SCRIPT element. The SRC attribute allows authors to reuse code by specifying an external script. The optional CHARSET attribute gives the character encoding of the external script (typically ISO-8859-1). If the browser is unable to fetch the external script it will execute any embedded script; otherwise it will ignore the embedded script. An example follows:

<SCRIPT TYPE="text/javascript" SRC="foo.js" CHARSET="ISO-8859-1">
<!--
  // embedded script, only executed if foo.js is unavailable
// -->
</SCRIPT>

Netscape Navigator requires that external scripts be served with a Content-Type of application/x-javascript.

DEFER

The DEFER attribute indicates that the browser may wait to parse the script until the rest of the document has been rendered. Scripts that use DEFER must not generate any document content, and should not be required to respond to user events (e.g., form submission) that may occur while the document is loading. The DEFER attribute can be useful for delaying scripts that pre-load images or harass the user with scrolling messages in the status bar, though current browsers do not generally support this attribute.

The SCRIPT element may occur any number of times in the document HEAD or BODY. Typically the SCRIPT element is used in the HEAD unless it generates BODY content.

Pre-HTML 3.2 browsers, unaware of the SCRIPT element, will treat the content of SCRIPT as normal HTML. To make these browsers ignore the SCRIPT's content, scripting languages generally allow SGML comments to be used around an embedded script. For example:

<SCRIPT TYPE="text/javascript">
<!-- comment to end of line
  document.write("foo");
// comment to end of line -->
</SCRIPT>

Note that "-->" is contained within a JavaScript single-line comment (started with two slashes).

Technically, the first occurrence of "</" followed by any letter is considered the end tag for the SCRIPT element. While browsers are forgiving in this, authors should avoid using strings such as "</P>" in their embedded scripts. JavaScript allows authors to use a backslash to avoid ending the SCRIPT element prematurely, e.g., document.write("<\/P>").

More Information

  • SCRIPT in W3C HTML 4.0 Recommendation
  • SCRIPT in W3C HTML 3.2 Recommendation
  • SCRIPT in WDG HTML 3.2 Reference
  • SCRIPT in Learning HTML 3.2 by Examples
  • JavaScript Guide
    • Embedding JavaScript in HTML
  • JavaScript Reference
  • JScript Web Page
  • VBScript Web Page
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


SELECT - Option Selector

Syntax

<SELECT>...</SELECT>

Attribute Specifications

NAME=CDATA (key in submitted form)
MULTIPLE (allow multiple selections)
SIZE=Number (number of visible options)
DISABLED (disable element)
TABINDEX=Number (position in tabbing order)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string
ONBLUR=Script (element lost focus)
ONFOCUS=Script (element received focus)
ONCHANGE=Script (element value changed)

Contents

One or more OPTGROUP or OPTION elements

Contained in

Block-level elements, inline elements except BUTTON

Description

The SELECT element defines a form control for the selection of options. While SELECT is most useful within a FORM, HTML 4.0 allows SELECT in any block-level or inline element other than BUTTON. However, Netscape Navigator will not display any SELECT elements outside of a FORM.

The SELECT element contains one or more OPTGROUP or OPTION elements to provide a menu of choices for the user. Each choice is contained within an OPTION element. Choices can be grouped logically through the OPTGROUP element.

NAME

SELECT's NAME attribute provides the key sent to the server with the value of the selected option.

MULTIPLE

By default, the user can only select one option. The boolean MULTIPLE attribute allows the user to select multiple options, which are submitted as separate name/value pairs. The following example uses the MULTIPLE attribute to allow the selection of one or more options:

<P>Select one or more sections to search:
<SELECT NAME=sections MULTIPLE>
<OPTION>Web Authoring Reference</OPTION>
<OPTION>FAQ Archives</OPTION>
<OPTION>Design Elements</OPTION>
<OPTION>Tools</OPTION>
<OPTION>Feature Article</OPTION>
</SELECT>
</P>

DISABLED

The boolean DISABLED attribute, new in HTML 4.0 and poorly supported by current browsers, makes the SELECT element unavailable. The user is unable to edit the disabled selection, no value is submitted with the form, the SELECT element cannot receive focus, and the element is skipped when navigating the document by tabbing.

TABINDEX

The TABINDEX attribute specifies a number between 0 and 32767 to indicate the tabbing order of the element. A SELECT element with TABINDEX=0 or no TABINDEX attribute will be visited after any elements with a positive TABINDEX. Among positive TABINDEX values, the lower number receives focus first. In the case of a tie, the element appearing first in the HTML document takes precedence.

SIZE

The SIZE attribute of SELECT hints that visual browsers should display the element as a list box with the specified number of options visible at any time. A scroll bar would allow access to any non-visible options. The SIZE attribute is especially useful in SELECT elements with numerous OPTIONs and multiple selections allowed. In such a situation, some visual browsers will render the entire list in one large box without scrolling; a suitable SIZE attribute helps such browsers give a more appropriate presentation.

ONFOCUS, ONBLUR & ONCHANGE

The SELECT element also takes a number of attributes to specify client-side scripting actions for various events. In addition to the core events common to most elements, SELECT accepts the following event attributes:

  • ONFOCUS, when the element receives focus;
  • ONBLUR, when the element loses focus;
  • ONCHANGE, when the element loses focus and its value has changed since it received focus.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • SELECT in W3C HTML 4.0 Recommendation
  • SELECT in W3C HTML 3.2 Recommendation
  • SELECT in HTML 2.0 Standard
  • SELECT in WDG HTML 3.2 Reference
  • SELECT in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


SMALL - Small Font

Syntax

<SMALL>...</SMALL>

Attribute Specifications

[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements

Contained in

Inline elements, block-level elements except PRE

Description

The SMALL element suggests that text be rendered in a smaller font. Since HTML 4.0 has no element to indicate de-emphasis, SMALL is often useful for this purpose. For example:

<P><SMALL>Copyright © 1998 Liam Quinn. All rights reserved.</SMALL></P>

Most browsers support nested SMALL elements, but this practice should be avoided. Since different users have different font sizes and eyesight, significant changes in font size can leave text too small to read even though it may look fine to the author.

Using style sheets in place of SMALL provides greater flexibility in changing the presentation. The previous example could also be marked up as follows:

<P CLASS=copyright>Copyright © 1998 Liam Quinn. All rights reserved.</P>

This could then be linked to the following style sheet:

.copyright {
  font-size: smaller;
  text-align: center
}

@media aural {
  .copyright { volume: soft }
}

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • SMALL in W3C HTML 4.0 Recommendation
  • SMALL in W3C HTML 3.2 Recommendation
  • SMALL in WDG HTML 3.2 Reference
  • SMALL in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


SPAN - Generic Inline Container

Syntax

<SPAN>...</SPAN>

Attribute Specifications

[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements

Contained in

Inline elements, block-level elements

Description

The SPAN element is a generic inline container. SPAN carries no structural meaning itself, but it can be used to provide extra structure through its LANG, DIR, CLASS, and ID attributes. Style sheets are often used to suggest a presentation for a given class or ID.

SPAN should only be used where no other HTML inline element provides a suitable meaning. If a presentation such as bold or italic text would be suitable on visual browsers, authors may prefer to use an appropriate font style element. For example:

  1. <P><SPAN LANG=fr>La Révolution Tranquille</SPAN> shook Quebec in the early 1960's.
  2. <P><I LANG=fr>La Révolution Tranquille</I> shook Quebec in the early 1960's.

These examples are identical in meaning, but the second example uses the I element to suggest italic text.

DIV is a block-level equivalent of SPAN for containing block-level elements such as P and TABLE.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • SPAN in W3C HTML 4.0 Recommendation
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


STRIKE - Strike-through Text

Syntax

<STRIKE>...</STRIKE>

Attribute Specifications

[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements

Contained in

Inline elements, block-level elements

Description

The STRIKE element, deprecated in HTML 4.0, suggests that text be rendered with a strike-through style. In many cases, use of a phrase element such as DEL is more appropriate since such elements express the meaning of the text more clearly. However, since support for DEL among browsers is weak, STRIKE is useful in combination with DEL, as in the following example:

The latest version of HTML recommended by the W3C is HTML <DEL DATETIME="1997-12-19T00:00:00-05:00"><STRIKE>3.2</STRIKE></DEL> <INS DATETIME="1997-12-19T00:00:00-05:00">4.0</INS>.

If DEL is not a suitable structure, style sheets should be used to complement or replace instances of STRIKE. CSS1 provides the text-decoration property for strike-through text.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • STRIKE in W3C HTML 4.0 Recommendation
  • STRIKE in W3C HTML 3.2 Recommendation
  • STRIKE in WDG HTML 3.2 Reference
  • STRIKE in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


STRONG - Strong Emphasis

Syntax

<STRONG>...</STRONG>

Attribute Specifications

[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements

Contained in

Inline elements, block-level elements

Description

The STRONG element gives strong emphasis to its contents. Visual browsers typically render STRONG as bold text, but authors can suggest a rendering using style sheets. Since STRONG is a structural element, it carries meaning, making it preferable to font style elements such as B when strong emphasis is the intended meaning.

For weaker emphasis, use the EM element.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • STRONG in W3C HTML 4.0 Recommendation
  • STRONG in W3C HTML 3.2 Recommendation
  • STRONG in HTML 2.0 Standard
  • STRONG in WDG HTML 3.2 Reference
  • STRONG in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


STYLE - Embedded Style Sheet

Syntax

<STYLE>...</STYLE>

Attribute Specifications

TYPE=ContentType (content-type of style language)
MEDIA=MediaDesc (media to apply style to)
TITLE=Text (title of style sheet)

Contents

An embedded style sheet

Contained in

HEAD

Description

The STYLE element embeds a style sheet in the document. Any number of STYLE elements may be contained in the HEAD of a document.

TYPE

The required TYPE attribute of STYLE is used to specify the Internet media type of the style language. For Cascading Style Sheets, the TYPE attribute value should be text/css.

TITLE

The optional TITLE attribute gives a title for the style sheet. Without a TITLE attribute, the style sheet is always applied when style sheets are enabled. With a TITLE attribute, the style sheet is automatically applied but the user may choose to disable the style sheet while keeping or enabling other style sheets. Style sheets with the same title are considered to be the same style sheet.

Most current browsers ignore the TITLE attribute on style sheets and do not allow the user to selectively enable or disable individual style sheets.

MEDIA

The MEDIA attribute specifies the media on which the style sheet should be applied. This allows authors to restrict a style sheet to certain output devices, such as printers or aural browsers. The attribute's value is a comma-separated list of media descriptors. The following media descriptors are defined in HTML 4.0 and are case-sensitive:

  • screen (the default), for non-paged computer screens;
  • tty, for fixed-pitch character grid displays (such as the display used by Lynx);
  • tv, for television-type devices with low resolution and limited scrollability;
  • projection, for projectors;
  • handheld, for handheld devices (characterized by a small, monochrome display and limited bandwidth);
  • print, for output to a printer;
  • braille, for braille tactile feedback devices;
  • aural, for speech synthesizers;
  • all, for all devices.

Netscape Navigator 4.x incorrectly ignores any STYLE element with a MEDIA value other than screen. For example, MEDIA="screen, projection" will cause the style sheet to be ignored by Navigator 4.x, even if the presentation device is a computer screen. Navigator 4.x also ignores style sheets declared with MEDIA=all. Most other browsers ignore the MEDIA attribute.

An example of an embedded style sheet follows:

<STYLE TYPE="text/css" MEDIA=screen>
<!--
  BODY  { background: url(foo.gif) red; color: black }
  P EM  { background: yellow; color: black }
  .note { margin-left: 5em; margin-right: 5em }
-->
</STYLE>

Pre-HTML 3.2 browsers, unaware of the STYLE element, would normally show its contents as if they were part of the BODY, thus making the style sheet visible to the user. To prevent this, style languages like CSS allow the style sheet to be contained within an SGML comment (<!-- comment -->), as in the preceding example.

An embedded style sheet should be used when a single document has a unique style. If the same style sheet is used in multiple documents, then an external style sheet would be more appropriate.

More Information

  • STYLE in W3C HTML 4.0 Recommendation
  • STYLE in W3C HTML 3.2 Recommendation
  • STYLE in WDG HTML 3.2 Reference
  • STYLE in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


SUB - Subscript

Syntax

<SUB>...</SUB>

Attribute Specifications

[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements

Contained in

Inline elements, block-level elements

Description

The SUB element is used for subscripts. Since SUB is inherently presentational, it should not be relied upon to express a given meaning. However, it can be useful for chemical formulas and mathematical indices, where the subscript presentation is helpful but not required. For example:

  • Chemical formulas include H<SUB>2</SUB>O (water) and C<SUB>21</SUB>H<SUB>27</sub>NO (methadone).
  • Let <VAR>x</VAR> = <VAR>x<SUB>1</SUB></VAR> + <VAR>x<SUB>2</SUB></VAR> + ... + <VAR>x<SUB>n</SUB></VAR>.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • SUB in W3C HTML 4.0 Recommendation
  • SUB in W3C HTML 3.2 Recommendation
  • SUB in WDG HTML 3.2 Reference
  • SUB in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


SUP - Superscript

Syntax

<SUP>...</SUP>

Attribute Specifications

[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements

Contained in

Inline elements, block-level elements

Description

The SUP element is used for superscripts. Since SUP is inherently presentational, it should not be relied upon to express a given meaning. However, it can be useful for mathematical exponents where the context implies the meaning of the exponent, as well as other cases where superscript presentation is helpful but not required. For example:

  • The rent is due on the 1<SUP>st</SUP> of each month.
  • An example of a quadratic polynomial is <STRONG>3<VAR>x</VAR><SUP CLASS=exponent>2</SUP> + 5<VAR>x</VAR> - 7</STRONG>.

The following two examples are ambiguous when presented on a browser incapable of superscript text:

  • 2<SUP CLASS=exponent>4</SUP> = 16
  • sin<SUP CLASS=exponent>2</SUP><VAR>x</VAR> + cos<SUP CLASS=exponent>2</SUP><VAR>x</VAR> = 1

There is no simple solution for this problem. One could use notation such as 2^4 to represent "two raised to the exponent four." If it gains browser support, MathML should provide a more suitable solution in the future.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • SUP in W3C HTML 4.0 Recommendation
  • SUP in W3C HTML 3.2 Recommendation
  • SUP in WDG HTML 3.2 Reference
  • SUP in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


TABLE - Table

Syntax

<TABLE>...</TABLE>

Attribute Specifications

SUMMARY=Text (purpose/structure of table)
WIDTH=Length (table width)
BORDER=Pixels (border width)
FRAME=[ void | above | below | hsides | lhs | rhs | vsides | box | border ] (outer border)
RULES=[ none | groups | rows | cols | all ] (inner borders)
CELLSPACING=Length (spacing between cells)
CELLPADDING=Length (spacing within cells)
ALIGN=[ left | center | right ] (table alignment)
BGCOLOR=Color (table background color)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

An optional CAPTION, followed by zero or more COL and COLGROUP elements, followed by an optional THEAD element, an optional TFOOT element, and then one or more TBODY elements

Contained in

APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

Description

The TABLE element defines a table for multi-dimensional data arranged in rows and columns. TABLE is commonly used as a layout device, but authors should avoid this practice as much as possible. Tables can cause problems for users of narrow windows, large fonts, or non-visual browsers, and these problems are often accentuated when tables are used solely for layout purposes. As well, current visual browsers will not display anything until the complete table has been downloaded, which can have very noticeable effects when an entire document is laid out within a TABLE. Authors should try to use style sheets in place of TABLE for layout, though bugs in current browser implementations of style sheets can make this difficult.

The TABLE may contain a number of optional elements to provide a rich structure to the table. The optional CAPTION element gives a caption for the table and is followed by optional COL and COLGROUP elements that specify column widths and groupings. The THEAD, TFOOT, and TBODY elements then follow with groups of rows. The optional THEAD and TFOOT elements contain header and footer rows, respectively, while TBODY elements supply the table's main row groups. A row group contains TR elements for individual rows, and each TR contains TH or TD elements for header cells or data cells, respectively.

At least one TBODY element is required within a TABLE, but TBODY's start and end tags are both optional if there is only one TBODY and no THEAD or TFOOT. A simple table could thus be expressed as follows:

<TABLE>
  <TR>
    <TH>Abbreviation</TH>
    <TH>Long Form</TH>
  </TR>
  <TR>
    <TD>AFAIK</TD>
    <TD>As Far As I Know</TD>
  </TR>
  <TR>
    <TD>IMHO</TD>
    <TD>In My Humble Opinion</TD>
  </TR>
  <TR>
    <TD>OTOH</TD>
    <TD>On The Other Hand</TD>
  </TR>
</TABLE>

The same table could be expressed with a richer structure by grouping rows and adding a caption, as in the next example. The extra structural information allows an author to more easily suggest the presentation of the table using style sheets or TABLE's presentational attributes.

<TABLE>
  <CAPTION>Common Usenet Abbreviations</CAPTION>
  <THEAD>
    <TR>
      <TH>Abbreviation</TH>
      <TH>Long Form</TH>
    </TR>
  </THEAD>
  <TBODY>
    <TR>
      <TD>AFAIK</TD>
      <TD>As Far As I Know</TD>
    </TR>
    <TR>
      <TD>IMHO</TD>
      <TD>In My Humble Opinion</TD>
    </TR>
    <TR>
      <TD>OTOH</TD>
      <TD>On The Other Hand</TD>
    </TR>
  </TBODY>
</TABLE>

SUMMARY

The TABLE element takes an optional SUMMARY attribute to describe the purpose and/or structure of the table. The overview provided by the SUMMARY attribute is particularly helpful to users of non-visual browsers. With simple tables, a good CAPTION is usually a sufficient summary, but complex tables may benefit from a more detailed overview via the SUMMARY attribute. The following example uses SUMMARY to describe a table. Note that the summary could also be included in a paragraph before the table, which is helpful since few browsers support SUMMARY.

<TABLE SUMMARY="This table gives the character entity reference,
                decimal character reference, and hexadecimal character
                reference for symbols and Greek letters.">
  <COLGROUP>
  <COLGROUP SPAN=3>
  <THEAD>
    <TR>
      <TH SCOPE=col>Character</TH>
      <TH SCOPE=col>Entity</TH>
      <TH SCOPE=col>Decimal</TH>
      <TH SCOPE=col>Hex</TH>
    </TR>
  </THEAD>
  <TBODY>
    <TR>
      <TD SCOPE=row>Latin small f with hook</TD>
      <TD>&amp;fnof;</TD>
      <TD>&amp;#402;</TD>
      <TD>&amp;#x192;</TD>
    </TR>
    ...
  </TBODY>
</TABLE>

The TABLE element also takes a number of optional attributes to provide presentational hints in visual browsers. Equivalents of these attributes in Cascading Style Sheets are under development and not widely supported by browsers.

WIDTH

The WIDTH attribute specifies the width of the table as a number of pixels or as a percentage of the available horizontal space. Widths in pixels should be avoided, especially widths above 500 pixels, since this causes unnecessary horizontal scrolling for some users.

BORDER

The BORDER attribute specifies the width in pixels of the border around a table.

FRAME

The FRAME attribute, poorly supported by browsers, specifies which sides of the table's outer border are visible. Possible values are void for no border, above for a top border only, below for a bottom border only, hsides for left and right borders only, vsides for top and bottom borders only, lhs for a left border only, rhs for a right border only, and either box or border for a border on all sides. The default value is void unless the BORDER attribute gives a positive width, in which case FRAME=border is the default. <TABLE BORDER> is a valid, well-supported shorthand for <TABLE FRAME=border>.

RULES

The RULES attribute, poorly supported by browsers, specifies the borders between table cells. Possible values are none for no inner borders, groups for borders between row groups and column groups only, rows for borders between rows only, cols for borders between columns only, and all for borders between all cells. None is the default value if BORDER=0 is used or if no BORDER attribute is given. All is the default value for any other use of BORDER.

CELLSPACING & CELLPADDING

The CELLSPACING attribute defines the amount of space between table cells, and the CELLPADDING attribute defines the amount of space within table cells (i.e., between the border and cell contents). The value may be given as a number of pixels or as a percentage, though most browsers do not support percentages, treating CELLPADDING="20%" as if it were CELLPADDING="20". A percentage value is relative to the vertical space available for vertical padding or spacing, and the amount is split evenly between the top and bottom. Horizontal padding and spacing behave similarly. The padding or spacing is always applied to all four sides.

The padding properties of Cascading Style Sheets allow an author to suggest different padding for different sides, but are not as well supported as the CELLPADDING attribute.

ALIGN

The deprecated ALIGN attribute suggests the horizontal alignment of the table on visual browsers. Possible values are left, right, and center. Browsers generally present left- or right-aligned tables as floating tables, with the content following the TABLE flowing around it. To prevent content from flowing around the table, use <BR CLEAR=all> after the end of the TABLE.

Since many browsers do not support ALIGN=center with TABLE, authors may wish to place the TABLE within a CENTER element.

Style sheets provide more flexibility in suggesting table alignment but with less browser support than the ALIGN attribute.

BGCOLOR

The deprecated BGCOLOR attribute suggests a background color for the table. The combination of this attribute with <FONT COLOR=...> can leave invisible or unreadable text on Netscape Navigator 2.x, which does not support BGCOLOR on table elements. BGCOLOR is dangerous even on supporting browsers, since most fail to override it when overriding other author-specified colors. Style sheets provide a safer, more flexible method of specifying a table's background color.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • TABLE in W3C HTML 4.0 Recommendation
  • TABLE in W3C HTML 3.2 Recommendation
  • TABLE in WDG HTML 3.2 Reference
  • TABLE in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


TBODY - Table Body

Syntax

<TBODY>...</TBODY>

Attribute Specifications

ALIGN=[ left | center | right | justify | char ] (horizontal alignment of cells in group)
CHAR=Character (alignment character for cells)
CHAROFF=Length (alignment character offset)
VALIGN=[ top | middle | bottom | baseline ] (vertical alignment of cells in group)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

One or more TR elements

Contained in

TABLE

Description

The TBODY element defines a group of data rows in a table. A TABLE must have one or more TBODY elements, which must follow the optional TFOOT. The TBODY end tag is always optional. The start tag is optional when the table contains only one TBODY and no THEAD or TFOOT. This allows the simple table structure of HTML 3.2 to still be valid:

<TABLE>
  <TR>
    <TH>Abbreviation</TH>
    <TH>Long Form</TH>
  </TR>
  <TR>
    <TD>AFAIK</TD>
    <TD>As Far As I Know</TD>
  </TR>
</TABLE>

By explicitly grouping rows with THEAD, TFOOT, and TBODY, authors give browsers the ability to present a long table with a scrolling body and static header and footer rows. Using TBODY also provides the ability to easily suggest different presentations for different row groups through style sheets. While few browsers currently support TBODY, it can be used with no harm on non-supporting browsers.

The following example gives a table of SI units of measure. TBODY elements are used to group rows based on whether the unit is classed as a "base" unit, "derived" unit, or "supplementary" unit.

<TABLE SUMMARY="This table lists SI (International System) units of
                measure, giving the name of the unit, its symbol, and
                the quantity that it measures.">
  <CAPTION>SI Units</CAPTION>
  <THEAD>
    <TR>
      <TH SCOPE=col>Name</TH>
      <TH SCOPE=col>Symbol</TH>
      <TH SCOPE=col>Quantity</TH>
    </TR>
  </THEAD>
  <TBODY CLASS=base>
    <TR>
      <TD SCOPE=row>meter</TD>
      <TD>m</TD>
      <TD>length</TD>
    </TR>
    <TR>
      <TD SCOPE=row>kilogram</TD>
      <TD>kg</TD>
      <TD>mass</TD>
    </TR>
    ...
  </TBODY>
  <TBODY CLASS=derived>
    <TR>
      <TD SCOPE=row>hertz</TD>
      <TD>Hz</TD>
      <TD>frequency</TD>
    </TR>
    <TR>
      <TD SCOPE=row>pascal</TD>
      <TD>Pa</TD>
      <TD>pressure</TD>
    </TR>
    ...
  </TBODY>
  <TBODY CLASS=supplementary>
    <TR>
      <TD SCOPE=row>radian</TD>
      <TD>rad</TD>
      <TD>plane angle</TD>
    </TR>
    ...
  </TBODY>
</TABLE>

In addition to the attributes common to most elements, TBODY takes presentational attributes for specifying the alignment of cell data. Since few browsers support TBODY, authors may wish to specify these attributes on the TR or TD elements instead.

ALIGN, CHAR & CHAROFF

The ALIGN attribute specifies the horizontal alignment for each cell in the row group. Possible values are left, center, right, justify, and char. ALIGN=char aligns a cell's contents on the character given in the CHAR attribute. The default value for the CHAR attribute is the decimal point of the current language--a period in English. The CHAROFF attribute specifies the offset to the first occurrence of the alignment character. The attribute's value is a number in pixels or a percentage of the cell's width; CHAROFF="50%" centers the alignment character horizontally in a cell.

VALIGN

The VALIGN attribute specifies the vertical position of a cell's contents. Possible values are:

  • top, which positions data at the top of the cell;
  • middle, the default value, which centers the cell data vertically;
  • bottom, which positions data at the bottom of the cell;
  • baseline, which specifies that the first line of each cell in the row with ALIGN=baseline should occur on a common baseline.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • TBODY in W3C HTML 4.0 Recommendation
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


TD - Table Data Cell

Syntax

<TD>...</TD>

Attribute Specifications

ROWSPAN=Number (rows spanned by the cell)
COLSPAN=Number (columns spanned by the cell)
HEADERS=IDREFS (list of header cells for current cell)
ABBR=Text (abbreviation for header cell)
SCOPE=[ row | col | rowgroup | colgroup ] (cells covered by header cell)
AXIS=CDATA (category of header cell)
ALIGN=[ left | center | right | justify | char ] (horizontal alignment)
CHAR=Character (alignment character)
CHAROFF=Length (alignment character offset)
VALIGN=[ top | middle | bottom | baseline ] (vertical alignment)
WIDTH=Pixels (cell width)
HEIGHT=Pixels (cell height)
NOWRAP (suppress word wrap)
BGCOLOR=Color (cell background color)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements, block-level elements

Contained in

TR

Description

The TD element defines a data cell in a table. TD elements are contained within a TR element (a table row), which may also contain TH elements for header cells. When a cell's contents act as both header information and table data, TD should be used.

ROWSPAN & COLSPAN

The ROWSPAN and COLSPAN attributes of TD specify the number of rows and the number of columns, respectively, that are spanned by the cell. The default value is 1. The special value 0 indicates that the cell spans all rows or columns to the end of the table. The value 0 is ignored by most browsers, so authors may wish to calculate the exact number of rows or columns spanned and use that value.

HEADERS

The HEADERS attribute specifies the header cells that apply to the TD. The value is a space-separated list of the header cells' ID attribute values. The HEADERS attribute allows non-visual browsers to render the header information for a given cell.

ABBR, SCOPE & AXIS

The ABBR, SCOPE, and AXIS attributes should only be used if the cell provides header information. Like HEADERS, these attributes are new in HTML 4.0 and not well supported, though they should be particularly helpful to non-visual browsers in the future.

ABBR gives an abbreviated version of the cell's content. This allows visual browsers to use the short form if space is limited, and non-visual browsers can give a cell's header information in an abbreviated form before rendering each cell.

The SCOPE attribute specifies the cells for which the TD element provides header information. SCOPE is a simpler alternative to using HEADERS if the arrangement of header cells is not complex. Possible values are as follows:

  • row, when the TD provides header information for the rest of the row;
  • col, when the TD provides header information for the rest of the column;
  • rowgroup, when the TD gives header information for the rest of the row group (i.e., the remaining cells of the THEAD, TFOOT, or TBODY);
  • colgroup, when the TD gives header information for the rest of the column group (i.e., the remaining cells of the COLGROUP).

The AXIS attribute provides a method of categorizing cells. The attribute's value is a comma-separated list of category names. See the HTML 4.0 Recommendation's section on categorizing cells for an application of AXIS.

In addition to the attributes common to most elements, TD takes a number of presentational attributes. Style sheets provide a more flexible way to suggest a presentation for table cells, but TD's presentational attributes are more widely supported by current browsers.

ALIGN, CHAR & CHAROFF

The ALIGN attribute specifies the horizontal alignment for the cell. Possible values are left, center, right, justify, and char. ALIGN=char, poorly supported among browsers, aligns a cell's contents on the character given in the CHAR attribute. The default value for the CHAR attribute is the decimal point of the current language--a period in English. The CHAROFF attribute specifies the offset to the first occurrence of the alignment character. The attribute's value is a number in pixels or a percentage of the cell's width; CHAROFF="50%" centers the alignment character horizontally in a cell.

VALIGN

The VALIGN attribute specifies the vertical position of a cell's contents. Possible values are:

  • top, which positions data at the top of the cell;
  • middle, the default value, which centers the cell data vertically;
  • bottom, which positions data at the bottom of the cell;
  • baseline, which specifies that the first line of each cell in the row with ALIGN=baseline should occur on a common baseline.

WIDTH, HEIGHT, NOWRAP & BGCOLOR

The WIDTH, HEIGHT, NOWRAP, and BGCOLOR attributes are all deprecated in favor of style sheets. WIDTH and HEIGHT suggest the cell's width and height in pixels. The boolean NOWRAP attribute tells visual browsers to disable word wrap for the cell, which can result in unnecessary horizontal scrolling depending on the user's window width and font size.

The BGCOLOR attribute suggests a background color for the cell. The combination of this attribute with <FONT COLOR=...> can leave invisible or unreadable text on Netscape Navigator 2.x, which does not support BGCOLOR on table elements. BGCOLOR is dangerous even on supporting browsers, since most fail to override it when overriding other author-specified colors. Style sheets provide a safer, more flexible method of specifying a table's background color.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • TD in W3C HTML 4.0 Recommendation
  • TD in W3C HTML 3.2 Recommendation
  • TD in WDG HTML 3.2 Reference
  • TD in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


TEXTAREA - Multi-line Text Input

Syntax

<TEXTAREA>...</TEXTAREA>

Attribute Specifications

NAME=CDATA (key in submitted form)
ROWS=Number (number of rows)
COLS=Number (number of columns)
DISABLED (disable element)
READONLY (prevent changes)
ACCESSKEY=Character (shortcut key)
TABINDEX=Number (position in tabbing order)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string
ONFOCUS=Script (element received focus)
ONBLUR=Script (element lost focus)
ONSELECT=Script (element text selected)
ONCHANGE=Script (element value changed)

Contents

Plain text (including entities)

Contained in

Block-level elements, inline elements except BUTTON

Description

The TEXTAREA element defines a form control for the user to enter multi-line text input. While TEXTAREA is most useful within a FORM, HTML 4.0 allows TEXTAREA in any block-level or inline element other than BUTTON. However, Netscape Navigator will not display any TEXTAREA elements outside of a FORM.

The initial value of the TEXTAREA is provided as the content of the element and must not contain any HTML tags. When a form is submitted, the current value of any TEXTAREA element within the FORM is sent to the server as a name/value pair. The TEXTAREA element's NAME attribute provides the name used.

ROWS & COLS

The required ROWS and COLS attributes specify the number of visible rows and columns, respectively, in a visual browser. These attributes provide a guide for the user rather than a restriction; browsers allow an unlimited amount of text input in theory, though in practice many browsers limit the contents of a TEXTAREA to 32 or 64 kilobytes. Author restrictions on the amount of data entered should be enforced by the CGI script or Java servlet handling the form.

READONLY & DISABLED

The boolean READONLY attribute, new in HTML 4.0 and poorly supported by current browsers, prevents the user from editing the content of the TEXTAREA. Read-only elements are still submitted with the form. The DISABLED attribute, also poorly supported, disables the TEXTAREA. Disabled elements are read-only elements with the added restrictions that the values are not submitted with the form, the elements cannot receive focus, and the elements are skipped when navigating the document by tabbing.

ACCESSKEY

The ACCESSKEY attribute specifies a single Unicode character as a shortcut key for giving focus to the TEXTAREA. Authors can set the access key on the TEXTAREA element or the LABEL element associated with it. Entities (e.g. &eacute;) may be used as the ACCESSKEY value.

TABINDEX

The TABINDEX attribute specifies a number between 0 and 32767 to indicate the tabbing order of the element. A TEXTAREA with TABINDEX=0 or no TABINDEX attribute will be visited after any elements with a positive TABINDEX. Among positive TABINDEX values, the lower number receives focus first. In the case of a tie, the element appearing first in the HTML document takes precedence.

ONFOCUS, ONBLUR, ONSELECT & ONCHANGE

The TEXTAREA element also takes a number of attributes to specify client-side scripting actions for various events. In addition to the core events common to most elements, TEXTAREA accepts the following event attributes:

  • ONFOCUS, when the element receives focus;
  • ONBLUR, when the element loses focus;
  • ONSELECT, when text in the element is selected;
  • ONCHANGE, when the element loses focus and its value has changed since it received focus.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • TEXTAREA in W3C HTML 4.0 Recommendation
  • TEXTAREA in W3C HTML 3.2 Recommendation
  • TEXTAREA in HTML 2.0 Standard
  • TEXTAREA in WDG HTML 3.2 Reference
  • TEXTAREA in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


TFOOT - Table Foot

Syntax

<TFOOT>...</TFOOT>

Attribute Specifications

ALIGN=[ left | center | right | justify | char ] (horizontal alignment of cells in group)
CHAR=Character (alignment character for cells)
CHAROFF=Length (alignment character offset)
VALIGN=[ top | middle | bottom | baseline ] (vertical alignment of cells in group)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

One or more TR elements

Contained in

TABLE

Description

The TFOOT element defines a group of footer rows in a table. A TABLE may have one TFOOT, which must follow the optional THEAD and precede the required TBODY.

By explicitly grouping footer rows with TFOOT, authors give browsers the ability to include the footer rows on each page of a printed, multi-page table, as well as the ability to present a long table with a scrolling body and static footer rows. However, few browsers currently support TFOOT, and the requirement that it be placed before the TBODY may make it unsuitable for non-supporting browsers. If the presentation of footer rows prior to body rows is not acceptable, authors should avoid using TFOOT until browser support is greater.

A table footer may provide a summary row or footnotes that apply to the entire table or portions of it. The following example uses TFOOT to contain footnotes for a table:

<TABLE SUMMARY="This table lists program available at the university
                based on the discipline and type of degree.">
  <CAPTION>Programs Available</CAPTION>
  <COLGROUP CLASS="program-discipline">
  <COLGROUP CLASS="program-type" SPAN=5>
  <THEAD>
    <TR>
      <TH SCOPE=col>Program</TH>
      <TH SCOPE=col>Honors Co-op</TH>
      <TH SCOPE=col>Honors Regular</TH>
      <TH SCOPE=col>General Regular</TH>
      <TH SCOPE=col>*Preprofessional or Professional</TH>
    </TR>
  </THEAD>
  <TFOOT CLASS=footnote>
    <TR>
      <TD COLSPAN=5>
          Many disciplines are also available as Minors and Joint
          Honors programs.
      </TD>
    </TR>
    <TR>
      <TD COLSPAN=5>
        * Preprofessional programs normally fulfull the academic
          requirements for registration in the related professions.
      </TD>
    </TR>
  </TFOOT>
  <TBODY>
    <TR>
      <TD SCOPE=row>Computer Science</TD>
      <TD>yes</TD>
      <TD>yes</TD>
      <TD>no</TD>
      <TD>no</TD>
    </TR>
    ...
  </TBODY>
</TABLE>

In addition to the attributes common to most elements, TFOOT takes presentational attributes for specifying the alignment of cell data. Since few browsers support TFOOT, authors may wish to specify these attributes on the TR or TD elements instead.

ALIGN, CHAR & CHAROFF

The ALIGN attribute specifies the horizontal alignment for each cell in the row group. Possible values are left, center, right, justify, and char. ALIGN=char aligns a cell's contents on the character given in the CHAR attribute. The default value for the CHAR attribute is the decimal point of the current language--a period in English. The CHAROFF attribute specifies the offset to the first occurrence of the alignment character. The attribute's value is a number in pixels or a percentage of the cell's width; CHAROFF="50%" centers the alignment character horizontally in a cell.

VALIGN

The VALIGN attribute specifies the vertical position of a cell's contents. Possible values are:

  • top, which positions data at the top of the cell;
  • middle, the default value, which centers the cell data vertically;
  • bottom, which positions data at the bottom of the cell;
  • baseline, which specifies that the first line of each cell in the row with ALIGN=baseline should occur on a common baseline.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • TFOOT in W3C HTML 4.0 Recommendation
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


TH - Table Header Cell

Syntax

<TH>...</TH>

Attribute Specifications

ROWSPAN=Number (rows spanned by the cell)
COLSPAN=Number (columns spanned by the cell)
HEADERS=IDREFS (list of header cells for current cell)
ABBR=Text (abbreviation for header cell)
SCOPE=[ row | col | rowgroup | colgroup ] (cells covered by header cell)
AXIS=CDATA (category of header cell)
ALIGN=[ left | center | right | justify | char ] (horizontal alignment)
CHAR=Character (alignment character)
CHAROFF=Length (alignment character offset)
VALIGN=[ top | middle | bottom | baseline ] (vertical alignment)
WIDTH=Pixels (cell width)
HEIGHT=Pixels (cell height)
NOWRAP (suppress word wrap)
BGCOLOR=Color (cell background color)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements, block-level elements

Contained in

TR

Description

The TH element defines a header cell in a table. TH elements are contained within a TR element (a table row), which may also contain TD elements for data cells. When a cell's contents act as both header information and table data, TD should be used.

ROWSPAN & COLSPAN

The ROWSPAN and COLSPAN attributes of TH specify the number of rows and the number of columns, respectively, that are spanned by the cell. The default value is 1. The special value 0 indicates that the cell spans all rows or columns to the end of the table. The value 0 is ignored by most browsers, so authors may wish to calculate the exact number of rows or columns spanned and use that value.

HEADERS

The HEADERS attribute specifies the header cells that apply to the TH. The value is a space-separated list of the header cells' ID attribute values. The HEADERS attribute allows non-visual browsers to render the header information for a given cell.

ABBR

The ABBR attribute gives an abbreviated version of the cell's content. This allows visual browsers to use the short form if space is limited, and non-visual browsers can give a cell's header information in an abbreviated form before rendering each cell.

SCOPE

The SCOPE attribute specifies the cells for which the TH element provides header information. SCOPE is a simpler alternative to using HEADERS if the arrangement of header cells is not complex. Possible values are as follows:

  • row, when the TH provides header information for the rest of the row;
  • col, when the TH provides header information for the rest of the column;
  • rowgroup, when the TH gives header information for the rest of the row group (i.e., the remaining cells of the THEAD, TFOOT, or TBODY);
  • colgroup, when the TH gives header information for the rest of the column group (i.e., the remaining cells of the COLGROUP).

AXIS

The AXIS attribute provides a method of categorizing cells. The attribute's value is a comma-separated list of category names. See the HTML 4.0 Recommendation's section on categorizing cells for an application of AXIS.

In addition to the attributes common to most elements, TH takes a number of presentational attributes. Style sheets provide a more flexible way to suggest a presentation for table cells, but TH's presentational attributes are more widely supported by current browsers.

ALIGN, CHAR & CHAROFF

The ALIGN attribute specifies the horizontal alignment for the cell. Possible values are left, center, right, justify, and char. ALIGN=char, poorly supported among browsers, aligns a cell's contents on the character given in the CHAR attribute. The default value for the CHAR attribute is the decimal point of the current language--a period in English. The CHAROFF attribute specifies the offset to the first occurrence of the alignment character. The attribute's value is a number in pixels or a percentage of the cell's width; CHAROFF="50%" centers the alignment character horizontally in a cell.

VALIGN

The VALIGN attribute specifies the vertical position of a cell's contents. Possible values are:

  • top, which positions data at the top of the cell;
  • middle, the default value, which centers the cell data vertically;
  • bottom, which positions data at the bottom of the cell;
  • baseline, which specifies that the first line of each cell in the row with ALIGN=baseline should occur on a common baseline.

WIDTH, HEIGHT, NOWRAP & BGCOLOR

The WIDTH, HEIGHT, NOWRAP, and BGCOLOR attributes are all deprecated in favor of style sheets. WIDTH and HEIGHT suggest the cell's width and height in pixels. The boolean NOWRAP attribute tells visual browsers to disable word wrap for the cell, which can result in unnecessary horizontal scrolling depending on the user's window width and font size.

The BGCOLOR attribute suggests a background color for the cell. The combination of this attribute with <FONT COLOR=...> can leave invisible or unreadable text on Netscape Navigator 2.x, which does not support BGCOLOR on table elements. BGCOLOR is dangerous even on supporting browsers, since most fail to override it when overriding other author-specified colors. Style sheets provide a safer, more flexible method of specifying a table's background color.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • TH in W3C HTML 4.0 Recommendation
  • TH in W3C HTML 3.2 Recommendation
  • TH in WDG HTML 3.2 Reference
  • TH in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


THEAD - Table Head

Syntax

<THEAD>...</THEAD>

Attribute Specifications

ALIGN=[ left | center | right | justify | char ] (horizontal alignment of cells in group)
CHAR=Character (alignment character for cells)
CHAROFF=Length (alignment character offset)
VALIGN=[ top | middle | bottom | baseline ] (vertical alignment of cells in group)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

One or more TR elements

Contained in

TABLE

Description

The THEAD element defines a group of header rows in a table. A TABLE may have one THEAD, which must follow any CAPTION, COL, or COLGROUP elements, and precede the optional TFOOT and required TBODY elements.

By explicitly grouping header rows with THEAD, authors give browsers the ability to include the header rows on each page of a printed, multi-page table, as well as the ability to present a long table with a scrolling body and static header rows. While few browsers currently support THEAD, it can be used with no harm on non-supporting browsers.

The following example uses THEAD to group the two header rows of a table:

<TABLE SUMMARY="This table gives the character entity reference,
                decimal character reference, and hexadecimal character
                reference for 8-bit Latin-1 characters, as well as the
                rendering of each in your browser.">
  <COLGROUP>
  <COLGROUP SPAN=3>
  <COLGROUP SPAN=3>
  <THEAD>
    <TR>
      <TH SCOPE=col ROWSPAN=2>Character</TH>
      <TH SCOPE=col ROWSPAN=2>Entity</TH>
      <TH SCOPE=col ROWSPAN=2>Decimal</TH>
      <TH SCOPE=col ROWSPAN=2>Hex</TH>
      <TH SCOPE=colgroup COLSPAN=3>Rendering in Your Browser</TH>
    </TR>
    <TR>
      <TH SCOPE=col>Entity</TH>
      <TH SCOPE=col>Decimal</TH>
      <TH SCOPE=col>Hex</TH>
    </TR>
  </THEAD>
  <TBODY>
    <TR>
      <TD SCOPE=row>non-breaking space</TD>
      <TD>&amp;nbsp;</TD>
      <TD>&amp;#160;</TD>
      <TD>&amp;#xA0;</TD>
      <TD>&nbsp;</TD>
      <TD>&#160;</TD>
      <TD>&#xA0;</TD>
    </TR>
    ...
  </TBODY>
</TABLE>

In addition to the attributes common to most elements, THEAD takes presentational attributes for specifying the alignment of cell data. Since few browsers support THEAD, authors may wish to specify these attributes on the TR, TH, or TD elements instead.

ALIGN, CHAR & CHAROFF

The ALIGN attribute specifies the horizontal alignment for each cell in the row group. Possible values are left, center, right, justify, and char. ALIGN=char aligns a cell's contents on the character given in the CHAR attribute. The default value for the CHAR attribute is the decimal point of the current language--a period in English. The CHAROFF attribute specifies the offset to the first occurrence of the alignment character. The attribute's value is a number in pixels or a percentage of the cell's width; CHAROFF="50%" centers the alignment character horizontally in a cell.

VALIGN

The VALIGN attribute specifies the vertical position of a cell's contents. Possible values are:

  • top, which positions data at the top of the cell;
  • middle, the default value, which centers the cell data vertically;
  • bottom, which positions data at the bottom of the cell;
  • baseline, which specifies that the first line of each cell in the row with ALIGN=baseline should occur on a common baseline.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • THEAD in W3C HTML 4.0 Recommendation
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


TITLE - Document Title

Syntax

<TITLE>...</TITLE>

Attribute Specifications

internationalization attributes

Contents

Plain text (including entities)

Contained in

HEAD

Description

The TITLE element gives the document's title. Each document must have exactly one TITLE within the HEAD. TITLE contains plain text and entities; it may not contain other markup.

A good TITLE should be short and specific to the document's content so that it can be used as a title for a user's bookmark, a title for the display window on visual browsers, and a link from a search engine. A suggested limit for the number of characters in a TITLE is 60.

More Information

  • TITLE in W3C HTML 4.0 Recommendation
  • TITLE in W3C HTML 3.2 Recommendation
  • TITLE in HTML 2.0 Standard
  • TITLE in WDG HTML 3.2 Reference
  • TITLE in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


TR - Table Row

Syntax

<TR>...</TR>

Attribute Specifications

ALIGN=[ left | center | right | justify | char ] (horizontal alignment of cells in group)
CHAR=Character (alignment character for cells)
CHAROFF=Length (alignment character offset)
VALIGN=[ top | middle | bottom | baseline ] (vertical alignment of cells in group)
BGCOLOR=Color (row background color)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

One or more TH or TD elements

Contained in

THEAD, TFOOT, TBODY

Description

The TR element defines a table row. TR elements must be contained within a row group defined by THEAD, TFOOT, or TBODY. Since the start and end tags of TBODY are optional when the table has one TBODY and no THEAD or TFOOT, the simple table structure of HTML 3.2 is still valid:

<TABLE>
  <TR>
    <TH>Abbreviation</TH>
    <TH>Long Form</TH>
  </TR>
  <TR>
    <TD>AFAIK</TD>
    <TD>As Far As I Know</TD>
  </TR>
</TABLE>

TR contains TH or TD elements, which in turn contain the actual data of the table. In addition to the attributes common to most elements, TR takes presentational attributes for specifying the alignment of cells within the row and the row's background color.

ALIGN, CHAR & CHAROFF

The ALIGN attribute specifies the horizontal alignment for each cell in the row. Possible values are left, center, right, justify, and char. ALIGN=char aligns a cell's contents on the character given in the CHAR attribute. The default value for the CHAR attribute is the decimal point of the current language--a period in English. The CHAROFF attribute specifies the offset to the first occurrence of the alignment character. The attribute's value is a number in pixels or a percentage of the cell's width; CHAROFF="50%" centers the alignment character horizontally in a cell.

VALIGN

The VALIGN attribute specifies the vertical position of a cell's contents. Possible values are:

  • top, which positions data at the top of the cell;
  • middle, the default value, which centers the cell data vertically;
  • bottom, which positions data at the bottom of the cell;
  • baseline, which specifies that the first line of each cell in the row with ALIGN=baseline should occur on a common baseline.

BGCOLOR

The deprecated BGCOLOR attribute suggests a background color for the row. The combination of this attribute with <FONT COLOR=...> can leave invisible or unreadable text on Netscape Navigator 2.x, which does not support BGCOLOR on table elements. BGCOLOR is dangerous even on supporting browsers, since most fail to override it when overriding other author-specified colors. Style sheets provide a safer, more flexible method of specifying a row's background color.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • TR in W3C HTML 4.0 Recommendation
  • TR in W3C HTML 3.2 Recommendation
  • TR in WDG HTML 3.2 Reference
  • TR in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


TT - Teletype Text

Syntax

<TT>...</TT>

Attribute Specifications

[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements

Contained in

Inline elements, block-level elements

Description

The TT element suggests that text be rendered as teletype or monospaced text. In most cases, use of a phrase element such as CODE, SAMP, or KBD is more appropriate since these elements express the meaning of the text more clearly.

Style sheets should be used to complement or replace instances of TT. For example, replacing

<H1><TT>My heading</TT></H1>

with

<H1>My heading</H1>

and

H1 { font-family: monospace }

in a style sheet allows the author to change the presentation of all H1 elements in an entire site by changing just one line in the style sheet.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • TT in W3C HTML 4.0 Recommendation
  • TT in W3C HTML 3.2 Recommendation
  • TT in HTML 2.0 Standard
  • TT in WDG HTML 3.2 Reference
  • TT in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


U - Underlined Text

Syntax

<U>...</U>

Attribute Specifications

[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements

Contained in

Inline elements, block-level elements

Description

The U element, deprecated in HTML 4.0, suggests that text be rendered as underlined text. In most cases, use of a phrase element such as CITE or STRONG is more appropriate since such elements express the meaning of the text more clearly.

Style sheets should be used to complement or replace instances of U. For example, replacing

<H1><U>My heading</U></H1>

with

<H1>My heading</H1>

and

H1 { text-decoration: underline }

in a style sheet allows the author to change the presentation of all H1 elements in an entire site by changing just one line in the style sheet.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • U in W3C HTML 4.0 Recommendation
  • U in W3C HTML 3.2 Recommendation
  • U in WDG HTML 3.2 Reference
  • U in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


UL - Unordered List

Syntax

<UL>...</UL>

Attribute Specifications

TYPE=[ disc | square | circle ] (bullet style)
COMPACT (compact display)
[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

One or more LI elements

Contained in

APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

Description

The UL element defines an unordered list. The element contains one or more LI elements that define the actual items of the list.

Unlike with an ordered list (OL), the items of an unordered list have no sequence. In theory, users should be able to change the order of items in an unordered list (e.g., alphabetizing them).

Visual browsers typically render UL with a bullet preceding each list item, but authors can suggest various presentations using style sheets. The list-style property of Cascading Style Sheets allows authors to suppress bullets, use images as list item markers, and more.

TYPE

The deprecated TYPE attribute of UL suggests the bullet style on visual browsers. Possible values are as follows:

  • disc (a filled-in circle)
  • square (a square outline)
  • circle (a circle outline)

The bullet style on an individual list item can be suggested using the TYPE attribute of LI. The list-style-type property of CSS provides greater flexibility in suggesting bullet styles.

COMPACT

The deprecated COMPACT attribute suggests that visual browsers render the list compactly, perhaps with reduced spacing between items. This attribute is not well supported among browsers.

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • UL in W3C HTML 4.0 Recommendation
  • UL in W3C HTML 3.2 Recommendation
  • UL in HTML 2.0 Standard
  • UL in WDG HTML 3.2 Reference
  • UL in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


VAR - Variable

Syntax

<VAR>...</VAR>

Attribute Specifications

[4.0] ID=string
[4.0] CLASS=string
[4.0] STYLE=string
[4.0] TITLE=string
[4.0] LANG=Language (i.e. RU - Russian)
[4.0] DIR=ltr|rtl
[4.0] SCRIPTING EVENTS=string

Contents

Inline elements

Contained in

Inline elements, block-level elements

Description

The VAR element is used to markup variables or program arguments. Visual browsers typically render VAR as italic text, but authors can suggest a rendering using style sheets. Since VAR is a structural element, it carries meaning, making it preferable to font style elements such as I when marking up variables.

Example:

<P>Versions of HTML are typically numbered in an <VAR>x</VAR>.<VAR>x</VAR> format.</P>

[4.0] ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=firstp>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

P#firstp {
  color: navy;
  background: transparent
}

P#secondp {
  color: black;
  background: transparent
}

The paragraphs in the initial example could also be used as a target anchor for links:

<P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>

Note that most browsers do not support the ID attribute for link anchors. For current browsers, authors should use <A NAME>...</A> within the element instead of ID.

Since ID and NAME share the same name space, authors cannot use the same value for an ID attribute and a NAME attribute in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

[4.0] CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the ID attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names.

Note that most current browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>
<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>
</DIV>

This example's use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

.navbar IMG { float: right }

@media print {
  .navbar { display: none }
}
[4.0] STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

In most cases, use of the CLASS or ID attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

[4.0] TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a "tooltip" on visual browsers, though many browsers lack support for TITLE. The attribute is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:

  • <A HREF="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0 Reference">liam@htmlhelp.com</A>
  • <A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" TITLE="CGI.pm - a Perl5 CGI Library">CGI.pm</A>
  • <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française">
  • <OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game">
    <IMG SRC="yahtzee.gif" ALT="" TITLE="A Yahtzee animation">
    Yahtzee is my <EM>favorite</EM> game!
    </OBJECT>

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

  • He weighs 180 <ABBR TITLE=pounds>lbs.</ABBR>
  • <ABBR TITLE="Parti Québécois" LANG=fr-CA>PQ</ABBR>
  • <ACRONYM TITLE="North Atlantic Treaty Organization">NATO</ACRONYM>

Internationalization Attributes

[4.0] LANG

The LANG attribute specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<TITLE>Welcome - Bienvenue</TITLE>
<H1>
  <SPAN LANG=en>Welcome</SPAN> -
  <SPAN LANG=fr>Bienvenue</SPAN>
</H1>
<P LANG=en>This paragraph is in English.</P>
<P LANG=fr>Ce paragraphe est en français.</P>
...

A document's primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

[4.0] DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

[4.0] Scripting Events

A number of attributes that define client-side scripting events are common to most elements. The attribute value is a script--typically a function call or a few short statements--that is executed when the event occurs. The value may contain entities (e.g., &quot;).

The following example features JavaScript code to handle two events of a submit button, giving the user a reminder in the status bar when the mouse moves over the button and clearing the status bar when the mouse moves away. Note that the attribute values are delimited by single quotes since double quotes are used within them.

<INPUT TYPE=submit ONMOUSEOVER='window.status="Did you fill in all required fields?";' ONMOUSEOUT='window.status="";'>

When an event attribute is used, a default scripting language must be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. The previous example could use the following META element in the document's HEAD:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

The common event attributes are device-dependent and largely tailored for the graphical user interface. The available events are as follows:

  • ONCLICK, when the mouse button is clicked on an element;
  • ONDBLCLICK, when the mouse button is double-clicked on an element;
  • ONMOUSEDOWN, when the mouse button is pressed over an element;
  • ONMOUSEUP, when the mouse button is released over an element;
  • ONMOUSEOVER, when the mouse is moved onto an element;
  • ONMOUSEMOVE, when the mouse is moved while over an element;
  • ONMOUSEOUT, when the mouse is moved away from an element;
  • ONKEYPRESS, when a key is pressed and released over an element;
  • ONKEYDOWN, when a key is pressed down over an element;
  • ONKEYUP, when a key is released over an element.

More Information

  • VAR in W3C HTML 4.0 Recommendation
  • VAR in W3C HTML 3.2 Recommendation
  • VAR in HTML 2.0 Standard
  • VAR in WDG HTML 3.2 Reference
  • VAR in Learning HTML 3.2 by Examples
  • HTML 4.0 Reference
  • Elements by Function
  • Elements Alphabetically

Sausage Software and the Web Design Group

Copyright © 1998 Sausage Software & Liam Quinn. All rights reserved.

Maintained by Peter Hurst


<A> | NN tous IE tous HTML tous
<A>...</A> | Balise de fin : obligatoire

L'élément A est le rare élément pouvant être une ancre et/ou un lien, selon que les attributs NAME et/ou HREF sont présents ou non. En tant qu'ancre, cet élément définit, à l'intérieur d'un document, un emplacement nommé auquel une adresse URL (Universal Resource Locator) peut faire référence grâce à l'ajout du caractère # et du nom de l'ancre à la fin de l'adresse URI (Universal Resource Identifier) du document (http://www.megacorp.com/contents#a-c). Un nom est un identifiant affecté à l'attribut NAME (ou, dans les versions les plus récentes des navigateurs, à l'attribut ID). Par défaut, un contenu défini uniquement comme étant une ancre ne se distingue pas visuellement du contenu BODY environnant.

Lorsque vous affectez une adresse URI à l'attribut HREF, l'élément devient la source d'un lien hypertexte. Lorsque vous activez le lien, vous êtes généralement dirigé vers l'adresse URI affectée à l'attribut HREF (ou bien le lien charge un autre type de contenu dans un plug-in sans changer de page). Les liens sont généralement reconnaissables dans le navigateur à leur soulignement (s'il s'agit de texte), à leur bordure (s'il s'agit d'un objet) et à leur couleur différente de celle du contenu environnant. Il est possible d'affecter trois couleurs différentes à un lien, en fonction de son état : lien pas encore activé, lien en cours d'activation par l'utilisateur et lien déjà activé (auquel cas, le document vers lequel pointe le lien se trouve encore dans la mémoire cache du navigateur). Un élément A peut être à la fois une ancre et un lien si une valeur a été affectée à chacun des attributs NAME (ou ID) et HREF.

Exemple
<A NAME="anchor3">Cette ancre s'appelle « anchor3 ».</A>
<A HREF="#anchor3">Ce lien pointe vers « anchor3 »dans le même
 document.</A>
<A NAME="anchor3" HREF="http://www.megacorp.com/index.html">
D'ici, (anchor 3) vous arrivez à la page d'accueil.</A>
Référence de modèle d'objet
NN | [window.]document.links[i] [window.]document.anchors[i]
IE | [window.]document.links[i] [window.]document.anchors[i] [window.]document.all.IDélément
ACCESSKEY | NN s.o. IE 4 HTML 4
ACCESSKEY=« caractère » | Facultatif

Touche alphabétique permettant d'activer le lien. Le navigateur et le système d'exploitation déterminent si l'utilisateur doit appuyer sur une touche de modification (par exemple Ctrl, Alt ou Commande) en même temps que sur la touche d'accès pour activer le lien. Dans IE 4/Windows, il doit obligatoirement s'agir de la touche Alt, et celle-ci est insensible à la casse. Cet attribut est inopérant dans Internet Explorer 4 pour Macintosh.

Exemple
<A HREF="http://www.megacorp.com/toc.html" ACCESSKEY="t">Table des matières</A>
Valeur
Caractère simple repris dans la table de caractères définie pour le document.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.links[i].accessKey
[window.]document.anchors[i].accessKey
[window.]document.all.IDélément.accessKey
CHARSET | NN s.o. IE s.o. HTML 4
CHARSET=« Jeu_de_caractères » | Facultatif

Définit le jeu de caractères utilisé pour l'encodage du document vers lequel le lien pointe.

Exemple
<A CHARSET="csISO5427Cyrillic" HREF="moscou.html">Visitez Moscou</A>
Valeur
Alias insensible à la casse pris dans le registre du jeu de caractères (ftp://ftp.isi.edu/in-notes/iana/assignments/character-sets).
Par défaut Déterminée par le navigateur.
COORDS | NN s.o. IE s.o. HTML 4
COORDS=« coord1, ... coordN » | Facultatif

Lorsqu'un lien entoure une image, cet attribut définit les coordonnées (par rapport au coin supérieur gauche de l'élément) associées à une carte de zone.

Exemple
<A HREF="#bottom" SHAPE="rect" COORDS="30, 30, 60, 45">
    <IMG SRC="nav.jpg" HEIGHT="50" WIDTH="90" BORDER="0">
</A>
Valeur
Chaque coordonnée consiste en une longueur ; le nombre de coordonnées et leur ordre dépendent de la forme spécifiée par l'attribut SHAPE éventuellement associé à l'élément. Pour SHAPE="rect", les coordonnées sont au nombre de quatre (left, top, right, bottom) ; pour SHAPE="circle", elles sont au nombre de trois (center-x, center-y, radius) ; pour SHAPE="poly", chaque point définissant la forme du polygone (x1, y1, x2, y2, x3, y3,...xN, yN) possède deux coordonnées.
Par défaut Aucune.
DATAFLD | NN s.o. IE 4 HTML s.o.
DATAFLD=« nom_colonne » | Facultatif

Cet attribut est utilisé avec Internet Explorer 4 dans le cadre d'une liaison de données pour associer à un lien un nom de colonne provenant d'une source de données distante au lieu d'un attribut HREF. Cette colonne doit contenir une adresse URI valide (relative ou absolue). Vous devez également définir un attribut DATASRC pour l'élément.

Exemple
<A DATASRC="#DBSRC3" DATAFLD="newsURL">Dernières nouvelles</A>
Valeur
Identifiant sensible à la casse.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.links[i].dataFld
[window.]document.all.IDélément.dataFld
DATASRC | NN s.o. IE 4 HTML s.o.
DATASRC=« nom_source_de_données » | Facultatif

Utilisé avec la fonction de liaison de données d'Internet Explorer 4 pour spécifier le nom de la source de données ODBC distante (telle qu'une base de données Oracle ou SQL Server) à associer à l'élément. Le contenu à extraire de la source de données est spécifié à l'aide de l'attribut DATAFLD.

Exemple
<A DATASRC="#DBSRC3" DATAFLD="URLnouvelles">Dernières nouvelles</A>
Valeur
Identifiant sensible à la casse.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.links[i].dataSrc
[window.]document.all.IDélément.dataSrc
HREF | NN tous IE tous HTML tous
HREF=« URI » | Obligatoire pour les liens.

Adresse URI de la destination d'un lien. Dans un navigateur, lorsque l'URI est un document HTML, le document est chargé dans la fenêtre actuelle (par défaut) ou dans une autre fenêtre (en fonction de la fenêtre définie comme fenêtre cible par l'attribut TARGET). Pour certains types de fichier, le navigateur peut charger le contenu cible dans un plug-in ou enregistrer le fichier cible sur l'ordinateur client. En l'absence d'attribut HREF, l'élément n'apparaît pas comme un lien activable dans un navigateur et peut être simplement une ancre (si l'attribut NAME ou ID est défini).

Exemple
<A HREF="part1/chap3.html">Chapitre 3</A>
Valeur
N'importe quelle adresse URI valide, notamment des adresses URL complètes et relatives, des ancres figurant sur la même page (et dont le nom doit être précédé du caractère #) et, dans les navigateurs prenant en charge les scripts et la pseudo-URL javascript: pour exécuter une instruction de script au lieu d'être dirigé vers une destination.
Par défaut Aucune.
Référence de modèle d'objet
IE | [window.]document.links[i].href [window.]document.all.IDélément.href
NN | [window.]document.links[i].href
Dans un navigateur comme dans l'autre, d'autres propriétés des objets lien permettent l'extraction de composants de l'adresse URL, tels que le protocole et le nom de l'hôte. Voir l'objet Link dans .
HREFLANG | NN s.o. IE s.o. HTML 4
HREFLANG=« code_langue » | Facultatif

Définit la langue utilisée dans le document vers lequel le lien pointe. Exige que l'attribut HREF soit également défini. Cet attribut fournit principalement des informations permettant au navigateur de se préparer pour un nouveaux jeu de caractères, s'il en a la capacité.

Exemple
<A HREFLANG="HI" HREF="hindi/Chap3.html>Chapitre 3 (en Hindi)</A>
Valeur
Code de langue insensible à la casse.
Par défaut Valeur par défaut du navigateur.
ID | NN 3 IE 3 HTML 4
ID=« IDélément » | Facultatif

Identifiant unique qui distingue cet élément de tous les autres au sein du document. Peut être utilisé pour associer un élément à une règle de style nommant cet attribut comme sélecteur d'ID. Les navigateurs permettent généralement de substituer l'attribut ID à l'attribut NAME pour définir l'élément comme étant une ancre. Dans ce cas, un attribut ID peut être à la fois un sélecteur défini par une règle de style et un nom d'ancre. Un élément A peut se voir attribuer un ID unique et une classe pour l'inclusion dans un groupe.

Exemple
<A ID="section3">Section 3</A>
Valeur
Identifiant sensible à la casse.
Par défaut Aucune.
Référence de modèle d'objet
IE | [window.]document.links[i].id [window.]document.anchors[i].id [window.]document.all.IDélément.id
NN | [window.]document.anchors[i].name
METHODS | NN s.o. IE 4 HTML s.o.
METHODS=« méthode HTTP » | Facultatif

Attribut fournissant des informations sur le comportement de la cible d'un lien. Un navigateur peut utiliser ces informations pour associer des images ou des couleurs spéciales au contenu de l'élément, selon le comportement particulier de la cible.

Exemple
<A HREF="http://www.megacorp.com/cgi-bin/search?chap3" METHODS="GET">
Chapitre 3</A>
Valeur
Méthode ou liste de méthodes HTTP séparées par des virgules.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.links[i].Methods
[window.]document.all.IDélément.Methods
NAME | NN tous IE tous HTML tous
NAME=« IDélément » | Obligatoire pour les ancres

Méthode généralement utilisée pour désigner une position d'ancre dans un document. D'autres éléments liés peuvent faire référence à cette position en affectant à leur attributs HREF une adresse URL se terminant par le caractère #, suivie de l'identifiant. Si vous omettez l'attribut NAME (et l'attribut ID) de l'élément A, ce dernier ne peut pas être utilisé comme position d'ancre. Dans les versions les plus récentes des navigateurs, cet attribut peut être substitué à l'attribut ID. Si les attributs NAME et HREF sont tous deux définis, l'élément est considéré à la fois comme une ancre et comme un lien.

Exemple
<A NAME="sect3">Section III</A>
Valeur
Identifiant sensible à la casse.
Par défaut Aucune.
Référence de modèle d'objet
IE | [window.]document.links[i].name [window.]document.anchors[i].name [window.]document.all.IDélément.name
NN | [window.]document.links[i].name [window.]document.anchors[i].name
REL | NN s.o. IE 3 HTML 4
REL=« types_de_liens » | Facultatif

Définit la relation qui existe entre l'élément actuel et la cible du lien. Définissant ce que l'on appelle parfois une relation de lien négative, cet attribut ne doit pas être confondu avec le document cible dont l'adresse est définie par l'attribut HREF. La recommandation HTML 4.0 définit plusieurs types de liens, mais c'est le navigateur qui détermine de quelle façon la valeur est utilisée. Dans IE 4, cet attribut est surtout pertinent pour l'élément LINK, bien qu'il existe de nombreuses possibilités d'application future pour des tâches telles que l'affectation d'un élément A (agissant comme un lien) à un bouton dans une barre de navigation statique pointant sur le document suivant ou précédent d'une série. Un attribut HREF doit être spécifié pour l'attribut REL à appliquer.

Exemple
<A REL="next chapter" HREF="chapter3.html">Chapitre 3</A>
Valeur
Liste de types de lien HTML 4.0 standard applicables à l'élément, insensibles à la casse et séparés par des espaces. Les types de liens approuvés sont les suivants :
alternate | contents | index | start
appendix | copyright | next | stylesheet
bookmark | glossary | prev | subsection
chapter | help | section |
IE 3 définit en outre un jeu de quatre valeurs : same | next | parent | previous.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.links[i].rel
[window.]document.all.IDélément.rel
REV | NN s.o. IE 3 HTML 4
REV=« types_de_liens » | Facultatif

Relation de lien réciproque. Comme c'est le cas pour l'attribut REL, les fonctions de l'attribut REV sont définies par le navigateur, surtout en matière d'interprétation et d'affichage par le navigateur des différents types de liens disponibles dans la spécification 4.0. Si l'on prend deux documents (A et B) comportant des liens pointant l'un vers l'autre, la valeur REV du document B est conçue pour exprimer la même relation entre les deux documents que celle définie par l'attribut REL du document A. L'application des attributs REL et REV de l'élément A est encore limitée dans IE 4.

Exemple
<A REV="previous chapter" HREF="chapter2.html">Chapitre 2</A>
Valeur
Liste de types de liens HTML 4.0 standard applicables à l'élément, insensibles à la casse et séparés par des espaces. Pour la liste des types de liens approuvés, voir l'attribut REL.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.links[i].rev
[window.]document.all.IDélément.rev
SHAPE | NN s.o. IE s.o. HTML 4
SHAPE=« forme » | Facultatif

Définit la forme d'une zone de carte graphique côté serveur dont les coordonnées sont spécifiées à l'aide de l'attribut COORDS.

Exemple
<A HREF="#bottom" SHAPE="rect" COORDS="30, 30, 60, 45">
    <IMG SRC="nav.jpg" HEIGHT="50" WIDTH="90" BORDER="0">
</A>
Valeur
Constante de forme insensible à la casse : default | rect | circle | poly.
Par défaut Aucune.
TABINDEX | NN s.o. IE 4 HTML 4
TABINDEX=NombreEntier | Facultatif

Nombre indiquant la position de cet élément dans l'ordre de tabulation de la page. L'ordre de tabulation suit un ensemble de règles très strictes. Les premiers éléments de la page activés par la touche de tabulation sont ceux dont l'attribut TABINDEX a une valeur autre que zéro. Le premier élément activé est celui dont la valeur TABINDEX est la plus basse, l'élément suivant celui qui a la valeur immédiatement supérieure, et ainsi de suite, quel que soit l'emplacement physique correspondant sur la page ou dans le document. Si deux éléments ont la même valeur TABINDEX, l'élément activé en premier est celui qui apparaît en premier dans le document. Ensuite viennent les éléments qui ne prennent pas en charge l'attribut TABINDEX ou ceux pour lesquels la valeur de cet attribut est zéro. Ces éléments sont activés dans l'ordre où ils apparaissent dans le document. Un élément A ne pouvant pas être désactivé, il est toujours activé lorsque vient son tour dans l'ordre de tabulation, sauf en cas de traitement spécial dans IE 4. Généralement, un élément A défini comme lien peut être activé sur pression de la barre d'espacement une fois que l'élément est sélectionné.

Notez que l'interface utilisateur Macintosh ne permet pas l'activation d'éléments autres que les champs de saisie de données. Les liens et les ancres ne sont pas activables à l'aide de la touche de tabulation dans la version Macintosh d'Internet Explorer 4.

Exemple
<A HREF="chapter3.html" TABINDEX=3>Chapitre 3</A>
Valeur
Nombre entier compris entre 0 et 32767. Dans IE 4, si vous donnez à l'attribut TABINDEX la valeur -1, la touche de tabulation saute l'élément correspondant.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.links[i].tabIndex
TARGET | NN tous IE tous HTML tous
TARGET=« nom_de_fenêtre_ou_de_cadre » | Facultatif

Si le document cible doit être affiché dans une fenêtre ou dans un cadre autre que la fenêtre ou le cadre actuels, vous pouvez préciser l'endroit où il doit s'afficher en associant un nom de fenêtre ou de cadre à l'attribut TARGET. Il faut impérativement affecter un nom aux cadres et aux fenêtres cibles afin de les identifier. Pour attribuer un nom à un nouveau cadre, utilisez l'attribut NAME de l'élément FRAME ; pour attribuer un nom à une nouvelle fenêtre, utilisez le second paramètre de la méthode de script window.open(). Si vous omettez cet attribut, le document cible s'affiche à la place du document contenant le lien. Un identifiant qui n'est pas associé à un cadre ou à une fenêtre existante ouvre une nouvelle fenêtre destinée à recevoir le document cible. Cet attribut s'applique uniquement lorsqu'une valeur est affectée à l'attribut HREF de l'élément.

Un élément lien ne peut avoir qu'un seul document de destination et une seule cible. Si vous souhaitez qu'un lien change le contenu de plusieurs cadres, vous pouvez utiliser le gestionnaire d'événement onClick d'un élément A ou une pseudo-URL javascript: pour exécuter un script chargeant plusieurs documents. Affectez l'adresse URL souhaitée à la propriété location.href de chaque cadre.

Exemple
<A TARGET="display" HREF="chap3.html#sec2">Section 3.2</A>
<A TARGET="_top" HREF="index.html">Start Over</A>
Valeur
Identifiant sensible à la casse lorsque le nom du cadre ou de la fenêtre a été défini via l'attribut NAME de l'élément cible. Quatre noms de cible réservés servent de constantes :
_blank | Le navigateur affiche le document cible dans une nouvelle fenêtre.
_parent | Le document cible remplace le document qui définit le jeu de cadres auquel appartient le cadre actuel (s'il en existe un, sinon il est traité comme _self).
_self | Le document cible remplace le document actuel dans sa fenêtre ou dans son cadre.
_top | Le document cible remplace tous les jeux de cadres éventuellement chargés, remplissant ainsi toute la fenêtre du navigateur (également traité comme _self si aucun jeu de cadres n'est défini dans la fenêtre).
Par défaut _self
Référence de modèle d'objet
IE | [window.]document.links[i].target
NN | [window.]document.links[i].target
TYPE | NN s.o. IE s.o. HTML 4
TYPE=« type_MIME » | Facultatif

Fournit des informations sur le type de contenu du document ou de la ressource cible. Un navigateur peut utiliser ces informations, par exemple, pour se préparer à gérer une ressource nécessitant un plug-in ou un lecteur multimédia.

Exemple
<A TYPE="video/mpeg" HREF="ski4.mpeg">View Devil's Ghost slope</A>
Valeur
Type de MIME insensible à la casse. Un catalogue des types de MIME enregistrés est disponible à l'adresse suivante :ftp://ftp.isi.edu/in-notes/iana/assignments/media-types/.
Par défaut Aucune.
URN | NN s.o. IE 4 HTML s.o.
URN=« URN » | Facultatif

Version URN (Uniform Resource Name) du document cible spécifié dans l'attribut HREF. Cet attribut a pour but d'offrir une prise en charge future du format URN des adresses URI ; cette recommandation en cours de développement fait l'objet de discussions par l'IETF (voir RFC 2141). Bien qu'il soit pris en charge par IE 4, cet attribut ne remplace pas l'attribut HREF.

Exemple
<A URN="urn:foo:bar3" HREF="chapter3.html">Chapitre 3</A>
Valeur
URN valide au format "urn:Idespace_de_nom:chaîne_spécifique_d'espace".
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.links[i].urn


<ABBR> | NN s.o. IE s.o. HTML 4
<ABBR>...</ABBR> | Balise de fin : obligatoire

L'élément ABBR offre un mécanisme d'encapsulation et d'énumération des abréviations apparaissant dans le corps du texte. Prenons, par exemple, une page Web indiquant l'adresse du siège de votre société. Supposons qu'à un endroit de la page, l'abréviation IA soit utilisée à la place du nom complet de l'état, Iowa. Un vérificateur orthographique, un programme de traduction automatique ou un synthétiseur de parole buterait certainement sur cette abréviation ; quant aux moteurs de recherche, ils n'incluraient certainement pas le mot « Iowa » dans leurs recherches. Mais si vous placez l'abréviation IA entre des balises ABBR (et que vous lui affectez l'attribut TITLE), vous pouvez lui associer le texte complet correspondant ; celui-ci peut alors être compté par les moteurs de recherche et lu par les programmes de synthèse vocale au lieu d'une abréviation qui n'a aucun sens. Comme c'est le cas pour de nombreux éléments de la norme HTML 4.0, cet élément est prévu pour des technologies qui n'ont pas encore été implémentées mais qui pourraient faire leur apparition dans les futurs navigateurs.

L'élément apparenté ACRONYM offre des possibilités identiques pour les acronymes. Ces deux éléments appartiennent à un groupe plus large que la recommandation HTML 4.0 nomme éléments de phrase.

Exemple
Ottumwa, <ABBR TITLE="Iowa">IA</ABBR> 55334<BR>
<ABBR LANG="de" TITLE="und so weiter">usw.</ABBR>
TITLE | NN s.o. IE s.o. HTML 4
TITLE=« commentaire » | Facultatif

Description complète de l'élément. Pour l'élément ABBR, cette description joue un rôle essentiel car elle fournit le texte intégral (invisible) correspondant à l'abréviation affichée dans le document.

Exemple
<ABBR TITLE="Iowa">IA</ABBR>
Valeur
Chaîne de caractères quelconque. Cette chaîne doit être placée entre guillemets (simples ou doubles, mais identiques).
Par défaut Aucune.


<ACRONYM> | NN s.o. IE 4 HTML 4
<ACRONYM>...</ACRONYM> | Balise de fin : obligatoire

L'élément ACRONYM offre un mécanisme d'encapsulation et d'énumération des acronymes apparaissant dans le corps du texte. Prenons l'exemple d'une page Web traitant de questions pétrolières. Imaginons qu'à un endroit du document, l'acronyme OPEP soit utilisé pour désigner l'Organisation des Pays Producteurs de Pétrole. Un vérificateur orthographique, un programme de traduction automatique ou un synthétiseur de parole buterait peut-être sur cet acronyme ; quant aux moteurs de recherche, ils n'incluraient certainement pas le mot « tarifs » dans leurs calculs de taux de petinence. En revanche, si vous placez l'acronyme OPEP entre des balises ACRONYM (et que vous lui affectez l'attribut TITLE), vous pouvez lui associer le texte intégral correspondant ; celui-ci peut alors être compté par les moteurs de recherche et lu par les programmes de synthèse vocale. Comme c'est le cas pour de nombreux éléments de la norme HTML 4.0, cet élément est prévu pour des technologies qui n'ont pas encore été implémentées mais qui pourraient faire leur apparition dans les navigateurs de demain.

L'élément apparenté ABBR offre des possibilités identiques pour les abréviations. Ces deux éléments appartiennent à un groupe plus large que la recommandation HTML 4.0 nomme éléments de phrase.

Exemple
<ACRONYM LANG="fr" TITLE="Organisation des Pays Producteurs de Pétrole">OPEP</ACRONYM>
<ACRONYM LANG="it" TITLE="Stati Uniti">S.U.</ACRONYM>
Référence du modèle objet
IE [window.]document.all.IDélément
TITLE | NN s.o. IE 4 HTML 4
TITLE=« advisoryText » | Facultatif

Description complète de l'élément. Pour l'élément ACRONYM, cette description joue un rôle essentiel car elle fournit le texte intégral invisible correspondant à l'acronyme affiché dans le document.

Exemple
<ACRONYM LANG="fr" TITLE="Etats-Unis">U.S.A.</ACRONYM>
Valeur
Chaîne de caractères quelconque. Cette chaîne doit être placée entre guillemets ou apostrophes.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.all.IDélément.title


<ADDRESS> | NN tous IE tous HTML tous
<ADDRESS>...</ADDRESS> | Balise de fin : obligatoire

Avant HTML 4, l'élément ADDRESS était souvent utilisé pour formater les coordonnées de l'auteur de la page. Navigator et Internet Explorer affichent les éléments ADDRESS en italique. Mais les efforts pour distinguer le contenu de la forme dans HTML 4.0 se sont traduits par un enrichissement du sens de cet élément. Il est possible que les moteurs de recherche et les futurs analyseurs de documents HTML (ou XML) accordent une signification spéciale au contenu de cet élément, peut-être en cataloguant séparément les informations concernant l'auteur et les informations cachées qui figurent dans les éléments META. Si vous souhaitez exploiter ce sens structurel de l'élément tout en vous assurant que son affichage est en accord avec le reste du corps du texte, vous devez lui appliquer des règles de style annulant les règles de formatage par défaut du navigateur pour ce type d'élément. Tout élément BODY standard, tel qu'un lien, par exemple, peut être placé entre des balises ADDRESS.

Exemple
<ADDRESS>
<P>Envoyez vos commentaires à  ;:<A HREF="mailto:jb@megacorp.com">jb@megacorp.com</A>
</P>
</ADDRESS>
Référence de modèle d'objet
IE [window.]document.all.IDélément


<APPLET> | NN 2 IE 3 HTML 3.2
<APPLET>...</APPLET> | Balise de fin : obligatoire

Vous pouvez insérer un segment de code Java exécutable dans un document HTML sous forme d'applet. Une applet occupe une zone rectangulaire de la page, même si celle-ci n'est pas plus grande qu'un pixel carré. Une applet peut exiger que certaines valeurs initiales soient définies dans le document HTML. Vous pouvez utiliser un ou plusieurs éléments PARAM pour passer des paramètres à l'applet avant son exécution (du moment qu'elle a été écrite pour accepter des paramètres). Les éléments PARAM se placent entre les balises de début et de fin d'un élément APPLET.

Les applets sont compilées par leurs auteurs en fichiers de classe (portant l'extension de fichier .class). Un fichier de classe d'applet doit se trouver dans le même répertoire que le document HTML qui charge l'applet, ou dans l'un de ses sous-répertoires. Les attributs clés de l'élément APPLET indiquent au navigateur qu'il doit charger un fichier de classe spécifique à partir du répertoire ou du sous-répertoire approprié.

Tous les éléments de l'interface utilisateur de l'applet sont programmés dans cette dernière en JavaScript. Les attributs de l'élément APPLET ont pour rôle, entre autres, de définir la taille et les autres propriétés d'affichage de l'applet sur la page. Les versions récentes des navigateurs permettent aux scripts JavaScript de communiquer avec une applet ; elles permettent également à une applet d'accéder aux différents éléments du document.

Notez que HTML 4.0 déprécie l'élément APPLET en faveur de l'élément OBJECT, plus générique. Les navigateurs continueront cependant à prendre en charge l'élément APPLET jusqu'à nouvel ordre.

Exemple
<APPLET CODE="simpleClock.class" NAME="myClock" WIDTH=400 HEIGHT=50>
<PARAM NAME=bgColor VALUE="black">
<PARAM NAME=fgColor VALUE="yellow">
</APPLET>
Référence de modèle d'objet
NN | [window.]document.applets[i] [window.]document.nom_applet
IE | [window.]document.applets[i] [window.]document.nom_applet
ALIGN | NN 2 IE 3 HTML 3.2
ALIGN=« constante_d'alignement » | Facultatif

L'attribut ALIGN définit le positionnement du rectangle de l'applet par rapport au contenu environnant. Voir la section « Constantes d'alignement », au début de ce chapitre, pour en savoir plus sur les valeurs possibles de cet attribut dans Navigator et Internet Explorer. La recommandation HTML spécifie seulement un sous-ensemble des constantes autorisées. Bien que Navigator ait inclus cet attribut dans sa version 2, seuls BOTTOM, LEFT, RIGHT et TOP ont été implémentés dans cette version.

Les deux navigateurs appliquent les mêmes règles en matière de positionnement vertical, par rapport au contenu environnant, d'une applet pour laquelle l'attribut ALIGN a été défini, mais les résultats sont parfois imprévisibles lorsque ce contenu est complexe. Pour éviter toute surprise, testez les résultats avec différentes tailles de fenêtre du navigateur.

Exemple
<APPLET CODE="simpleClock.class" NAME="myClock" ALIGN=ABSMIDDLE
WIDTH=400 HEIGHT=50></APPLET>
Valeur
Constante insensible à la casse.
Par défaut bottom
Référence de modèle d'objet
IE [window.]document.applets[i].align
[window.]document.nom_applet.align
ALT | NN 3 IE 3 HTML 3.2
ALT=« texte » | Facultatif

Si un navigateur n'est pas capable de charger et d'exécuter des applets Java ou si cette fonction est désactivée dans les préférences utilisateur, le texte associé à l'attribut ALT doit normalement s'afficher dans le document à l'endroit où la balise APPLET de l'élément apparaît. Ce texte indique généralement à l'utilisateur ce qu'aurait affiché l'applet Java si elle avait pu être chargée. Contrairement aux éléments NOSCRIPT et NOFRAMES, une fonction d'applet Java absente ne possède pas d'élément correspondant. Dans la pratique, les navigateurs n'affichent pas toujours de message d'information lorsque le chargement d'une applet échoue.

Dans la perspective d'une amélioration future de cette fonction, il est conseillé d'utiliser l'attribut ALT avec prudence. Si l'applet n'est pas un élément essentiel du contenu de votre page, il est sans doute préférable de ne pas attirer l'attention dessus en cas d'échec de chargement. Un message d'explication peut être plus gênant pour l'utilisateur que l'applet manquante.

Exemple
<APPLET CODE="simpleClock.class" NAME="myClock" ALIGN=ABSMIDDLE
ALT="Une applet d'horloge Java." WIDTH=400 HEIGHT=50></APPLET>
Valeur
Chaîne de caractères quelconque entre guillemets.
Par défaut Aucune.
ARCHIVE | NN 3 IE s.o. HTML 4
ARCHIVE=« URL_de_fichier_d'archive » | Facultatif

Le sens exact de l'attribut ARCHIVE varie entre la recommandation HTML 4.0 et son implémentation dans Netscape Navigator. L'attribut ARCHIVE de Netscape permet à un auteur de regrouper plusieurs fichiers de classe dans un fichier d'archive .zip unique non compressé ; le navigateur charge alors tous ces fichiers en même temps. Ceci se traduit par une amélioration des performances par rapport à la méthode consistant à charger le fichier de classe principal (spécifié par l'attribut CODE) puis à appeler chaque fichier de classe supplémentaire au fur et à mesure.

Lorsque vous spécifiez l'attribut ARCHIVE, n'oubliez pas d'inclure un attribut CODE précisant le nom du fichier de classe principal à charger. Navigator vérifie d'abord si ce fichier est présent dans l'archive. Si ce fichier est absent, Navigator charge le fichier de classe CODE séparément (celui-ci peut ensuite charger des fichiers de classe supplémentaires, l'un après l'autre). Navigator exige que les fichiers d'archive portent l'extension de fichier .zip. L'adresse URL doit également être relative par rapport à l'emplacement CODEBASE.

La spécification HTML autorise plusieurs adresses URL (séparées par un espace) désignant des fichiers supplémentaires de classe ou autre ressource. Ceci a pour but de permettre l'utilisation future du même attribut avec l'élément OBJECT, pressenti par le W3C comme le successeur de l'élément APPLET.

Exemple
<APPLET CODE="ScriptableClock.class" ARCHIVE="myClock.zip" WIDTH=400 HEIGHT=50>
</APPLET>
Valeur
Adresse URI sensible à la casse.
Par défaut Aucune.
CODE | NN 2 IE 3 HTML 3.2
CODE=« nom_fichier.class » | Obligatoire

Nom du fichier de classe principal qui charge et exécute l'applet. Si l'attribut CODEBASE n'est pas spécifié, l'attribut CODE doit inclure le chemin du répertoire dans lequel se trouve le document HTML qui charge l'applet. Il est possible que vous ne rencontriez aucun problème si vous omettez l'extension de fichier .class , mais il vaut mieux ne pas s'y risquer : pour les fichiers de classe, il vaut mieux indiquer le nom complet, extension comprise. D'autre part, la plupart des serveurs étant sensibles à la casse, vous devez respecter la casse du nom de fichier.

Exemple
<APPLET CODE="applets/ScriptableClock.class" WIDTH=400 HEIGHT=50>
</APPLET>
Valeur
Nom de fichier de classe (doté de l'extension .class ) respectant la casse ou chemin complet relatif au document HTML.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.applets[i].code
[window.]document.nom_applet.code
CODEBASE | NN 2 IE 3 HTML 3.2
CODEBASE=« chemin » | Facultatif

Chemin du répertoire où se trouve le fichier de classe spécifié dans l'attribut CODE ou ARCHIVE. L'attribut CODEBASE n'indique pas le nom du fichier de classe, il donne juste son chemin. Vous pouvez spécifier l'adresse URL complète du répertoire, mais ne tentez pas d'accéder à un codebase extérieur au domaine du document courant. En effet, pour des raisons de sécurité, le chargement de la classe peut être interdit. Vous pouvez spécifier un chemin complet et un nom de fichier dans l'attribut CODE ou OBJECT, auquel cas vous n'avez pas besoin de définir l'attribut CODEBASE.

Exemple
<APPLET CODE="ScriptableClock.class" CODEBASE="applets/" WIDTH=400 HEIGHT=50>
</APPLET>
Valeur
Nom de chemin respectant la casse, généralement relatif au répertoire dans lequel se trouve le document HTML actuel.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.applets[i].codeBase
[window.]document.nom_applet.codeBase
DATAFLD, DATASRC
>
HEIGHT, WIDTH NN 2 IE 3 HTML 3.2
WIDTH=« pixels »
HEIGHT=« pixels » 		Obligatoire

La taille de l'emplacement occupé par une applet Java dans un document est déterminée par la valeur des attributs HEIGHT et WIDTH. Dans certaines versions des navigateurs, ces attributs n'ont pas besoin d'être définis ; c'est alors l'interface utilisateur même de l'applet qui détermine la hauteur et la largeur de son rectangle visible. Comme c'est le cas pour les images, il vaut toutefois mieux spécifier les dimensions de l'applet. Cela facilitera la tâche du navigateur. Prenez l'habitude de fournir ces valeurs pour toutes les applets, comme vous le feriez pour les images ou autres objets visibles externes.

Exemple
<APPLET CODE="ScriptableClock.class" WIDTH=400 HEIGHT=50>
</APPLET>
Valeur
Nombre entier positif (entre guillemets ou pas) représentant un nombre de pixels. Vous ne pouvez pas masquer entièrement une applet en lui affectant la valeur zéro, mais vous pouvez descendre jusqu'à 1 pixel pour chaque dimension. Pour masquer une applet, vous devez utiliser DHTML et affecter la valeur none à son attribut d'affichage.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.applets[i].height
[window.]document.nom_applet.height
[window.]document.applets[i].width
[window.]document.nom_applet.width
HSPACE, VSPACE NN 2 IE 3 HTML 3.2
HSPACE=« pixels »
VSPACE=« pixels » 		Facultatif

Vous pouvez aérer l'espace entre une applet et le contenu environnant à l'aide des attributs HSPACE et VSPACE. L'attribut VSPACE définit la quantité d'espace à insérer au dessus et au dessous de l'applet, l'attribut HSPACE la quantité d'espace à insérer à gauche et à droite de l'applet. Si votre navigateur gère bien les feuilles de style, il vaut mieux utiliser les attributs de remplissage et/ou de définition des marges, grâce auxquels vous pourrez mieux contrôler les côtés individuels de l'applet.

Exemple
<APPLET CODE="ScriptableClock.class" WIDTH=400 HEIGHT=50 HSPACE=3 VSPACE=4>
</APPLET>
Valeur
Nombre entier positif (entre guillemets ou pas) représentant un nombre de pixels.
Par défaut 0
Référence de modèle d'objet
IE [window.]document.applets[i].hspace
[window.]document.nom_applet.hspace
[window.]document.applets[i].vspace
[window.]document.nom_applet.vspace
ID | NN s.o. IE 4 HTML 4
ID=« IDélément » | Facultatif

Identifiant unique qui distingue cet élément de tous les autres au sein du document. Il peut être utilisé pour associer un élément à une règle de style nommant cet attribut comme sélecteur d'ID. Un élément peut se voir attribuer un ID unique et une classe pour l'inclusion dans un groupe. Voir .

Si vous définissez un attribut ID mais pas d'attribut NAME, la valeur de l'attribut ID peut être utilisée comme nom de l'applet dans les types de référencement par des scripts qui utilisent le nom de l'élément (document.appletName).

Exemple
<APPLET ID="clocker" CODE="ScriptableClock.class" WIDTH=400 HEIGHT=50>
</APPLET>
Valeur
Identifiant sensible à la casse.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.applets[i].id
[window.]document.nom_applet.id
MAYSCRIPT | NN 3 IE 4 HTML s.o.
MAYSCRIPT | Facultatif

Avec Navigator 3 est apparue la technologie LiveConnect, qui permettait aux scripts de communiquer avec les applets Java et vice versa. Pour des raisons de sécurité, les fonctions de communication d'une applet avec les scripts doivent être activées explicitement par l'auteur de la page. En ajoutant l'attribut MAYSCRIPT à la balise de l'applet, l'auteur permet à cette dernière de communiquer avec les objets et les scripts du document, du moment qu'elle est conçue pour. En d'autres mots, le HTML accorde à l'applet l'accès aux scripts du document. L'activation de cet attribut est très simple : lorsque le nom de l'attribut est présent, l'attribut est activé.

Une autre action est nécessaire pour qu'une applet puisse communiquer avec JavaScript. Le code de l'applet doit importer un fichier de classe Netscape spécial nommé JSObject.class. Dans la version Windows d'Internet Explorer 4, ce fichier (et la classe d'exception qui l'accompagne) sont intégrés dans le support Java. Bien qu'imparfaite, une communication de base entre les applets et les scripts est possible dans IE 4.

Exemple
<APPLET CODE="ScriptableClock.class" WIDTH=400 HEIGHT=50 MAYSCRIPT>
</APPLET>
Valeur
Aucune valeur n'est affectée à cet attribut. La présence du nom de l'attribut suffit à activer la communication entre l'applet et les scripts.
Par défaut Désactivé.
NAME | NN 2 IE 3 HTML 3.2
NAME=« IDélément » | Facultatif

Lorsque vous créez un script pour une applet, il est généralement plus pratique de créer une référence à l'applet à l'aide d'un nom unique que vous lui aurez attribué. Ainsi, si vous modifiez la page par la suite et que vous déplacez ou supprimez plusieurs applets qui y figurent, vous n'aurez pas besoin de modifier les valeurs d'index dans des références en tableau. Dans IE 4, vous pouvez omettre l'attribut NAME et utiliser la valeur de l'attribut ID dans les références du script à l'objet applet (applet).

Exemple
<APPLET NAME="clock2" CODE="ScriptableClock.class" WIDTH=400 HEIGHT=50>
</APPLET>
Valeur
Identifiant sensible à la casse.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.applets[i].name
[window.]document.nom_applet.name
SRC | NN s.o. IE 4 HTML s.o.
SRC=« URL » | Facultatif

Internet Explorer 4 définit cet attribut comme étant l'adresse URL d'un « fichier associé ». Il peut être identique à l'attribut ARCHIVE défini dans les spécifications HTML et Navigator. L'attribut SRC ne peut pas être substitué aux attributs CODE et/ou CODEBASE.

Valeur
Adresse URL complète ou relative.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.applets[i].src
[window.]document.nom_applet.src


<AREA> | NN tous IE tous HTML 3.2
<AREA> | Balise de fin : interdite

Un élément MAP définit une carte graphique côté client à associer à un objet image, ou autre, occupant un espace sur la page. L'élément MAP a pour seul rôle d'affecter un nom et un contexte de balise à une ou plusieurs définitions d'élément AREA. Chaque élément AREA définit la façon dont la page doit réagir lorsqu'il y a interaction entre l'utilisateur et une zone de l'image (ou autre objet).

Une carte graphique côté serveur peut agir comme un lien d'élément A dans ce sens qu'une zone peut renvoyer vers une cible ou une pseudo-URL javascript et désigner un autre cadre ou une autre fenêtre comme cible pour l'affichage d'un nouveau document. En fait, dans le modèle d'objet document qui définit le script, un élément AREA est traité comme un lien. On utilise souvent les cartes graphiques côté client dans les barres de navigation occupant un cadre étroit au sein d'un jeu de cadres. L'auteur dispose ainsi d'une plus grande créativité en matière de conception de menus, tout en ayant la possibilité de désigner comme lien spécial n'importe quel segment d'une image plus grande.

Exemple
<MAP NAME="nav">
<AREA COORDS="20,30,120,70" HREF="contents.html" TARGET="display">
</MAP>
Référence de modèle d'objet
NN | [window.]document.links[i]
IE | [window.]document.links[i] [window.]document.all.IDélément
ACCESSKEY | NN s.o. IE s.o. HTML 4
ACCESSKEY=« character » | Facultatif

Touche alphabétique permettant d'activer le lien associé à la zone réactive de l'image. Le navigateur et le système d'exploitation déterminent si l'utilisateur doit appuyer sur une touche de modification (par exemple Ctrl, role="bold">Alt ou Commande) en même temps que sur la touche d'accès pour activer le lien.

Exemple
<AREA COORDS="20,30,120,70" HREF="contents.html" TARGET="display" ACCESSKEY="t">
Valeur
Caractère simple repris dans la table de caractères définie pour le document.
Par défaut Aucune.
ALT | NN s.o. IE 3 HTML 3.2
ALT=« textMessage » | Obligatoire

Les navigateurs non graphiques peuvent utiliser l'attribut ALT pour afficher une brève description des zones réactives de l'image (invisible). A moment donné, on pensait que le message ALT pourrait s'afficher par défaut dans la barre d'état du navigateur lorsque la zone serait activée ou que le curseur passerait dessus. A présent, cette fonction est normalement remplie par les scripts et les gestionnaires d'événement onMouse-Over. N'oubliez pas que les ordinateurs de poche récents sont généralement dotés de navigateurs non graphiques (ou du moins qu'ils permettent la désactivation des fonctions graphiques afin d'améliorer les performances). Tenez toujours compte des situations où les fonctions graphiques ne sont pas prises en charge.

Exemple
<AREA COORDS="20,30,120,70" HREF="contents.html" TARGET="display"
ALT="Table of Contents">
Valeur
Chaîne de caractères quelconque entre guillemets.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.all.IDélément.alt
COORDS | NN tous IE tous HTML 3.2
COORDS=« coord1, ... coordN » | Facultatif

Bien que la définition officielle, élaborée par le W3C, de l'attribut COORDS d'un élément AREA précise que cet attribut est facultatif, cela ne veut pas dire que si vous l'omettez la zone AREA se comportera comme elle le devrait. L'attribut COORDS vous permet de définir le contour de la zone à associer à un lien ou à une action définie par un script. Certains outils de création de pages Web tiers peuvent vous aider à déterminer les coordonnées d'une zone réactive. Vous pouvez également charger l'image dans un programme graphique qui affiche la position du curseur en temps réel et transfère les valeurs obtenues vers l'attribut COORDS.

Les coordonnées sont spécifiées sous forme de liste, les valeurs étant séparées par une virgule. Si deux zones se chevauchent, la zone définie en premier à l'aide du code HTML a la priorité.

Exemple
<AREA COORDS="20,30,120,70" HREF="contents.html" TARGET="display">
Valeur
Chaque coordonnée consiste en une longueur ; le nombre de coordonnées et leur ordre dépendent de la forme spécifiée par l'attribut SHAPE éventuellement associé à l'élément. Pour SHAPE="rect", les coordonnées sont au nombre de quatre (left, top, right, bottom); pour SHAPE="circle", elles sont au nombre de trois (center-x, center-y, radius) ; pour SHAPE="poly", chaque point définissant la forme du polygone (x1, y1, x2, y2, x3, y3,...xN, yN) possède deux coordonnées.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.all.IDélément.coords
HREF | NN tous IE tous HTML 3.2
HREF=« URI » | Obligatoire

Adresse URI de la cible d'un lien associé à la zone. Dans un navigateur, lorsque l'adresse URI est un document HTML, le document est chargé dans la fenêtre cible actuelle (par défaut) ou dans une autre fenêtre (en fonction de la fenêtre définie comme fenêtre cible par l'attribut TARGET). Pour certains autres types de fichier, le navigateur peut charger le contenu cible dans un plug-in ou enregistrer le fichier cible sur la machine cliente. Du fait que Navigator (jusqu'à la version 4) traite les éléments AREA comme des éléments A, l'attribut HREF doit être défini dans l'élément AREA pour que les scripts de Navigator puissent accéder aux différentes propriétés relatives à l'URL et que les gestionnaires d'événements (tels que onMouseOver) puissent opérer.

Exemple
<AREA COORDS="20,30,120,70" HREF="contents.html" TARGET="display">
Valeur
N'importe quelle adresse URI valide, notamment des adresses URL complètes et relatives, des ancres figurant sur la même page (et dont le nom doit être précédé du caractère #, dans les navigateurs prenant en charge les scripts et la pseudo-URL javascript pour exécuter une déclaration de script au lieu d'être dirigé vers une cible.
Par défaut Aucune.
Référence de modèle d'objet
IE | [window.]document.links[i].href [window.]document.all.IDélément.href
NN | [window.]document.links[i].href
Dans un navigateur comme dans l'autre, d'autres propriétés des liens permettent l'extraction de composants de l'adresse URL, tels que le protocole et le nom de l'hôte. Voir l'objet Link dans .
NAME | NN s.o. IE s.o. HTML 4
NAME=« elementIdentifier » | Facultatif

Cet attribut est inclus dans la spécification HTML 4.0 par souci de cohérence avec les autres éléments. Bien que les attributs NAME soient utilisés pour identifier les éléments de formulaire lors de leur soumission et pour les références de script, ils ne sont pas pris en charge par les navigateurs jusqu'à la version 4. (IE 4 utilise l'attribut ID pour affecter un nom à un élément AREA pour les références définies par un script). Il se peut que les futures versions des navigateurs prennent en charge cet attribut.

Valeur
Identifiant sensible à la casse.
Par défaut Aucune.
NOHREF | NN tous IE tous HTML 3.2
NOHREF | Facultatif

Indique au navigateur qu'aucun lien n'est associé à la zone définie par les coordonnées (le même résultat est obtenu si vous ne spécifiez aucun attribut HREF). Lorsque vous spécifiez cet attribut, les navigateurs gérant les scripts ne traitent plus l'élément comme un lien. Que ce soit dans Navigator ou Internet Explorer, lorsqu'un élément AREA est dépourvu d'attribut HREF, l'élément ne réagit plus aux événements utilisateur. Dans IE 4, vous pouvez activer et désactiver cet attribut à l'aide d'un script en affectant à la propriété la valeur true ou false.

Exemple
<AREA COORDS="20,30,120,70" NOHREF>
Valeur
La présence de cet attribut affecte à ce dernier la valeur true.
Par défaut false
Référence de modèle d'objet
IE [window.]document.all.IDélément.noHref
SHAPE | NN tous IE tous HTML 3.2
SHAPE=« shape » | Facultatif

Définit la forme de la zone graphique côté client dont les coordonnées ont été spécifiées à l'aide de l'attribut COORDS. L'attribut SHAPE indique au navigateur à combien de coordonnées il doit s'attendre.

Exemple
<AREA SHAPE="poly" COORDS="20,20,20,70,65,45" HREF="contents.html"
TARGET="display">
Valeur
Constante de forme insensible à la casse. Chaque navigateur définit son propre jeu de noms de forme et équivalents, mais il existe des dénominateurs communs entre les navigateurs (circle, rect, poly et polygon).
Nom de forme NN IE HTML
circ
         - * -
circle
         * * *
poly
         * * *
polygon
         * * -
rect
         * * *
rectangle
         - * -
Par défaut rect
Référence de modèle d'objet
IE [window.]document.all.IDélément.shape
TABINDEX | NN s.o. IE 4 HTML 4
TABINDEX=integer | Facultatif

Nombre indiquant la position de cet élément dans l'ordre de tabulation de la page. L'ordre de tabulation suit un ensemble de règles très strictes. Les premiers éléments de la page activés par la touche de tabulation sont ceux dont l'attribut TABINDEX a une valeur autre que zéro. Le premier élément activé est celui ayant la valeur TABINDEX la plus basse, l'élément suivant celui ayant la valeur immédiatement supérieure, et ainsi de suite, quel que soit l'emplacement physique correspondant sur la page ou dans le document. Si deux éléments ont la même valeur TABINDEX, l'élément activé en premier est celui qui apparaît en premier dans le document. Ensuite viennent les éléments qui ne prennent pas en charge pas l'attribut TABINDEX ou ceux pour lesquels la valeur de cet attribut est zéro. Ces éléments sont activés dans l'ordre où ils apparaissent dans le document. Un élément AREA ne pouvant pas être désactivé, il est toujours activé lorsque vient son tour dans l'ordre de tabulation, sauf en cas de traitement spécial dans IE 4. Généralement, un élément AREA désigné comme lien peut être activé sur pression de la barre d'espacement une fois que l'élément est sélectionné.

Notez que l'interface utilisateur Macintosh ne permet pas l'activation d'éléments autres que les champs de saisie de données. Les cartes graphiques ne peuvent pas être activées à l'aide de la touche de tabulation dans la version Macintosh d'Internet Explorer 4.

Exemple
<AREA COORDS="20,30,120,70" HREF="contents.html" TARGET="display" TABINDEX=3>
Valeur
Nombre entier compris entre 0 et 32767. Dans IE 4, si vous donnez à l'attribut TABINDEX la valeur -1, la touche de tabulation saute l'élément correspondant.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.all.IDélément.tabIndex
TARGET | NN Tous IE tous HTML 3.2
TARGET=« windowOrFrameName » | Facultatif

Si le document cible doit être chargé dans une fenêtre ou dans un cadre autre que la fenêtre ou le cadre actuels, vous pouvez préciser l'endroit où il doit s'afficher en associant un nom de fenêtre ou de cadre à l'attribut TARGET. Il faut impérativement affecter un nom aux cadres et aux fenêtres cibles afin de les identifier. Pour attribuer un nom à un nouveau cadre, utilisez l'attribut NAME de l'élément FRAME ; pour attribuer un nom à une nouvelle fenêtre, utilisez le second paramètre de la méthode de script window.open(). Si vous omettez cet attribut, le document cible est affiché à la place du document contenant le lien. Cet attribut s'applique uniquement lorsqu'une valeur est affectée à l'attribut HREF de l'élément.

Un AREA ne peut avoir qu'un seul document de destination et une seule cible. Si vous voulez qu'un lien modifie le contenu de plusieurs cadres, vous pouvez utiliser le gestionnaire d'événement onClick d'un élément AREA (voir pour savoir quelles sont les versions des navigateurs prises en charge) ou une pseudo-URL javascript pour exécuter un script chargeant plusieurs documents. Associez l'adresse URL voulue à la propriété location.href de chaque cadre.

Exemple
<AREA COORDS="20,30,120,70" HREF="contents.html" TARGET="display">
<AREA COORDS="140,30,180,70" HREF="index.html" TARGET="_top">
Valeur
Identifiant sensible à la casse lorsque le nom du cadre ou de la fenêtre a été défini via l'attribut NAME de l'élément cible. Quatre noms de cible réservés servent de constantes :
_blank | Le navigateur affiche le document cible dans une nouvelle fenêtre.
_parent | Le document cible remplace le document qui définit le jeu de cadres auquel appartient le cadre actuel (s'il en existe un, sinon il est traité comme _self).
_self | Le document cible remplace le document actuel dans sa fenêtre ou dans son cadre.
_top | Le document cible remplace tous les jeux de cadres éventuellement chargés, occupant ainsi toute la fenêtre du navigateur (également traité comme _self si aucun jeu de cadres n'est défini dans la fenêtre).
Par défaut _self
Référence de modèle d'objet
IE | [window.]document.links[i].target [window.]document.all.IDélément.target
NN | [window.]document.links[i].target


<B> | NN tous IE tous HTML tous
<B>...</B> | Balise de fin : obligatoire

L'élément de style B affiche le contenu auquel il est appliqué dans le style gras de la police de caractères associée au conteneur HTML parent immédiat. Il est possible d'imbriquer plusieurs éléments de style de police afin de créer des styles combinés, tels qu'italique-gras (<B><I>bold-italic text</I></B>).

C'est le navigateur qui détermine l'action à exécuter : soit il augmente la graisse des caractères en appliquant un algorithme à la police actuelle, soit il charge une version grasse de cette police. Si vous recherchez la perfection en matière de polices de caractères, il vaut mieux utiliser des feuilles de style (et éventuellement des polices téléchargeables) afin de spécifier une véritable police de caractères gras au lieu de laisser au navigateur le soin de produire sa version du style gras à partir d'une police système. L'attribut de style font-weight offre un contrôle très précis des niveaux de gras appliqués au texte, du moment que la police spécifiée prend en charge ce type de mise au point.

Vous pouvez tirer parti de la propriété de conteneur de cet élément pour appliquer des règles de style à certains ou à tous les éléments B d'une page. Imaginons, par exemple, que vous souhaitiez afficher tous les éléments B en rouge. Grâce à la règle de style B {color:red}, il vous suffit d'un petit bout de code pour réaliser cette opération.

Bien que cet élément ne soit pas déprécié dans HTML 4, il ne serait pas étonnant de le voir peu à peu remplacé par les feuilles de style.

Exemple
<P>This product is <B>new</B> and <B>improved</B>!</P>
Référence de modèle d'objet
IE [window.]document.all.IDélément


<BASE> | NN tous IE tous HTML tous
<BASE> | Balise de fin : interdite

Un élément BASE, défini à l'intérieur d'un élément HEAD d'un document, indique au navigateur l'adresse URL du document actuel. Cette adresse sert ensuite de base de référence à toutes les adresses URL relatives associées à divers attributs SRC et HREF du document. L'adresse URL de l'élément BASE doit être une adresse complète comprenant le nom du document. Le navigateur détermine automatiquement le chemin de l'URL de base du répertoire dans lequel se trouve le document. Par exemple, si vous définissez l'adresse <BASE comme étant HREF="http://www.megacorp.com/products/index.html">, l'attribut HREF d'un lien vers widgets/framitz801.html sur cette page sera interprété par le navigateur de la manière suivante : http://www.megacorp.com/products/widgets/framitz801.html. De la même façon, une adresse URL relative peut être interprétée dans l'autre sens. Vous pouvez par exemple, à partir de l'élément BASE défini plus haut, affecter à un élément IMG de la page index.html l'adresse relative SRC="../images/logo.jpg" Cette référence sera interprétée par le navigateur de la manière suivante : http://www.megacorp.com/images/logo.jpg.

La plupart des navigateurs actuels calculent automatiquement l'adresse URL de base du document actuellement chargé ; il est donc possible d'utiliser les adresses URL relatives sans avoir à définir l'élément BASE. Ceci est particulièrement utile si vous développez vos pages localement et que vous ne voulez pas avoir à modifier les valeurs de l'élément BASE lorsque vous les déploierez. La spécification HTML 4.0 stipule qu'un document dépourvu d'élément BASE doit, par défaut, utiliser l'adresse URL du document actuel comme URL de BASE. Bien entendu, cette règle s'applique aux véritables pages Web et non aux documents enrichis en HTML tels que les courriers électronique, qui ne possèdent pas d'adresse URL de BASE.

Vous pouvez également utiliser l'élément BASE pour associer une cible par défaut à n'importe quel élément de type « lien » présent dans le document. Par conséquent, si chaque lien est censé charger le document correspondant dans un nouveau cadre, il vous suffit de spécifier le cadre cible une seule fois dans la balise BASE, sans vous soucier des attributs TARGET apparaissant ailleurs dans le document. Si vous souhaitez annuler la valeur par défaut d'un lien, il vous suffit de définir l'attribut TARGET de l'élément correspondant.

Exemple
<HEAD>
<BASE HREF="http://www.megacorp.com/index.html" TARGET="_top">
</HEAD>
Référence de modèle d'objet
IE [window.]document.all.IDélément
HREF | NN tous IE tous HTML tous
HREF=« URL » | Facultatif

L'attribut HREF représente l'adresse URL d'un document dont le chemin de serveur doit servir d'adresse URL de base à toutes les adresses URL relatives du document. Il s'agit généralement de l'adresse URL du document actuel, mais vous pouvez en spécifier une autre si l'organisation et la structure de répertoires de votre document l'exigent.

Exemple
<BASE HREF="http://www.megacorp.com/products/index.html">
Valeur
Adresse URL complète et absolue d'un document.
Par défaut Chemin du document actuel.
Référence de modèle d'objet
IE [window.]document.all.tags("base")[0].href
TARGET | NN tous IE tous HTML 4
TARGET=« windowOrFrameName » | Facultatif

Si tous ou presque tous les liens et cartes de zone présents sur une page chargent les documents correspondants dans des fenêtres ou des cadres distincts, vous pouvez utiliser l'attribut TARGET de l'élément BASE pour définir les cadres cibles dans lesquels s'afficheront ces éléments. Si vous voulez définir uniquement la référence de la cible de base, vous pouvez définir l'attribut TARGET sans définir l'attribut HREF.

Exemple
<BASE TARGET="rightFrame">
Valeur
Identifiant sensible à la casse lorsque le nom du cadre ou de la fenêtre a été défini via l'attribut NAME de l'élément cible. Quatre noms de cible réservés servent de constantes :
_blank | Le navigateur affiche le document cible dans une nouvelle fenêtre.
_parent | Le document cible s'affiche à la place du document qui définit le jeu de cadres du cadre actuel (s'il en existe un, sinon il est traité comme _self).
_self | Le document cible s'affiche à la place du document actuel dans sa fenêtre ou dans son cadre.
_top | Le document cible remplace tous les jeux de cadres éventuellement chargés, occupant ainsi toute la fenêtre du navigateur (également traité comme _self si aucun jeu de cadres n'est défini dans la fenêtre).
Par défaut _self
Référence de modèle d'objet
IE [window.]document.all.tags("base")[0].target


<BASEFONT> | NN tous IE tous HTML 3.2
<BASEFONT> | Balise de fin : interdite

L'élément BASEFONT fournit au navigateur des informations sur la police de caractères à appliquer à la page actuelle après l'apparition de l'élément BASEFONT. Vous pouvez appliquer cet élément à des sections de texte figurant entre des balises HEAD ou BODY (bien que, dans le cas d'IE 4, Microsoft recommande de n'appliquer cet élément qu'au texte figurant entre des balises BODY), et vous pouvez insérer des éléments BASEFONT aussi souvent que vous souhaitez appliquer la police de base à une portion de texte. Sachez que les paramètres de l'élément BASEFONT ne s'appliquent pas nécessairement au contenu de tableaux. Si vous souhaitez que le contenu d'un tableau soit affiché dans une police de base (BASEFONT) spéciale, il vous faudra sans doute définir séparément la police à lui appliquer.

L'élément BASEFONT annule les paramètres de police définis dans les préférences utilisateur du navigateur. Comme c'est le cas de la plupart des éléments relatifs aux polices, l'élément BASEFONT est déprécié dans HTML 4.0 en faveur des feuilles de style. Ces dernières permettent en effet un contrôle plus précis des polices (voir ).

Exemple
<BASEFONT FACE="Times, serif" SIZE=4>
COLOR | NN s.o. IE 3 HTML 4
COLOR=« colorTripletOrName » | Facultatif

Définit la couleur de police à appliquer à tout le texte apparaissant au dessous de l'élément BASEFONT. Bien que cet attribut ait été recommandé pour la première fois dans HTML 4.0, il est à présent déprécié en faveur des feuilles de style.

Exemple
<BASEFONT COLOR="Olive">
Valeur
Triplet hexadécimal ou nom de couleur en anglais . Voir pour en savoir plus sur les noms de couleur en anglais.
Par défaut Valeur par défaut du navigateur.
Référence de modèle d'objet
IE [window.] document.all.tags("basefont")[i].color
FACE | NN s.o. IE 4 HTML 4
FACE=« fontFaceName1[, ... fontFaceNameN] » | Facultatif

Vous pouvez fournir une liste de polices par défaut à appliquer à une section précédée de l'élément BASEFONT. Ces polices doivent être spécifiées par ordre de préférence et séparées par des virgules. Le navigateur vérifie si la première police figurant dans la liste est disponible sur le système ; si ce n'est pas le cas, il passe à la suivante et ainsi de suite, jusqu'à ce que toutes les possibilités soient épuisées. En dernier recours, il utilise la police par défaut du navigateur. Les noms de police spécifiés doivent correspondre exactement aux noms des polices sur le système. Si vous utilisez cet attribut (au lieu de l'attribut de feuille de style équivalent, ce qui est recommandé), vous pouvez toujours spécifier une police générique (serif, sans-serif) comme dernière possibilité.

Dans IE 3, cet attribut avait pour libellé NAME.

Exemple
<BASEFONT FACE="Bookman, Times Roman, serif">
Valeur
Un ou plusieurs noms de police, notamment les noms génériques suivants : serif | sans-serif | cursive | fantasy | monospace.
Par défaut Valeur par défaut du navigateur.
Référence de modèle d'objet
IE [window.] document.all.tags("basefont")[i].face
NAME | NN s.o. IE 3 HTML s.o.
NAME=« fontFaceName » | Facultatif

L'attribut FACE était la version Internet Explorer 3 de ce qui est aujourd'hui l'attribut FACE. Il accepte pour valeur un nom de police simple. L'attribut NAME n'est plus utilisé.

Valeur
Nom de police de caractères.
Par défaut Valeur par défaut du navigateur.
SIZE | NN tous IE tous HTML 3.2
SIZE=« integerOrRelativeSize » | Facultatif

Les tailles de police désignées par l'attribut SIZE sont définies selon une échelle relative et non par rapport à une taille de police spécifique inter-plateforme. La taille de police par défaut du navigateur est 3. La plage de valeurs autorisées pour l'attribut SIZE est comprise entre 1 et 7 (inclus). La taille exacte des caractères varie en fonction du système d'exploitation et du navigateur.

Les utilisateurs peuvent souvent modifier la taille des caractères par défaut à l'aide des préférences utilisateur. L'attribut SIZE a priorité sur ce paramétrage. Il est également possible de spécifier pour l'attribut SIZE des valeurs relatives à la taille de caractères définie dans les préférences utilisateur. En faisant précéder une valeur d'un signe + ou -, vous pouvez augmenter ou réduire la taille de caractères par défaut du navigateur, mais vous devez toujours rester dans la plage 1 à 7.

Exemple
<BASEFONT SIZE=4>
<BASEFONT SIZE="+3">
Valeur
Nombre entier (entre guillemets ou pas) ou valeur relative entre guillemets, consistant en un nombre entier précédé du signe + ou -.
Par défaut 3
Référence de modèle d'objet
IE [window.] document.all.tags("basefont")[i].size


<BDO> | NN s.o. IE s.o. HTML 4
<BDO>...</BDO> | Balise de fin : obligatoire

BDO signifie bidirectional override (annulation bidirectionnelle). Les attributs LANG et DIR de la majorité des éléments conviennent dans la plupart des situations où l'on a affaire à différents systèmes d'écriture, qui composent le texte dans des directions opposées. L'élément BDO est utile dans les cas où, en raison des diverses conversions effectuées au cours du traitement du texte, les algorithmes bidirectionnels normaux doivent être annulés explicitement. Cet élément n'étant pas encore implémenté dans les navigateurs, il n'est mentionné dans le présent document qu'à titre d'information.

Exemple
<BDO dir="ltr">Texte écrit dans une langue romane</BDO>


<BGSOUND> | NN s.o. IE 3 HTML s.o.
<BGSOUND> | Balise de fin : facultative

Cet attribut, uniquement utilisé par Internet Explorer, vous permet de spécifier un fichier son à utiliser comme fond sonore lorsqu'un utilisateur consulte la page. Cet élément doit obligatoirement être placé entre des balises HEAD. Plusieurs attributs ont été ajoutés à la version 4 d'Internet Explorer. Grâce aux scripts, vous pouvez régler le volume sonore et indiquer combien de fois le son doit être joué. Il n'est pas indispensable de spécifier une balise de fin car tous les attributs relatifs au son sont définis par les attributs de la balise de début.

Si vous comptez utiliser cette balise, nous vous conseillons de faire en sorte que le fond sonore soit désactivé par défaut, avec la possibilité pour l'utilisateur de l'activer s'il le souhaite. En effet, dans les bureaux, une musique ou un bruits soudain émanant d'un ordinateur peuvent être surprenants, voire même gênants. Sachez également qu'en raison des délais de chargement, il peut s'écouler un moment avant que le son ou la musique ne démarre.

Exemple
<BGSOUND SRC="tunes/mazeppa.mid">
Référence de modèle d'objet
IE [window.]document.all.IDélément
BALANCE | NN s.o. IE 4 HTML s.o.
BALANCE=« signedInteger » | Facultatif

Valeur qui définit la façon dont le son est réparti entre l'enceinte de gauche et celle de droite. Une fois cette valeur définie dans l'élément, il n'est plus possible de la modifier à l'aide d'un script.

Exemple
<BGSOUND SRC="tunes/mazeppa.mid" BALANCE="+2500">
Valeur
Nombre entier négatif ou positif compris entre -10 000 et +10 000. La valeur 0 correspond au niveau de balance moyen (répartition égale du son entre les deux enceintes). Une valeur négative permet d'augmenter la balance sur l'enceinte de gauche ; une valeur positive permet d'augmenter la balance sur l'enceinte de droite.
Par défaut 0
Référence de modèle d'objet
IE [window.] document.all.tags("bgsound")[0].balance
LOOP | NN s.o. IE 3 HTML s.o.
LOOP=integer | Facultatif

Indique combien de fois le son doit être joué. Si cet attribut est absent ou qu'il a une valeur autre que -1, le son est joué au moins une fois. S'il a pour valeur -1, il est joué jusqu'à ce que l'utilisateur quitte la page. Contrairement à ce qu'indique Microsoft dans les informations sur SDK d'Internet Explorer, il ne semble pas possible de mettre le son en cache préalablement sans qu'il commence à être exécuté.

Exemple
<BGSOUND SRC="tunes/mazeppa.mid" LOOP=3>
Valeur
Si vous voulez que le son ne soit joué qu'une seule fois, vous n'avez pas besoin de spécifier de valeur. Si vous spécifiez la valeur 0, le son est également joué une seule fois. Si vous spécifiez une valeur supérieure à zéro, le son est joué le nombre de fois correspondant. Pour que le son soit joué indéfiniment, spécifiez la valeur -1.
Par défaut -1
Référence de modèle d'objet
IE [window.] document.all.tags("bgsound")[0].loop
SRC | NN s.o. IE 3 HTML s.o.
SRC=« URL » | Facultatif

Adresse URL du fichier son à jouer. Les types de son pouvant être joués ne sont limités que par les fonctions audio du navigateur. Les formats audio courants, notamment le format MIDI, sont pris en charge par Internet Explorer sans qu'il soit nécessaire d'installer un plug-in supplémentaire.

Exemple
<BGSOUND SRC="tunes/beethoven.mid">
Valeur
N'importe quelle adresse URL complète ou relative. Le fichier doit avoir un format MIME pris en charge par Internet Explorer ou par un plug-in.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.] document.all.tags("bgsound")[0].src
VOLUME | NN s.o. IE 4 HTML s.o.
VOLUME=« signedInteger » | Facultatif

Nombre entier définissant le volume du fond sonore par rapport au volume sonore maximum paramétré dans les préférences utilisateurs de l'ordinateur client. Le volume maximum, correspondant à la valeur zéro, ne peut pas dépasser le volume maximum défini par l'utilisateur à l'aide de la fonction Son du panneau de configuration. Cet attribut admet des valeurs négatives allant jusqu'à -10 000 (mais pour la plupart des utilisateurs, le son devient inaudible bien avant que la valeur -10 000 soit atteinte).

Exemple
<BGSOUND SRC="tunes/beethoven.mid" VOLUME="-500">
Valeur
Nombre entier signé compris entre -10 000 et 0.
Par défaut 0
Référence de modèle d'objet
IE [window.] document.all.tags("bgsound")[0].volume


<BIG> | NN tous IE tous HTML 3.2
<BIG>...</BIG> | Balise de fin : obligatoire

L'élément de style BIG affiche le contenu auquel il est appliqué dans la taille de caractères supérieure à la taille actuelle (sur l'échelle HTML allant de 1 à 7). Si vous imbriquez plusieurs éléments BIG, l'effet sur les éléments situés au niveau d'imbrication le plus bas est cumulatif, chaque niveau d'imbrication étant affiché dans une taille de caractères supérieure à celle de l'élément parent immédiat. La taille de caractères par défaut dépend du navigateur, du système d'exploitation et des préférences utilisateur. Pour un contrôle plus précis des polices et des tailles de caractères, vous devez définir des règles de style.

Exemple
<P>This product is <BIG>new</BIG> and <BIG>improved</BIG>!</P>
Référence de modèle d'objet
IE [window.]document.all.IDélément


<BLINK> | NN tous IE s.o. HTML s.o.
<BLINK>...</BLINK> | Balise de fin : obligatoire

L'élément BLINK est la contribution de Marc Andreessen aux pages Web illisibles. Il a pour effet de faire clignoter le contenu de l'élément de façon incontrôlée, ce qui rend toute concentration difficile. Plus vous placez de contenu dans l'élément, plus le texte est difficile à lire entre les clignotements. L'usage de cette balise est fortement déconseillé. Les utilisateurs vous en seront reconnaissants. Cet élément ne possède ni attributs ni gestionnaires d'événement.

Exemple
<BLINK>I dare you to read this...and not look at it.</BLINK>


<BLOCKQUOTE> | NN tous IE tous HTML tous
<BLOCKQUOTE>...</BLOCKQUOTE> | Balise de fin : obligatoire

L'élément BLOCKQUOTE permet de mettre en valeur une citation à l'intérieur d'un document. Un élément BLOCKQUOTE est normalement introduit en retrait du texte, avec une marge de gauche et de droite plus large (d'environ 40 pixels) et un espace blanc supplémentaire au dessus et au dessous du bloc. Les futurs navigateurs continueront sans doute à appliquer ce type de présentation, mais nous vous recommandons d'utiliser plutôt les feuilles de style (avec ou sans élément BLOCKQUOTE). Pour les citations incorporées, voir l'élément Q.

Exemple
<BLOCKQUOTE>Four score and seven years ago...
shall not perish from the earth</BLOCKQUOTE>
Référence de modèle d'objet
IE [window.]document.all.IDélément
CITE | NN s.o. IE s.o. HTML 4
CITE=« URL » | Facultatif

Adresse URL pointant vers le document en ligne dont est tirée la citation. Cet élément n'est absolument pas destiné à la copie ou à l'extraction du contenu d'un autre document. Cette recommandation HTML 4.0 est censée encourager les futurs navigateurs et moteurs de recherche à renvoyer le lecteur vers des documents source en ligne.

Valeur
Adresse URL absolue ou relative d'un document sur le Web
Par défaut Aucune.


<BODY> | NN tous IE tous HTML tous
<BODY>...</BODY> | Balise de fin : facultative

Après les informations préliminaires de la section HEAD d'un fichier HTML apparaît l'élément BODY, qui contient le contenu de la page visible à l'utilisateur dans la fenêtre du navigateur (ou audible dans le cas d'un navigateur audio). Avant l'apparition des feuilles de style, c'est dans l'élément BODY que les auteurs définissaient les attributs de couleur et de fond à appliquer au document. De nombreux attributs relatifs à ces propriétés sont dépréciés dans HTML 4 en faveur de règles de style pouvant être appliquées à l'élément BODY. Navigator et Internet Explorer continueront toutefois à prendre en charge ces attributs pendant plusieurs années encore.

C'est également dans l'élément BODY que sont placés les gestionnaires d'événement des objets fenêtre (window). Par exemple, un objet window, tel qu'il est défini dans la plupart des modèles objet document, possède un gestionnaire d'événement onLoad qui se déclenche lorsque le chargement d'un document dans la fenêtre ou dans le cadre actuel est terminé. L'affectation de ce gestionnaire d'événement se fait dans l'élément BODY.

Bien qu'il puisse sembler, à priori, que l'élément BODY et l'objet document ne font qu'un, ce n'est pas tout à fait le cas. L'objet document possède des propriétés supplémentaires, telles que le titre du document (document.title), qui sont définies ailleurs que dans l'élément BODY. Qui plus est, la plupart des navigateurs ne voient pas d'inconvénient à ce que la balise de début ou de fin, ou même les deux, soient absentes. Mais si vous devez déboguer une page, il est utile que les balises de fin des éléments BODY et HTML soient visibles lorsque vous examinez le code source pour vous assurer que la page a été complètement chargée dans le navigateur.

Exemple
<BODY BACKGROUND="watermark.jpg" onLoad="init()">
...
</BODY>
Référence de modèle d'objet
NN | [window.]document
IE | [window.]document.body
ALINK | NN tous IE tous HTML 3.2
ALINK=« colorTripletOrName » | facultative

Définit la couleur d'un lien hypertexte lorsqu'il est activé par l'utilisateur (par un clic de souris). Un lien peut avoir trois états : non activé, actif et déjà activé. La couleur choisie est appliquée au texte du lien ou à sa bordure, dans le cas d'une image ou d'un objet spécifié à l'aide d'un élément A. Cet attribut est déprécié en faveur de la feuille de style BODY:active {color:} (et de la future pseudo-classe :active, comme décrit dans ).

Exemple
<BODY ALINK="#FF0000">...</BODY>
Valeur
Nom de couleur en langage clair ou triplet hexadécimal. Voir l'Annexe A pour en savoir plus sur les noms de couleur en langage clair.
Par défaut #FF0000 (dans Navigator 4) ; #000000 (dans Internet Explorer 4).
Référence de modèle d'objet
NN | [window.]document.alinkColor
IE | [window.]document.alinkColor [window.]document.body.aLink
BACKGROUND | NN tous IE tous HTML 3.2
BACKGROUND=« URL » | Facultatif

Spécifie le fichier image à utiliser comme arrière-plan pour le document. Contrairement aux images normales, qui sont chargées dans le contenu du navigateur, une image d'arrière-plan est chargée dans ses dimensions d'origine (sans mise à l'échelle) et disposée en mosaïque de façon à remplir la totalité de l'espace disponible dans le cadre ou la fenêtre du navigateur. Le chargement des images de petite taille est généralement plus rapide, mais elles produisent une mosaïque plus serrée. Vous pouvez également utiliser des animations GIF comme arrière-plan, mais elles sont à éviter car elles distraient l'attention du lecteur. Veillez à ce que votre image d'arrière-plan soit la plus subtile possible de façon à ce que le contenu principal ressorte clairement. Si vous tenez à utiliser des images d'arrière-plan, choisissez-les très discrètes.

Cet attribut est déprécié en HTML 4.0 en faveur de l'attribut de style background.

Exemple
<BODY BACKGROUND="watermark.jpg">...</BODY>
Valeur
Adresse URL, complète ou relative, d'un fichier image.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.body.background
BGCOLOR | NN tous IE tous HTML 3.2
BGCOLOR=« colorTripletOrName » | Facultatif

Définit la couleur de remplissage à appliquer au document. Cette couleur apparaît derrière le texte et tout autre contenu. Si vous combinez un élément BGCOLOR à un élément BACKGROUND, toute zone transparente de l'image d'arrière-plan laisse apparaître la couleur d'arrière-plan. Cet attribut est déprécié dans HTML 4.0 en faveur de l'attribut de style background-color.

Exemple
<BODY BGCOLOR="tan">...</BODY>
Valeur
Nom de couleur en langage clair ou triplet hexadécimal. Une chaîne vide correspond à "#000000" (noir). Voir l'Annexe A pour en savoir plus sur les noms de couleur en langage clair.
Par défaut Varie en fonction du système d'exploitation, du navigateur et de sa version.
Référence de modèle d'objet
NN | [window.]document.bgColor
IE | [window.]document.bgColor [window.]document.body.bgColor
BGPROPERTIES | NN s.o. IE 3 HTML s.o.
BGPROPERTIES=« property » | Facultatif

Attribut d'Internet Explorer permettant de préciser si l'image d'arrière-plan (spécifiée à l'aide de la feuille de style ou de l'attribut BACKGROUND) doit être fixe ou défiler en même temps que le document. Cet attribut permet de créer des effets surprenants et intéressants. Lorsque l'image d'arrière-plan est fixe, le contenu défile sur cette image comme un générique de film défile sur un écran de cinéma ou de télévision.

Exemple
<BODY BACKGROUND="watermark.jpg" BGPROPERTIES="fixed">...</BODY>
Valeur
Si vous spécifiez la valeur fixed, l'image reste fixe dans la fenêtre du navigateur. Si vous ne spécifiez pas cet attribut ou que vous lui donnez comme valeur une chaîne vide, (""), l'image défile en même temps que le contenu.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.body.bgProperties
BOTTOMMARGIN | NN s.o. IE 4 HTML s.o.
BOTTOMMARGIN=« integer » | Facultatif

Définit la quantité d'espace à insérer entre la fin du contenu et le bas d'une page, lorsqu'il est nécessaire de faire défiler cette dernière. Cet attribut ne produit aucun effet visuel si la longueur du contenu ou la taille de la fenêtre sont tels qu'il n'est pas nécessaire de faire défiler la page. Avec la valeur par défaut, aucun espace n'est inséré entre la fin du contenu et la fin de la page ; toutefois, dans la version Macintosh d'Internet Explorer 4, une marge de 10 pixels est visible même si cet attribut a pour valeur zéro. Les valeurs supérieures à zéro sont appliquées correctement. Cet attribut est en quelque sorte un raccourci de l'attribut de style margin-bottom de l'élément BODY.

Exemple
<BODY BOTTOMMARGIN="20">...</BODY>
Valeur
Nombre de pixels d'espace vide à insérer en bas du document. Une chaîne vide a le même effet que la valeur zéro.
Par défaut 0
Référence de modèle d'objet
IE [window.]document.body.bottomMargin
LEFTMARGIN | NN s.o. IE 3 HTML s.o.
LEFTMARGIN=« integer » | Facultatif

Définit la quantité d'espace à insérer entre le bord gauche du contenu et le bord gauche de son cadre. Cet attribut est en quelque sorte un raccourci de l'attribut de style margin-left de l'élément BODY. Du fait qu'il est spécifié dans l'élément parent principal, cet attribut définit la marge de gauche de tous les éléments imbriqués dans ce dernier.

Exemple
<BODY LEFTMARGIN="25">...</BODY>
Valeur
Nombre de pixels d'espace vide à insérer sur le côté gauche du document. Une chaîne vide a le même effet que la valeur zéro.
Par défaut 10 (Windows) ; 8 (Macintosh).
Référence de modèle d'objet
IE [window.]document.body.leftMargin
LINK | NN tous IE tous HTML 3.2
LINK=« colorTripletOrName » | Facultatif

Définit la couleur d'un lien hypertexte qui n'a pas encore été activé (auquel cas, l'adresse URL de ce lien n'est pas encore en mémoire cache). Un lien peut avoir trois états : non activé, actif et déjà activé. La couleur choisie est appliquée au texte du lien ou à sa bordure, dans le cas d'une image ou d'un objet spécifié à l'aide d'un élément A. Cet attribut est déprécié en faveur de la feuille de style BODY:visited {color:} (et de la future pseudo-classe :active, comme décrit dans ).

Exemple
<BODY LINK="#00FF00">...</BODY>
Valeur
Nom de couleur en langage clair ou triplet hexadécimal. Voir l'Annexe A pour en savoir plus sur les noms de couleur en langage clair.
Par défaut #0000FF
Référence de modèle d'objet
NN | [window.]document.linkColor
IE | [window.]document.linkColor [window.]document.body.link
RIGHTMARGIN | NN s.o. IE 4 HTML s.o.
RIGHTMARGIN=« integer » | Facultatif

Définit la quantité d'espace à insérer entre le bord droit du contenu et le bord droit de son cadre. Cet attribut est en quelque sorte un raccourci de l'attribut de style margin-right de l'élément BODY. Du fait qu'il est spécifié dans l'élément parent principal, cet attribut définit la marge de gauche de tous les éléments imbriqués dans ce dernier. Sachez dans la version Macintosh d'Internet Explorer, le contenu ne se rapproche pas autant du côté droit de la fenêtre que dans la version Windows.

Exemple
<BODY RIGHTMARGIN="25">... </BODY>
Valeur
Nombre de pixels d'espace vide à insérer sur le côté droit du document. Une chaîne vide a le même effet que la valeur zéro.
Par défaut 10 (Windows) ; 0 (Macintosh).
Référence de modèle d'objet
IE [window.]document.body.rightMargin
SCROLL | NN s.o. IE 4 HTML
SCROLL=yes | no | Facultatif

Insère des barres de défilement lorsque la longueur du contenu dépasse la taille de la fenêtre visible. Pour que les utilisateurs puissent se déplacer sur la page en l'absence de barres de défilement, vous devez définir, à l'aide d'un script, une méthode de contrôle du défilement de la fenêtre. Sachez qu'Internet Explorer 4 pour Macintosh affiche toujours des barres de défilement lorsqu'un document dépasse la taille de la fenêtre, même si l'attribut SCROLL a pour valeur no.

Exemple
<BODY SCROLL=NO>...</BODY>
Valeur
Constante yes ou no (insensibles à la casse).
Par défaut yes
Référence de modèle d'objet
IE [window.]document.body.scroll
TEXT | NN tous IE tous HTML 3.2
TEXT=« colorTripletOrName » | Facultatif

Définit la couleur du corps du texte. Les couleurs des éléments individuels ont priorité sur les couleurs définies pour l'ensemble du document. Du fait que la couleur d'arrière-plan par défaut varie en fonction du système d'exploitation, du navigateur et de sa version, il est conseillé de définir l'attribut BGCOLOR (ou la feuille de style équivalente) de concert avec la couleur du texte. Cet attribut est déprécié en faveur de la règle de style {color:} .

Exemple
<BODY BGCOLOR="#FFFFFF" TEXT="#c0c0c0">...</BODY>
Valeur
Nom de couleur en langage clair ou triplet hexadécimal. Voir l'Annexe A pour en savoir plus sur les noms de couleur en langage clair.
Par défaut #000000 (noir).
Référence de modèle d'objet
NN | [window.]document.fgColor
IE | [window.]document.fgColor [window.]document.body.text
TOPMARGIN | NN s.o. IE 3 HTML s.o.
TOPMARGIN=« integer » | Facultatif

Définit la quantité d'espace à insérer entre le bord supérieur du contenu et le bord supérieur de son cadre. Cet attribut est en quelque sorte un raccourci de l'attribut de style margin-top de l'élément BODY. Du fait qu'il est spécifié dans l'élément parent principal, cet attribut définit la marge supérieure de tous les éléments imbriqués dans ce dernier. Dans la version Windows comme dans la version Macintosh, si l'attribut TOPMARGIN a pour valeur zéro ou une chaîne vide (""), aucun espace n'est inséré entre le contenu et la bordure supérieure de son cadre.

Exemple
<BODY TOPMARGIN="0">... </BODY>
Valeur
Nombre de pixels d'espace vide à insérer en haut du document. Une chaîne vide a le même effet que la valeur zéro.
Par défaut 15 (Windows) ; 8 (Macintosh).
Référence de modèle d'objet
IE [window.]document.body.topMargin
VLINK | NN tous IE tous HTML 3.2
VLINK=« colorTripletOrName » | Facultatif

Définit la couleur d'un lien hypertexte une fois qu'il a été activé par un utilisateur (et que la page vers lequel il pointe se trouve encore en mémoire cache). Un lien peut avoir trois états : non activé, actif et déjà activé. La couleur choisie est appliquée au texte du lien ou à sa bordure, dans le cas d'une image ou d'un objet spécifié à l'aide d'un élément A. Cet attribut est déprécié en faveur de la feuille de style BODY:visited {color:} (et de la future pseudo-classe :visited, comme décrit dans ).

Exemple
<BODY VLINK="#teal">...</BODY>
Valeur
Nom de couleur en langage clair ou triplet hexadécimal. Voir l'Annexe A pour en savoir plus sur les noms de couleur en langage clair.
Par défaut #551a8b (Navigator 4) ; #800080 (Internet Explorer 4 Windows) ; #006010 (Internet Explorer 4 Macintosh).
Référence de modèle d'objet
NN | [window.]document.vlinkColor
IE | [window.]document.vlinkColor [window.]document.body.vLink


<BR> | NN tous IE tous HTML tous
<BR> | Balise de fin : interdite

L'élément BR insère un retour-chariot et un saut de ligne visible dans le document. Les navigateurs traitent généralement les éléments BR comme des sauts de ligne normaux, alors qu'ils insèrent davantage d'espace vertical entre les paragraphes définis par les éléments P. Si le texte contenant l'élément BR entoure une image, ou autre objet flottant, vous pouvez faire en sorte (à l'aide de l'attribut CLEAR ou de la feuille de style équivalente) que la ligne suivante commence au dessous de l'objet plutôt que sur la ligne de texte suivante.

Exemple
<P>I think that I shall never see<BR>A poem lovely as a tree.</P>
Référence de modèle d'objet
IE [window.]document.all.IDélément
CLEAR | NN tous IE tous HTML 3.2
CLEAR=« constant » | Facultatif

L'attribut CLEAR indique au navigateur comment il doit traiter la ligne de texte qui suit un élément BR si le texte actuel entoure une image, ou autre objet flottant. La valeur à utiliser dépend du côté de la page sur lequel sont placées les images incorporées et de la façon dont la ligne de texte suivante doit être positionnée par rapport à ces images.

Cet attribut est déprécié dans HTML 4.0 en faveur de la règle de style CSS2 BR {clear:setting}.

Exemple
<BR CLEAR="left">
Valeur
Navigator et Internet Explorer acceptent trois constantes : all | left | right. HTML 4.0 rajoute ce qui devrait être la valeur par défaut : none. Cette valeur figure dans la documentation de IE 3 mais pas dans celle d'IE 4. Si vous attribuez à la propriété la valeur none, soit elle réagit en conséquence, soit elle l'ignore, ce qui produit le même résultat.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.all.IDélément.clear


<BUTTON> | NN s.o. IE 4 HTML 4
<BUTTON>...</BUTTON> | Balise de fin : obligatoire

L'élément BUTTON s'inspire de l'élément INPUT (de type button, submit et reset) mais il dispose de possibilités supplémentaires, surtout lorsqu'il est utilisé comme bouton de type submit. Le contenu représentant le libellé du bouton n'est pas défini sous forme d'attribut ; il est placé entre la balise de début et de fin de l'élément. Vous pouvez utiliser d'autres éléments pour générer le contenu du libellé, notamment un élément IMG (bien que le W3C déconseille fortement les cartes graphiques côté client pour ce type d'images). Bien qu'il soit possible d'appliquer une feuille de style à un élément BUTTON, vous pouvez également placer le contenu du libellé dans un élément (tel que SPAN) et appliquer (ou annuler) des règles de style uniquement à ce contenu. Les deux mécanismes de feuille de style permettent au libellé du bouton d'utiliser les polices et les styles personnalisés.

Lorsqu'un élément BUTTON se voit affecter le TYPE submit, le navigateur envoie les attributs NAME et VALUE au serveur sous forme de couple nom/valeur, comme c'est le cas pour les autres éléments de formulaire. Lorsque vous spécifiez un type de bouton autre que submit, aucun traitement de formulaire spécial n'est communiqué au serveur par l'attribut BUTTON.

En théorie, un élément BUTTON doit être placé à l'intérieur d'un élément FORM. Dans la pratique, IE 4 n'a aucune difficulté à afficher un élément BUTTON spécifié seul. Ceci est acceptable lorsqu'aucun autre élément de formulaire apparenté (tel qu'une zone de texte) ne doit être référencé par des scripts associés au bouton. Certains raccourcis de script (qui passent les références d'objet form sous forme de paramètres) simplifient l'interactivité des éléments de formulaire définie par le script.

Le W3C a implémenté cette variante de l'élément INPUT pour donner aux concepteurs de navigateurs l'opportunité de créer un bouton différent, d'apparence plus riche. Dans la pratique, les deux types de bouton ont une apparence très similaire dans IE 4. Vous remarquerez toutefois une légère différence entre le bouton produit par INPUT et celui produit par BUTTON sur la version Macintosh d'IE 4 : avec un élément BUTTON, le navigateur insère davantage d'espace blanc autour du texte du libellé afin de lui donner un aspect plus agréable.

Exemple
<BUTTON TYPE="button" onClick="doSomething()">Click Here</BUTTON>
<BUTTON TYPE="submit" NAME="Type" VALUE="infoOnly">Request Info</BUTTON>
<BUTTON TYPE="reset"><IMG SRC="clearIt.gif" HEIGHT=20 WIDTH=18></BUTTON>
Référence de modèle d'objet
IE [window.]document.all.IDélément
ACCESSKEY | NN s.o. IE 4 HTML 4
ACCESSKEY=« character » | Facultatif

Touche alphabétique représentant le raccourci-clavier correspondant à un clic sur le bouton. Le navigateur et le système d'exploitation déterminent si l'utilisateur doit appuyer sur une touche de modification (par exemple Ctrl, role="bold">Alt ou Commande) en même temps que sur la touche d'accès pour « cliquer » sur le bouton. Dans IE 4/Windows, il doit obligatoirement s'agir de la touche Alt, et celle-ci est insensible à la casse. Cet attribut est inopérant dans IE 4/Macintosh.

Exemple
<BUTTON TYPE="button" ACCESSKEY=t onClick="goToContents()">
Table of Contents
</BUTTON>
Valeur
Caractère simple repris dans la table de caractères définie pour le document.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.all.IDélément.accessKey
DATAFLD | NN s.o. IE 4 HTML s.o.
DATAFLD=« columnName » | Facultatif

Cet attribut est utilisé avec IE 4 dans le cadre d'une liaison de données pour associer au libellé d'un bouton un nom de colonne provenant d'une source de données distante. Cette colonne doit être constituée de texte normal ou d'HTML (voir DATAFORMATAS). Vous devez également définir un attribut DATASRC pour l'élément BUTTON.

Exemple
<BUTTON TYPE="button" DATASRC="#DBSRC3" DATAFLD="label" onClick="getTopStory()">
</BUTTON>
Valeur
Identifiant sensible à la casse.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.all.IDélément.dataFld
DATAFORMATAS | NN s.o. IE 4 HTML s.o.
DATAFORMATAS=« dataType » | Facultatif

Cet attribut est utilisé avec IE 4 dans le cadre d'une liaison de données pour indiquer au navigateur si le contenu provenant de la source de données doit être traité comme du texte normal ou du HTML. La valeur de cet attribut dépend entièrement de la façon dont la source de données est construite.

Exemple
<BUTTON TYPE="button" DATASRC="#DBSRC3"DATAFORMATAS="HTML" DATAFLD="label"
onClick="getTopStory()">
</BUTTON>
Valeur
IE 4 reconnaît deux valeurs : text | HTML.
Par défaut text
Référence de modèle d'objet
IE [window.]document.all.IDélément.dataFormatAs
DATASRC | NN s.o. IE 4 HTML s.o.
DATASRC=« dataSourceName » | Facultatif

Cet attribut est utilisé avec IE 4 dans le cadre d'une liaison de données pour spécifier le nom de la source de données ODBC distante (telle qu'une base de données Oracle ou SQL Server) à associer à l'élément. Le contenu à extraire de la source de données est spécifié à l'aide de l'attribut DATAFLD.

Exemple
<BUTTON TYPE="button" DATASRC="#DBSRC3" DATAFLD="label"
onClick="getTopStory()">
</BUTTON>
Valeur
Identifiant sensible à la casse.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.all.IDélément.dataSrc
DISABLED | NN s.o. IE 4 HTML 4
DISABLED | Facultatif

Un élément BUTTON désactivé est affiché en grisé et ne peut pas être activé par l'utilisateur. Dans Windows, un élément BUTTON grisé ne peut pas être activé à l'aide de la touche de tabulation. HTML 4.0 spécifie également qu'un élément BUTTON de TYPE submit ne doit pas envoyer de couple nom/valeur au serveur lors de la soumission du formulaire.

L'attribut DISABLED est de type booléen, ce qui signifie que sa présence dans l'attribut lui affecte la valeur true. La valeur de cet attribut peut être modifiée ultérieurement à l'aide d'un script (voir l'objet button dans ).

Exemple
<BUTTON TYPE="submit" DISABLED>Ready to Submit</BUTTON>
Valeur
La présence de l'attribut affecte à ce dernier la valeur true.
Par défaut false
Référence de modèle d'objet
IE [window.]document.all.IDélément.disabled
NAME | NN s.o. IE 4 HTML 4
NAME=« elementIdentifier » | Facultatif

Pour un élément BUTTON, l'attribut NAME peut jouer deux rôles, selon la valeur de l'attribut TYPE. Pour toutes les valeurs de l'attribut TYPE, l'attribut NAME vous permet de définir un identifiant qui peut être utilisé dans les références à l'élément définies par le script (l'attribut ID représente une autre méthode de référence à l'élément). Pour un bouton de type submit, l'attribut NAME fait partie du couple nom/valeur envoyé au serveur au moment de la soumission du formulaire.

Exemple
<BUTTON TYPE="submit" NAME="Type" VALUE="infoOnly">Request Info</BUTTON>
Valeur
Identifiant sensible à la casse.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.all.IDélément.name
TABINDEX | NN s.o. IE 4 HTML 4
TABINDEX=integer | Facultatif

Nombre indiquant la position de cet élément dans l'ordre de tabulation de la page. L'ordre de tabulation suit un ensemble de règles très strictes. Les premiers éléments de la page activés par la touche de tabulation sont ceux dont l'attribut TABINDEX a une valeur autre que zéro. Le premier élément activé est celui ayant la valeur TABINDEX la plus basse, l'élément suivant celui ayant la valeur immédiatement supérieure, et ainsi de suite, quel que soit l'emplacement physique correspondant sur la page ou dans le document. Si deux éléments ont la même valeur TABINDEX, l'élément activé en premier est celui qui apparaît en premier dans le document. Ensuite viennent les éléments qui ne prennent pas en charge pas l'attribut TABINDEX ou ceux pour lesquels la valeur de cet attribut est zéro. Ces éléments sont activés dans l'ordre où ils apparaissent dans le document. Un élément BUTTON défini comme devant être désactivé est sauté lors de la tabulation.

Notez que l'interface utilisateur Macintosh ne permet pas l'activation d'éléments autres que les champs de saisie de données. Les boutons ne peuvent pas être activés à l'aide de la touche de tabulation dans la version Macintosh d'Internet Explorer.

Exemple
<BUTTON TYPE="button" TABINDEX=3 onClick="doSomething()">Click Here
</BUTTON>
Valeur
Nombre entier compris entre 0 et 32767. Dans IE 4, si vous donnez à l'attribut TABINDEX la valeur -1, la touche de tabulation saute l'élément correspondant.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.IDélément.tabIndex
TYPE | NN s.o. IE 4 HTML 4
TYPE=« buttonType » | Facultatif

Définit le style de bouton interne du navigateur. Le style de bouton est utilisé pour déclencher une action définie par un script via un gestionnaire d'événement. Le style « reset » a le même effet qu'un élément INPUT dont l'attribut TYPE a pour valeur reset, à savoir qu'il rétablit la valeur par défaut de tous les éléments. Le style « submit » a le même effet qu'un élément INPUT dont l'attribut TYPE a pour valeur submit. Un élément BUTTON dont l'attribut TYPE a pour valeur reset ou submit doit, pour avoir un effet sur la page, être associé à un formulaire.

Exemple
<BUTTON TYPE="reset"><IMG SRC="clearIt.gif" HEIGHT=20 WIDTH=18></BUTTON>
Valeur
L'une des trois constantes suivantes (insensibles à la casse ) : button | reset | submit.
Par défaut button
Référence de modèle d'objet
IE [window.]document.all.IDélément.type
VALUE | NN s.o. IE 4 HTML 4
VALUE=« text » | Facultatif/Obligatoire

Préassigne à un élément BUTTON une valeur envoyée au serveur sous forme de couple nom/valeur lorsque l'élément est un élément de formulaire.

Exemple
<BUTTON NAME="connections" VALUE="ISDN">ISDN</BUTTON>
Valeur
Chaîne de texte quelconque.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.all.IDélément.value


<CAPTION> | NN tous IE tous HTML 3.2
<CAPTION>...</CAPTION> | Balise de fin : obligatoire

L'élément CAPTION, qui peut uniquement être placé à l'intérieur d'un élément TABLE (et immédiatement après la balise de début <TABLE>), indique que le texte qui suit est la légende du tableau. Une légende s'applique à l'ensemble d'un tableau, alors qu'un en-tête de tableau (élément TH) s'applique à une colonne ou à une ligne individuelle. Un seul élément CAPTION est reconnu dans un élément TABLE.

Une légende de tableau consiste généralement en une brève description de ce dernier. Il est possible de fournir une description plus complète à l'aide de l'attribut SUMMARY d'un élément TABLE, pour les navigateurs à synthèse vocale utilisés, entre autres, par les non-voyants. Le principal attribut de l'élément CAPTION est l'attribut ALIGN, qui permet de définir la position de la légende par rapport au tableau.

Exemple
<TABLE ...>
<CAPTION CLASS="tableCaptions">
    Table 3-2. Sample Inverse Framistan Values
</CAPTION>
...
</TABLE>
Référence de modèle d'objet
IE [window.]document.all.IDélément
ALIGN | NN tous IE tous HTML 3.2
ALIGN=« where » | Facultatif

Définit le positionnement horizontal de la légende par rapport au tableau. Toutes les versions des navigateurs ne prennent pas en charge la gamme complète des possibilités de cet attribut. Seules les valeurs top et bottom sont universellement reconnues par les navigateurs.

Les navigateurs affichent généralement une légende au dessus ou au dessous d'un tableau dans la même police de caractères que le corps du texte (à moins que vous en spécifiez une autre à l'aide d'une balise ou d'une feuille de style) et cette légende est centrée horizontalement par rapport au tableau. Si la légende dépasse la largeur du tableau, le texte est rejeté à la ligne automatiquement mais il reste centré.

L'attribut ALIGN est déprécié dans HTML 4.0 en faveur de l'attribut de feuille de style text-align: and vertical-align: .

Exemple
<CAPTION ALIGN="top">Table II. Stock List</CAPTION>
Valeur
Les navigateurs et la spécification HTML 4.0 définissent différents jeux de valeurs pour cet attribut. Sélectionnez dans le tableau suivant celle(s) qui conviennent :
Valeur NN 4 IE 4 HTML 4.0
bottom
         * * *
center
         - * -
left
         - * *
right
         - * *
top
         * * *
D'autre part, IE 4 et HTML 4.0 divergent sur le rôle des valeurs left et right. Dans IE 4, les légendes sont toujours affichées au dessus ou au dessous d'un tableau (voir l'attribut VALIGN), mais le texte de la légende est justifié à gauche, centré ou justifié à droite. Dans HTML 4.0, les attributs left et right positionnent la légende complète à gauche ou à droite du tableau. Si une version future d'Internet Explorer devait adopter la spécification HTML 4.0, la présentation des légendes de tableau pourrait en souffrir.
Par défaut top (dans IE 4, center si l'attribut VALIGN est également défini).
Référence de modèle d'objet
IE [window.]document.all.IDélément.align
VALIGN | NN s.o. IE 3 HTML s.o.
VALIGN=« where » | Facultatif

L'attribut VALIGN était utilisé au départ par Internet Explorer pour positionner la légende d'un tableau au dessous ou au dessous du tableau. Bien que cet attribut fasse à présent partie de l'attribut ALIGN, la façon particulière dont IE traite les valeurs left, center et right de l'attribut ALIGN donne l'attribut VALIGN une tâche spécifique. Par exemple, vous pouvez utiliser VALIGN pour positionner la légende au dessous du tableau et ALIGN="right" pour la justifier à droite. Cette combinaison n'est pas possible avec l'attribut HTML 4.0. L'attribut VALIGN est principalement présent dans IE 4 pour des raisons de compatibilité en ascendante.

Exemple
<CAPTION ALIGN="right" VALIGN="bottom">Table 3-2. Fiber Content.</CAPTION>
Valeur
Deux valeurs insensibles à la casse sont possibles : bottom | top.
Par défaut top
Référence de modèle d'objet
IE [window.]document.all.IDélément.valign


<CENTER> | NN tous IE tous HTML 3.2
<CENTER>...</CENTER> | Balise de fin : obligatoire

L'élément CENTER, introduit au départ par Netscape, était très utilisé jusqu'à l'apparition de l'élément DIV, qui est sanctionné par le W3C. Il est clair, même en lisant la documentation de HTML 3.2, que cet élément n'a jamais été un des éléments préférés du groupe de travail HTML. Dans l'élan, il a toutefois trouvé sa place dans la spécification HTML 3.2. Cet élément est déprécié dans HTML 4.0 en faveur de l'élément DIV associé à la règle de style text-align:center. Au lieu d'une feuille de style, vous pouvez utiliser un élément DIV associé à ALIGN="center", bien que cette solution soit également dépréciée dans HTML 4.

Le contenu d'un élément CENTER est aligné sur un axe vertical invisible placé au milieu de l'élément parent immédiat, à savoir, généralement, l'élément BODY.

Exemple
<CENTER>Don't do this.</CENTER>
Référence de modèle d'objet
IE [window.]document.all.IDélément


<CITE> | NN tous IE tous HTML tous
<CITE>...</CITE> | Balise de fin : obligatoire

L'élément CITE appartient à un large groupe d'éléments que les recommandations HTML 4.0 nomment éléments de phrase. Ces éléments attribuent un sens structurel à la section désignée du document. Un élément CITE contient une citation ou une référence à un autre document source. Il ne s'agit pas d'un lien actif, mais simplement d'une annotation indiquant que le contenu de l'élément est une citation ou une référence à un autre document. Les moteurs de recherche et autres analyseurs de documents HTML peuvent utiliser cette information à d'autres fins (création d'une bibliographie pour un document, par exemple).

Les navigateurs sont libres de déterminer si le contenu d'un élément CITE doit être distingué du reste de l'élément BODY et, si oui, de quelle façon. Navigator et Internet Explorer affichent tous deux ce texte en italique. Vous pouvez toutefois modifier ce comportement à l'aide d'une feuille de style.

Exemple
<P>Allons! descendons, et confondons leur langage afin qu'ils n'entendent plus la langue les uns des autres.<BR>
(la Bible, <CITE>Genèse, 11</CITE>)</P>
Référence de modèle d'objet
IE [window.]document.all.IDélément


<CODE> | NN tous IE tous HTML tous
<CODE>...</CODE> | Balise de fin : obligatoire

L'élément CODE appartient à un large groupe d'éléments que les recommandations HTML 4.0 nomment éléments de phrase. Ces éléments attribuent un sens structurel à la section désignée du document. Un élément CODE permet principalement d'afficher un ou plusieurs caractères représentant du code (instruction de programme, variable, mot-clé, etc)..

Les navigateurs sont libres de déterminer si le contenu d'un élément CODE doit être distingué du reste de l'élément BODY et, si oui, de quelle façon. Navigator et Internet Explorer affichent tous deux les éléments CODE dans une police à espacement non proportionnel, généralement avec une taille de caractères inférieure à celle de la police par défaut du corps du texte (dans la version Macintosh d'Internet Explorer 4, toutefois, la taille de la police n'est pas réduite). Vous pouvez en décider autrement à l'aide d'une feuille de style.

Tout espace blanc (y compris les retours chariot) présent dans le contenu des éléments CODE est traité de la même façon que l'espace blanc présent dans le contenu des éléments BODY du navigateur. Les sauts de ligne doivent être insérés manuellement à l'aide d'éléments BR. Pour afficher du texte pré-formaté respectant l'espace blanc spécifié dans le code source, voir l'élément PRE.

Exemple Initialisez une variable JavaScript à l'aide du mot clé <CODE>var</CODE>.
Référence de modèle d'objet
IE [window.]document.all.IDélément


<COL> | NN s.o. IE 3 HTML 4
<COL> | Balise de fin : interdite

L'élément COL permet de définir rapidement des largeurs et autres caractéristiques de style pour un ou plusieurs sous-ensembles de colonnes de tableau ou pour un groupe de colonnes de tableau. Lorsque ces informations apparaissent au début de l'élément TABLE, un navigateur compatible avec cette fonction affiche le tableau avant que tout son code source soit chargé (moment auquel, normalement, il commencerait à effectuer les calculs relatifs à la disposition du tableau).

Vous pouvez utiliser l'élément COL en combinaison avec l'élément COLGROUP ou isolément. La structure dépend de la manière dont vous devez affecter les largeurs et les styles à des colonnes individuelles ou contiguës. Il est possible d'appliquer un élément COL à une seule colonne en omettant l'attribut REPEAT (ou SPAN dans Internet Explorer 4). En affectant une valeur entière à l'attribut REPEAT, vous donnez pour instruction au navigateur d'appliquer les paramétrages de largeur et de style de l'élément COL au nombre de colonnes contiguës indiqué. L'élément REPEAT est similaire à l'attribut COLSPAN de l'élément COLGROUP. De concert avec l'élément COLGROUP, l'élément COL permet de créer une sorte de sous-ensemble de colonnes apparentées à l'intérieur d'un ensemble COLGROUP.

Quelle que soit la manière dont vous abordez la structure des colonnes du tableau, le nombre total de colonnes définies dans l'ensemble des éléments COL et COLGROUP doit être égal au nombre de colonnes physiques souhaitées pour le tableau. S'il faut plus de cellules dans une ligne qu'il n'y a de colonnes définies dans COL et COLGROUP, il est probable que le navigateur devra recomposer le tableau en écartant tout affichage incrémentiel déjà accompli. Les trois exemples de structure ci-dessous définissent des tableaux HTML 4.0 de six colonnes :

<TABLE>
<COL REPEAT=6>
...
</TABLE>

<TABLE>
<COL>
<COL REPEAT=4>
<COL>
...
</TABLE>

<TABLE>
<COLGROUP>
<COL REPEAT=2></COLGROUP>
<COLGROUP SPAN=4>
...
</TABLE>

Les spécifications HTML 4.0 pour l'élément COL vont au-delà de leur implémentation dans Internet Explorer 4 par plusieurs aspects. Par exemple, le code HTML 4.0 permet d'opérer un alignement, dans une colonne, sur n'importe quel caractère, par exemple une virgule décimale ou un symbole monétaire. Ce type de fonctionnalité justifie l'existence de l'élément COL. Par exemple, il est possible que la mise en forme des trois premières colonnes d'un tableau soit identique et que la quatrième colonne soit affectée d'un style particulier et possède ses propres caractéristiques d'alignement :

<HTML>
<HEAD>
<STYLE TYPE="text/css">
  .colHdrs {color:black}
  .normColumn {color:green}
  .priceColumn {color:red}
</STYLE>
</HEAD>
<BODY>
<TABLE>
<COLGROUP CLASS="normColumn" SPAN=3></COLGROUP>
<COL CLASS="priceColumn" ALIGN="char" CHAR=".">
<THEAD CLASS="colHdrs">
<TR><TH>Stock No.<TH>In Stock<TH>Description<TH>Price</TR>
<TBODY>
<TR><TD>8832<TD>Oui<TD>Cuivre Frobnitz<TD>$255,98</TR>
<TR><TD>8835<TD>Non<TD>Frobnitz (noir)<TD>$98</TR>
...
</TABLE>
</BODY>
</HTML>

Comme les attributs des éléments COL et COLGROUP s'appliquent à la colonne entière, dans l'exemple précédent, la règle de feuille de style relative à l'élément THEAD prend le pas sur les paramètres de couleur définis pour les deux styles de colonne des lignes incluses dans l'élément THEAD. L'exemple précédent fonctionne dans Internet Explorer 4 pour Windows, sauf en ce qui concerne l'alignement de la dernière colonne, qui est ignoré ; la version Macintosh affecte des styles et autres attributs aux mauvaises colonnes.

Exemple
<COL CLASS="dateCols" WIDTH="15" ALIGN="right">
Référence de modèle d'objet
IE [window.]document.all.IDélément
ALIGN | NN s.o. IE 3 HTML 4
ALIGN=« constante_d'alignement» | Facultatif

Définit les caractéristiques d'alignement horizontal du contenu des colonnes incluses dans l'élément COL. Les spécifications HTML 4.0 définissent pour l'attribut ALIGN des paramètres qui ne sont pas encore repris dans la spécification CSS. C'est pourquoi l'attribut ALIGN n'est pas totalement déprécié. En règle générale, il convient, autant que possible, de spécifier l'alignement à l'aide d'une feuille de style.

Exemple
<COL CLASS="dateCols" WIDTH="15" ALIGN="right">
Valeur
HTML 4.0 et Internet Explorer 4 utilisent deux ensembles de valeurs d'attribut :
Valeur IE 4 HTML 4.0
center
         * *
char
         - *
justify
         - *
left
         * *
right
         * *
Les noms des valeurs center (centré), left (gauche) et right (droite) sont explicites. La valeur justify est destinée à justifier le texte, en l'alignant sur les bords gauche et droit à la fois. Avec la valeur char, l'attribut CHAR doit être également défini pour indiquer le caractère utilisé pour l'alignement du contenu. Dans l'exemple des spécifications HTML 4.0, tout contenu dans lequel ce caractère n'apparaît pas sera aligné à droite par rapport à l'emplacement de ce caractère dans les autres lignes de la même colonne. Il est important de noter que l'attribut ALIGN s'applique à toutes les lignes incluses dans une colonne, y compris celles d'un élément TH que vous auriez inséré dans le tableau. Si vous désirez obtenir un alignement différent pour l'en-tête de colonne, compensez le paramétrage général en insérant un attribut ALIGN séparé ou en affectant l' attribut de feuille de style text-align à l'élément THEAD ou, individuellement, aux éléments TH.
Par défaut left
Référence de modèle d'objet
IE [window.]document.all.IDélément.align
CHAR | NN s.o. IE s.o. HTML 4
CHAR=« caractère» | Facultatif

L'attribut CHAR définit le caractère utilisé comme point d'alignement du texte dans une colonne. Cet attribut n'est utile que si l'attribut ALIGN reçoit la valeur "char".

Exemple
<COL CLASS="priceColumn" ALIGN="char" CHAR=".">
Valeur
Tout caractère alphanumérique unique.
Par défaut Aucune.
CHAROFF | NN s.o. IE s.o. HTML 4
CHAROFF=« longueur» | Facultatif

L'attribut CHAROFF permet de définir le point de décalage spécifique auquel le caractère spécifié par l'attribut CHAR doit apparaître dans chaque cellule. Cet attribut est destiné à résoudre les cas où le positionnement par défaut du navigateur ne correspondrait pas aux objectifs de mise en page du tableau.

Exemple
<COL CLASS="priceColumn" ALIGN="char" CHAR="." CHAROFF="80%">
Valeur
Toute valeur en pixels ou en pourcentage de l'espace disponible dans les cellules.
Par défaut Aucune.
REPEAT | NN s.o. IE s.o. HTML 4
REPEAT=« nombre_de_colonnes» | Facultatif

Définit le nombre de colonnes adjacentes auxquelles s'appliquent l'attribut et les paramètres de style de l'élément COL . Si cet attribut manque, l'élément COL régit une seule colonne. Vous pouvez combiner plusieurs éléments COL ayant différentes valeurs pour REPEAT en fonction des besoins de sous-groupement de colonne.

Cet attribut HTML 4.0 est représenté dans Internet Explorer 4 par l'attribut SPAN.

Exemple
<COL REPEAT=3>
Valeur
Valeur entière supérieur à zéro.
Par défaut 1
SPAN | NN s.o. IE 3 HTML s.o.
SPAN=« nombre_de_colonnes» | Facultatif

Définit le nombre de colonnes adjacentes auxquelles s'appliquent l'attribut et les paramètres de style de l'élément COL . Si cet attribut manque, l'élément COL régit une seule colonne. Vous pouvez combiner plusieurs éléments COL ayant différentes valeurs pour SPAN en fonction des besoins de sous-groupement de colonne.

Cet attribut spécifique à Internet Explorer 4 est représenté en HTML 4.0 par l'attribut REPEAT.

Exemple
<COL SPAN=3>
Valeur
Valeur entière supérieur à zéro.
Par défaut 1
Référence de modèle d'objet
IE [window.]document.all.IDélément.span
VALIGN | NN s.o. IE 4 HTML 4
VALIGN=« constante_d'alignement» | Facultatif

Définit les caractéristiques de l'alignement vertical du contenu des cellules de toutes les colonnes incluses dans l'élément COL. Vous pouvez modifier manuellement l'alignement vertical d'une cellule particulière d'une colonne.

Exemple
<COL VALIGN="middle">
Valeur
IE 4 et HTML 4.0 reconnaissent quatre constantes possibles : top | middle | bottom | baseline. Avec top et bottom, le contenu est aligné sur le haut et le bas de la cellule (ou en est très proche). Avec middle (la valeur par défaut), le contenu est parfaitement centré verticalement dans les cellules. Dans les cas où le contenu d'une cellule pourrait s'étendre sur plusieurs lignes dans les largeurs de fenêtre courantes (dans l'hypothèse d'un tableau de largeur variable), il est conseillé de donner à l'attribut VALIGN de toutes les cellules d'une même ligne (ou de tous les éléments COL) la valeur baseline. Ainsi, la ligne de base des caractères de la première (ou de la seule) ligne de texte de la cellule sera alignée sur celle du contenu des autres cellules de la même ligne, ce qui est en général le meilleur compromis sur le plan esthétique.
Par défaut middle
Référence de modèle d'objet
IE [window.]document.all.IDélément.vAlign
WIDTH | NN s.o. IE 4 HTML 4
WIDTH=« largeurs_multiples» | Facultatif

Définit la largeur maximale des colonnes incluses dans l'élément COL. Dans la pratique (en tout cas dans Internet Explorer 4 pour Windows), le navigateur n'affiche pas une colonne dont la largeur est inférieure à la plus longue chaîne de caractères sans espace (c'est-à-dire au mot le plus long). La mesure exacte d'une telle largeur de colonne dépend également des paramètres de police du contenu. Internet Explorer 4 pour Macintosh confond les affectations de largeur de colonne lors du déploiement de l'élément COL.

Exemple
<COL WIDTH=100>
Valeur
Internet Explorer 4 accepte pour WIDTH des valeurs de longueur exprimées en pixels (sans l'unité « px ») ou en pourcentage de l'espace horizontal disponible alloué au tableau (WIDTH="25%"). Les spécifications HTML 4.0 introduisent un système de mesure de longueur supplémentaire destiné à compléter la mesure de longueur habituelle. Ce format, dit de longueur proportionnelle (ou MultiLength), utilise une notation et une géométrie particulières. Il est parfaitement adapté aux situations dans lesquelles un élément COL doit être dimensionné en fonction de la largeur de tableau disponible dès que les longueurs fixes et de pourcentage sont calculées. La notation de longueur proportionnelle (nombre suivi d'un astérisque) permet de donner pour instruction au navigateur de diviser l'espace restant en fonction d'une proportion. Par exemple, s'il reste suffisamment d'espace horizontal sur la page pour 100 pixels une fois tous les autres calculs de colonne terminés, trois éléments COL pourraient spécifier les attributs WIDTH de 1*, 3* et 1*. Ce qui donne un total de cinq segments proportionnels. Les 100 pixels disponibles sont distribués vers les colonnes proportionnelles en fonction de leur proportion par rapport à l'ensemble de l'espace restant : respectivement 20, 60 et 20 pixels.
Par défaut Déterminé par calcul dans le navigateur.


<COLGROUP> | NN s.o. IE 3 HTML 4
<COLGROUP>...</COLGROUP> | Balise de fin : facultative

L'élément COLGROUP permet de définir rapidement des largeurs et autres caractéristiques de style pour un ou plusieurs sous-ensembles de colonnes de tableau. Lorsque ces informations apparaissent au début du code source de l'élément TABLE, un navigateur compatible avec cette fonction commence à afficher le tableau avant que tout son code source soit chargé (moment auquel, normalement, il commencerait à effectuer les calculs relatifs à la disposition du tableau).

Vous pouvez utiliser l'élément COLGROUP en combinaison avec l'élément COL ou isolément. Vous pouvez également définir un élément COLGROUP dans lequel sont imbriqués des éléments COL afin d'aider à définir des sous-ensembles de colonnes partageant certains paramètres d'attribut ou de style. La nécessité d'une balise de fin pour l'élément est déterminée par la présence ou non d'éléments COL autonomes suivant l'élément COLGROUP. Par exemple, si vous spécifiez des groupes de colonnes entièrement avec des éléments COLGROUP, les balises de fin sont superflues.

<TABLE>
<COLGROUP SPAN=2 WIDTH=30>
<COLGROUP SPAN=3 WIDTH=40>
<THEAD>

Si un élément COL libre suit l'élément COLGROUP, vous devez clairement terminer l'élément COLGROUP placé devant l'élément COL autonome :

<TABLE>
<COLGROUP CLASS="leftCols">
<COL WIDTH=30>
<COL WIDTH=20>
</COLGROUP>
<COL CLASS="priceCol" WIDTH=25>
<THEAD>
...

La structure dépend de la manière dont vous devez affecter les largeurs et les styles à des colonnes individuelles ou contiguës. Pour créer un groupe de plusieurs colonnes adjacentes, utilisez l'attribut SPAN. Celui-ci est différent de l'attribut COLSPAN d'un élément TD, qui a pour effet de joindre des cellules adjacentes pour constituer une cellule unique. L'attribut SPAN vous aide à définir le nombre de colonnes à traiter de façon structurelle en tant que groupe (afin d'affecter des paramètres d'attribut et de feuille de style à plusieurs colonnes, indépendamment de leur contenu).

Quelle que soit la manière dont vous abordez la structure des colonnes du tableau, le nombre total de colonnes définies dans l'ensemble des éléments COL et COLGROUP doit être égal au nombre physique de colonnes souhaitées pour le tableau. S'il faut plus de cellules dans une ligne qu'il n'y a de colonnes définies dans COL et COLGROUP, il est probable que le navigateur devra recomposer le tableau en écartant tout affichage incrémentiel déjà accompli. Les trois exemples de structure ci-dessous définissent des tableaux HTML 4.0 de six colonnes :

<TABLE>
<COLGROUP SPAN=6>
...
</TABLE>

<TABLE>
<COL>
<COLGROUP SPAN=4>
<COL>
...
</TABLE>

<TABLE>
<COLGROUP>
    <COL REPEAT=2>
</COLGROUP>
<COLGROUP SPAN=4>
...
</TABLE>

Les spécifications HTML 4.0 pour l'élément COLGROUP vont au-delà de leur implémentation dans Internet Explorer 4 par plusieurs aspects. Par exemple, le code HTML 4.0 permet d'opérer un alignement, dans une colonne, sur n'importe quel caractère, par exemple une virgule décimale ou un symbole monétaire. Ce type de fonction justifie l'existence de l'élément COL (pour un exemple, voir la section relative à l'élément COL).

Il existe peu de différences syntaxiques entre les éléments COLGROUP et COL (différence mineure uniquement dans l'implémentation d'Internet Explorer 4). Un élément COLGROUP confère cependant une intégrité structurelle à un groupe de colonnes qui s'affiche différemment lorsque l'élément contenant TABLE spécifie RULES="groups" ; le navigateur trace des lignes droites (bordures de tableau standard dans Internet Explorer 4) uniquement entre les éléments COLGROUP, pas entre les éléments COL.

Exemple
<COLGROUP CLASS="dateCols" WIDTH="15" ALIGN="right">
Référence de modèle d'objet
IE [window.]document.all.IDélément
ALIGN | NN s.o. IE 3 HTML 4
ALIGN=« constante_d'alignement » | Facultatif

Définit les caractéristiques d'alignement horizontal du contenu des colonnes incluses dans l'élément COLGROUP. Les spécifications HTML 4.0 définissent pour l'attribut ALIGN des paramètres qui ne sont pas encore repris dans la spécification CSS. C'est pourquoi l'attribut ALIGN n'est pas totalement déprécié. En règle générale, il convient, autant que possible, de spécifier l'alignement à l'aide d'une feuille de style.

La documentation d'Internet Explorer 3 appelle cet attribut HALIGN. Eb pratique, Internet Explorer 3 pour Windows semble ignorer les attributs ALIGN et HALIGN pour l'élément COLGROUP.

Exemple
<COLGROUP CLASS="dateCols" WIDTH="15" ALIGN="right" SPAN=3>
Valeur
HTML 4.0 et Internet Explorer 4 utilisent deux ensembles de valeurs d'attribut :
Valeur IE 4 HTML 4.0
center
         * *
char
         - *
justify
         - *
left
         * *
right
         * *
Les noms des valeurs center (centré), left (gauche) et right (droite) sont explicites. La valeur justify est destinée à justifier le texte, en l'alignant sur les bords gauche et droit à la fois. Avec la valeur char, l'attribut CHAR doit être également défini pour indiquer le caractère utilisé pour l'alignement du contenu. Dans l'exemple des spécifications HTML 4.0, tout contenu dans lequel ce caractère n'apparaît pas sera aligné à droite par rapport à l'emplacement de ce caractère dans les autres lignes de la même colonne. Il est important de noter que l'attribut ALIGN s'applique à toutes les lignes incluses dans une colonne, y compris celles d'un élément TH que vous auriez inséré dans le tableau. Si vous désirez obtenir un alignement différent pour l'en-tête de colonne, compensez le paramétrage général en insérant un attribut ALIGN séparé ou en affectant l' attribut de feuille de style text-align à l'élément THEAD ou, individuellement, aux éléments TH.
Par défaut left
Référence de modèle d'objet
IE [window.]document.all.IDélément.align
CHAR | NN s.o. IE s.o. HTML 4
CHAR=« caractère » | Facultatif

L'attribut CHAR définit le caractère utilisé comme point d'alignement dans une colonne. Cet attribut n'a de valeur que si l'attribut ALIGN est défini comme "char".

Exemple
<COLGROUP CLASS="priceCols" ALIGN="char" CHAR="." SPAN=2>
Valeur
Tout caractère alphanumérique unique.
Par défaut Aucune.
CHAROFF | NN s.o. IE s.o. HTML 4
CHAROFF=« longueur » | Facultatif

L'attribut CHAROFF permet de définir le point de décalage spécifique auquel le caractère spécifié par l'attribut CHAR doit apparaître dans chaque cellule. Cet attribut est destiné à résoudre les cas où le positionnement par défaut du navigateur ne correspondrait pas aux objectifs de mise en page du tableau.

Exemple
<COLGROUP CLASS="priceColumn" ALIGN="char" CHAR="." CHAROFF="80%" SPAN=2>
Valeur
Toute valeur en pixels ou en pourcentage de l'espace disponible dans les cellules.
Par défaut Aucune.
SPAN | NN s.o. IE 3 HTML 4
SPAN=nombre_de_colonnes | Facultatif

Définit le nombre de colonnes adjacentes auxquelles s'appliquent l'attribut et les paramètres de style de l'élément COLGROUP . Si cet attribut manque, l'élément COLGROUP régit une seule colonne. Vous pouvez combiner plusieurs éléments COLGROUP ayant différentes valeurs pour SPAN en fonction des besoins de sous-groupement de colonne.

L'attribut correspondant à l'élément COL est représenté, dans Internet Explorer 4, par l'attribut SPAN et, dans HTML 4.0, par l'attribut REPEAT.

Exemple
<COLGROUP SPAN=3>
Valeur
Valeur entière supérieur à zéro.
Par défaut 1
Référence de modèle d'objet
IE [window.]document.all.IDélément.span
VALIGN | NN s.o. IE 3 HTML 4
VALIGN=« constante_d'alignement » | Facultatif

Définit les caractéristiques de l'alignement vertical du contenu des cellules de toutes les colonnes incluses dans l'élément COLGROUP. Vous pouvez modifier manuellement l'alignement vertical d'une cellule particulière d'une colonne.

Exemple
<COLGROUP VALIGN="middle">
Valeur
IE 4 et HTML 4.0 reconnaissent quatre constantes possibles : top | middle | bottom | baseline. Avec top et bottom, le contenu est aligné sur le haut et le bas de la cellule (ou en est très proche). Avec middle (la valeur par défaut), le contenu est parfaitement centré verticalement dans les cellules. Dans les cas où le contenu d'une cellule pourrait s'étendre sur plusieurs lignes dans les largeurs de fenêtre courantes (dans l'hypothèse d'un tableau de largeur variable), il est conseillé de donner à l'attribut VALIGN de toutes les cellules d'une même ligne (ou de tous les éléments COLGROUP) la valeur baseline. Ainsi, la ligne de base des caractères de la première (ou de la seule) ligne de texte de la cellule sera alignée sur celle du contenu des autres cellules de la même ligne, ce qui est en général le meilleur compromis sur le plan esthétique.
Par défaut middle
Référence de modèle d'objet
IE [window.]document.all.IDélément.vAlign
WIDTH | NN s.o. IE 3 HTML 4
WIDTH=« largeurs_multiples » | Facultatif

Définit la largeur maximale des colonnes incluses dans l'élément COLGROUP. Dans la pratique (en tout cas dans Internet Explorer 4 pour Windows), le navigateur n'affiche pas une colonne dont la largeur est inférieure à la plus longue chaîne de caractères sans espace (c'est-à-dire au mot le plus long). La mesure exacte d'une telle largeur de colonne dépend également des paramètres de police du contenu. Internet Explorer 4 pour Macintosh confond les affectations de largeur de colonne lors du déploiement de l'élément COLGROUP.

Exemple
<COLGROUP WIDTH=100>
Valeur
Internet Explorer 4 accepte pour WIDTH des valeurs de longueur exprimées en pixels (sans l'unité « px ») ou en pourcentage de l'espace horizontal disponible alloué au tableau (WIDTH="25%"). Une variante de la valeur de longueur proportionnelle est décrite dans les spécifications HTML 4.0. Pour un élément COLGROUP, vous pouvez spécifier la valeur WIDTH="*0" afin d'indiquer au navigateur qu'il doit afficher toutes les colonnes en fonction de la largeur minimale nécessaire pour insérer le contenu des cellules dans la colonne. Pour pouvoir effectuer ce calcul, le navigateur doit charger tout le contenu du tableau, ce qui empêche tout affichage incrémentiel d'un long tableau. Pour plus de détails sur les longueurs proportionnelles, voir la section relative à l'attribut WIDTH de l'élément COL.
Par défaut Déterminé par calcul dans le navigateur.


<COMMENT> | NN s.o. IE tous HTML s.o.
<COMMENT>...</COMMENT> | Balise de fin : obligatoire
L'élément COMMENT est un avatar, désormais obsolète, des premières versions d'Internet Explorer. Il s'agissait d'une balise en clair devant faire office d'alternative à l'élément de commentaire <!--comment-->. Le navigateur n'affichait pas le contenu de l'élément COMMENT. Internet Explorer 4 ne prend en charge cet élément qu'à des fins de compatibilité ascendante, bien qu'il implémente également certains attributs modernes (ID, LANG et TITLE). N'utilisez pas cet élément. Cette rubrique est volontairement succincte afin de décourager l'utilisation de cet élément.


<DD> | NN tous IE tous HTML tous
<DD>...</DD> | Balise de fin : facultative

L'élément DD fait partie du trio d'éléments DL, DT, DD utilisés pour créer une liste de définitions dans un document. La liste est délimitée par les balises de l'élément DL. Chaque terme défini est indiqué par une balise d'élément DT, et la définition du terme par une balise d'élément DD. Voici la présentation schématique d'une séquence de liste de définitions contenant trois éléments :

<DL>
    <DT>Terme 1
    <DD>Définition 1
    <DT>Terme 2
    <DD>Définition 2
    <DT>Terme 3
    <DD>Définition 3
</DL>

Un élément DT est un élément incorporé, tandis qu'un élément DD peut avoir un contenu de niveau bloc, comprenant du texte entouré d'une bordure, des images et autres objets. Les balises de fin sont facultatives pour les deux éléments DT et DD ; en effet, la balise de début suivante marque automatiquement la fin de l'élément précédent. La liste entière doit cependant être fermée par la balise de fin de l'élément conteneur DL.

Bien que les spécifications HTML n'imposent aucune manière particulière d'afficher une liste de définitions, Navigator et Internet Explorer s'entendent pour aligner à gauche un élément DT et indenter tout élément DD situé derrière. Le navigateur n'ajoute aucune mise en forme de police ou élément visuel particulier, mais vous êtes libre d'affecter des styles à votre guise. Si vous voulez empiler plusieurs termes et/ou définitions, vous pouvez placer plusieurs éléments DT et / ou DD les uns derrière les autres dans le code source.

Le HTML étant axé sur un balisage sensible au contexte, évitez d'utiliser des listes de définitions uniquement comme moyen de mise en forme (pour obtenir du texte indenté). Utilisez des feuilles de style et des paramètres de marge variable pour la mise en forme.

Dans Navigator 4, les styles affectés aux éléments DT et DD au moyen de l'attribut CLASS, ID ou STYLE ne fonctionnent pas. Si vous voulez affecter les mêmes attributs de style aux éléments DT et DD, affectez le style à l'élément DL ; sinon, entourez les éléments DT et DD d'un élément SPAN dont les éléments imbriqués DT et DD hériteront du style. Ce palliatif est observé dans Internet Explorer 4, bien qu'il ne soit pas nécessaire pour les documents uniquement destinés à Internet Explorer 4.

Exemple
<DL>
    <DT>Z-scale
    <DD>Avec une échelle de réduction de 1:220, il s'agit du plus petit
    modèle miniature jamais produit en série.
</DL>
Référence de modèle d'objet
IE [window.]document.all.IDélément


Bienvenue sur le panneau de référence. Ce panneau fournit des informations de référence pour le codage HTML, JavaScript et CSS.

Pour obtenir des informations de référence sur la sélection actuelle en mode d'affichage Code, veillez à ce que la fonction de coloration de la syntaxe soit activée, puis sélectionnez l'un des éléments suivants :
  • bouton Référence de la barre d'outils
  • ? > Référence (MAJ+F1)
  • Fenêtre > Référence (MAJ+F10)


<DEL> | NN s.o. IE 4 HTML 4
<DEL>...</DEL> | Balise de fin : obligatoire

L'élément DEL et son élément compagnon INS définissent un format qui indique les segments du contenu d'un document qui ont été marqués pour suppression (ou insertion) durant le processus de création. Nous sommes encore loin d'un modèle de gestion du flux de travail, mais dans le cadre d'un programme graphique de création HTML ces éléments peuvent aider à suivre les modifications au sein des diverses générations d'un même document au cours de son élaboration.

Parmi les navigateurs de quatrième génération, seul Internet Explorer prend en charge l'élément DEL. Le texte délimité par cet élément est affiché en style barré (alors que le texte délimité par l'élément INS est en style souligné). Les spécifications HTML 4.0 comportent deux attributs potentiellement utiles (mais qui ne sont pas pris en charge par Internet Explorer 4), l'un pour préserver des informations cachées relatives à la date et à l'heure de modification, et l'autre pour ajouter un texte décrivant la modification.

Exemple
<P>Quatre matches et
<DEL CITE="j'ai corrigé l'erreur">huit</DEL><INS>sept</INS> ans plus tôt...</P>
Référence de modèle d'objet
IE [window.]document.all.IDélément
CITE | NN s.o. IE s.o. HTML 4
CITE=« chaîne » | Facultatif

Description textuelle de la modification, ou toute autre note associée à l'élément, mais normalement invisible pour le visiteur du site. Ces informations sont destinées à être affichées par les logiciels de développement pour le Web, pas par les navigateurs.

Exemple
<DEL CITE="j'ai corrigé l'erreur --A.L.">huit</DEL>
Valeur
Toute chaîne de caractères. Cette chaîne doit figurer entre guillemets (simples ou doubles, mais identiques).
Par défaut Aucune.
DATETIME | NN s.o. IE s.o. HTML 4
DATETIME=« chaîne_date_et_heure » | Facultatif

Date et heure de la suppression. Ces informations sont en général insérées dans un document à l'aide d'un logiciel de création HTML conçu pour assurer le suivi des insertions et suppressions. Les données de cet attribut peuvent être exploitées ultérieurement pour assurer un audit des modifications apportées au document. Il ne peut y avoir qu'une seule valeur d'attribut DATETIME associée à un élément DEL donné.

Exemple
<DEL DATETIME="1998-09-11T20:03:32-08:00">TexteSuppriméIci</DEL>
Valeur
La valeur de l'attribut DATETIME doit répondre à un format date/heure spécial, qui indique la date et l'heure de façon à ce que le moment exact puisse être identifié indépendamment de tout fuseau horaire. La syntaxe de ce format est la suivante :
aaaa-MM-jjThh:mm:ssIFH

aaaa | Année sur quatre chiffres
MM | Mois sur deux chiffres (de 01 à 12)
jj | Jour sur deux chiffres (de 01 à 31)
T | Un « T » majuscule séparant la date de l'heure
hh | Heure sur 24 heures, sur 2 chiffres (de 00 à 23)
mm | Minute sur deux chiffres (de 00 à 59)
ss | Seconde sur deux chiffres (de 00 à 59)
IFH | Indicateur de Fuseau Horaire
Deux formats sont possibles. Le premier se résume à la lettre « Z », en majuscule, qui signifie UTC (Coordinated Universal Time, ou Temps universel, qui est également appelé « Zulu ») et est l'équivalent de l'heure GMT. L'autre format indique le décalage, par rapport à l'heure GMT, de l'heure indiquée (que le symbole hh:mm:ss représente ici). Ce décalage horaire se compose du signe « plus » ou « moins » suivi d'une autre paire de hh:mm . Pour les fuseaux horaires situés à l'ouest du Méridien de Greenwich (l'heure GMT et l'heure UTC sont identiques en pratique), l'opérateur est un signe négatif, puisque l'heure indiquée par hh:mm:ss est inférieure à l'heure GMT ; pour les fuseaux horaires situés à l'est du méridien de Greenwich, le décalage est un chiffre positif. Par exemple, la côte Ouest des États-Unis est à l'heure PST (Pacific Standard Time), qui est décalée de huit heures par rapport à l'heure GMT : Lorsqu'il est 18h00 dans la zone PST, il est 2h00 (le lendemain matin) sur le méridien de Greenwich. Les exemples suivants représentent donc tous exactement le même moment (l'indicateur de fuseau horaire apparaît ici en gras pour des raisons de lisibilité) :
1998-09-12T02:00:00Z | Heure GMT
1998-09-11T21:00:00-05:00 | Eastern Standard Time (côte Est des États-Unis)
1998-09-11T18:00:00-08:00 | Pacific Standard Time (côte Ouest des États-Unis)
1998-09-12T13:00:00+11:00 | Sydney, Australie
Pour plus de détails sur cette méthode de représentation de l'heure, voir la documentation sur la norme ISO-8601.
Par défaut Aucune.
TITLE | NN s.o. IE 4 HTML 4
TITLE=« commentaire » | Facultatif

Description de l'élément. Affiché comme info-bulle dans Internet Explorer 4. L'attribut TITLE permet également de stocker des informations destinées à l'attribut CITE. Toutefois, lorsqu'il est affecté à l'attribut TITLE, le texte est visible (en tout cas dans Internet Explorer 4) par l'utilisateur sous forme d'info-bulle.

Exemple
<DEL TITLE="Supprimé par JB">TexteSuppriméIci</DEL>
Valeur
Toute chaîne de caractères. Cette chaîne doit figurer entre guillemets (simples ou doubles, mais identiques).
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.all.IDélément.title


<DFN> | NN s.o. IE 3 HTML 3.2
<DFN>...</DFN> | Balise de fin : obligatoire

L'élément DFN appartient à un large groupe d'éléments que les recommandations HTML 4.0 appellent éléments de phrase. Ces éléments affectent une signification structurelle à une partie désignée du document. Un élément DFN indique la première utilisation d'un terme dans un document (son instance de définition). Une technique couramment utilisée consiste à mettre en italique les termes importants utilisés pour la première fois dans un document. Cette occurrence du terme coïncide généralement avec l'emplacement de sa définition, de sorte que le terme est compréhensible dans la suite du document. Par défaut, Internet Explorer met en italique tout le texte se trouvant dans un élément DFN. Vous pouvez naturellement définir votre propre style pour les éléments DFN à l'aide d'une règle de feuille de style.

Exemple
<P>Les compositeurs ménagent généralement une plage permettant aux solistes
de faire étalage de leur virtuosité tout en rappelant les différents thèmes
du mouvement. Cette partie du concerto est appelée <DFN>
cadence</DFN>. </P>
Référence de modèle d'objet
IE [window.]document.all.IDélément


<DIR> | NN tous IE tous HTML tous
<DIR>...</DIR> | Balise de fin : obligatoire

L'objectif initial de l'élément DIR était de permettre aux navigateurs de générer des listes d'éléments sur plusieurs colonnes. Pourtant, presque tous les navigateurs traitent l'élément DIR de la même façon que l'élément UL, en présentant une liste non ordonnée d'éléments (généralement précédés d'une puce) sur une seule colonne. L'élément DIR est déprécié en HTML 4. Il est conseillé de lui préférer l'élément UL dans tous les cas, car vous conserverez ainsi une compatibilité ascendante et descendante au cas où cet élément disparaîtrait totalement des navigateurs. Ces remarques sont également valables pour l'élément MENU, qui est lui aussi déprécié.

Exemple
Types de connecteurs DB répandus :
<DIR>
    <LI>DB-9
    <LI>DB-12
    <LI>DB-25
</DIR>
Référence de modèle d'objet
IE [window.]document.all.IDélément
COMPACT | NN s.o. IE 3 HTML 3.2
COMPACT | Facultatif

Attribut booléen conçu à l'origine pour permettre aux navigateurs d'afficher la liste sous une forme plus compacte que la normale (en réduisant l'interligne entre les éléments). Internet Explorer ignore cet attribut (bien que la documentation d'Internet Explorer 3 affirme qu'il est pris en charge).

Exemple
<DIR COMPACT>...</DIR>
Valeur
La présence de cet attribut définit sa valeur comme true (vrai).
Par défaut false


<DIV> | NN tous IE tous HTML 3.2
<DIV>...</DIV> | Balise de fin : obligatoire

L'élément DIV permet de définir une structure et un contexte pour tout contenu de niveau bloc dans un document. Contrairement à d'autres éléments structurels qui ont des connotations très spécifiques (par exemple l'élément P), l'auteur est libre de la signification et de la raison d'être de chaque élément DIV, en fonction de la valeur des attributs de cet élément et de la teneur de son contenu. Chaque élément SPAN devient un conteneur générique pour tout le contenu de niveau bloc qui est délimité par ses balises de début et de fin (obligatoires).

Ainsi, il est désormais conseillé d'utiliser l'élément DIV pour centrer du texte sur une page, plutôt que l'élément CENTER. L'élément DIV chargé de cette tâche comprend alors des informations de style qui se assurent le centrage du contenu. L'élément DIV convient également pour inclure un contenu composé de plusieurs éléments devant être régis par une même règle de style. Par exemple, si un bloc de contenu comprend trois paragraphes, au lieu d'affecter un style de police spécial à chaque élément P, vous pouvez inclure les trois éléments P dans un élément DIV unique dont la feuille de style définit le style de police requis. Cette feuille de style peut être de type incorporé, en étant définie à l'aide de l'attribut STYLE de l'élément DIV, ou être extérieure à celui-ci en étant définie à l'aide des attributs CLASS ou ID, selon la structure du reste du document.

Les éléments DIV sont des éléments de niveau bloc. Si vous recherchez un conteneur arbitraire pour du contenu n'étant pas de niveau bloc, utilisez l'élément DIV.

HTML 4.0 définit pour l'élément DIV un nombre d'attributs beaucoup plus élevé qu'il n'en est implémenté dans la version 4 des navigateurs. La richesse des attributs HTML témoigne de la puissance potentielle de cet élément générique pour inclure des liens vers des ressources et de nombreux attributs renseignant ces liens. Dans les spécifications HTML 4.0, le même ensemble d'attributs s'applique à l'élément SPAN.

Exemple
<DIV CLASS="sections" ID="section3">...</DIV>
Référence de modèle d'objet
IE [window.]document.all.IDélément
ALIGN | NN 2 IE 3 HTML 3.2
ALIGN=« constante_d'alignement » | Facultatif

L'attribut ALIGN détermine la manière dont le contenu inclus dans l'élément DIV est aligné au sein de cet élément. Cet attribut est déprécié en faveur de l'attribut de feuille de style text-align. Vous pouvez toutefois utiliser cet attribut pour assurer la compatibilité ascendante avec les navigateurs non conformes aux spécification CSS. Il s'agit de l'élément et de l'attribut que vous pouvez utiliser à la place de l'élément déprécié CENTER.

Exemple
<DIV ALIGN="center">Partie IV</DIV>
Valeur
Constante non sensible à la casse. Navigator 4 et Internet Explorer 4 (Windows) reconnaissent les quatre constantes HTML 4 : center | left | right | justify. Internet Explorer 4 pour Macintosh ne reconnaît pas la valeur justify.
Par défaut left ou right, selon la direction d'écriture de la langue courante.
Référence de modèle d'objet
IE [window.]document.all.IDélément.align
CHARSET | NN s.o. IE s.o. HTML 4
CHARSET=« code_de_caractères » | Facultatif

Codage de caractères du contenu de l'autre extrémité du lien HREF.

Exemple
<DIV CHARSET="csISO5427Cyrillic ">TexteCyrilliqueIci</DIV>
Valeur
L'un des alias (non sensibles à la casse) du registre de jeux de caractères qui figure à l'adresse ftp://ftp.isi.edu/in-notes/iana/assignments/character-sets.
Par défaut Suivant le navigateur.
DATAFLD | NN s.o. IE 4 HTML s.o.
DATAFLD=« nom_colonne » | Facultatif

Cet attribut est utilisé avec Internet Explorer 4 dans le cadre d'une liaison de données, pour associer le nom d'une colonne d'une source de données distante au contenu HTML d'un élément DIV. Cette colonne de source de données doit être en HTML (voir DATAFORMATAS). Les attributs DATASRC et DATAFORMATAS de l'élément DIV doivent également être définis.

Exemple
<DIV  DATASRC="#DBSRC3" DATAFLD="sec3" DATAFORMATAS="HTML"> </DIV>
Valeur
Identifiant sensible à la casse.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.all.IDélément.dataFld
DATAFORMATAS | NN s.o. IE 4 HTML s.o.
DATAFORMATAS=« type_de_données » | Facultatif

Cet attribut est utilisé avec Internet Explorer 4 dans le cadre d'une liaison de données, pour indiquer au navigateur si les informations qui proviennent de la source de données doivent être traitées comme du texte brut ou du texte HTML avec balises. Un élément DIV ne doit recevoir que des données de format HTML.

Exemple
<DIV  DATASRC="#DBSRC3" DATAFLD="sec3" DATAFORMATAS="HTML"> </DIV>
Valeur
IE 4 reconnaît deux valeurs possibles : text | HTML
Par défaut text
Référence de modèle d'objet
IE [window.]document.all.IDélément.dataFormatAs
DATASRC | NN s.o. IE 4 HTML s.o.
DATASRC=« nom_source_de_données » | Facultatif

Utilisé avec la liaison de données d'Internet Explorer 4 pour déterminer la source de données ODBC distante (une base de données Oracle ou SQL par exemple) à associer à l'élément. Le contenu de la source de données est spécifié à l'aide de l'attribut DATAFLD.

Exemple
<DIV  DATASRC="#DBSRC3" DATAFLD="sec3" DATAFORMATAS="HTML"> </DIV>
Valeur
Identifiant sensible à la casse.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.all.IDélément.dataSrc
HREF | NN s.o. IE s.o. HTML 4
HREF=« URI » | Facultatif

D'après les spécifications HTML 4.0, l'attribut HREF est destiné à contenir l'adresse URL d'une ressource pouvant fournir « plus d'informations » sur le contenu de l'élément DIV. Rien n'indique si cette adresse URL doit être affichée d'une façon quelconque (comme l'attribut HREF d'un élément A). Il est possible qu'un futur navigateur utilise cette adresse URL pour générer une note de marge ou une note de pied de page sous forme d'un lien. Plusieurs autres attributs laissent clairement penser que l'adresse URL de l'attribut HREF est destinée à être accessible d'une façon ou d'une autre par l'utilisateur.

Exemple
<DIV HREF="bibliogs/chap3.html">ContenuChapitreTroisIci</DIV>
Valeur
N'importe quelle adresse URL valide, notamment des adresses URL complètes et relatives, des ancres figurant sur la même page (et dont le nom doit être précédé du caractère #, dans les navigateurs prenant en charge les scripts, la pseudo-URL javascript: pour exécuter une instruction de script au lieu d'être dirigé vers une destination.
Par défaut Aucune.
HREFLANG | NN s.o. IE s.o. HTML 4
HREFLANG=« code_langue » | Facultatif

Le code de langue du contenu de la page de destination d'un lien. L'attribut HREF doit obligatoirement être également défini. Cet attribut est essentiellement destiné à permettre au navigateur de se préparer à traiter une nouvelle langue, s'il en est capable.

Exemple
<DIV HREFLANG="HI" HREF="bibliogs/hindi/chap3.html">
ContenuChapitreTroisEnHindiIci
</DIV>
Valeur
Code de langue (constante texte) non sensible à la casse.
Par défaut Valeur par défaut du navigateur.
MEDIA | NN s.o. IE s.o. HTML 4
MEDIA=« liste_descriptive » | Facultatif

Définit le périphérique de sortie prévu pour le contenu de l'élément DIV. L'attribut MEDIA sera particulièrement utile le jour où les navigateurs seront en mesure d'adapter le contenu en fonction de types de périphériques spécifiques (ordinateurs de poche, synthétiseurs vocaux, téléviseurs, etc.) Les spécifications HTML 4.0 définissent un certain nombre de constantes pour des périphériques déjà prévus, mais la liste est ouverte, et de futurs navigateurs pourront adapter le contenu à d'autres types de médias et de périphériques.

Exemple
<DIV MEDIA="screen, tv, handheld">...</DIV>
Valeur
Constante sensible à la casse. Plusieurs valeurs peuvent être regroupées (elles seront alors séparées par des virgules) au sein d'une liste incluse entre guillemets. Les valeurs définies en HTML 4.0 sont les suivantes : screen | tty | tv | projection | handheld | print | braille | aural | all.
Par défaut screen
REL | NN s.o. IE s.o. HTML 4
REL=« types_de_liens » | Facultatif

Définit la relation entre l'élément courant et la destination du lien. Également connu sous le nom de relation de lien positive, à ne pas confondre avec le document de destination dont l'adresse est définie par l'attribut HREF. Les recommandations HTML 4.0 définissent plusieurs types de liens, en laissant au navigateur le soin de déterminer comment employer ces valeurs. Cet élément doit comporter un attribut HREF pour que l'attribut REL puisse être appliqué.

Exemple
<DIV REL="next chapter" HREF="chapter3.html">...</DIV>
Valeur
Types de liens standard HTML 4.0 applicables à l'élément, insensibles à la casse et séparés par un espace dans une liste. Quelques types de liens approuvés :
alternate | contents | index | start
appendix | copyright | next | stylesheet
bookmark | glossary | prev | subsection
chapter | help | section |
Par défaut Aucune.
REV | NN s.o. IE s.o. HTML 4
REV=« types_de_liens » | Facultatif

Définit une relation de lien inversé. Comme pour l'attribut REL, les possibilités de l'attribut REV dépendent du navigateur, en particulier pour la façon dont celui-ci interprète et affiche les divers types de liens disponibles dans les spécifications HTML 4.0. Si deux documents (A et B) contiennent des liens pointant, pour chaque document, vers l'autre document, la valeur de l'attribut REV dans B exprimera la même relation entre ces deux documents que celle de l'attribut REL dans A.

Exemple
<DIV REV="previous chapter" HREF="chapter2.html">...</DIV>
Valeur
Types de liens standard HTML 4.0 applicables à l'élément, insensibles à la casse et séparés par un espace dans une liste. Voir l'attribut REL pour plus d'informations sur les types de liens approuvés.
Par défaut Aucune.
TARGET | NN s.o. IE s.o. HTML 4
TARGET=« nom_de_fenêtre_ou_de_cadre » | Facultatif

Si le document cible associé à l'attribut HREF doit être chargé dans une fenêtre ou dans un cadre autres que la fenêtre ou le cadre actuels, vous pouvez préciser l'endroit où il doit s'afficher en associant un nom de fenêtre ou de cadre à l'attribut TARGET. Il faut impérativement affecter un nom aux cadres et aux fenêtres cibles afin de les identifier. Pour attribuer un nom à un cadre, utilisez l'attribut NAME de l'élément FRAME ; pour attribuer un nom à une nouvelle fenêtre, utilisez le second paramètre de la méthode de script window.open(). Si vous omettez cet attribut, le document cible s'affiche à la place du document contenant le lien. Cet attribut s'applique uniquement lorsqu'une valeur est affectée à l'attribut HREF de l'élément.

Si cette fonctionnalité est implémentée dans les futurs navigateurs, il est probable que l'élément DIV n'aura qu'un document de destination et une cible (comme l'élément A). Si vous voulez qu'un lien change le contenu de plusieurs cadres, vous pouvez utiliser le gestionnaire d'événements onClick d'un élément DIV ou la pseudo-URL javascript : pour exécuter un script chargeant plusieurs documents. Associez l'adresse URL voulue à la propriété location.href de chaque cadre.

Exemple
<DIV TARGET="display" HREF="chap3.html#sec2">...</DIV>
Valeur
identifiant sensible à la casse lorsque le nom du cadre ou de la fenêtre cible a été défini à l'aide de l'attribut NAME dans l'élément cible. Il existe quatre constantes, qui sont des mots réservés désignant des types de cibles :
_blank | Le navigateur crée une nouvelle fenêtre pour le document de destination.
_parent | Le document de destination remplace le jeu de cadres du document courant (s'il existe un jeu de cadres, sinon le document est traité comme avec _self).
_self | Le document de destination remplace le document actuel dans sa fenêtre ou son cadre.
_top | Le document de destination doit occuper toute la fenêtre du navigateur, en remplaçant l'éventuel jeu de cadres qui y serait chargé (s'il n'existe pas de jeu de cadres, le document est traité comme avec _self).
Par défaut _self
TITLE | NN s.o. IE 4 HTML 4
TITLE=« commentaire » | Facultatif

Description du document de destination. Internet Explorer 4 implémente cet attribut de manière à ce que le navigateur affiche une info-bulle indiquant la valeur de l'attribut lorsque le curseur est positionné sur l'élément pendant quelques secondes. L'aspect de l'info-bulle dépend de la version de système d'exploitation du navigateur. Dans la version Windows, l'info-bulle est le petit rectangle jaune clair standard ; dans la version Macintosh, l'info-bulle s'affiche comme une bulle de BD, à la manière du système d'aide de MacOS. Si aucun attribut n'est spécifié, l'info-bulle ne s'affiche pas.

Utilisez cet attribut avec prudence. Certains éléments DIV étant d'assez grande taille, il est possible que le curseur se trouve fréquemment positionné dessus si l'utilisateur n'y est pas attentif. L'affichage permanent de l'info-bulle sur une grande partie de l'écran pourrait être gênant.

Vous pouvez affecter à cet attribut le texte descriptif de votre choix. Étant donné que tout le monde ne le verra pas, n'y placez pas d'informations essentielles. Peut-être les navigateurs de demain liront-ils ces informations d'attribut à l'adresse des utilisateurs malvoyants.

Exemple
<DIV TITLE="Afrique subsaharienne" HREF="chapter3.html">...</DIV>
Valeur
Toute chaîne de caractères. Cette chaîne doit figurer entre guillemets (simples ou doubles, mais identiques).
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.all.IDélément.title
TYPE | NN s.o. IE s.o. HTML 4
TYPE=« type_MIME » | Facultatif

Indication sur le type de contenu de document ou de la ressource de destination. Cette information peut aider un navigateur à préparer la prise en charge d'une ressource nécessitant un composant logiciel multimédia.

Exemple
<DIV TYPE="video/mpeg" HREF="ski4.mpeg">...</DIV>
Valeur
Type MIME non sensible à la casse. Un catalogue des types MIME enregistrés figure à l'adresse (ftp://ftp.isi.edu/in-notes/iana/assignments/media-types).
Par défaut Aucune.


<DL> | NN tous IE tous HTML tous
<DL>...</DL> | Balise de fin : obligatoire

L'élément DL fait partie du trio d'éléments DL, DT, DD utilisés pour créer une liste de définitions dans un document. Cette liste est délimitée par les balises de l'élément DL. Chaque terme défini est indiqué par une balise d'élément DT, et la définition du terme par une balise d'élément DD. Voici la présentation schématique d'une séquence de liste de définitions contenant trois éléments :

<DL>
    <DT>Terme 1
    <DD>Définition 1
    <DT>Terme 2
    <DD>Définition 2
    <DT>Terme 3
    <DD>Définition 3
</DL>

La liste entière doit être fermée par la balise de fin de l'élément conteneur DL. Notez que l'élément DL est le conteneur de la liste entière, ce qui signifie que les règles de style héritées affectées à l'élément DL s'appliquent aux éléments DT et DD qui y sont imbriqués. Vous pouvez modifier les règles héritées indésirables directement dans les éléments DT et DD.

Bien que les spécifications HTML n'imposent aucune manière particulière d'afficher une liste de définitions, Navigator et Internet Explorer s'entendent pour aligner à gauche un élément DT et indenter tout élément DD situé derrière. Le navigateur n'ajoute aucune mise en forme de police ou élément visuel particulier, mais vous êtes libre d'affecter des styles à votre guise. Si vous voulez empiler plusieurs termes et/ou définitions, vous pouvez placer plusieurs éléments DT et / ou DD les uns derrière les autres dans le code source.

Le HTML étant axé sur un balisage sensible au contexte, évitez d'utiliser des listes de définitions uniquement comme moyen de mise en forme (pour obtenir du texte indenté). Utilisez des feuilles de style et des paramètres de marge variable pour la mise en forme.

Exemple
<DL>
    <DT>Z-scale
    <DD>Avec une échelle de réduction de 1:220, il s'agit du plus petit
    modèle miniature jamais produit en série.
</DL>
Référence de modèle d'objet
IE [window.]document.all.IDélément
COMPACT | NN 3 IE 3 HTML 3.2
COMPACT | Facultatif

Lorsque l'attribut booléen COMPACT est paramétré sur true (en vertu de sa présence dans la balise d'élément DL), il indique au navigateur d'afficher une paire d'éléments DT et DD sur la même ligne si l'espace le permet. Le critère permettant de déterminer cet espace (tel qu'il est calculé dans Navigator et Internet Explorer) est lié à l'importance de l'indentation normalement affectée à un élément DD (les systèmes d'exploitation utilisent une taille d'indentation légèrement différente). Lorsque l'attribut COMPACT est activé, si l'élément DT est plus étroit que l'espace d'indentation, l'élément DD de la ligne suivante est affiché sur la même ligne que son élément DT. Comme la largeur de caractères des polices proportionnelles varie énormément, il n'existe pas de règle univoque permettant de déterminer le nombre de caractères que doit compter un élément DT pour permettre l'affichage de l'élément DD sur la même ligne. Toutefois, ce style compact est destiné aux éléments DT composés d'un nombre réduit de caractères.

Exemple
<DL COMPACT>éléments_de_la_liste</DL>
Valeur
Nom d'attribut non sensible à la casse. Sa présence seule définit sa valeur comme true.
Par défaut false
Référence de modèle d'objet
IE [window.]document.all.IDélément.compact


<DT> | NN tous IE tous HTML tous
<DT>...</DT> | Balise de fin : facultative

L'élément DT fait partie du trio d'éléments DL, DT, DD utilisés pour créer une liste de définitions dans un document. La liste est délimitée par les balises de l'élément DL. Chaque terme défini est indiqué par une balise d'élément DT, et la définition du terme par une balise d'élément DD. Voici la présentation schématique d'une séquence de liste de définitions contenant trois éléments :

<DL>
    <DT>Terme 1
    <DD>Définition 1
    <DT>Terme 2
    <DD>Définition 2
    <DT>Terme 3
    <DD>Définition 3
</DL>

Un élément DT est un élément incorporé, tandis qu'un élément DD peut avoir un contenu de niveau bloc, comprenant du texte entouré d'une bordure, des images et autres objets. Les balises de fin sont facultatives pour les deux éléments DT et DD ; en effet, la balise de début suivante marque automatiquement la fin de l'élément précédent. La liste entière doit cependant être fermée par la balise de fin de l'élément conteneur DL.

Bien que les spécifications HTML n'imposent aucune manière particulière d'afficher une liste de définitions, Navigator et Internet Explorer s'entendent pour aligner à gauche un élément DT et indenter tout élément DD situé derrière. Le navigateur n'ajoute aucune mise en forme de police ou élément visuel particulier, mais vous êtes libre d'affecter des styles à votre guise. Si vous voulez empiler plusieurs termes et/ou définitions, vous pouvez placer plusieurs éléments DT et / ou DD les uns derrière les autres dans le code source.

Le HTML étant axé sur un balisage sensible au contexte, évitez d'utiliser des listes de définitions uniquement comme moyen de mise en forme (pour obtenir du texte indenté). Utilisez des feuilles de style et des paramètres de marge variable pour la mise en forme.

Dans Navigator 4, les styles affectés aux éléments DT et DD au moyen de l'attribut CLASS, ID ou STYLE ne fonctionnent pas. Si vous voulez affecter les mêmes attributs de style aux éléments DT et DD, affectez le style à l'élément DL ; sinon, entourez les éléments DT et DD d'un élément SPAN dont les éléments imbriqués DT et DD hériteront du style. Ce palliatif est observé dans Internet Explorer 4, bien qu'il ne soit pas nécessaire pour les documents uniquement destinés à Internet Explorer 4.

Exemple
<DL>
    <DT>Z-scale
    <DD>Avec une échelle de réduction de 1:220, il s'agit du plus petit
    modèle miniature jamais produit en série.
</DL>
Référence de modèle d'objet
IE [window.]document.all.IDélément


<EM> | NN tous IE tous HTML tous
<EM>...</EM> | Balise de fin : obligatoire

L'élément EM appartient à un large groupe d'éléments que les recommandations HTML 4.0 nomment éléments de phrase. Ces éléments affectent une signification structurelle à une partie désignée du document. Un élément EM doit s'afficher différemment du corps du texte, afin d'être mis en évidence.

Les navigateurs sont libres de déterminer comment faire la distinction (ou même s'il est nécessaire de faire la distinction) entre le contenu de l'élément EM et le reste du contenu de l'élément BODY. Navigator et Internet Explorer affichent tous deux ce texte en italique. Vous pouvez toutefois modifier ce comportement à l'aide d'une feuille de style.

Exemple
<P>La nuit était noire et les eaux tumultueuses de la rivière étaient <EM>très</EM>
froides.</P>
Référence de modèle d'objet
IE [window.]document.all.IDélément


<EMBED> | NN 2 IE 3 HTML s.o.
<EMBED>...</EMBED> | Balise de fin : obligatoire

Un élément EMBED permet de charger des types d'objet multimédia et de fichier autres que ceux affichés de façon native par le navigateur. En général, un plug-in ou une application auxiliaire est nécessaire pour charger ces données externes et afficher le fichier correspondant correctement. Cet élément est pris en charge par Navigator et Internet Explorer depuis les versions 2 et 3, mais il ne fait toujours pas partie du vocabulaire HTML standard. Les spécifications HTML 4.0 recommandent d'utiliser l'élément OBJECT pour charger le type de données externes prises en charge par l'élément EMBED dans les navigateurs. Navigator 4 et Internet Explorer 4 prennent également en charge l'élément OBJECT, si bien qu'il est conseillé de l'utiliser pour les éléments incorporés si la technologie du navigateur de votre visiteur le prend en charge.

N'oubliez pas que, pour les types de données qui exécutent des plug-ins, le panneau de contrôle affiché varie largement en fonction du navigateur, du système d'exploitation et des plug-ins que l'utilisateur a installés pour ce type de données particulier. Il est hasardeux de tenter de concevoir une présentation combinant le panneau de contrôle d'un plug-in avec du texte environnant ou d'autres éléments.

La liste des attributs de l'élément EMBED est longue, et il convient d'être particulièrement attentif au niveau de la compatibilité de chaque attribut avec les divers navigateurs. Les jeux d'attributs des deux navigateurs diffèrent, au même titre que leurs technologies de plug-in. Il est cependant possible d'incorporer, dans un document, un élément EMBED compatible avec les deux navigateurs, pour autant qu'il ne repose pas sur un paramétrage d'attribut non pris en charge par l'un des navigateurs. Toutefois, certains plug-ins peuvent nécessiter ou accepter des paires nom / valeur non répertoriées pour cet élément. Dans le cas de Navigator, tous les attributs (y compris ceux qui sont normalement ignorés par le navigateur) et leurs valeurs sont transmis au plug-in. C'est pourquoi il convient de consulter la documentation relative au plug-in afin de déterminer si des attributs supplémentaires sont pris en charge. L'élément OBJECT contourne ce problème d'attribut spécifique à l'objet en permettant d'ajouter un nombre quelconque d'éléments PARAM adaptés à l'objet.

La balise de fin est obligatoire pour Internet Explorer 4, mais pas pour Navigator 4.

Exemple
<EMBED NAME="jukebox" SRC="jazz.aif" HEIGHT=100 WIDTH=200></EMBED>
Référence de modèle d'objet
NN | [window.]document.nom_élément
IE | [window.]document.all.IDélément
ALIGN | NN tous IE 4 HTML s.o.
ALIGN=« alignement » | Facultatif

Si l'objet incorporé (ou le panneau de contrôle du composant multimédia) occupe un espace sur la page, l'attribut ALIGN détermine l'affichage de l'objet par rapport au conteneur parent immédiat de l'élément. Si un texte supplémentaire doit s'insérer entre les balises de début et de fin de l'élément EMBED, l'attribut ALIGN affecte également l'affichage du texte par rapport à l'espace rectangulaire de l'objet.

La plupart des règles concernant les constantes d'alignement indiquées au début de ce chapitre s'appliquent à l'élément EMBED. Il est difficile pour l'auteur de la page HTML d'en déterminer précisément la présentation, du fait qu'il ne maîtrise pas le panneau de contrôle du plug-in qui s'affiche. Des dimensions d'élément adéquates pour un panneau de contrôle donné peuvent être inadéquates pour un autre (songeons, par exemple, à la différence entre l'épais panneau de contrôle audio de Netscape et l'étroit curseur horizontal d'Internet Explorer).

Généralement, l'attribut ALIGN est déprécié en HTML 4.0, qui conseille d'utiliser l'attribut align: dans une feuille de style. Mais vous pouvez utiliser l'attribut ALIGN si vous utilisez l'élément EMBED afin d'assurer la compatibilité ascendante.

Exemple
<EMBED SRC="jazz.aif" ALIGN="left" HEIGHT=100 WIDTH=200></EMBED>
Valeur
Chaque navigateur définit un ensemble de valeurs différent pour cet attribut. Sélectionnez dans le tableau suivant celle(s) qui conviennent :
Valeur NN 4 IE 4
absbottom
         - *
absmiddle
         - *
baseline
         - *
bottom
         * *
left
         * *
middle
         * *
right
         * *
texttop
         - *
top
         * *
Par défaut bottom
Référence de modèle d'objet
IE [window.]document.all.IDélément.align
ALT | NN s.o. IE 4 HTML s.o.
ALT=« texte » | Facultatif

Si Internet Explorer n'est pas capable de charger et exécuter l'objet multimédia externe, le texte affecté à l'attribut ALT est supposé s'afficher dans le document à l'emplacement de l'élément EMBED. Ce texte indique généralement à l'utilisateur ce qui s'afficherait si les données avaient pu être chargées (Internet Explorer affiche également une boîte de dialogue indiquant comment accéder à des informations en ligne sur le plug-in).

Utilisez l'attribut ALT avec prudence. Si les données externes ne constituent pas un élément essentiel du contenu de votre page, il est sans doute préférable de ne pas attirer l'attention sur le contrôleur d'objet multimédia manquant dans les navigateurs les moins complets. Un message d'explication peut être plus gênant pour l'utilisateur que l'absence de lecteur d'objet multimédia.

Navigator offre des possibilités équivalentes avec l'élément NOEMBED.

Exemple
<EMBED SRC="jazz.aif" ALT="son Media Player" HEIGHT=10 WIDTH=20></EMBED>
Valeur
Chaîne de caractères quelconque entre guillemets.
Par défaut Aucune.
BORDER | NN 2 IE s.o. HTML s.o.
BORDER=« taille_en_pixels » | Facultatif

Navigator comporte un attribut spécial permettant d'indiquer l'épaisseur de la bordure qui encadre un élément EMBED. Il semble que cet attribut ne fonctionne pas dans Navigator 4. De même, lorsque des attributs de feuille de style sont associés à l'élément EMBED, le fait de définir une bordure pour l'élément entraîne l'affichage d'une bordure flottante entourant un petit carré situé hors de la zone de l'élément EMBED.

Exemple
<EMBED SRC="jazz.aif" BORDER=3 HEIGHT=150 WIDTH=250></EMBED>
Valeur
Un nombre entier de pixels.
Par défaut Aucune.
CODE | NN s.o. IE 4 HTML s.o.
CODE=« nom_fichier.class » | Obligatoire
La raison pour laquelle Microsoft spécifie l'attribut CODE pour l'élément EMBEDn'est pas évidente. Généralement, un attribut CODE pointe sur un nom de fichier de classe Java. Il est théoriquement possible de charger dans un document une applet via l'élément EMBED (plutôt qu'avec l'élément APPLET ou OBJECT), mais cette approche ne fonctionne pas dans Internet Explorer 4. L'élément CODEBASE n'aide pas davantage le navigateur à trouver le nom de fichier de classe d'applet Java affecté à l'attribut SRC. Il est recommandé d'éviter d'utiliser cet attribut.
CODEBASE | NN s.o. IE 4 HTML s.o.
CODEBASE=« chemin » | Facultatif
Tout comme l'attribut CODE, il semble qu'Internet Explorer 4 ignore l'attribut CODEBASE pour l'élément EMBED, contrairement à ce qu'indique la documentation du SDK. L'attribut SRC doit contenir le chemin d'accès au fichier de données, car il ne repose pas sur la valeur de l'attribut CODEBASE. Il est recommandé d'éviter d'utiliser cet attribut.
FRAMEBORDER | NN 2 IE s.o. HTML s.o.
FRAMEBORDER="yes" | "no" | Facultatif

Concurrent de la définition des bordures par feuille de style, l'attribut FRAMEBORDER est un commutateur permettant d'activer la bordure du panneau de contrôle d'un plug-in (dont l'épaisseur est définie par l'attribut BORDER). Dans Navigator 4, il semble que cet attribut ne fonctionne pas et que la bordure de feuille de style ait un comportement aléatoire.

Exemple
<EMBED SRC="jazz.aif" FRAMEBORDER="no" HEIGHT=150 WIDTH=250></EMBED>
Valeur
yes | no
Par défaut yes
HEIGHT, WIDTH NN 2 IE 3 HTML s.o.
HEIGHT=« hauteur »
WIDTH=« largeur » 		Obligatoire

L'espace occupé dans un document par un objet imbriqué (ou par le panneau de contrôle de son plug-in) est défini par les valeurs des attributs HEIGHT et WIDTH. Dans certaines versions des navigateurs, ces attributs n'ont pas besoin d'être définis ; c'est alors l'interface utilisateur même du plug-in qui détermine la hauteur et la largeur de son rectangle visible. Dans la mesure du possible, il est préférable de spécifier les dimensions exactes du panneau de contrôle d'un plug-in (les panneaux de contrôle diffèrent d'un navigateur à l'autre, voire entre les différents plug-ins destinés au même navigateur). Dans certains cas, par exemple avec Navigator 4 pour Macintosh, le panneau de contrôle peut ne pas s'afficher du tout si vous n'indiquez pas une hauteur suffisante sur la page. Si vous indiquez des valeurs supérieures aux dimensions réelles du panneau de contrôle, le navigateur réserve cet espace vide sur la page, ce qui peut altérer la mise en page désirée.

Exemple
<EMBED SRC="jazz.aif" HEIGHT=150 WIDTH=250></EMBED>
Valeur
Entier positif (éventuellement entre guillemets) ou pourcentage (entre guillemets). Vous ne pouvez pas masquer entièrement le panneau de contrôle d'un objet incorporé en lui affectant la valeur zéro (un pixel occupe toujours de l'espace) mais vous pouvez le réduire jusqu'à une dimension de 1 pixel de côté. Pour masquer un plug-in, vous devez utiliser DHTML et affecter la valeur none à son attribut display. Navigator comprend également un attribut HIDDEN offrant une compatibilité ascendante avec les navigateurs de Netscape.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.embeds[i].height
[window.]document.IDélément.height
[window.]document.embeds[i].width
[window.]document.IDélément.width
HIDDEN | NN 2 IE 4 HTML s.o.
HIDDEN="true" | "false" | Facultatif

Concurrent de la définition des bordures par feuille de style, l'attribut HIDDEN est un commutateur permettant de définir si le panneau de contrôle du plug-in des données incorporées s'affiche à l'écran. Ce peut être souhaitable pour une musique en arrière-plan sous un contrôle de script (via LiveConnect de Netscape). La définition de l'attribut HIDDEN annule l'effet des attributs HEIGHT et WIDTH.

Exemple
<EMBED SRC="soothing.aif" HIDDEN></EMBED>
Valeur
true | false
Par défaut false
Référence de modèle d'objet
IE [window.]document.embeds[i].hidden
[window.]document.IDélément.hidden
HSPACE, VSPACE NN 2 IE 3 HTML s.o.
HSPACE=« taille_en_pixels »
VSPACE=« taille_en_pixels » 		Facultatif

Concurrents de la définition des marges par feuille de style, les attributs HSPACE et VSPACE permettent de définir une marge de réserve autour du contenu visuel de l'élément EMBED. L'attribut HSPACE définit une marge sur les côtés gauche et droit du rectangle ; l'attribut VSPACE définit une marge sur les côtés inférieur et supérieur du rectangle. Il semble que cet attribut fonctionne dans Navigator 4, mais pas dans Internet Explorer 4. Il est probable que ces attributs, qui n'ont pas de propriétés contrôlables par script équivalentes pour l'élément EMBED, ne sont pas pris en charge par Internet Explorer 4, quoiqu'en dise le SDK de Microsoft.

Exemple
<EMBED SRC="soothing.aif" VSPACE=10 HSPACE=10></EMBED>
Valeur
Un entier représentant le nombre de pixels désiré pour la largeur de marge sur les côtés du rectangle de l'élément EMBED.
Par défaut 0
ID | NN s.o. IE 4 HTML s.o.
ID=« IDélément » | Facultatif

Identifiant unique distinguant cet élément du reste du document. Il permet d'associer un élément à une règle de style, en utilisant la valeur de cet attribut comme ID de sélecteur. Un élément peut recevoir un ID qui en assurera l'unicité, ainsi qu'une classe qui le rattachera à un groupe. Voir .

Si vous déclarez un attribut ID et ne déclarez pas d'attribut NAME, la valeur de l'attribut ID peut être utilisée de façon fiable comme nom de l'élément dans les diverses instructions de script d'Internet Explorer qui utilisent le nom de l'élément (document.all.embedName).

Exemple
<EMBED ID="jazzSound" SRC="jazz.aif" HEIGHT=15 WIDTH=25></EMBED>
Valeur
Identifiant sensible à la casse.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.embeds[i].id
[window.]document.IDélément.id
NAME | NN 2 IE 3 HTML s.o.
NAME=« IDélément » | Facultatif

Pour contrôler un plug-in à l'aide d'un script (en particulier dans Navigator, via LiveConnect), il est en général plus pratique de créer une référence à l'élément incorporé en lui affectant un nom unique. Par la suite, si vous modifiez la page et déplacez ou effacez plusieurs éléments EMBED de cette page, vous n'aurez pas à vous soucier de modifier les valeurs d'index comme c'est le cas pour un référencement en tableau (document.embeds[i]).

Exemple
<EMBED NAME="jukebox" SRC="jazz.aif" HEIGHT=15 WIDTH=25></EMBED>
Valeur
Identifiant sensible à la casse.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.embeds[i].name
[window.]document.IDélément.name
PALETTE | NN 2 IE 4 HTML s.o.
PALETTE="foreground" | "background" | Facultatif

La documentation de Netscape indique que l'attribut PALETTE permet d'appliquer la palette de premier plan et d'arrière-plan au plug-in appelé par l'élément EMBED, mais uniquement dans l'environnement Windows.

Exemple
<EMBED NAME="jukebox" SRC="jazz.aif" HEIGHT=150 WIDTH=250 PALETTE="foreground">
</EMBED>
Valeur
Constante insensible à la casse : foreground | background
Par défaut background
Référence de modèle d'objet
IE [window.]document.embeds[i].palette
[window.]document.IDélément.palette
PLUGINSPAGE | NN 2 IE s.o. HTML s.o.
PLUGINSPAGE=« adresse_URL » | Facultatif

Si le type MIME du fichier de données affecté à l'attribut SRC de l'élément EMBED n'est pas pris en charge par un plug-in ou une application auxiliaire existant, l'attribut PLUGINSPAGE a pour rôle de fournir une adresse URL pour le téléchargement et l'installation du plug-in nécessaire. Si vous omettez cet attribut, Navigator affiche un lien générique pointant sur la liste des fournisseurs de plug-in pour Netscape.

Exemple
<EMBED NAME="jukebox" SRC="jazz.aif" HEIGHT=150 WIDTH=250
PLUGINSPAGE="http://www.giantco.com/plugin/install/index.html">
</EMBED>
Valeur
Une adresse URL valide.
Par défaut Aucune.
PLUGINURL | NN 4 IE s.o. HTML s.o.
PLUGINURL=« adresse_URL » | Facultatif

Navigator 4 permet, grâce à une fonction appelée Smart Update, de procéder à une installation quasiment automatique de ses composants. Si un utilisateur ne dispose pas du plug-in nécessaire pour le type de données de votre élément EMBED, PLUGINURL peut pointer sur un fichier Java Archive (JAR) contenant le plug-in et des objets signés numériquement, afin de répondre aux problèmes de sécurité liés à l'installation automatique (via le gestionnaire d'installation Java de Netscape). Les fichiers JAR sont des fichiers signés numériquement et compressés (selon une technique comparable à celle des fichiers .zip), générés à l'aide de l'outil JAR Packager de Netscape.

Vous pouvez inclure les attributs PLUGINSPAGE et PLUGINURL dans la balise d'un élément EMBED afin de gérer la version de navigateur appropriée. Les versions 2 et 3 de Navigator répondent à l'attribut PLUGINSPAGE, tandis que Navigator 4 donne la priorité à l'attribut PLUGINURL lorsqu'il est présent.

Exemple
<EMBED NAME="jukebox" SRC="jazz.aif" HEIGHT=150 WIDTH=250
PLUGINURL="http://www.giantco.com/plugin/install.jar">
</EMBED>
Valeur
Toute adresse URL valide d'un fichier JAR.
Par défaut Aucune.
SRC | NN 2 IE 3 HTML s.o.
SRC=« adresse_URL » | Facultatif

L'attribut SRC est l'adresse URL d'un fichier contenant des données lues par le plug-in. Le plus souvent, l'attribut EMBED est obligatoire, mais il arrive qu'il ne soit pas indispensable (voir la section consacrée à l'attribut TYPE). Les navigateurs utilisent généralement l'extension du nom de fichier pour déterminer le plug-in à charger (en fonction des paramètres de préférence définis dans le navigateur pour les plug-ins et les applications auxiliaires).

Exemple
<EMBED NAME="babyClip" SRC="Ugachaka.avi" HEIGHT=150 WIDTH=250></EMBED>
Valeur
Une adresse URL complète ou relative.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.embeds[i].src
[window.]document.IDélément.src
TYPE | NN 2 IE s.o. HTML s.o.
TYPE=« type_MIME » | Facultatif

Navigator a prévu la possibilité d'un plug-in ne nécessitant pas de fichier de données externe. Un plug-in de ce type ressemble plutôt à une applet. Pour placer un plug-in de ce type dans votre document, utilisez l'élément EMBED en spécifiant le type MIME plutôt que l'adresse URL du fichier de données (dans l'attribut SRC). Cela suppose, naturellement, que la nature du type MIME soit si particulière qu'il ne puisse y avoir qu'un seul plug-in mappé sur ce type MIME dans les paramètres du navigateur. L'un des attributs SRC ou TYPE doit figurer dans une balise d'élément EMBED de Navigator.

Exemple
<EMBED TYPE="application/x-frobnitz" HEIGHT=150 WIDTH=250></EMBED>
Valeur
Tout nom de type MIME valide, sous forme d'une chaîne de caractères entre guillemets, comprenant les parties type et sous-type délimitées par une barre oblique.
Par défaut Aucune.
UNITS | NN 2 IE 3 HTML s.o.
UNITS=« type_unité_de_mesure » | Facultatif

L'attribut UNITS est censé indiquer le type d'unité de mesure utilisé pour les valeurs d'attribut HEIGHT et WIDTH de l'élément. Navigator 4 et Internet Explorer 4 semblent traiter les mesures en pixels, quel que soit le paramétrage de cet attribut.

Exemple
<EMBED SRC="jazz.aif" HEIGHT=150 WIDTH=250 UNITS="en"></EMBED>
Valeur
Non seulement cet attribut ne semble pas influencer l'affichage d'un élément EMBED, mais Navigator 4 et Internet Explorer 4 divergent quant à la graphie précise et aux unités disponibles pour les valeurs. Navigator 4 propose le choix entre pixels ou en, tandis que Internet Explorer utilise px ou em.
Par défaut pixels (ou px).
Référence de modèle d'objet
IE [window.]document.embeds[i].units
[window.]document.IDélément.units


<FIELDSET> | NN s.o. IE 4 HTML 4
<FIELDSET>...</FIELDSET> | Balise de fin : obligatoire

Un élément FIELDSET est un conteneur structurel pour des éléments de formulaires (par opposition au rôle de conteneur fonctionnel de l'élément FORM). En fait, vous pouvez définir plusieurs éléments FIELDSET à l'intérieur d'un même élément FORM afin de fournir un contexte à des groupes logiques d'éléments de formulaires. Par exemple, un élément FIELDSET peut contenir des champs de saisie de texte pour les informations de nom et d'adresse, et un autre élément FIELDSET peut être dédié aux informations relatives à une carte de crédit. Dans le type d'applications visées par les spécifications HTML 4.0, les visiteurs pourraient utiliser des touches d'accès pour naviguer d'un groupe à l'autre, au lieu d'utiliser sans cesse la touche de tabulation pour passer au groupe suivant.

Internet Explorer 4 renforce l'attrait de cet élément en traçant automatiquement une ligne autour des éléments de formulaire de chaque conteneur FIELDSET. Vous pouvez également associer une étiquette à inclure à l'intérieur de ce cadre, en définissant un élément LEGEND juste après la balise de début d'un élément FIELDSET. Lorsque Internet Explorer 4 trace ce cadre, celui-ci s'étend sur toute la largeur du conteneur parent immédiat, qui est généralement le document. Si vous préférez que le tracé du cadre épouse de plus près les éléments de formulaire visibles, définissez la propriété de feuille de style width. Malheureusement, les versions Macintosh et Windows n'affichent pas le cadre ainsi défini de la même manière : la version Windows est assez fidèle au nombre de pixels, tandis que l'affichage de la version Macintosh est sensiblement plus large.

Exemple
<FORM METHOD=POST ACTION="...">
<FIELDSET>
<LEGEND>Informations relatives à votre carte de crédit</LEGEND>
......éléments de saisie......
</FIELDSET>
</FORM>
Référence de modèle d'objet
IE [window.]document.all.IDélément
ALIGN | NN s.o. IE 4 HTML s.o.
ALIGN=« alignement » | Facultatif

L'attribut ALIGN n'apparaît que dans Internet Explorer 4, et son implémentation est loin d'être cohérente dans les deux systèmes d'exploitation. Théoriquement, cet attribut doit contrôler l'alignement des éléments INPUT qu'il contient. Si c'est le cas dans la version Macintosh d'Internet Explorer 4, dans la version Windows, le paramétrage a peu d'effet sur l'affichage de l'élément FIELDSET aligné à gauche, aligné à droite ou centré. Il est donc conseillé d'accorder la priorité au paramétrage par défaut.

En règle générale, les attributs ALIGN sont dépréciés en HTML 4.0, qui conseille d'utiliser les feuilles de style. Bien que l'attribut ALIGN ne soit pas pris en charge en HTML 4.0, il ne faut pas hésiter pas à utiliser des feuilles de style également pour cet attribut spécifique à Internet Explorer.

Exemple
<FIELDSET ALIGN="center">...</FIELDSET>
Valeur
Les valeurs autorisées sont les suivantes : center | left | right.
Par défaut left
Référence de modèle d'objet
IE [window.]document.all.IDélément.align
TITLE | NN s.o. IE 4 HTML 4
TITLE=« commentaire » | Facultatif

Description de l'élément. Dans Internet Explorer 4, le titre apparaît dans une info-bulle lorsque le pointeur de la souris reste immobile quelques instants sur l'élément. Les attributs TITLE des éléments de formulaire imbriqués prennent le pas sur ceux de l'élément FIELDSET tout entier, ce qui vous permet de spécifier une info-bulle pour la zone fieldset principale et des info-bulles plus détaillées pour les différentes éléments.

Exemple
<FIELDSET TITLE="Informations relatives à votre carte de crédit">...</FIELDSET >
Valeur
Toute chaîne de caractères. Cette chaîne doit figurer entre guillemets (simples ou doubles, mais identiques).
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.all.IDélément.title
VALIGN | NN s.o. IE 4 HTML 4
VALIGN=« constante_d'alignement » | Facultatif

Détermine l'alignement vertical de l'élément FIELDSET à l'intérieur de l'élément FORM.

Exemple
<FIELDSET VALIGN="bottom">...</FIELDSET>
Valeur
Internet Explorer 4 et HTML 4.0 reconnaissent quatre valeurs constantes : top | middle | bottom | baseline. Avec top et bottom, le contenu est aligné sur le haut et le bas de la cellule (ou en est très proche). Avec middle (la valeur par défaut), le contenu est parfaitement centré verticalement dans les cellules. Dans les cas où le contenu d'une cellule pourrait s'étendre sur plusieurs lignes dans les largeurs de fenêtre courantes (dans l'hypothèse d'un tableau de largeur variable), il est conseillé de donner à l'attribut VALIGN la valeur baseline. Ainsi, la ligne de base des caractères de la première (ou de la seule) ligne de texte de la cellule sera alignée sur celle du contenu des autres cellules de la même ligne, ce qui est en général le meilleur compromis sur le plan esthétique.
Par défaut middle
Référence de modèle d'objet
IE [window.]document.all.IDélément.vAlign


<FONT> | NN tous IE tous HTML 3.2
<FONT>...</FONT> | Balise de fin : obligatoire

L'élément FONT est un conteneur dont le contenu est affiché avec des caractéristiques de police définies par les attributs de l'élément. Cet élément est déprécié en HTML 4.0, en faveur des attributs de police disponibles dans les feuilles de style appliquées directement à d'autres éléments ou au conteneur artificiel SPAN, qui peut être inséré dans un autre élément pour en modifier la police de caractère. Cet élément sera cependant encore longtemps pris en charge, afin d'assurer la compatibilité ascendante avec les pages Web conçues pour des versions de navigateur anciennes.

L'élément FONT a évolué au fil du temps, en s'enrichissant de nouveaux attributs afin de pouvoir fonctionner dans les navigateurs plus évolués. Navigator inclut pour la version 4, certains attributs propriétaires, auxquels on préfèrera des feuilles de style, afin d'assurer la compatibilité ascendante.

Exemple
<FONT FACE="Times, serif" SIZE=4>
Référence de modèle d'objet
IE [window.]document.all.IDélément
COLOR | NN 2 IE 3 HTML 3.2
COLOR=« Triplet_de_couleurs_en_hexa, ou Nom_en_anglais » | Facultatif

Définit la couleur de la police pour le texte compris dans l'élément FONT. Cet attribut est déprécié en HTML 4.0, qui conseille d'utiliser les feuilles de style.

Exemple
<FONT COLOR="Olive">...</FONT>
Valeur
Triplet de couleurs en hexadécimal, ou l'un des noms de couleurs en anglais. Reportez-vous à l'annexe A pour connaître les noms de couleurs admissibles.
Par défaut Valeur par défaut du navigateur.
Référence de modèle d'objet
IE [window.]document.all.IDélément.color
FACE | NN 3 IE 3 HTML 4
FACE=« Nom_police1[, ... Nom_policex] » | Facultatif

Vous pouvez affecter une série hiérarchisée de polices à utiliser pour un segment de texte contenu dans un élément FONT. Le navigateur vérifie si la première police figurant dans la liste est disponible sur le système ; si ce n'est pas le cas, il passe à la suivante et ainsi de suite, jusqu'à ce que toutes les possibilités soient épuisées. En dernier recours, il utilise la police par défaut du navigateur. Les noms de police spécifiés doivent correspondre exactement aux noms des polices sur le système. Si vous utilisez cet attribut (au lieu de l'attribut de feuille de style équivalent, ce qui est recommandé), vous pouvez toujours spécifier une police générique (serif, sans-serif) comme dernière possibilité.

Exemple
<FONT FACE="Bookman, Times Roman, serif">...</FONT>
Valeur
Un ou plusieurs noms de police, notamment les noms génériques suivants : serif | sans-serif | cursive | fantasy | monospace.
Par défaut Police par défaut du navigateur.
Référence de modèle d'objet
IE [window.]document.all.IDélément.face
ID | NN 4 IE 4 HTML 4
ID=« IDélément » | Facultatif

Identifiant unique distinguant cet élément du reste du document. Il permet d'associer un élément à une règle de style, en utilisant la valeur de cet attribut comme ID de sélecteur. Un élément peut recevoir un ID qui en assurera l'unicité, ainsi qu'une classe qui le rattachera à un groupe. Une règle de style appliquée à un élément FONT prend le pas sur toute valeur d'attribut affectée directement. Vous pouvez donc définir, dans la même balise, un ensemble de caractéristiques de police pour les navigateurs non compatibles avec les spécifications CSS et une version modifiée pour les autres. Voir .

Exemple
<FONT ID="specialFont3" COLOR="Olive">...</FONT>
Valeur
Identifiant sensible à la casse.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.all.IDélément.id
POINT-SIZE | NN 4 IE s.o. HTML s.o.
POINT-SIZE=« taille_en_points » | Facultatif

Dans Navigator 4, l'attribut POINT-SIZE est l'équivalent non-CSS de la définition de taille de police en points (au lieu de la taille de police relative dictée par l'attribut SIZE). Si vous affectez une valeur à l'attribut POINT-SIZE et définissez l'attribut de style font-size, ce dernier prend le dessus. Si vous souhaitez obtenir un déploiement compatible avec tous les navigateurs, n'utilisez des feuilles de style que pour des tailles en points précises.

Exemple
<FONT POINT-SIZE="14">...</FONT>
Valeur
Un entier positif représentant la taille en points souhaitée.
Par défaut Taille par défaut du navigateur.
SIZE | NN tous IE tous HTML 3.2
SIZE=« valeur_de_taille_entière_ou_relative » | Facultatif

Les tailles de polices utilisées avec l'attribut SIZE sont définies par rapport à une échelle relative, et non par rapport à une taille de police valable pour toutes les plates-formes. La taille de police par défaut des navigateurs est 3. La plage de valeurs autorisées pour l'attribut SIZE est comprise entre 1 et 7 (inclus). La taille exacte des caractères varie en fonction du système d'exploitation et du navigateur.

Les utilisateurs peuvent souvent modifier la taille des caractères par défaut à l'aide des préférences utilisateur. L'attribut SIZE a priorité sur ce paramétrage. Il est également possible de spécifier pour l'attribut SIZE des valeurs relatives à la taille de caractères définie dans les préférences utilisateur. En faisant précéder une valeur d'un signe + ou -, vous pouvez augmenter ou réduire la taille de caractères par défaut du navigateur, mais vous devez toujours rester dans la plage de 1 à 7.

Exemple
<FONT SIZE=4>...</FONT>
<FONT SIZE="+3">...</FONT>
Valeur
Nombre entier (entre guillemets ou non) ou valeur relative entre guillemets, consistant en un nombre entier précédé du signe + ou -.
Par défaut 3
Référence de modèle d'objet
IE [window.]document.all.IDélément.size
STYLE | NN 4 IE 4 HTML 4
STYLE=« propriétés_de_feuille_de_style » | Facultatif

Cet attribut permet de définir une ou plusieurs propriétés de style pour l'élément. Une règle de style appliquée à un élément FONT prend le pas sur toute valeur d'attribut affectée directement. Vous pouvez donc définir, dans la même balise, un ensemble de caractéristiques de police pour les navigateurs non compatibles avec les spécifications CSS et une version modifiée pour les autres.

Exemple
<FONT STYLE="color:red; font-size:14pt">...</FONT>
Valeur
L'ensemble de la règle de feuille de style, qui est conforme à la syntaxe des CSS, est entre guillemets. Les divers attributs de style et leurs valeurs sont séparés par des points-virgules. Les attributs des feuilles de style sont présentés en détail dans .
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.all.IDélément.style
WEIGHT | NN 4 IE s.o. HTML s.o.
WEIGHT=« valeur_graisse » | Facultatif

Dans Navigator 4, l'attribut WEIGHT est l'équivalent non-CSS de la définition de la graisse de la police à l'aide d'un attribut ordinaire au lieu d'une règle de style. Cet attribut ne semble pas fonctionner, mais la définition d'un attribut de style font-weight fait l'affaire.

Valeur
Nombre entier compris entre 100 et 900, par incréments de 100. La valeur 900 constitue le paramétrage de graisse maximal.
Par défaut Inconnue.


<FORM> | NN tous IE tous HTML tous
<FORM>...</FORM> | Balise de fin : obligatoire

En dépit de l'importance des formulaires HTML pour la communication entre les visiteurs de pages Web et le serveur, un élément FORM n'est en essence qu'un conteneur de contrôles. La plupart des contrôles de formulaire sont créés dans le document sous forme d'éléments INPUT . Même si l'interaction de l'utilisateur avec des éléments INPUT n'est pas liée à l'envoi à un serveur (peut-être certains scripts côté client nécessitent-ils une interaction avec l'utilisateur), ces éléments INPUT sont contenus dans un élément FORM .

Un document peut contenir un nombre quelconque d'éléments FORM , mais un client ne peut transmettre les valeurs des contrôles que pour un seul formulaire à la fois. C'est pourquoi le seul cas valable pour diviser une série de contrôles de formulaire en plusieurs éléments FORM est celui où les groupes de contrôle peuvent être transmis indépendamment les uns des autres. Si vous devez grouper des contrôles de façon logique ou structurelle tout en conservant un formulaire unique, utilisez l'élément FIELDSET pour créer les sous-groupes de contrôle nécessaires.

Lorsqu'un formulaire est envoyé au serveur, tous les contrôles auxquels sont affectés des attributs NAME transmettent leurs noms et valeurs (dans des paires nom / valeur) au serveur pour traitement (ou sous forme de pièce jointe ou de message avec Navigator). Un programme répondant à la norme CGI (Common Gateway Interface) tournant sur le serveur peut accepter et disséquer les paires nom / valeur en vue d'un traitement ultérieur (par exemple, l'ajout d'un enregistrement à une base de données de serveur ou le lancement d'une recherche par mot clé). Le programme serveur est appelé via son adresse URL, affectée à l'attribut ACTION .

Dans les navigateurs, le processus d'envoi consiste en quelques étapes bien définies. Au début du processus, le navigateur assemble des données de formulaire composées des paires nom / valeur des contrôles de formulaire. Le nom est la valeur affectée à l'attribut NAME . La valeur d'un contrôle dépend de son type. Par exemple, la valeur d'un élément INPUT est le contenu affiché dans la zone de texte lors de l'envoi ; pour une case d'option à l'intérieur d'un groupe de case d'options (dont tous les attributs NAME ont la même valeur), la valeur affectée à l'attribut VALUE de la case d'option activée est insérée dans la paire nom / valeur du groupe de cases d'option.

Le seconde étape de l'envoi consiste à coder le texte de chaque paire nom / valeur. Un symbole + remplace chaque caractère d'espacement. Les caractères réservés (définis par la RFC 1738) sont transformés en caractères d'échappement, et tous les autres caractères non-alphanumériques sont convertis en hexadécimal (sous la forme % HH , où HH est le code hexadécimal de la valeur ASCII du caractère). Les composants « nom » et « valeur » de chaque paire de nom / valeur sont séparés par le signe = , et les paires nom / valeur par une esperluette ( & ).

À la dernière étape, le paramétrage de l'attribut METHOD détermine la manière dont l'ensemble des données du formulaire, transformées en caractères d'échappement, sont transmises au serveur. Si la valeur de l'attribut METHOD est get , les données du formulaire sont ajoutées à l'adresse URL indiquée dans l'attribut ACTION , séparées par le signe ? Si la valeur de l'attribut METHOD est post , et si l'attribut ENCTYPE possède sa valeur par défaut, les données sont transmises sous la forme d'une sorte de message (non e-mail) au serveur.

Le comportement par défaut de la touche Entrée dans les formulaires est devenu une norme communément admise. Lorsqu'un formulaire consiste en un simple élément de texte INPUT , l'action de la touche Entrée (ou Retour ) envoie automatiquement le formulaire (comme si l'utilisateur avait cliqué sur le bouton SUBMIT ). Si le formulaire se compose de plusieurs éléments INPUT , la touche Entrée (ou Retour ) ne l'envoie pas automatiquement.

Les navigateurs modernes permettent d'annuler l'envoi du formulaire à l'aide de scripts effectuant un contrôle de validation ou d'autres fonctions déclenchées par le gestionnaire d'événements onSubmit . Cet événement se produit avant l'envoi du formulaire. Si l'évaluation du gestionnaire d'événement renvoie la valeur false , le formulaire n'est pas envoyé et l'utilisateur peut continuer à en modifier les éléments.

Exemple
<FORM NAME="commandes" METHOD=POST ACTION="http://www.giantco.com/cgi-bin/order">
...
</FORM>
Référence de modèle d'objet
NN | [window.]document.forms[i] [window.]document. nom_formulaire
IE | [window.]document.forms[i] [window.]document. nom_formulaire
ACCEPT | NN s.o. IE s.o. HTML 4
ACCEPT=« liste_de_types_MIME » | Facultatif

Destiné à être utilisé avec des éléments INPUT de type file , l'attribut ACCEPT permet d'indiquer un ou plusieurs types MIME pour les fichiers qui peuvent être transmis au serveur lorsque le formulaire est envoyé. L'implémentation prévue pour cet attribut consistait à filtrer les types de fichiers apparaissant dans des zones de dialogue utilisées pour choisir un fichier à télécharger. En un sens, cet attribut assure une validation sur le client d'un type de fichier, afin que les fichiers non conformes au type MIME autorisé ne soient même pas transmis au serveur.

Exemple
<FORM ACCEPT="text/html, image/gif" ...>...</FORM>
Valeur
Constante de type MIME (type de contenu) non sensible à la casse. Il est possible d'indiquer plusieurs valeurs, qui sont alors séparées par des virgules.
Par défaut Aucune.
ACCEPT-CHARSET | NN s.o. IE s.o. HTML 4
ACCEPT-CHARSET=« liste_de_types_MIME » | Facultatif

Informations, à l'intention des serveurs capables de les interpréter, concernant les jeux de caractères à recevoir d'un formulaire client.

Exemple
<FORM ACCEPT-CHARSET="it, es" ...>...</FORM>
Valeur
L'un des alias (non sensibles à la casse) du registre de jeux de caractères qui figure à l'adresse ( ftp://ftp.isi.edu/in-notes/iana/assignments/character-sets ). Il est possible de délimiter des jeux de caractères multiples par des virgules. La valeur réservée, « unknown » , est censée représenter le jeu de caractères utilisé par le serveur pour générer le formulaire destiné au client.
Par défaut « unknown »
ACTION | NN tous IE tous HTML tous
ACTION=« adresse_URL » | Facultatif

Adresse URL de destination lors de l'envoi du formulaire. Lors de l'envoi du formulaire à un serveur pour traitement, l'adresse URL peut être un programme CGI ou une page HTML comportant des scripts côté serveur (ces scripts s'exécutent sur le serveur avant le téléchargement de la page HTML vers le client). Suite à l'envoi, le serveur renvoie une page HTML à afficher sur le client. Si l'affichage renvoyé doit apparaître dans un autre cadre ou une autre fenêtre, il convient de paramétrer l'attribut TARGET en conséquence.

Vous pouvez également utiliser une adresse URL mailto: comme valeur de l'attribut ACTION . Navigator convertit la paire nom / valeur du formulaire en un document à joindre à un message électronique (ou à utiliser comme corps de message en paramétrant l'attribut ENCTYPE sur "text/plain" ). Par souci de confidentialité, les utilisateurs sont informés de cette transmission par courrier électronique et peuvent annuler le message. Jusqu'à sa version 4, Internet Explorer n'inclut pas automatiquement les données des éléments de formulaire dans un message électronique à l'aide de la pseudo-URL mailto : .

Si vous omettez l'attribut ACTION et envoyez le formulaire, la page courante se recharge en rétablissant les valeurs par défaut de tous les éléments du formulaire.

Exemple
<FORM METHOD=POST ACTION="http://www.giantco.com/orders/order.html">
Valeur
Une adresse URL complète ou relative.
Par défaut Aucune.
Référence de modèle d'objet
NN | [window.]document.forms[i].action [window.]document. nom_formulaire .action
IE | [window.]document.forms[i].action [window.]document. nom_formulaire .action
ENCTYPE | NN tous IE tous HTML tous
ENCTYPE=« type_MIME » | Facultatif

Définit un type MIME pour les données envoyées au serveur avec le formulaire. Pour les envois de formulaire courants, avec l'attribut METHOD ayant la valeur post , la valeur par défaut est le type de contenu adéquat. Si vous incluez un élément INPUT de type fichier, indiquez "multipart/form-data" comme valeur de l'attribut ENCTYPE . Quant à Navigator, il est généralement plus commode de transmettre les données à l'aide de la pseudo-URL mailto: en les faisant figurer dans le corps du message, plutôt qu'en pièces jointes. Pour incorporer les données du formulaire dans le corps du message, donnez à l'attribut ENCTYPE la valeur "text/plain" .

Exemple
<FORM METHOD=POST ACTION="mailto:orders@giantco.com" ENCTYPE="text/plain">
...
</FORM>
Valeur
Constante de type MIME (type de contenu) non sensible à la casse. Il est possible d'indiquer plusieurs valeurs, qui sont alors séparées par des virgules.
Par défaut application/x-www-form-urlencoded
Référence de modèle d'objet
NN | [window.]document.forms[i].encoding [window.]document. nom_formulaire .encoding
IE | [window.]document.forms[i].encoding [window.]document. nom_formulaire .encoding
METHOD | NN tous IE tous HTML tous
METHOD=get | post | Facultatif

Les formulaires peuvent être envoyés selon deux méthodes HTTP : get et post . Ces méthodes déterminent si les données de l'élément formulaire sont transmises au serveur à la suite de l'adresse URL indiquée par l'attribut ACTION ( get ) ou dans le corps d'un message de transaction ( post ). Dans la pratique, lorsque les attributs ACTION et METHOD ne sont pas définis dans un élément FORM , le formulaire exécute le rechargement inconditionnel du même document, en rétablissant les valeurs par défaut des contrôles de formulaire.

En raison des problèmes potentiels liés à l'internationalisation, la méthode get est dépréciée en HTML 4.0. Comme une grande partie du Web dépend de la méthode get et qu'il s'agit de la méthode par défaut pour la plupart des navigateurs, il est peu probable qu'elle soit écartée avant longtemps.

Exemple
<FORM METHOD=POST ACTION="http://www@giantco.com/orders/order.html">
...
</FORM>
Valeur
Valeurs insensibles à la casse : get ou post . Ces valeurs ne doivent pas forcément être placées entre guillemets.
Par défaut get
Référence de modèle d'objet
NN | [window.]document.forms[i].method [window.]document. nom_formulaire .method
IE | [window.]document.forms[i].method [window.]document. nom_formulaire .method
NAME | NN 2 IE 3 HTML s.o.
NAME=« IDélément » | Facultatif

Affecte un identifiant à l'élément FORM . Cette valeur est particulièrement utile pour des scripts faisant référence au formulaire ou à ses contrôles.

Exemple
<FORM NAME="commandes" METHOD=POST ACTION="http://www.giantco.com/cgi-bin/order">
...
</FORM>
Valeur
Identifiant sensible à la casse.
Par défaut Aucune.
Référence de modèle d'objet
NN | [window.]document.forms[i].name [window.]document. nom_formulaire .name
IE | [window.]document.forms[i].name [window.]document. nom_formulaire .name
TARGET | NN tous IE tous HTML tous
TARGET=« nom_de_fenêtre_ou_de_cadre » | Facultatif

Si le document HTML renvoyé par le serveur après traitement du formulaire doit être chargé dans une fenêtre ou un cadre autres que la fenêtre ou le cadre courant, vous pouvez préciser l'endroit où il doit s'afficher en associant un nom de fenêtre ou de cadre à l'attribut TARGET . Il faut impérativement affecter un nom aux cadres et aux fenêtres cibles afin de les identifier. Pour attribuer un nom à un cadre, utilisez l'attribut NAME de l'élément FRAME ; pour attribuer un nom à une nouvelle fenêtre, utilisez le second paramètre de la méthode de script window.open() . Si vous omettez cet attribut, le document renvoyé s'affiche à la place du document contenant l'élément FORM . Un identifiant qui n'est pas associé à un cadre ou à une fenêtre existante ouvre une nouvelle fenêtre pour recevoir le document renvoyé.

Un élément FORM ne peut avoir qu'un seul document renvoyé et une seule cible. Pour que l'envoi d'un formulaire modifie le contenu de plusieurs cadres, vous pouvez inclure dans le document renvoyé un script à partir duquel le gestionnaire d'événements onLoad charge ou écrit un document dans un autre cadre (affectez l'adresse URL souhaitée à la propriété location.href de chaque cadre).

Exemple
<FORM METHOD=POST ACTION="http://www.giantco.com/cgi-bin/order" TARGET="nouveau">
...
</FORM>
Valeur
identifiant sensible à la casse lorsque le nom du cadre ou de la fenêtre cible a été défini à l'aide de l'attribut NAME dans l'élément cible. Il existe quatre constantes, qui sont des mots réservés désignant des types de cibles :
_blank | Le navigateur crée une nouvelle fenêtre pour le document de destination.
_parent | Le document de destination remplace le jeu de cadres du document courant (s'il existe un jeu de cadres, sinon le document est traité comme avec _self ).
_self | Le document de destination remplace le document actuel dans sa fenêtre ou son cadre.
_top | Le document de destination doit occuper toute la fenêtre du navigateur, en remplaçant l'éventuel jeu de cadres qui y serait chargé (s'il n'existe pas de jeu de cadres, le document est traité comme avec _self ).
Par défaut _self
Référence de modèle d'objet
NN | [window.]document.forms[i].target [window.]document. nom_formulaire .target
IE | [window.]document.forms[i].target [window.]document. nom_formulaire .target


<FRAME> | NN 2 IE 3 HTML 4
<FRAME> | Balise de fin : interdite

L'élément FRAME définit les propriétés d'un espace individuel correspondant à une fraction de la fenêtre du navigateur. L'élément FRAME doit être défini dans le contexte d'un élément FRAMESET. C'est l'élément FRAMESET qui définit la disposition en lignes et colonnes d'un groupe de cadres apparentés.

Un navigateur traite un cadre comme une fenêtre de navigateur distincte à l'intérieur de la fenêtre du navigateur. Chaque cadre peut donc charger son propre contenu indépendamment des autres cadres. Bien qu'aucun des attributs de l'élément FRAME ne soit obligatoire, l'affectation d'une valeur à l'attribut NAME est fortement recommandée si vous avez des formulaires ou des liens dont le document de retour ou de destination doit s'afficher dans un autre cadre. L'utilisation de scripts pour contrôler plusieurs cadres bénéficie également beaucoup de l'affectation de noms aux cadres, car celle-ci facilite la compréhension des références à ces cadres (et à leur contenu) lors de la lecture du code du script.

Exemple
<FRAMESET COLS="150,*">
    <FRAME NAME="navbar" SRC="nav.html">
    <FRAME NAME="main" SRC="page1.html">
</FRAMESET>
Référence de modèle d'objet
NN | [window.]nom_cadre [window.]frames[i]
IE | [window.]nom_cadre [window.]frames[i] [window.]document.all.IDcadre
BORDERCOLOR | NN 3 IE 4 HTML s.o.
BORDERCOLOR=« Triplet_de_couleurs_en_hexa, ou Nom_en_anglais » | Facultatif

Si votre jeu de cadres affiche des bordures (définies à l'aide de l'attribut BORDER de l'élément FRAMESET) et si vous voulez qu'un sous-ensemble de cadres s'affiche avec une bordure différente, vous pouvez affecter une couleur à l'attribut BORDERCOLOR de chaque élément FRAME. Le mélange des couleurs de bordure dans un jeu de cadres expose votre code HTML aux risques liés à l'hétérogénéité des techniques d'affichage des différents navigateurs et systèmes d'exploitation. Outre les variantes dans la composition précise des pixels des bordures, les différents navigateurs et systèmes d'exploitation n'utilisent pas nécessairement la même méthode pour résoudre les conflits de couleurs entre bordures. Si vous affectez une couleur uniquement à certains cadres d'un jeu de cadres, contrôlez le résultat sur le plus grand nombre possible de versions et de systèmes d'exploitation, afin d'apprécier l'effet visuel des couleurs choisies.

Exemple
<FRAME NAME="navbar" SRC="nav.html" BORDERCOLOR="salmon">
Valeur
Triplet de couleurs en hexadécimal, ou l'un des noms de couleurs en anglais. Reportez-vous à l'annexe A pour connaître les noms de couleurs admissibles.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.all.IDcadre.borderColor
DATAFLD | NN s.o. IE 4 HTML s.o.
DATAFLD=« nom_colonne » | Facultatif

Cet attribut est utilisé avec Internet Explorer 4 dans le cadre d'une liaison de données, pour associer le nom d'une colonne d'une source de données distante à un élément FRAME, à la place de l'attribut SRC. La colonne de la source de données doit contenir une adresse URL (relative ou absolue) valide. L'attribut DATASRC de l'élément doit être également défini.

Exemple
<FRAME DATASRC="#DBSRC3" DATAFLD="newsURL">
Valeur
Identifiant sensible à la casse.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.all.IDcadre.dataFld
DATASRC | NN s.o. IE 4 HTML s.o.
DATASRC=« nom_source_de_données » | Facultatif

Cet attribut est utilisé avec Internet Explorer 4 dans le cadre d'une liaison de données pour indiquer la source de données ODBC distante (une base de données Oracle ou SQL par exemple) à associer à l'élément. Le contenu de la source de données est spécifié à l'aide de l'attribut DATAFLD.

Exemple
<FRAME DATASRC="#DBSRC3" DATAFLD="newsURL">
Valeur
Identifiant sensible à la casse.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.all.IDcadre.dataSrc
FRAMEBORDER | NN 3 IE 3 HTML 4
FRAMEBORDER=« commutateur_de_bordure » | Facultatif

Contrôle l'affichage ou non d'une bordure pour un cadre individuel au sein d'un jeu de cadres. Ce paramétrage prend normalement le pas sur celui de l'attribut FRAMEBORDER de l'élément parent FRAMESET. Le contrôle des bordures de cadres individuels est délicat pour la plupart des navigateurs dans la majorité des systèmes d'exploitations. La désactivation des bordures d'un cadre peut ne pas produire d'effet si les bordures sont activées pour tous les cadres adjacents. Activez certaines bordures et désactivez-en d'autres à titre d'essai, mais n'oubliez pas de tester l'effet final dans tous les navigateurs et sur tous les systèmes d'exploitation utilisés. L'attribut FRAMEBORDER du FRAMESET complet est plus fiable.

Exemple
<FRAME NAME="navbar" SRC="nav.html" FRAMEBORDER=no>
Valeur
Les valeurs d'activation et désactivation de cet attribut varient selon les sources. HTML 4.0 spécifie des valeurs de 1 (activée) et 0 (désactivée). Navigator utilise yes et no. Internet Explorer 4 accepte les deux ensembles de valeurs. Pour garantir la compatibilité entre les navigateurs, utilisez la paire yes/no.
Par défaut yes
Référence de modèle d'objet
IE [window.]document.all.IDcadre.frameBorder
HEIGHT, WIDTH | NN s.o. IE 4 HTML s.o.
HEIGHT=« hauteur » WIDTH=« largeur » | Facultatif
La documentation HTML de Microsoft pour Internet Explorer 4 indique que les attributs HEIGHT et WIDTH contrôlent la taille d'un cadre. En pratique, dans Internet Explorer 4 ces attributs ne contrôlent pas directement l'aspect des cadres d'un jeu de cadres. En effet, ce sont les attributs COLS et ROWS du FRAMESET conteneur qui déterminent la géométrie initiale du cadre. Comme les propriétés d'objet correspondantes d'un cadre sont décrites mais ne font pas partie du DOM d'Internet Explorer 4, les attributs HEIGHT et WIDTH figurent probablement dans la documentation par erreur. Ne les utilisez pas.
LONGDESC | NN s.o. IE s.o. HTML 4
LONGDESC=« adresse_URL » | Facultatif

Permet de spécifier l'adresse URL d'un document contenant une description de l'élément plus longue que celle qui apparaît dans l'attribut TITLE. Une application de cet attribut, dans de futures versions des navigateurs, pourra consister à recevoir une description annotée de l'élément, pour les utilisateurs qui ne peuvent pas lire l'écran du navigateur.

Exemple
<FRAME LONGDESC="navDesc.html" TITLE="Barre de navigation" SRC="navbar.html">
Valeur
Toute adresse URI et URL valide (complète ou relative).
Par défaut Aucune.
MARGINHEIGHT, MARGINWIDTH NN s.o. IE 3 HTML 4
MARGINHEIGHT=« nombre_de_pixels »
MARGINWIDTH=« nombre_de_pixels » 		Facultatif

Nombre de pixels entre le bord intérieur d'un cadre et le contenu affiché dans ce cadre. L'attribut MARGINHEIGHT contrôle l'espace le long des bords supérieur et inférieur (en cas de défilement) du cadre ; l'attribut MARGINWIDTH contrôle l'espace le long des bords gauche et droit. Les spécifications HTML 4.0 laissent le comportement par défaut à la discrétion des développeurs du navigateur.

En l'absence de toute spécification, Internet Explorer 4 insère automatiquement une marge de 14 pixels (Windows) ou de 8 pixels (Macintosh) à l'intérieur du cadre. Mais si vous tentez d'intervenir sur ce comportement par défaut, n'oubliez pas que le paramétrage d'un seul de ces deux attributs provoque le passage à la valeur zéro de l'autre attribut. C'est pourquoi des valeurs doivent être affectées pour ces deux attributs à la fois, sauf si vous désirez que le contenu soit aligné absolument sur les bords de divers cadres. En raison de la disparité des valeurs par défaut selon le système d'exploitation, il n'est pas possible, dans la pratique, d'affecter de véritables valeurs par défaut à ces attributs.

Exemple
<FRAME SRC="navbar.html"  MARGINHEIGHT=20 MARGINWIDTH=14>
Valeur
Tout entier positif, ou zéro.
Par défaut 14 (Windows) ou 8 (Macintosh).
Référence de modèle d'objet
IE [window.]document.all.IDcadre.marginHeight
[window.]document.all.IDcadre.marginWidth
NAME | NN 2 IE 3 HTML 4
NAME=« IDélément » | Facultatif

Lorsque des liens ou des formulaires doivent charger leurs documents de destination ou de retour dans d'autres cadres que celui qui les contient, l'attribut TARGET de ces éléments permet d'indiquer le cadre qui doit recevoir le nouveau contenu. Pour que le contenu soit inséré dans un cadre précis, une valeur doit être affectée à l'attribut NAME de ce cadre. Cette même valeur est ensuite donnée à l'attribut TARGET de l'élément A ou FORM. Les scripts exécutés par le navigateur client utilisent également le nom des cadre pour référencer d'autres cadres ou le contenu d'autres cadres. Il est conseillé de donner un nom (identifiant) unique à tous les cadres.

Exemple
<FRAME NAME="navbar" SRC="nav.html">
Valeur
Identifiant sensible à la casse.
Par défaut Aucune.
Référence de modèle d'objet
NN | [window.]nom_cadre.name [window.]frames[i].name
IE | [window.]nom_cadre.name [window.]frames[i].name [window.]document.all.IDcadre.name
NORESIZE | NN 2 IE 3 HTML 4
NORESIZE | Facultatif

L'utilisateur peut redimensionner les cadres en tirant sur leurs bordures, perpendiculairement à leur axe. Lorsqu'il est présent, l'attribut NORESIZE indique au navigateur d'empêcher le redimensionnement manuel des bords du cadre par l'utilisateur. Toutes les bordures de l'élément FRAME affecté sont alors verrouillées, ce qui signifie que toutes les bordures des autres cadres adjacents du jeu de cadres sont verrouillées.

Exemple
<FRAME SRC="navbar.html" NORESIZE>
Valeur
La présence de cet attribut empêche le redimensionnement du cadre.
Par défaut Par défaut, les cadres sont redimensionnables.
Référence de modèle d'objet
IE [window.]document.all.IDcadre.noResize
SCROLLING | NN 2 IE 3 HTML 4
SCROLLING=auto | no | yes | Facultatif

Par défaut, les navigateurs ajoutent des barres de défilement vertical et / ou horizontal lorsque le contenu d'un cadre déborde de la zone visible du cadre. Les barres de défilement peuvent fréquemment affecter la présentation du contenu, car elles occupent un espace normalement dévolu à ce contenu (les dimensions extérieures du cadre ne changent pas en fonction de la présence ou non de barres de défilement). De plus, en raison des différences de taille des polices de caractères par défaut selon le navigateur et le système d'exploitation, un texte donné s'affichera de façon différente dans différents navigateurs. Pour empêcher le cadre d'afficher des barres de défilement, donnez la valeur no à l'attribut SCROLLING ; à l'inverse, pour que les barres de défilement soient présentes en permanence dans ce cadre, donnez à cet attribut la valeur yes. Dans ce dernier cas, si le contenu ne nécessite pas de défilement, les barres seront désactivées. Dans les anciennes versions de Navigator, les barres de défilement automatiques restent visibles, même si le contenu chargé dans le cadre ne le justifie pas. Dans Navigator 4 (et toutes les versions d'Internet Explorer), les barres de défilement automatiques s'affichent uniquement si nécessaire.

Il est conseillé de ne donner la valeur no à l'attribut SCROLLING qu'après avoir testé avec tous les navigateurs et toutes les plates-formes qu'un contenu important est toujours visible dans le cadre. Faute de quoi, en l'absence de barres de défilement et si l'attribut NORESIZE est défini, certains utilisateurs pourraient ne pas être en mesure de voir tout le contenu du cadre.

Exemple
<FRAME SRC="navbar.html" SCROLLING=no>
Valeur
Constante non sensible à la casse (éventuellement entre guillemets) : auto | no | yes.
Par défaut auto
Référence de modèle d'objet
IE [window.]document.all.IDcadre.scrolling
SRC | NN 2 IE 3 HTML 4
SRC=« adresse_URL » | Facultatif

Définit l'adresse URL du contenu qui doit être chargé dans l'élément FRAME. Cette adresse URL peut être absolue, ou relative à celle du document qui contient les spécifications du jeu de cadres. Vous pouvez également utiliser la pseudo-URL javascript: pour faire apparaître dans le cadre la valeur renvoyée par le script ainsi appelé. Par exemple, si vous voulez que le cadre soit vide pendant le chargement du jeu de cadres, vous pouvez définir dans le document du jeu de cadres une fonction qui renvoie une page HTML vierge. L'attribut SRC de chaque cadre à vider appelle la fonction depuis sa position avantageuse de cadre enfant :

<HTML>
<SCRIPT LANGUAGE="JavaScript">
function blank() {
    return "<HTML></HTML>"
}
</SCRIPT>>
<FRAMESET COLS="50%,50%">
    <FRAME NAME=leftFrame SRC="javascript:parent.blank()">
    <FRAME NAME=rightFrame SRC="javascript:parent.blank()">
</FRAMESET>
</HTML>

Un autre type de page vierge est disponible avec certains navigateurs, via l'adresse URL about:blank, qui correspond à une page vierge résidant sur le disque dur de l'utilisateur. Toutefois, Navigator 2 et 3 pour Macintosh affichent un message indésirable avec l'adresse URL dans une fenêtre ou un cadre.

Exemple
<FRAME SRC="navbar.html">
Valeur
Une adresse URL complète ou relative, ou la pseudo-URL javascript: .
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.all.IDcadre.src


<FRAMESET> | NN 2 IE 3 HTML 4
<FRAMESET>...</FRAMESET> | Balise de fin : obligatoire

Définit la disposition d'une présentation en plusieurs cadres dans la fenêtre principale du navigateur. Le rôle principal de l'élément FRAMESET consiste à spécifier la disposition, exprimée en lignes et en colonnes, de cadres rectangulaires. Les attributs définis dans un élément FRAMESET s'appliquent à tous les éléments FRAME qu'il contient (sauf si un attribut similaire définit une autre valeur pour un élément FRAME spécifique). Dans un document HTML, une balise d'élément FRAMESET occupe la place normalement occupée par l'élément BODY.

Vous pouvez imbriquer un élément FRAMESET à l'intérieur d'un autre élément FRAMESET. Cette tactique permet de subdiviser le cadre de l'élément FRAMESET extérieur en plusieurs cadres. Par exemple, si vous définissez un élément FRAMESET avec trois lignes et deux colonnes, vous obtenez un total de six cadres :

<FRAMESET ROWS="33%, 33%, 34%" COLS="50%, 50%">
    <FRAME NAME="L1C1"...>
    <FRAME NAME="L1C2"...>
    <FRAME NAME="L2C1"...>
    <FRAME NAME="L2C2"...>
    <FRAME NAME="L3C1"...>
    <FRAME NAME="L3C2"...>
</FRAMESET>

Par ailleurs, si vous imbriquez un nouveau jeu de cadres à l'emplacement de la définition d'un cadre, ce dernier est divisé conformément à la définition de ce jeu de cadres imbriqué. Prenons le jeu de cadres imbriqué suivant :

<FRAMESET ROWS="33%, 33%, 34%">
    <FRAME NAME="L1"...>
    <FRAMESET COLS="50%, 50%">
        <FRAME NAME="L2C1"...>
        <FRAME NAME="L2C2"...>
    </FRAMESET>
    <FRAME NAME="L3"...>
</FRAMESET>

Vous pouvez imbriquer des éléments FRAMESET aussi profondément que le requiert la mise en page. Notez toutefois que sur certains systèmes d'exploitation, les cadres monopolisent une partie importante des ressources des navigateurs en mémoire vive. Certains utilisateurs n'apprécient guère la présence de cadres affichant des bordures, même si la mise en page justifie une telle structure.

Le document de jeu de cadres père est celui dont l'attribut TITLE régit l'affichage dans la barre de titre de la fenêtre du navigateur. Les documents chargés dans des cadres individuels ne contrôlent pas l'affichage de la barre de titre, bien que l'utilisation de scripts et les applications potentielles dans de futurs navigateurs justifient que l'attribut TITLE soit défini de toute façon.

Si vous voulez offrir à l'utilisateur la possibilité de supprimer un jeu de cadres, vous pouvez fournir un lien ou un bouton appelant un script. Le script doit définir la propriété top.location.href de l'adresse URL du principal document des pages chargées dans les cadres (le contenu principal).

Exemple
<FRAMESET COLS="150,*">
    <FRAME NAME="navbar" SRC="nav.html">
    <FRAME NAME="main" SRC="page1.html">
</FRAMESET>
Référence de modèle d'objet
IE [référence_fenêtre.]document.all.ID_jeu_de_cadre
BORDER | NN 3 IE 4 HTML s.o.
BORDER=« taille_en_pixels » | Facultatif

Par défaut, les cadres affichent des bordures tridimensionnelles. L'épaisseur par défaut de cette bordure varie selon le navigateur et le système d'exploitation. Vous pouvez régler l'épaisseur en affectant une autre valeur à l'attribut BORDER du jeu de cadres. Seul l'élément FRAMESET parent d'un système de jeux de cadres imbriqués répond au paramétrage de l'attribut BORDER.

Navigator 4 est cohérent sur les plates-formes Windows et Macintosh en affichant une bordure par défaut d'une épaisseur correspondant à celle qui est obtenue en paramétrant l'attribut BORDER sur 5. Pour Internet Explorer 4, la valeur de paramétrage par défaut est de 6 pour Windows et de 1 pour Macintosh (même si, à l'écran, l'épaisseur de la bordure est nettement supérieure à un pixel). Le paramétrage de l'attribut BORDER ne produit donc pas le même effet dans tous les navigateurs. De plus, de faibles valeurs de paramétrage produisent parfois des résultats singuliers. Internet Explorer 4 n'affiche pas de bordure dans Windows si la valeur paramétrée est inférieure ou égale à 2, tandis qu'avec le même paramétrage, Navigator perd sa troisième dimension. En outre, sur Macintosh, Navigator a la fâcheuse habitude d'afficher une étrange boule au centre des barres de cadre.

Ce déploiement chaotique risque de vous dissuader définitivement d'utiliser cet artifice (paramétrez l'attribut BORDER sur 0). Pourtant, les bordures produisent parfois un effet rassurant lorsqu'un cadre contient une barre de défilement. L'affichage d'une barre de défilement flottante dans une fenêtre du navigateur peut en effet déconcerter certains utilisateurs.

Le fait que les spécifications HTML 4.0 ne comportent pas d'attribut BORDER permet de penser que leurs concepteurs ont préféré l'utilisation d'une feuille de style pour définir les bordures, plutôt qu'un paramétrage de bordures liées uniquement aux cadres. Toutefois, aucun des navigateurs (jusqu'à la version 4) ne réagit aux paramétrages de bordures par feuilles de style.

Exemple
<FRAMESET COLS="150,*" BORDER=0>...</FRAMESET>
Valeur
Un nombre entier. La valeur zéro supprime totalement la bordure. Bien que la valeur soit censée représenter l'épaisseur précise en pixels des bordures d'un jeu de cadres, tous les systèmes d'exploitation et les navigateurs ne la reconnaissent pas.
Par défaut Voir description
Référence de modèle d'objet
IE [référence_fenêtre.]document.all.ID_jeu_de_cadre.border
BORDERCOLOR | NN 3 IE 4 HTML s.o.
BORDERCOLOR=« triplet_de_couleurs_en_hexa ou nom_en_anglais » | Facultatif

Établit la couleur d'affichage des bordures visibles d'un jeu de cadres. Il est toujours possible que l'attribut BORDERCOLOR d'un élément FRAMESET imbriqué (uniquement pour les cadres de jeux de cadres imbriqués) ou d'un élément FRAME individuel modifie le paramétrage BORDERCOLOR de l'élément FRAMESET parent. Les navigateurs résolvent les conflits entre couleurs affectées à des cadres adjacents de différentes manières. Testez les combinaisons de couleur que vous voulez utiliser pour les bordures.

Exemple
<FRAMESET COLS="150,*" BORDERCOLOR="salmon">...</FRAMESET>
Valeur
Triplet de couleurs en hexadécimal, ou l'un des noms de couleurs en anglais. Reportez-vous à l'annexe A pour connaître les noms de couleurs admissibles.
Par défaut
Couleur par défaut du navigateur, généralement une nuance de gris avec un filet noir ou bleu pour produire l'effet 3D.
Référence de modèle d'objet
IE [référence_fenêtre.]document.all.ID_jeu_de_cadre.borderColor
COLS | NN 2 IE 3 HTML 4
COLS=« liste_de_longueurs_de_colonne » | Facultatif

Définit les tailles et proportions de l'organisation des colonnes de cadres d'un jeu de cadres. Pour utiliser l'élément FRAMESET afin de créer des cadres de plusieurs colonnes, vous devez affecter une liste de valeurs à l'attribut COLS.

La taille des colonnes peut être définie par l'un des paramètres suivants :

une taille absolue en pixels

un pourcentage de la largeur disponible pour le jeu de cadres complet

un caractère générique (*) représentant l'espace disponible après définition d'autres mesures en pixels ou pourcentages

Utilisez une taille absolue si vous voulez que la largeur d'un cadre ne varie pas, quelle que soit la dimension de la fenêtre du navigateur affichée. Cette option est particulièrement utile lorsque le cadre doit afficher un objet de largeur fixe, par exemple une image. Utilisez la solution du pourcentage si vous voulez que la largeur du cadre soit proportionnelle à celle du jeu de cadres, quelle que soit la dimension de la fenêtre du navigateur affichée. Si vous définissez toutes les valeurs de pourcentage pour l'attribut COLS, elles doivent totaliser 100 %. Si les valeurs ne totalisent pas 100 %, le navigateur adapte la taille des colonnes à son gré. Enfin, utilisez le caractère générique astérisque comme valeur pour laisser au navigateur le soin de calculer la largeur d'un cadre lorsque tous les autres cadres du jeu de cadres sont affectés d'une valeur fixe ou d'un pourcentage. Dans la chaîne, séparez les valeurs par des virgules.

Vous pouvez mêler les trois types de valeurs dans la chaîne de l'attribut. Prenons, par exemple, un jeu de cadres de trois colonnes. Si vous voulez que la largeur de la colonne de gauche soit exactement de 150 pixels, et que celle du centre occupe 50 % de la largeur totale du jeu de cadres, paramétrez la valeur comme suit :

<FRAMESET COLS="150,50%,*">

La largeur précise des deux cadres de droite différera suivant la largeur de fenêtre du navigateur de chaque visiteur. Dans notre exemple, la largeur du cadre situé le pus à droite est à peu près égale à la moitié de la largeur du jeu de cadres, moins les 150 pixels réservés au cadre de gauche.

Pour créer une trame de cadres régulière, affectez des valeurs aux attributs COLS et ROWS dans la balise de l'élément FRAMESET. Pour obtenir un tableau non symétrique, vous devez imbriquer des éléments FRAMESET, comme expliqué dans la description de l'élément FRAMESET plus haut dans cette section.

Exemple
<FRAMESET COLS="25%,50%,25%">...</FRAMESET>
Valeur
Liste de valeurs séparées par des virgule, et exprimées en pixels, en pourcentage ou par le caractère générique (*). Internet Explorer 4 pour Macintosh ne fonctionne pas correctement avec certaines combinaisons comprenant un caractère générique.
Par défaut 100%
Référence de modèle d'objet
IE [référence_fenêtre.]document.all.ID_jeu_de_cadre.cols
FRAMEBORDER | NN 3 IE 3 HTML s.o.
FRAMEBORDER=« commutateur_de_bordure » | Facultatif

Détermine si tous les cadres du jeu de cadres affichent une bordure de séparation. L'attribut FRAMEBORDER des éléments FRAME peut prendre le pas sur le paramétrage de l'élément FRAMESET pour cet attribut. Toutefois, certaines organisations de cadres se prêtent mal à l'élimination des cadres de sous-groupes de cadres. Modifiez l'attribut de l'élément FRAMESET avec prudence et testez le résultat sur tous les navigateurs et plates-formes possibles.

Exemple
<FRAMESET COLS="25%,50%,25%" FRAMEBORDER="no">...</FRAMESET>
Valeur
Les valeurs d'activation et désactivation de cet attribut varient selon les navigateurs. Navigator utilise yes et no. Internet Explorer 4 accepte yes | no et 1 | 0 (seule la dernière paire est spécifiée pour Internet Explorer 3). Pour garantir la compatibilité entre les navigateurs de version 4, utilisez la paire yes/no.
Par défaut yes
Référence de modèle d'objet
IE [référence_fenêtre.]document.all.ID_jeu_de_cadre.frameBorder
FRAMESPACING | NN s.o. IE 3 HTML s.o.
FRAMESPACING=« largeur_en_pixels » | Facultatif

L'attribut FRAMESPACING d'Internet Explorer est une version ancienne de l'attribut BORDER. L'ancien attribut est pris en charge par Internet Explorer 4 à fins de compatibilité ascendante. Le comportement de l'attribut FRAMESPACING sur les différentes plates-formes est plus uniforme avec les versions d'Internet Explorer 4 : la bordure générée entre les cadres par un paramétrage de 10 est presque identique dans les versions Windows et Macintosh. Dans Internet Explorer, l'attribut FRAMESPACING est la manière la plus précise de créer des bordures présentant un aspect similaire sur les deux systèmes d'exploitation.

Exemple
<FRAMESET COLS="25%,50%,25%" FRAMESPACING="7">...</FRAMESET>
Valeur
Tout entier positif. Toutefois, contrairement à l'attribut BORDER, un paramétrage de zéro ne supprime pas la bordure. Utilisez l'attribut FRAMEBORDER pour masquer totalement les bordures.
Par défaut 2
Référence de modèle d'objet
IE [référence_fenêtre.]document.all.ID_jeu_de_cadre.frameSpacing
ROWS | NN 2 IE 3 HTML 4
ROWS=« liste_de_longueurs_de_ligne » | Facultatif

Définit les tailles ou les proportions de la répartition des lignes d'un cadre dans un jeu de cadres. Pour utiliser l'élément FRAMESET afin de créer des cadres de plusieurs lignes, vous devez affecter une liste de valeurs à l'attribut ROWS.

La taille des lignes peut être définie par l'un des paramètres suivants :

une taille absolue en pixels

un pourcentage de la hauteur disponible pour le jeu de cadres complet dans la fenêtre du navigateur

un caractère générique (*) représentant l'espace disponible dans la fenêtre du navigateur après définition des autres mesures en pixels ou pourcentages

Utilisez une taille absolue si vous voulez que la hauteur d'une ligne de cadre ne varie pas, quelle que soit la dimension de la fenêtre du navigateur affichée. Cette option est particulièrement utile lorsque le cadre doit afficher un objet de hauteur fixe, par exemple une image. Utilisez la solution du pourcentage si vous voulez que la hauteur du cadre soit proportionnelle à celle du jeu de cadres, quelle que soit la dimension de la fenêtre du navigateur affichée. Si vous utilisez toutes les valeurs de pourcentage pour l'attribut ROWS, elles doivent totaliser 100 %. Si les valeurs ne totalisent pas 100 %, le navigateur adapte la taille des lignes à son gré. Enfin, utilisez le caractère générique astérisque comme valeur pour laisser au navigateur le soin de calculer la hauteur d'une ligne lorsque toutes les autres lignes du jeu de cadres sont affectées d'une valeur fixe ou d'un pourcentage. Dans la chaîne, séparez les valeurs par des virgules.

Vous pouvez mêler les trois types de valeurs dans la chaîne de l'attribut. Prenons, par exemple, un jeu de cadres de trois lignes. Si vous voulez que la hauteur de la ligne inférieure soit exactement de 80 pixels pour accueillir une barre de navigation et que celle du centre occupe 50 % de la hauteur totale du jeu de cadres, paramétrez la valeur comme suit :

<FRAMESET ROWS="*,50%,80">

La hauteur précise des deux cadres supérieurs différera suivant la hauteur de fenêtre du navigateur de chaque visiteur. Dans notre exemple, la hauteur du cadre supérieur est à peu près égale à la moitié de la hauteur du jeu de cadres, moins les 80 pixels réservés au cadre inférieur.

Pour créer une trame de cadres régulière, affectez des valeurs aux attributs COLS et ROWS dans la balise de l'élément FRAMESET. Pour obtenir un tableau non symétrique, vous devez imbriquer des éléments FRAMESET, comme expliqué dans la description de l'élément FRAMESET plus haut dans cette section.

Exemple
<FRAMESET ROWS="25%,50%,25%">...</FRAMESET>
Valeur
Liste de valeurs séparées par des virgule, et exprimées en pixels, en pourcentage ou par le caractère générique (*). Internet Explorer 4 pour Macintosh ne fonctionne pas correctement avec certaines combinaisons comprenant un caractère générique.
Par défaut 100%
Référence de modèle d'objet
IE [référence_fenêtre.]document.all.ID_jeu_de_cadre.rows
STYLE | NN s.o. IE 4 HTML 4
STYLE=« propriétés_de_feuille_de_style » | Facultatif

Cet attribut permet de définir une ou plusieurs propriétés de style pour l'élément. Le format des valeurs passées à ces propriétés dépend du style par défaut du navigateur, mais Navigator et Internet Explorer acceptent tous deux la syntaxe des feuilles de style CSS. Comme les documents chargés dans des cadres dans Internet Explorer 4 compensent les paramètres de style d'un jeu de cadres, il est inutile d'ajouter des attributs STYLE à des éléments FRAMESET.

Valeur
L'ensemble de la règle de feuille de style, qui est conforme à la syntaxe des CSS, est entre guillemets. Les divers attributs de style et leurs valeurs sont séparés par des points-virgules. Les attributs des feuilles de style sont présentés en détail dans .
Par défaut Aucune.
Référence de modèle d'objet
IE [référence_fenêtre.]document.all.ID_jeu_de_cadre.style


<H1>, <H2>, <H3><H4>, <H5>, <H6> NN tous IE tous HTML tous
<H1>...</H1>, <H2>...</H2>, <H3>...</H3>
H4>...</H4>, <H5>...</H5>, <H6>...</H6> 		Balise de fin : obligatoire

Le langage HTML définit une série de six niveaux d'en-têtes ; le chiffre associé au préfixe « H » indique l'importance relative de la section qui suit l'en-tête. L'élément H1 représente le niveau le plus important, et l'élément H6 le moins important. Tout programme d'analyse des documents HTML peut examiner les balises d'une page pour créer une table des matières en fonction de ces en-têtes. Pour obtenir un document correctement structuré, ces niveaux d'en-têtes doivent donc être utilisés dans l'ordre approprié, sans sauter de niveau pour des raisons esthétiques.

La police, le corps et autres caractéristiques de chaque niveau dépendent du navigateur. Chaque élément d'en-tête est restitué sur sa propre ligne, sans saut de ligne ou paragraphe pour marquer le début de la section délimitée par l'en-tête. Ce schéma s'applique très largement aux autres versions de navigateurs et de systèmes d'exploitation, à l'exception de Navigator sur Macintosh, dont les caractères par défaut pour H4 et H6 sont plus larges que ceux des éléments H3 et H5 qui les précèdent dans la hiérarchie.

Il est toujours possible de redéfinir le style par défaut d'un niveau d'en-tête (ou d'un en-tête particulier) à l'aide des feuilles de style.

Exemple
<H1>Le système solaire</H1>
<P>Notre système solaire flotte gracieusement au sein de la Voie lactée.  ...</P>
<H2>Le soleil</H2>
<P>Situé à 150 millions de kilomètres de la Terre, le Soleil...</P>
<H3>Les planètes</H3>
<P>Neuf planètes identifiées tournent autour du Soleil. ...</P>
<H4>Mercure</H4>
...
Référence de modèle d'objet
IE [window.]document.all.IDélément
ALIGN | NN tous IE tous HTML 3.2
ALIGN=« où » | Facultatif

Détermine l'alignement de l'en-tête par rapport au conteneur père, généralement le corps du document (body). Navigator et Internet Explorer acceptent les valeurs d'alignement suivantes : center, left et right. HTML 4.0 y ajoute la possibilité de justifier le texte.

L'attribut ALIGN est déprécié en HTML 4.0, qui conseille d'utiliser plutôt l'attribut text-align: dans une feuille de style.

Exemple
<H1 ALIGN="center">Article I</H1>
Valeur
Le tableau suivant présente les valeurs possibles pour l'attribut ALIGN. Ces valeurs peuvent être traitées comme n'étant pas sensibles à la casse.
Valeur NN 4 IE 4 HTML4.0
center
         * * *
justify
         - - *
left
         * * *
right
         * * *
Par défaut left
Référence de modèle d'objet
IE [window.]document.all.IDélément.align


<HEAD> | NN tous IE tous HTML tous
<HEAD>...</HEAD> | Balise de fin : facultative

L'élément HEAD contient des informations relatives au document, et qui ne sont en général pas visibles dans la fenêtre du navigateur. Seule exception, l'élément TITLE, qui contient le titre de la page qui sera affiché dans la barre de titre du navigateur.

Le contenu de l'élément HEAD se compose uniquement d'autres éléments, qui sont destinés à contrôler la façon dont le navigateur traite les données du document. Un autre type de classification des données, sous la forme d'un ou plusieurs éléments META, est également destiné à renseigner les moteurs de recherche et les analyseurs de documents sur le contenu du document, sur la base d'informations récapitulatives indiquées par l'auteur. Le tableau suivant présente les éléments qui peuvent être imbriqués dans un élément HEAD selon trois spécifications différentes.

Élément

NN 4

IE 4

HTML 4.0

BASE

*

*

*

BASEFONT

*

*

-

BGSOUND

-

*

-

ISINDEX

*

-

*

LINK

*

*

*

META

*

*

*

NEXTID

-

*

-

SCRIPT

*

*

*

STYLE

*

*

*

TITLE

*

*

*
Exemple
<HEAD>
<META NAME="Author" CONTENT="Danny Goodman">
<STYLE TYPE="text/css">
    H1 {color:cornflowerblue}
</STYLE>
</HEAD>
Référence de modèle d'objet
IE [window.]document.all.IDélément
CLASS | NN s.o. IE 4 HTML s.o.
CLASS=« className1[ ...classNameN] » | Facultatif

Un identifiant est généralement utilisé pour associer un élément à une règle définie pour un sélecteur de classe dans une feuille de style. Voir . L'attribut CLASS est inutilisable dans l'élément HEAD, puisqu'il ne peut pas être affecté à un sélecteur de style de classe qui n'a pas encore été défini. (Il est défini ultérieurement, dans l'élément HEAD.) Cet attribut semble être pris en charge par Internet Explorer pour des raisons de cohérence, plutôt que de fonctionnalité à proprement parler.

Valeur
Identifiant sensible à la casse. Plusieurs classes peuvent être définies en séparant les noms de ces classes par des espaces à l'intérieur de l'attribut entre guillemets.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.all.IDélément.className
ID | NN s.o. IE 4 HTML s.o.
ID=« IDélément » | Facultatif

Identifiant unique distinguant cet élément du reste du document. Avec Internet Explorer, cette valeur d'attribut peut être utilisée dans des scripts pour référencer l'élément HEAD par son identifiant (ID) plutôt que par la référence document.all.tags("HEAD")[0], qui est plus longue.

Exemple
<HEAD ID="docHead">...</HEAD>
Valeur
Identifiant sensible à la casse.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.all.tags("HEAD")[0].id
[window.]document.all.IDélément.id
PROFILE | NN s.o. IE 4 HTML s.o.
PROFILE=« URLList » | Facultative

Un profil de métadonnées est un fichier séparé (ou une définition nommée propre au navigateur) qui définit un ou plusieurs comportements de propriétés de métadonnées. En quelque sorte, on peut considérer un profil comme étant un en-tête pour métadonnées dont les propriétés sont clairement affectées dans des éléments META situés dans un élément HEAD. À l'avenir, les navigateurs et les systèmes externes (par exemple les moteurs de recherche) pourront utiliser les informations du profil au-delà des affectations typiques nom/valeurs des éléments META tels qu'ils sont implémentés dans les versions 4 (et antérieures) des navigateurs.

Exemple
<HEAD PROFILE="http://www.giantco.com/profiles/common">
    <META NAME="Author" CONTENT="Danny Goodman">
    <META NAME="keywords" CONTENT="avantages,assurance,">
    ...
</HEAD>
Valeur
Adresse URL valide, ou constante de profil du navigateur.
Par défaut Valeur par défaut du navigateur.
TITLE | NN s.o. IE 4 HTML s.o.
TITLE=« Commentaire » | Facultatif

Description de l'élément. Comme l'élément HEAD n'affiche aucun contenu dans la fenêtre du navigateur, aucune zone de l'écran ne peut être associée à l'info-bulle normale qui affiche les données les données de l'attribut TITLE.

Il ne faut surtout pas confondre l'attribut TITLE d'un élément HEAD avec l'élément TITLE, qui est imbriqué dans l'élément HEAD. Ce dernier représente le titre du document tel qu'il apparaît dans la barre de titre du navigateur, et qui peut être analysé par des programmes d'analyse de document à fins d'indexation.

Exemple
<HEAD TITLE="Liste de prix">...</HEAD>
Valeur
Chaîne de caractères quelconque. Cette chaîne doit figurer entre guillemets (simples ou doubles, mais identiques).
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.all.IDélément.title


<HR> | NN tous IE tous HTML tous
<HR> | Balise de fin : interdite

L'élément HR trace une ligne horizontale selon les règles visuelles du navigateur, avec un certain nombre de contrôles d'attributs. L'élément HR forme un bloc : le trait débute et se termine sur sa propre ligne, comme si l'élément était entouré d'éléments BR. Cet élément ne possède aucun contenu, et nombre de ses attributs, qui ont été longtemps utilisés, sont désormais déconseillés en HTML 4.0, qui leur préfère des règles de feuille de style. Les recommandations HTML laissent les spécifications d'apparence par défaut à la discrétion des développeurs du navigateur.

Exemple
<HR ALIGN="center" WIDTH="80%">
Référence de modèle d'objet
IE [window.]document.all.IDélément
ALIGN | NN tous IE tous HTML 3.2
ALIGN=« alignement » | Facultatif

Détermine le rendu de l'élément HR par rapport au conteneur père, généralement le corps du document (BODY). L'attribut ALIGN est déprécié en HTML 4.0, qui conseille d'utiliser l'attribut align: dans une feuille de style.

Exemple
<HR ALIGN="right">
Valeur
Une des trois valeurs suivantes, non sensibles à la casse : center | left | right.
Par défaut left
Référence de modèle d'objet
IE [window.]document.all.IDélément.align
COLOR | NN s.o. IE 4 HTML s.o.
COLOR=« Triplet_de_couleurs_en_hexa ou Nom_en_anglais » | Facultatif

Définit la couleur de l'élément HR dans Internet Explorer. La définition de l'attribut COLOR active l'attribut NOSHADE. Pour obtenir une ligne horizontale avec un effet 3 D d'une couleur précise, utilisez l'attribut color: dans une feuille de style. Toutefois, Navigator 4 n'applique pas les règles des feuilles de style aux éléments HR.

Exemple
<HR COLOR="salmon">
Valeur
Triplet de couleurs en hexadécimal, ou l'un des noms de couleurs en anglais. Reportez-vous à l'annexe A pour connaître les noms de couleurs admissibles.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.all.IDélément.color
NOSHADE | NN tous IE tous HTML 3.2
NOSHADE | Facultatif

La présence de l'attribut NOSHADE indique au navigateur que la ligne doit être simple, sans effet 3 D. Dans Internet Explorer, si l'attribut COLOR a été défini, le navigateur affecte le style sans ombrage au style par défaut.

Exemple
<HR NOSHADE>
Valeur
La présence de cet attribut désactive l'effet d'ombre portée.
Par défaut Off.
Référence de modèle d'objet
IE [window.]document.all.IDélément.noShade
SIZE | NN tous IE tous HTML 3.2
SIZE=« Taille_en_pixels » | Facultatif

Vous pouvez indiquer l'épaisseur de l'élément HR en affectant une valeur à l'attribut SIZE. L'attribut SIZE est déprécié en HTML 4.0, qui conseille d'utiliser l'attribut height: dans une feuille de style. Cette règle de style peut être utilisée avec Internet Explorer 4, mais pas avec Navigator 4.

Exemple
<HR SIZE=4>
Valeur
Tout entier positif. Avec la valeur zéro, la ligne aura un pixel d'épaisseur.
Par défaut 2
Référence de modèle d'objet
IE [window.]document.all.IDélément.size
WIDTH | NN tous IE tous HTML 3.2
WIDTH=« longueur » | Facultatif

Définit la largeur précise, en pixels ou en pourcentage de la largeur de l'élément conteneur, de l'élément HR. Cet attribut est déprécié en HTML 4.0, qui conseille d'utiliser l'attribut width: dans une feuille de style.

Exemple
<HR WIDTH="75%">
Valeur
Toute valeur en pixels ou en pourcentage de l'espace disponible.
Par défaut 100%
Référence de modèle d'objet
IE [window.]document.all.IDélément.width


<HTML> | NN tous IE tous HTML tous
<HTML>...</HTML> | Balise de fin : facultative

L'élément HTML est le conteneur de l'ensemble du contenu du document, y compris de l'élément HEAD. Les balises de début et de fin sont facultatives, mais le bon usage veut qu'elles soient toutes deux incluses. En général, la balise de début de l'élément HTML apparaît à la seconde ligne d'un fichier HTML, à la suite de la déclaration de DTD (Document Type Definition). Si aucune DTD n'apparaît dans le fichier (ce qui active la définition de type de document par défaut du navigateur), la balise de début HTML débute la première ligne du fichier. La balise de fin doit se trouver à la dernière ligne du fichier, mais il n'est pas obligatoire qu'elle soit seule sur cette ligne.

Exemple
<HTML>
<HEAD>
    ...
</HEAD>
<BODY>
    ...
</BODY>
</HTML>
TITLE | NN s.o. IE 4 HTML s.o.
TITLE=« Commentaire » | Facultatif

Description de l'élément. Dans Internet Explorer 4, le titre apparaît dans une info-bulle lorsque le pointeur de la souris reste immobile quelques instants sur le fond du document. Les attributs TITLE des autres éléments de la fenêtre prennent le dessus sur la valeur d'attribut définie pour l'élément HTML.

Exemple
<HTML TITLE="Voici un document intéressant !">...</HTML>
Valeur
Chaîne de caractères quelconque. Cette chaîne doit figurer entre guillemets (simples ou doubles, mais identiques).
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.all.IDélément.title
VERSION | NN s.o. IE 3,2 HTML s.o.
VERSION=« chaîne » | Facultatif

L'attribut VERSION est déprécié en HTML 4.0, et n'a jamais été adopté pour les principaux navigateurs. Cette information, qui était à l'origine destinée à spécifier la version de la DTD HTML prise en charge par le document, figure de façon universelle dans une déclaration de DTD séparée (dans l'élément !DOCTYPE) avant l'élément HTML, en tête du document.

Valeur
Chaîne de caractères quelconque. Cette chaîne doit figurer entre guillemets (simples ou doubles, mais identiques).
Par défaut Aucune.


<I> | NN tous IE tous HTML tous
<I>...</I> | Balise de fin : obligatoire

L'élément I, qui est l'un des divers éléments de style de caractères en HTML 4.0, active la version italique de la police utilisée dans son conteneur HTML père. Il est possible d'imbriquer plusieurs éléments de style de caractère pour combiner des styles, par exemple gras italique (<B><I>texte en gras italique</I></B>).

Selon le navigateur et les polices disponibles, la police système sera restituée en italique par un algorithme, ou la version italique de la police actuelle sera chargée. Si vous êtes soucieux de qualité typographique, il est préférable d'utiliser des feuilles de style (et éventuellement des polices téléchargeables) pour spécifier une véritable version en italique de la police de caractères, plutôt que risquer de laisser le navigateur extrapoler une version en italique d'une police système.

Vous pouvez tirer parti de l'état de conteneur de cet élément en affectant des règles de feuille de style à une partie ou à la totalité des éléments I d'une page. Par exemple, vous pouvez affecter la couleur rouge à tous les éléments I. En créant la règle de style I{color:red}, vous agirez d'un coup sur tous ces éléments en n'utilisant que quelques octets pour le code.

Bien que cet élément ne soit pas déprécié en HTML 4.0, il ne serait pas surprenant de le voir perdre de sa popularité au profit de l'attribut de feuille de style font-style: dans un proche avenir.

Exemple
<P>Ce produit est <I>nouveau</I> et <I>amélioré</I> !</P>
Référence de modèle d'objet
IE [window.]document.all.IDélément


<IFRAME> | NN s.o. IE 3 HTML 4
<IFRAME>...</IFRAME> | Balise de fin : obligatoire

L'élément IFRAME crée un cadre interne au sein du flux naturel de contenu du document. Ce cadre (frame) est un espace rectangulaire dans lequel peut être chargé un autre document HTML (ou dans lequel il est possible d'écrire un contenu dynamique, à l'aide d'un script). Si vous affectez une valeur à l'attribut NAME d'un élément IFRAME, vous pouvez ensuite utiliser ce nom comme valeur de l'attribut TARGET d'un élément A, FORM, ou de tout autre élément qui permet de définir une cible de destination ou de renvoi d'un document.

Bien que l'espace rectangulaire défini par l'élément IFRAME débute immédiatement après le contenu qui le précède (donc éventuellement dans une ligne de texte), le contenu qui suit la balise de fin de cet élément débute sur la ligne qui suit ce rectangle. Le texte qui encadre l'élément IFRAME peut être aligné de la même manière que pour les éléments IMG ou OBJECT.

Le contenu qui figure entre les balises de début et de fin de l'élément IFRAME est ignoré par les navigateurs qui prennent en charge cet élément. Les autres navigateurs affichent ce contenu dans le flux HTML ; cela permet d'indiquer à l'utilisateur que son navigateur n'affiche pas la page intégralement et, éventuellement, de fournir un lien vers des informations complémentaires). Dans Navigator 4, l'élément le plus proche de IFRAME, en termes de fonctionnalités et de comportement, est l'élément ILAYER.

Exemple
<IFRAME SRC="cours.html" WIDTH=150 HEIGHT=90>
<A HREF="cours.html" TARGET="new" STYLE="color:darkred">
 Cliquez ici pour voir les derniers cours de la Bourse </A>
</IFRAME>
Référence de Modèle d'objet
IE [window.]document.Nom_du_cadre
ALIGN | NN s.o. IE 3 HTML 4
ALIGN=« Constante_d'alignement » | Facultatif

Détermine le type d'alignement du rectangle de l'élément IFRAME dans le contexte du contenu environnant. Consultez la section « Constantes d'alignement » ci-dessus pour avoir la description des possibilités définies dans Internet Explorer pour cet attribut. Les recommandations HTML ne spécifient qu'un sous-ensemble des constantes autorisées, alors qu'Internet Explorer 4 en propose la gamme complète.

Exemple
<IFRAME SRC="cours.html" WIDTH=150 HEIGHT=90 ALIGN="baseline"></IFRAME>
Valeur
Constante non sensible à la casse.
Par défaut bottom
Référence de Modèle d'objet
IE [window.]document.Nom_du_cadre.align
BORDER | NN s.o. IE 4 HTML s.o.
BORDER=« Taille_en_pixels » | Facultatif

En ce qui concerne les bordures de l'élément IFRAME dans Internet Explorer 4, on constate une grande différence entre la théorie et la pratique, en particulier s'il s'agit d'obtenir le même résultat quel que soit le système d'exploitation. La version Macintosh d'IE 4 affiche les éléments IFRAME avec une bordure en 3D qui reste toujours visible, quelle que soit la valeur donnée à l'attribut BORDER. Dans la version Windows, cet effet 3D disparaît si vous désactivez l'attribut FRAMEBORDER. Quant à l'attribut BORDER,la « taille de la bordure » sert en fait à paramétrer la marge dans IE 4 pour Macintosh, mais uniquement pour les bordures supérieure et gauche de l'espace utilisé par le cadre : le contenu est décalé vers le bas et à droite en fonction de la taille de la bordure, ce qui entraîne un débordement de ce contenu au-delà des côtés inférieur et droit du cadre - le résultat est pour le moins décevant. La valeur affectée à l'attribut BORDER semble ne pas avoir d'effet sous Windows. La bordure qui encadre un élément IFRAME ne ressemble en aucune manière à celle qui encadre un élément FRAME dans IE 4.

Le fait que les spécifications HTML 4.0 ne comportent pas d'attribut BORDER permet de penser que leurs concepteurs ont préféré l'utilisation d'une feuille de style pour définir les bordures, plutôt qu'un paramétrage de bordures liées uniquement aux cadres. Pour obtenir une véritable bordure autour d'un élément IFRAME dans IE 4, utilisez l'attribut équivalent dans une feuille de style. Son comportement est nettement plus cohérent et prévisible (et il n'a absolument aucun rapport avec celui des bordures paramétrées dans une feuille de style pour les cadres définis à l'aide de l'élément FRAMESET, car ces bordures ne fonctionnent pas).

Exemple
<IFRAME SRC="cours.html" WIDTH=150 HEIGHT=90 BORDER=10></IFRAME>
Valeur
Tout entier positif.
Par défaut 0
Référence de Modèle d'objet
IE [window.]document.frameName.border
BORDERCOLOR | NN s.o. IE 4 HTML s.o.
BORDERCOLOR=« Triplet_de_couleurs_en_hexa, ou Nom_en_anglais » | Facultatif

L'attribut BORDERCOLOR est supposé affecter une couleur à toute bordure encadrant un élément IFRAME. En pratique, comme les bordures contrôlées par des attributs n'apparaissent pas dans la version Windows d'Internet Explorer 4, aucune couleur n'apparaît. Sur le Macintosh, la couleur indiquée peut apparaître sur deux côtés adjacents d'un élément IFRAME, mais le résultat est imprévisible. Utilisez des règles de feuille de style pour affecter des bordures et des couleurs de bordure aux éléments IFRAME.

Exemple
<IFRAME SRC="cours.html" WIDTH=150 HEIGHT=90 BORDERCOLOR="salmon">
</IFRAME>
Valeur
Triplet de couleurs en hexadécimal, ou l'un des noms de couleurs en anglais. Reportez-vous à l'annexe A pour connaître les noms de couleurs admissibles.
Par défaut Aucune.
Référence de Modèle d'objet
IE [window.]document.frameName.borderColor
DATAFLD | NN s.o. IE 4 HTML s.o.
DATAFLD=« Nom_colonne » | Facultatif

Cet attribut est utilisé avec IE 4 dans le cadre d'une liaison de données, pour associer le nom d'une colonne d'une source de données distante à un élément IFRAME, à la place de l'attribut SRC. La colonne de la source de données doit contenir une adresse URL (relative ou absolue) valide. L'attribut DATASRC de l'élément doit être également défini.

Exemple
<IFRAME DATASRC="#DBSRC3" DATAFLD="newsURL"></IFRAME>
Valeur
Identifiant sensible à la casse.
Par défaut Aucune.
Référence de Modèle d'objet
IE [window.]document.Nom_du_cadre.dataFld
DATASRC | NN s.o. IE 4 HTML s.o.
DATASRC=« Nom_source_de_données » | Facultatif

Cet attribut est utilisé dans le cadre d'une liaison de données avec IE 4 pour spécifier le nom de la source de données ODBC distante (par exemple une base de données Oracle ou SQL Server) associée à l'élément. Le contenu de la source de données est spécifié à l'aide de l'attribut DATAFLD.

Exemple
<IFRAME DATASRC="#DBSRC3" DATAFLD="newsURL"></IFRAME>
Valeur
Identifiant sensible à la casse.
Par défaut Aucune.
Référence de Modèle d'objet
IE [window.]document.frameName.dataSrc
FRAMEBORDER | NN s.o. IE 3 HTML 4
FRAMEBORDER=« Commutateur_de_bordure » | Facultatif

Contrôle l'affichage ou non d'une bordure pour un cadre individuel au sein d'un jeu de cadres. Le paramétrage des bordures de l'élément IFRAME à l'aide des attributs de cet élément est pour le moins risqué dans Internet Explorer 4. Il est conseillé de définir et paramétrer les bordures dans une feuille de style.

Exemple
<IFRAME SRC="cours.html" WIDTH=150 HEIGHT=90 FRAMEBORDER=0></IFRAME>
Valeur
Les valeurs d'activation et désactivation de cet attribut varient selon les sources. HTML 4.0 spécifie des valeurs de 1 (activée) et 0 (désactivée). Navigator utilise yes et no. Internet Explorer 4 accepte les valeurs HTML et yes ou no.
Par défaut 1
Référence de Modèle d'objet
IE [window.]document.frameName.frameBorder
FRAMESPACING | NN s.o. IE 4 HTML s.o.
FRAMESPACING=« Largeur_en_pixels » | Facultatif

Contrôle l'espacement entre plusieurs éléments IFRAME adjacents. En pratique, cet attribut est sans effet dans Internet Explorer 4. Utilisez des attributs de feuille de style pour créer des bordures autour des éléments IFRAME.

Valeur
Tout entier positif.
Par défaut 0
Référence de Modèle d'objet
IE [window.]document.Nom_du_cadre.frameSpacing
HEIGHT, WIDTH | NN s.o. IE 4 HTML s.o.
HEIGHT=« hauteur » WIDTH=« largeur » | Facultatif

La documentation HTML de Microsoft pour IE 4 indique que les attributs HEIGHT et WIDTH contrôlent la taille de l'élément IFRAME. En fait, ces attributs sont pris en charge par IE 4 pour Windows, mais pas par la version Macintosh. De plus, ces attributs ne sont pas reconnus comme propriétés contrôlables par script, ce qui signifie trop souvent qu'ils ne sont pas véritablement pris en charge. L'utilisation de ces attributs se fera à vos propres risques... Toutefois, vous pouvez vous fier au positionnement (relatif) dans une feuille de style pour définir la largeur et la hauteur de l'élément, quel que soit le système d'exploitation du navigateur client.

Exemple
<IFRAME SRC="nav.html" HEIGHT=200 WIDTH=200>
Valeur
Toute valeur en pixels ou en pourcentage de l'espace disponible.
Par défaut Largeur : 300 pixels ; hauteur : 150 pixels.
HSPACE, VSPACE | NN s.o. IE 4 HTML s.o.
HSPACE=« Taille_en_pixels » VSPACE=« Taille_en_pixels » | Facultatif

Définit le « remplissage » (marge extérieure) autour d'un élément IFRAME par rapport au flux de contenu. L'attribut HSPACE contrôle la marge extérieure le long des côtés gauche et droit (remplissage horizontal), et l'attribut VSPACE contrôle la marge extérieure le long des côtés supérieur et inférieur (remplissage vertical). Ce « remplissage » permet d'ajouter un espace vide autour du cadre concerné. Vous pouvez également utiliser les divers paramètres de marges dans une feuille de style, en particulier si vous ne désirez redéfinir l'espace vierge que le long d'un seul côté.

Exemple
<IFRAME SRC="nav.html" HSPACE=20 VSPACE=10>
Valeur
Tout entier positif.
Par défaut 0
LONGDESC | NN s.o. IE 4 HTML s.o.
LONGDESC=« URL » | Facultatif

Permet de spécifier l'adresse URL d'un document contenant une description de l'élément plus longue que celle qui apparaît dans l'attribut TITLE. Une application de cet attribut, dans de futures versions des navigateurs, pourra consister à recevoir une description annotée de l'élément, pour les utilisateurs qui ne peuvent pas lire l'écran du navigateur.

Exemple
<IFRAME LONGDESC="navDesc.html" TITLE="Barre de navigation" SRC="navbar.html">
</IFRAME>
Valeur
Toute adresse URL valide (complète ou relative).
Par défaut Aucune.
MARGINHEIGHT, MARGINWIDTH | NN s.o. IE 3 HTML 4
MARGINHEIGHT=« Taille_en_pixels » MARGINWIDTH=« Taille_en_pixels » | Facultatif

Ces attributs déterminent le nombre de pixels qui séparent le bord intérieur d'un cadre et le contenu de ce cadre. L'attribut MARGINHEIGHT contrôle l'espace le long des bords supérieur et inférieur (en cas de défilement) du cadre ; l'attribut MARGINWIDTH contrôle l'espace le long des bords gauche et droit. Les spécifications HTML 4.0 laissent le comportement par défaut à la discrétion des développeurs du navigateur.

En l'absence de toute spécification, Internet Explorer 4 insère automatiquement une marge de 14 pixels (Windows) ou de 8 pixels (Macintosh) à l'intérieur du cadre. Mais si vous tentez d'intervenir sur ce comportement par défaut, n'oubliez pas que le paramétrage d'un seul de ces deux attributs provoque la passage à la valeur zéro de l'autre attribut. C'est pourquoi des valeurs doivent être affectées pour ces deux attributs à la fois, sauf si vous désirez que le contenu soit aligné absolument sur les bords de divers cadres. En raison de la disparité des valeurs par défaut selon le système d'exploitation, il n'est pas possible, dans la pratique, d'affecter de véritables valeurs par défaut à ces attributs.

Exemple
<IFRAME SRC="navbar.html" MARGINHEIGHT=20 MARGINWIDTH=14></IFRAME>
Valeur
Tout entier positif, ou zéro.
Par défaut 14(Windows) ou 8 (Macintosh)
Référence de Modèle d'objet
IE [window.]document.Nom_du_cadre.marginHeight
[window.]document.Nom_du_cadre.marginWidth
NAME | NN s.o. IE 3 HTML 4
NAME=« ID_élément » | Facultatif

Lorsque des liens ou des formulaires doivent charger leurs documents de destination ou de retour dans d'autres cadres que celui qui les contient, l'attribut TARGET de ces éléments permet d'indiquer le cadre qui doit recevoir le nouveau contenu. Pour que le contenu soit inséré dans un cadre précis, une valeur doit être affectée à l'attribut NAME de ce cadre. Cette même valeur est ensuite donnée à l'attribut TARGET de l'élément A ou FORM. Les scripts exécutés par le navigateur client utilisent également le nom des cadre pour référencer d'autres cadres ou le contenu d'autres cadres. Il est conseillé de donner un nom (identifiant) unique à tous les cadres.

Exemple
<IFRAME NAME="navbar" SRC="nav.html"></IFRAME>
Valeur
Identifiant sensible à la casse.
Par défaut Aucune.
Référence de Modèle d'objet
IE [window.]document.Nom_du_cadre.name
NORESIZE | NN s.o. IE 4 HTML s.o.
NORESIZE | Facultatif

Il est étrange que l'élément IFRAME possède un attribut NORESIZE dans Internet Explorer. En effet, quelle que soit la valeur de cet attribut, l'élément IFRAME ne peut pas être redimensionné manuellement par l'utilisateur.

Exemple
<IFRAME SRC="navbar.html" NORESIZE></IFRAME>
Valeur
La présence de cet attribut rend le cadre non redimensionnable (mais son absence également).
Par défaut Un élément IFRAME est supposé être redimensionnable par défaut, mais ce n'est pas le cas en pratique.
Référence de Modèle d'objet
IE [window.]document.Nom_du_cadre.noResize
SCROLLING | NN s.o. IE 3 HTML 4
SCROLLING=auto | no | yes | Facultatif

Par défaut, les navigateurs ajoutent des barres de défilement verticale et / ou horizontale lorsque le contenu d'un cadre interne déborde de la zone visible de cet élément. Les barres de défilement peuvent fréquemment affecter la présentation du contenu, car elles occupent un espace normalement dévolu à ce contenu (les dimensions extérieures du cadre ne changent pas en fonction de la présence ou non de barres de défilement). De plus, en raison des différences de taille des polices de caractères par défaut selon le navigateur et le système d'exploitation, un texte donné s'affichera de façon différente dans différents navigateurs. Pour empêcher le cadre d'afficher des barres de défilement, donnez la valeur "no" à l'attribut SCROLLING ; à l'inverse, pour que les barres de défilement soient présentes en permanence dans ce cadre, donnez à cet attribut la valeur "yes". Dans ce dernier cas, si le contenu ne nécessite pas de défilement, les barres seront visibles, mais inactives.

Il est conseillé de ne donner la valeur no à l'attribut SCROLLING qu'après avoir testé avec tous les navigateurs et toutes les plates-formes qu'un contenu important est toujours visible dans le cadre. Faute de quoi, en l'absence de barres de défilement, certains utilisateurs pourraient ne pas être en mesure de voir tout le contenu du cadre.

Exemple
<IFRAME SRC="navbar.html" SCROLLING=no></IFRAME>
Valeur
Constante non sensible à la casse (éventuellement entre guillemets) : auto | no | yes.
Par défaut auto
Référence de Modèle d'objet
IE [window.]document.Nom_du_cadre.scrolling
SRC | NN s.o. IE 3 HTML 4
SRC=« URL » | Facultatif

Définit l'adresse URL du contenu qui doit être chargé dans l'élément IFRAME. Cette adresse URL peut être absolue, ou relative à celle du document qui contient les spécifications du jeu de cadres. Vous pouvez également utiliser la pseudo URL javascript: pour faire apparaître dans le cadre la valeur renvoyée par le script ainsi appelé. Si l'attribut SRC est omis, le cadre reste vide.

Exemple
<IFRAME SRC="navbar.html"></IFRAME>
Valeur
Une adresse URL complète ou relative, ou la pseudo URL javascript:
Par défaut Aucune.
Référence de Modèle d'objet
IE [window.]document.Nom_du_cadre.src
STYLE | NN s.o. IE 4 HTML 4
STYLE=« Propriétés_de_feuille_de_style » | Facultatif

Cet attribut permet de définir une ou plusieurs propriétés de style pour l'élément. Les styles affectent le cadre interne lui-même, pas son contenu. C'est pourquoi une bordure définie dans le style d'un élément IFRAME apparaît autour du cadre, et non à l'intérieur de celui-ci.

Exemple
<IFRAME SRC="navbar.html" STYLE="border:solid blue 3px"></IFRAME>
Valeur
L'ensemble de la règle de feuille de style, qui est conforme à la syntaxe des CSS, est entre guillemets. Les divers attributs de style et leurs valeurs sont séparés par des points-virgules. Les attributs des feuilles de style sont présentés en détail dans le .
Par défaut Aucune.
Référence de Modèle d'objet
IE [window.]document.Nom_du_cadre.style


<ILAYER> | NN 4 IE s.o. HTML s.o.
<ILAYER>...</ILAYER> | Balise de fin : obligatoire

L'élément ILAYER est la version « interne au document » de l'élément LAYER spécifique à Netscape Navigator. Par de nombreux aspects, l'élément ILAYER fonctionne comme l'élément IFRAME dans Internet Explorer, mais il est automatiquement considéré comme positionnable dans le modèle d'objet de Navigator (comme un élément de niveau bloc dont l'attribut de feuille de style position: serait paramétré comme « relative »). C'est pourquoi un grand nombre d'attributs sont identiques à ceux de l'élément LAYER, et sont nommés en fonction de la méthode propre à Navigator pour le positionnement, le dimensionnement et l'empilement des éléments positionnables. Il est très peu probable que les éléments LAYER ou ILAYER soient adoptés par le W3C, c'est pourquoi il est conseillé d'utiliser le positionnement par feuille de style (CSS-Positioning), qui fonctionne avec les deux principaux navigateurs.

Le contenu d'un élément ILAYER peut être lu dans un fichier séparé (à l'aide de l'attribut SRC) ou saisi directement dans le document, en plaçant le texte entre les balises de début et de fin. Ces deux types de contenu peuvent être insérés dans un même élément ILAYER. Le contenu provenant d'un document externe et téléchargé à l'aide de l'attribut SRC est d'abord affiché (en tant qu'élément de niveau bloc propre), et le contenu supplémentaire commence ensuite sur sa propre ligne, sous le rectangle qui délimite le contenu externe.

Exemple
<ILAYER ID="truc1" SRC="cours.html" WIDTH=150 HEIGHT=90></ILAYER>
Référence de modèle d'objet
NN [window.]document.Nom_du_calque
ABOVE | NN 4 IE s.o. HTML s.o.
ABOVE=« ID_calque » | Facultatif

Nomme l'élément positionnable qui doit se trouver au-dessus (c'est-à-dire devant) l'élément ILAYER actuel dans l'ordre d'empilage. Cette opération revient à définir l'attribut Z-INDEX, mais de façon relative, sans utiliser de numérotation arbitraire des calques. Si vous utilisez l'attribut ABOVE, n'utilisez pas conjointement l'attribut BELOW ou Z-INDEX pour le même élément ILAYER.

Exemple
<ILAYER ID="truc4" SRC="cours.html" ABOVE="truc3"></ILAYER>
Valeur
Identifiant sensible à la casse.
Par défaut Aucune.
Référence de modèle d'objet
NN [window.]document.Nom_du_calque.above
BACKGROUND | NN 4 IE s.o. HTML s.o.
BACKGROUND=« URL » | Facultatif

Indique l'adresse URL d'un fichier image qui sera affiché en arrière-plan du texte et autre contenu de l'élément ILAYER. À la différence des images normales, qui sont chargées par le navigateur en tant que contenu, les images d'arrière-plan sont chargées à leur taille originale (sans redimensionnement) et affichées côte à côte pour remplir l'espace disponible dans le calque. Les images de petite taille sont chargées plus rapidement, mais elles sont évidemment répétées un plus grand nombre de fois pour former la mosaïque d'arrière-plan. Les images GIF animées peuvent être utilisées en arrière-plan, mais elles occasionnent facilement de la gêne pour le visiteur. Lors du choix d'une image d'arrière-plan, veillez à en prendre une qui soit neutre par rapport au contenu principal, afin que celui-ci ressorte lisiblement. Si elles doivent vraiment être utilisées, les images d'arrière-plan doivent rester extrêmement discrètes.

Exemple
<ILAYER ID="truc4" SRC="cours.html" BACKGROUND="pli_bleu.jpg">
</ILAYER>
Valeur
Toute adresse URL valide (complète ou relative) d'un fichier image.
Par défaut Aucune.
Référence de modèle d'objet
NN [window.]document.Nom_du_calque.background
BELOW | NN 4 IE s.o. HTML s.o.
BELOW=« ID_calque » | Facultatif

Nomme l'élément positionnable qui doit se trouver en dessous (c'est-à-dire derrière) l'élément ILAYER actuel dans l'ordre d'empilage. Cette opération revient à définir l'attribut Z-INDEX de façon relative, sans utiliser de numérotation arbitraire des calques. Si vous utilisez l'attribut BELOW, n'utilisez pas conjointement l'attribut ABOVE ou Z-INDEX pour le même élément ILAYER.

Exemple
<ILAYER ID="truc4" SRC="cours.html" BELOW="truc5"></ILAYER>
Valeur
Identifiant sensible à la casse.
Par défaut Aucune.
Référence de modèle d'objet
NN [window.]document.Nom_du_calque.below
BGCOLOR | NN 4 IE s.o. HTML s.o.
BGCOLOR=« Triplet_de_couleurs_en_hexa, ou Nom_en_anglais » | Facultatif

Définit une couleur de remplissage (derrière le texte et autre contenu) pour l'ensemble du rectangle de ce calque. L'utilisation combinée de BGCOLOR et de BACKGROUND permet de laisser apparaître la couleur d'arrière-plan dans les éventuelles zones transparentes de l'image d'arrière-plan.

Exemple
<ILAYER SRC="cours.html" BGCOLOR="tan"></ILAYER>
Valeur
Triplet de couleurs en hexadécimal, ou l'un des noms de couleurs en anglais. Si la valeur de cet attribut n'est pas indiquée, elle sera interprétée comme "#000000" (noir). Reportez-vous à l'annexe A pour connaître les noms de couleurs admissibles.
Par défaut Varie selon le système d'exploitation.
Référence de modèle d'objet
NN [window.]document.Nom_du_calque.bgColor
CLIP | NN 4 IE s.o. HTML s.o.
CLIP=« [Pixel_gauche, Pixel_haut,] Pixel_droit, Pixel_bas » | Facultatif

Une zone de « clipping » est une découpe rectangulaire à l'intérieur de l'élément ILAYER complet. Seul le contenu qui se trouve à l'intérieur de ce rectangle de découpe apparaît sur la page. La valeur par défaut de l'attribut CLIP est déterminée par l'espace nécessaire pour afficher le contenu lorsqu'il « remplit » naturellement l'élément. L'utilisation de l'attribut CLIP permet de restreindre tout contenu long qui risquerait de déborder d'un rectangle dont les dimensions sont fixes pour des raisons de mise en page.

Exemple
<ILAYER SRC="cours.html" CLIP="50,50"></ILAYER>
Valeur
Les valeurs de l'attribut CLIP sont exprimées en pixels, mesurés à partir du coin supérieur gauche de l'élément dans le flux du document. Les valeurs sont indiquées dans le sens des aiguilles d'une montre à partir du côté gauche : gauche, haut, droite, bas. Si vous n'indiquez que deux valeurs, Navigator suppose que les valeurs pour les côtés gauche et supérieur sont de zéro, et que vous ne désirez ajuster que les côtés droit et inférieur. Ainsi, des valeurs de « 50,50 » signifient que la zone de découpe est un carré de 50 pixels qui débute dans le coin supérieur gauche du rectangle défini par le calque. Pour obtenir une découpe de la même taille mais débutant 10 pixels plus à gauche, les paramètres de l'attribut CLIP devront être « 10,0,60,50 ».
Par défaut Zone d'affichage normale du contenu de l'élément ILAYER.
Référence de modèle d'objet
NN [window.]document.Nom_du_calque.clip.left
[window.]document.Nom_du_calque.clip.top
[window.]document.Nom_du_calque.clip.right
[window.]document.Nom_du_calque.clip.bottom
HEIGHT, WIDTH NN 4 IE s.o. HTML s.o.
HEIGHT=« hauteur »
WIDTH=« largeur » 		Facultatif

Définit la taille minimale du calque dans le document. Toutefois, lorsqu'un contenu est ajouté dans le calque, les paramètres de ces attributs ne limitent pas la quantité de ce contenu qui est visible le long des deux axes. Par exemple, si vous affichez dans un élément ILAYER une image de 120 pixels de large sur 90 pixels de haut, la taille visible de l'élément ILAYER dont les attributs HEIGHT et WIDTH ont été définis pour une taille inférieure sera agrandie pour permettre l'affichage de la totalité de l'image. Le même phénomène se produit avec du texte ou tout autre contenu : la zone visible est agrandie pour autoriser l'affichage de tout le contenu. Pour diminuer la partie visible du contenu, il faut donc définir l'attribut CLIP.

Il est utile de paramétrer les attributs HEIGHT et WIDTH avec des valeurs spécifiques pour créer un rectangle coloré ou contenant un motif (à l'aide des attributs BGCOLOR ou BACKGROUND) qui fera fonction de calque d'arrière-plan, derrière un contenu positionné. Si le contenu du calque ne repousse pas les côtés de l'élément ILAYER, les attributs HEIGHT et WIDTH adaptent la zone de découpe à leur propre taille.

Exemple
<ILAYER BGCOLOR="yellow" HEIGHT=100 WIDTH=100></ILAYER>
Valeur
Entier positif (éventuellement entre guillemets) ou pourcentage (entre guillemets). Ces deux valeurs peuvent être paramétrées à zéro non seulement pour masquer l'élément (ce qu'il est plus simple de faire avec l'attribut VISIBILITY), mais aussi pour empêcher l'élément d'occuper une zone précise de la page.
Par défaut Zone d'affichage normale du contenu de l'élément ILAYER.
Référence de modèle d'objet
NN [window.]document.Nom_du_calque.height
[window.]document.Nom_du_calque.width
ID | NN 4 IE s.o. HTML s.o.
ID=« ID_élément » | Facultatif

Identifiant unique distinguant cet élément du reste du document. Cet identifiant est utilisé comme valeur pour les attributs ABOVE et BELOW. Les scripts utilisent également la valeur de l'attribut ID comme nom de l'élément ILAYER pour le référencement des objets.

Exemple
<ILAYER ID="unCalque" BGCOLOR="yellow" HEIGHT=100 WIDTH=100></ILAYER>
Valeur
Identifiant sensible à la casse.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.Nom_du_calque.name
LEFT, TOP NN 4 IE s.o. HTML s.o.
LEFT=« Taille_en_pixels »
TOP=« Taille_en_pixels » 		Facultatif

Définit le décalage des bords gauche et supérieur du calque par rapport aux coordonnées auxquelles cet élément ILAYER apparaîtrait normalement dans le document. Cet emplacement précis au sein de la page varie, car l'élément ILAYER est un calque interne, ce qui signifie qu'il peut débuter n'importe où selon le flux normal du contenu HTML. Lorsque l'un de ces attributs est paramétré, Navigator réserve l'espace dans lequel l'élément ILAYER doit apparaître au sein du document, au lieu de déplacer le contenu environnant pour remplir l'espace laissé vacant par l'élément lorsque celui-ci s'est positionné. Il est donc probable que vous n'aurez besoin de définir ces attributs pour un élément ILAYER que pour tenter d'obtenir une présentation adaptée à un contenu très spécifique (par exemple pour un élément ILAYER à l'intérieur d'une mosaïque d'images).

Exemple
<ILAYER BGCOLOR="yellow" LEFT=10 TOP=50></ILAYER>
Valeur
Entier positif (éventuellement entre guillemets).
Par défaut 0
Référence de modèle d'objet
NN [window.]document.Nom_du_calque.left
[window.]document.Nom_du_calque.top
SRC | NN 4 IE s.o. HTML s.o.
SRC=« URL » | Facultatif

Pour charger le contenu d'un fichier HTML externe dans un élément ILAYER, il est nécessaire d'affecter l'adresse URL de ce fichier à l'attribut SRC. Un éventuel contenu HTML situé entre les balises de début et de fin de l'élément ILAYER sera restitué sur la page après le contenu chargé depuis un fichier externe à l'aide de l'attribut SRC. Si l'attribut SRC est omis, seul le contenu situé entre les balises sera affiché. Les scripts peuvent modifier la propriété correspondante (src) après le chargement du document, ce qui permet de modifier de façon dynamique le contenu de l'élément ILAYER sans recharger tout le document.

Exemple
<ILAYER SRC="cours.html"></ILAYER>
Valeur
Une adresse URL complète ou relative.
Par défaut Aucune.
Référence de modèle d'objet
NN [window.]document.Nom_du_calque.src
TOP

Voir LEFT.

VISIBILITY | NN 4 IE s.o. HTML s.o.
VISIBILITY=« Constante_de_visibilité » | Facultatif

Détermine si Navigator doit afficher l'élément ILAYER. Par défaut, un calque hérite du paramétrage de l'attribut VISIBILITY de son élément conteneur direct. Cela signifie qu'un élément ILAYER inséré au premier niveau du document (dont l'élément conteneur est BODY), est toujours visible par défaut, puisque le contenu de base est toujours visible. Pour cacher un calque lors de l'affichage de la page, paramétrez l'attribut VISIBILITY avec la valeur "hidden". Il n'est nécessaire d'utiliser la valeur "show" que si l'élément ILAYER est imbriqué dans un autre élément LAYER dont l'attribut VISIBILITY est "hidden", par paramétrage ou par héritage.

Quel que soit le paramétrage de son attribut VISIBILITY, un élément ILAYER occupe toujours l'espace qui lui est dévolu au sein du document. Cela permet de modifier la visibilité à la volée dans Navigator (à l'aide d'un script) sans recharger le document. (Navigator 4 ne réaffiche pas automatiquement le contenu modifié.)

Exemple
<ILAYER SRC="cours.html" VISIBILITY="hidden"></ILAYER>
Valeur
L'une des trois constantes admises : hidden | inherit | visible.
Par défaut inherit
Référence de modèle d'objet
NN [window.]document.Nom_du_calque.visibility


<IMG> | NN tous IE tous HTML tous
<IMG> | Balise de fin ;: interdite

L'élément IMG permet d'afficher une image, quels que soient les formats MIME pris en charge par le navigateur. Les types MIME d'image les plus répandus sont GIF et JPEG. Les éléments IMG sont des éléments internes, qui apparaissent à l'emplacement où ils sont spécifiés, donc éventuellement au beau milieu d'une ligne de texte. Un grand nombre des attributs qui affectent la présentation visuelle des éléments sont dépréciés en HTML 4.0, en faveur des attributs équivalents dans des feuilles de style. Toutefois, il restera possible d'utiliser ces attributs sans problème dans plusieurs générations futures de navigateurs, car ces derniers devront être dotés de la compatibilité ascendante en raison du très grand nombre de documents contenant des images qui existent déjà sur le Web. Si vous avez l'intention d'utiliser des feuilles de style pour les bordures et les marges de l'élément IMG dans Navigator 4, notez que cet élément IMG doit être imbriqué dans un élément DIV ou SPAN auquel seront affectées les règles de feuille de style. Ce palliatif fonctionne également avec Internet Explorer, ce qui vous permet d'utiliser des feuilles de style indépendamment du navigateur cible.

Pour que la totalité d'une image devienne un lien, placez l'élément IMG à l'intérieur d'un élément A. Pour éliminer la bordure typique des liens qui encadrera alors l'image, paramétrez l'attribut BORDER avec la valeur 0. Quant aux « cartes graphiques » (images dont diverses parties contiennent des liens pointant vers diverses destinations), les recommandations HTML conseillent de les utiliser du côté client (à l'aide de l'attribut USEMAP) plutôt que du côté serveur (avec l'attribut ISMAP).

Pour assurer la compatibilité ascendante avec les anciennes versions des navigateurs gérant les scripts, il est conseillé d'insérer des attributs HEIGHT et WIDTH à l'intérieur des balises de tous les éléments IMG. Lorsque des valeurs sont affectées à ces attributs, le navigateur affiche ces pages plus rapidement, puisqu'il n'a pas besoin d'attendre que l'image soit chargée pour déterminer sa taille et positionner en conséquence le reste du contenu de la page.

Exemple
<IMG SRC="MontBlanc.jpg" HEIGHT=90 WIDTH=120>
Référence de modèle d'objet
NN | [window.]document.Nom_de_l'image [window.]document.images[i]
IE | [window.]document.Nom_de_l'image [window.]document.images[i] [window.]document.all.IDélément
ALIGN | NN tous IE tous HTML tous
ALIGN=« alignement » | Facultatif

Détermine le rendu de l'élément IMG par rapport au conteneur père et au contenu environnant. Certains paramètres permettent de faire « flotter » l'image en l'alignant sur la marge gauche ou droite, et en laissant le texte environnant encadrer l'image (sauf avec une image centrée).

La plupart des règles concernant les constantes d'alignement indiquées au début de ce chapitre s'appliquent à l'élément IMG. L'attribut ALIGN est déprécié en HTML 4.0, qui conseille d'utiliser les attributs de feuille de style. Mais vous pouvez utiliser l'attribut ALIGN pour assurer la compatibilité ascendante de votre document.

Exemple
<IMG SRC="surfeur.gif" ALIGN="right" HEIGHT=100 WIDTH=200>
Valeur
Chaque navigateur définit un ensemble de valeurs différent pour cet attribut. Bien que l'attribut ALIGN ait une longue histoire, ce n'est pas le cas de toutes les valeurs qui lui sont attribuées. Certaines valeurs ésotériques, telles que absmiddle et baseline, ont été ajoutées dans Navigator 3 et Internet Explorer 4. Choisissez dans le tableau suivant les valeurs adaptées à votre déploiement ;:
Valeur NN 4 IE 4 HTML 4.0
absbottom
         * * -
absmiddle
         * * -
baseline
         * * -
bottom
         * * *
left
         * * *
middle
         * * *
right
         * * *
texttop
         * * -
top
         * * *
Par défaut bottom
Référence de modèle d'objet
IE [window.]document.Nom_de_l'image.align
[window.]document.images[i].align
ALT | NN tous IE tous HTML tous
ALT=« Texte » | Obligatoire

Dans un monde où les navigateurs graphiques se sont taillé la part du lion, il est facile d'oublier que certains utilisateurs ne peuvent pas, ou ne veulent pas, afficher les images. Sans parler des utilisateurs de terminaux VT100 équipés de navigateurs en mode texte tels que Lynx, les ordinateurs de poche offrent en général de meilleures performances lorsque les images ne sont pas téléchargées. Dans ce type de navigateurs, l'image est remplacée par le texte affecté à l'attribut ALT à l'emplacement exact où l'élément IMG doit apparaître dans la page. En principe, l'attribut ALT doit contenir une brève description de l'image. Les recommandations HTML considèrent que l'attribut ALT est obligatoire pour l'élément IMG, mais en pratique les navigateurs graphiques s'accommodent de son absence. Notez toutefois que certains navigateurs affichent le texte de l'attribut ALT pendant que l'image est en cours de téléchargement, pour aider le visiteur à patienter. La taille de la zone dévolue à l'image sur la page peut limiter la longueur du texte qu'il est possible d'utiliser pour ALT. Vérifiez que toute la description est lisible.

Exemple
<IMG SRC="navbar.gif" USEMAP="#nav" ALT="Barre de navigation" WIDTH=400 HEIGHT=50>
Valeur
Chaîne de caractères quelconque entre guillemets.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.Nom_de_l'image.alt
[window.]document.images[i].alt
BORDER | NN tous IE tous HTML 3.2
BORDER=« Taille_en_pixels » | Facultatif

Navigator comporte un attribut spécial permettant d'indiquer l'épaisseur de la bordure qui encadre un élément IMG. Par défaut, la bordure est affichée en noir, mais si l'élément IMG est imbriqué dans un élément A, cette bordure reprend les diverses couleurs du lien, selon l'état de celui-ci. Pour créer une bordure dans une autre couleur, utilisez les feuilles de style (en imbriquant l'élément IMG dans l'élément DIV ou SPAN approprié pour Navigator 4). Lorsqu'un lien encadre l'image, vous pouvez éliminer la bordure colorée en indiquant une valeur de zéro pour l'attribut BORDER.

Exemple
<IMG SRC="surfeur.gif" BORDER=3 HEIGHT=100 WIDTH=200>
Valeur
Un nombre entier de pixels.
Par défaut 0
Référence de modèle d'objet
NN | [window.]document.Nom_de_l'image.border [window.]document.images[i].border
IE | [window.]document.Nom_de_l'image.border [window.]document.images[i].border
DATAFLD | NN s.o. IE 4 HTML s.o.
DATAFLD=« Nom_colonne » | Facultatif

Cet attribut est utilisé avec IE 4 dans le cadre d'une liaison de données, pour associer le nom d'une colonne d'une source de données distante à l'adresse URL indiquée dans l'attribut SRC de l'élément IMG. La colonne de la source de données doit contenir une adresse URL (relative ou absolue) valide. L'attribut DATASRC de l'élément IMG doit être également défini.

Exemple
<IMG DATASRC="#DBSRC3" DATAFLD="img3URL" HEIGHT=100 WIDTH=150>
Valeur
Identifiant sensible à la casse.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.Nom_de_l'image.dataFld
[window.]document.images[i].dataFld
DATASRC | NN s.o. IE 4 HTML s.o.
DATASRC=« Nom_source_de_données » | Facultatif

Cet attribut est utilisé dans le cadre d'une liaison de données avec IE 4 pour spécifier le nom de la source de données ODBC distante (par exemple une base de données Oracle ou SQL Server) associée à l'élément. Le contenu de la source de données est spécifié à l'aide de l'attribut DATAFLD.

Exemple
<IMG DATASRC="#DBSRC3" DATAFLD="img3URL" HEIGHT=100 WIDTH=150>
Valeur
Identifiant sensible à la casse.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.Nom_de_l'image.dataSrc
[window.]document.images[i].dataSrc
DYNSRC | NN s.o. IE 4 HTML s.o.
DYNSRC=« URL » | Facultatif

Internet Explorer 4 permet d'afficher des clips vidéo (et des fichiers VRML) à l'aide de l'élément IMG (comme alternative aux éléments EMBED ou OBJECT). Pour aider le navigateur à différencier les sources d'images statiques ou dynamiques, vous pouvez utiliser l'attribut DYNSRC à la place de l'attribut SRC pour charger le clip vidéo. Tous les autres aspects visuels de l'élément IMG sont donc immédiatement applicables à la zone rectangulaire destinée à l'affichage du clip vidéo. Consultez les sections consacrées aux attributs LOOP, qui permet de contrôler le nombre de lectures du clip, et START.

Exemple
<IMG DYNSRC="animation.avi" LOOP=3 HEIGHT=100 WIDTH=150>
Valeur
Toute adresse URL valide (complète ou relative).
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.images[i].dynsrc
[window.]document.Nom_de_l'image.dynsrc
HEIGHT, WIDTH NN tous IE tous HTML 3.2
HEIGHT=« longueur »
WIDTH=« largeur » 		Facultatif

Définit les dimensions de l'espace qui est réservé à l'image sur la page, quelle que soit la taille réelle de l'image. Pour garantir la meilleure qualité d'image et la compatibilité ascendante avec les scripts, il est conseillé de donner à ces attributs les valeurs de hauteur et largeur réelles de l'image source. Si vous indiquez des valeurs différentes, le navigateur modifiera l'échelle de l'image pour adapter celle-ci à l'espace défini par ces attributs.

Exemple
<IMG SRC="surfeur.gif" HEIGHT=100 WIDTH=200>
Valeur
Entier positif (éventuellement entre guillemets) ou pourcentage (entre guillemets).
Par défaut Taille réelle de l'image source.
Référence de modèle d'objet
NN | [window.]document.Nom_de_l'image.height [window.]document.images[i].height [window.]document.Nom_de_l'image.width [window.]document.images[i].width
IE | [window.]document.Nom_de_l'image.height [window.]document.images[i].height [window.]document.Nom_de_l'image.width [window.]document.images[i].width
HSPACE, VSPACE NN tous IE tous HTML 3.2
HSPACE=« Taille_en_pixels »
VSPACE=« Taille_en_pixels » 		Facultatif

Définit une marge qui fait office de réserve autour du contenu visuel de l'élément IMG. L'attribut HSPACE définit une marge sur les côtés gauche et droit du rectangle de l'image ; l'attribut VSPACE définit une marge sur les côtés inférieur et supérieur du rectangle de l'image. Ces attributs sont dépréciés en HTML 4.0 ; Il est donc préférable d'utiliser les attributs de feuille de style équivalents.

Exemple
<IMG SRC="desk3.gif" VSPACE=10 HSPACE=10>
Valeur
Un entier représentant le nombre de pixels désiré pour la largeur de marge sur les côtés du rectangle de l'élément IMG.
Par défaut 0
Référence de modèle d'objet
NN | [window.]document.Nom_de_l'image.hspace [window.]document.images[i].hspace [window.]document.Nom_de_l'image.vspace [window.]document.images[i].vspace
IE | [window.]document.Nom_de_l'image.hspace [window.]document.images[i].hspace [window.]document.Nom_de_l'image.vspace [window.]document.images[i].vspace
ID | NN 4 IE 3 HTML 4
ID=« ID_élément » | Facultatif

Identifiant unique distinguant cet élément du reste du document. Il permet d'associer un élément à une règle de style, en utilisant la valeur de cet attribut comme ID de sélecteur. Un élément peut recevoir une ID qui en assurera l'unicité, ainsi qu'une classe qui le rattachera à un groupe. Voir .

Si vous déclarez un attribut ID et ne déclarez pas d'attribut NAME, la valeur de l'attribut ID ne peut pas être utilisée de façon fiable comme nom de l'élément IMG dans les diverses instructions de scripts qui utilisent le nom de l'élément. Avec certains navigateurs, c'est l'élément NAME qui doit être utilisé pour référencer le nom d'une image.

Exemple
<IMG SRC="bureau3.gif" ID="bureau3" HEIGHT=90 WIDTH=120>
Valeur
Identifiant sensible à la casse.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.Nom_de_l'image.id
[window.]document.images[i].id
ISMAP | NN tous IE tous HTML tous
ISMAP | Facultatif

L'attribut booléen ISMAP indique au navigateur que l'élément IMG est une carte graphique (image interactive) côté serveur. Pour transformer une image en carte graphique côté serveur, imbriquez l'élément IMG dans un élément A dont l'attribut HREF pointe vers l'adresse URL du programme CGI chargé d'interpréter les coordonnées du point sur lequel l'utilisateur clique. Le navigateur ajoute les informations relatives aux coordonnées du clic à l'adresse URL, de la même manière que la méthode GET d'un formulaire ajoute les données relatives à l'élément de formulaire à l'adresse URL de l'attribut ACTION. Dans l'exemple ci-dessous, si l'utilisateur clique sur le point situé aux coordonnées 50, 25, le navigateur renvoie au serveur la chaîne "http://www.giantco.com/cgi-bin/nav?50,25". Un programme CGI nommé nav examine alors la zone qui contient les coordonnées indiquées, et renvoie au client le code HTML adéquat.

Les navigateurs récents permettent d'utiliser des cartes graphiques côté client (voir l'attribut USEMAP), dont le fonctionnement est plus rapide car elles ne nécessitent pas d'échange avec le serveur pour examiner les coordonnées du point cliqué.

Exemple
<A HREF="http://www.giantco.com/cgi-bin/nav" TARGET="main">
<IMG SRC="navbar.gif" ISMAP HEIGHT=90 WIDTH=120>
</A>
Valeur
La présence de cet attribut active sa fonctionnalité.
Par défaut Off.
Référence de modèle d'objet
IE [window.]document.Nom_de_l'image.isMap
[window.]document.images[i].isMap
LONGDESC | NN s.o. IE 4 HTML s.o.
LONGDESC=« URL » | Facultatif

Permet de spécifier l'adresse URL d'un document contenant une description de l'élément plus longue que celle qui apparaît dans les attributs ALT ou TITLE. Une application de cet attribut, dans de futures versions des navigateurs, pourra consister à recevoir une description annotée de l'élément, pour les utilisateurs qui ne peuvent pas lire l'écran du navigateur.

Exemple
<IMG LONGDESC="navDesc.html" ALT="Barre de navigation" SRC="navbar.jpg">
Valeur
Toute adresse URL valide (complète ou relative).
Par défaut Aucune.
LOOP | NN s.o. IE 3 HTML s.o.
LOOP=« Nombre_de_boucles » | Facultatif

Si vous avez spécifié un clip vidéo à l'aide de l'attribut DYNSRC, l'attribut LOOP permet de contrôler le nombre de lectures (« en boucle ») du clip après son chargement. Si vous donnez la valeur zéro à cet attribut, le clip est chargé mais sa lecture n'est pas immédiatement déclenchée. La lecture des clips vidéo qui ne sont pas déjà en cours d'exécution est déclenchée lorsque l'utilisateur double-clique sur l'image, mais il peut être nécessaire de fournir à l'utilisateur des instructions à cet effet, car aucun contrôle n'est visible.

Exemple
<IMG DYNSRC="animation.avi" LOOP=3 HEIGHT=100 WIDTH=150>
Valeur
Tout entier positif, ou zéro.
Par défaut 1
Référence de modèle d'objet
IE [window.]document.Nom_de_l'image.loop
[window.]document.images[i].loop
LOWSRC | NN 3 IE 4 HTML s.o.
LOWSRC=« URL » | Facultatif

Les développeurs de Navigator et d'Internet Explorer étaient conscients du fait que la majorité des utilisateurs ne disposent pas d'une connexion rapide à l'Internet, et que le chargement des images en haute résolution peut alors prendre beaucoup de temps. Pour aider l'internaute à patienter, l'attribut LOWSRC permet d'indiquer l'adresse URL d'une image en basse résolution (ou image alternative) qui sera chargée dans un premier temps à l'emplacement prévu dans le document pour l'image normale. L'image pointée par l'attribut LOWSRC doit en principe avoir la même taille, en pixels, que l'image principale définie dans l'attribut SRC.

Exemple
<IMG SRC="navbar.jpg" LOWSRC="navbarBW.jpg" HEIGHT=60 WIDTH=300>
Valeur
Toute adresse URL valide (complète ou relative).
Par défaut Aucune.
Référence de modèle d'objet
NN | [window.]document.Nom_de_l'image.lowsrc [window.]document.images[i].lowsrc
IE | [window.]document.Nom_de_l'image.lowsrc [window.]document.images[i].lowsrc
NAME | NN 3 IE 4 HTML s.o.
NAME=« ID_élément » | Facultatif

Pour contrôler une image à l'aide d'un script (en particulier pour une interversion d'images), il est en général plus pratique de créer une référence à l'élément IMG en lui affectant un nom unique. Par la suite, si vous modifiez la page et déplacez ou effacez plusieurs éléments IMG de cette page, vous n'aurez pas à vous soucier de modifier les valeurs d'index comme c'est le cas pour un référencement en tableau (document.images[i]).

Exemple
<IMG NAME="tasse" SRC="janem.jpg" HEIGHT=90 WIDTH=80>
Valeur
Identifiant sensible à la casse.
Par défaut Aucune.
Référence de modèle d'objet
NN | [window.]document.images[i].name [window.]document.Nom_de_l'image.name
IE | [window.]document.images[i].name [window.]document.Nom_de_l'image.name
SRC | NN tous IE tous HTML tous
SRC=« URL » | Obligatoire

Adresse URL d'un fichier contenant l'image affichée par l'élément IMG. Sauf si vous utilisez l'attribut DYNSRC pour afficher un clip vidéo dans Internet Explorer, l'attribut SRC est nécessaire pour qu'une image soit affichée dans l'espace affecté à l'élément IMG. Le navigateur doit prendre en charge le type MIME du format d'image utilisé. Sur le World Wide Web, les formats d'image les plus répandus sont GIF et JPEG.

Exemple
<IMG SRC="surfeur.gif" HEIGHT=100 WIDTH=200>
Valeur
Une adresse URL complète ou relative.
Par défaut Aucune.
Référence de modèle d'objet
NN | [window.]document.images[i].src [window.]document.Nom_de_l'image.src
IE | [window.]document.images[i].src [window.]document.Nom_de_l'image.src
START | NN s.o. IE 4 HTML s.o.
START="fileopen" | "mouseover" | Facultatif

Si vous utilisez l'attribut DYNSRC d'un élément IMG pour afficher un clip vidéo, vous pouvez indiquer à cet élément que la lecture du clip doit débuter automatiquement dès la fin du chargement du fichier vidéo, ou seulement lorsque l'utilisateur amène le pointeur sur cette image. L'attribut START permet de choisir l'interface utilisateur de votre page.

Exemple
<IMG DYNSRC="animation.avi" LOOP=1 START="mouseover" HEIGHT=100 WIDTH=150>
Valeur
Une des deux constantes suivantes, non sensibles à la casse : fileopen | mouseover.
Par défaut fileopen
Référence de modèle d'objet
IE [window.]document.images[i].start
[window.]document.Nom_de_l'image.start
STYLE | NN 4 IE 3 HTML 4
STYLE=« Propriétés_de_feuille_de_style » | Facultatif

Cet attribut permet de définir une ou plusieurs propriétés de style pour l'élément. Vous pouvez utiliser la syntaxe CSS ou JavaScript pour affecter des attributs de style. Si vos pages sont destinées à un déploiement indépendant du type de navigateur, n'utilisez que la syntaxe CSS, que Navigator prend, en principe, en charge au même titre qu'Internet Explorer.

Pour la version 4 des navigateurs, il est recommandé d'utiliser si possible les feuilles de style plutôt que des attributs dédiés, mais, en raison de l'implémentation des CSS dans Navigator 4, il est nécessaire d'imbriquer les éléments IMG dans des éléments DIV ou SPAN auxquels seront affectées les règles de feuille de style relatives aux bordures et marges, pour que celles-ci fonctionnent avec les éléments IMG. L'exemple suivant, qui contient un attribut STYLE imbriqué, ne fonctionne que dans Internet Explorer.

Exemple
<IMG STYLE="padding-left:5px" SRC="surfeur.gif" HEIGHT=150 WIDTH=250>
Valeur
L'ensemble de la règle de feuille de style, qui est conforme à la syntaxe des CSS, est entre guillemets. Les divers attributs de style et leurs valeurs sont séparés par des points-virgules. Les attributs des feuilles de style sont présentés en détail dans le .
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.images[i].style
[window.]document.Nom_de_l'image.style
USEMAP | NN tous IE tous HTML 3.2
USEMAP=« URL_de_la_carte_graphique » | Facultatif

Vous pouvez définir une carte image côté client à l'aide des éléments MAP et AREA. L'élément MAP est le conteneur nommé d'un ou plusieurs éléments AREA. Chaque élément AREA définit une zone sensible de l'image et affecte une destination (et autres paramètres) à un lien en réponse au clic de l'utilisateur dans cette zone. La raison d'être de l'élément USEMAP consiste à établir une connexion entre l'élément IMG et un élément MAP nommé figurant dans le même document. Dans un sens, le nom de l'élément MAP est traité comme une ancre, dans la mesure où son « adresse » est le nom de l'élément précédé du symbole #.

Exemple
<IMG SRC="navbar.gif" USEMAP="#navigation" HEIGHT=90 WIDTH=120>
Valeur
Adresse URL pointant sur l'élément MAP dans le même document (symbole dièse suivi du nom de l'élément MAP).
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.Nom_de_l'image.useMap
[window.]document.images[i].useMap


<INPUT> | NN tous IE tous HTML tous
<INPUT> | Balise de fin ;: interdite

Les éléments INPUT sont parfois appelés contrôles de formulaire, bien que les divers types d'éléments INPUT ne soient pas tous visibles sur la page. Un élément INPUT est essentiellement destiné à offrir un emplacement permettant à l'utilisateur de saisir du texte, de cliquer sur des boutons ou d'effectuer une sélection au sein d'une liste d'options. Les données collectées à partir de ces actions interactives sont transmises à un programme sur le serveur (lorsque l'élément père FORM est envoyé), ou peuvent être strictement utilisées sur le client, pour autoriser une interactivité entre l'utilisateur et des scripts sur le client.

Avant la version 4.0 du langage HTML, les éléments INPUT étaient supposés être inclus dans un élément FORM dans tous les cas de figure. Cette restriction a été assouplie, mais Navigator 4 nécessite toujours que les éléments INPUT soient inclus dans un élément FORM pour fonctionner.

Le principal attribut, qui est chargé de déterminer le type de contrôle affiché sur la page, est l'attribut TYPE. Cet attribut accepte l'une des valeurs suivantes : button, checkbox, file, hidden, image, password, radio, reset, submit ou text. Les divers types d'éléments INPUT n'acceptent pas tous la totalité des attributs ; de plus, un attribut donné aura différents rôles selon le type d'élément INPUT avec lequel il est utilisé. La liste précise les types auxquels s'applique chaque attribut de l'élément INPUT. Bien que l'élément TEXTAREA possède sa propre balise, il est fréquemment traité comme un contrôle de formulaire.

Exemple
<FORM METHOD=post ACTION="http://www.giantco.com/cgi-bin/query">
Prénom : <INPUT TYPE="text" NAME="first" MAXLENGTH=15><BR>
Nom : <INPUT TYPE="text" NAME="last" MAXLENGTH=25><BR>
Code postal : <INPUT TYPE="text" NAME="zip" MAXLENGTH=10><BR>
<INPUT TYPE="reset">
<INPUT TYPE="submit">
</FORM>
Référence de modèle d'objet
NN | [window.]document.Nom_formulaire.Nom_contrôle [window.]document.forms[i].elements[i]
IE | [window.]document.Nom_formulaire.Nom_contrôle [window.]document.forms[i].elements[i] [window.]document.all.IDélément
ACCEPT | NN s.o. IE s.o. HTML 4
ACCEPT=« Liste_de_types_MIME » | Facultatif

Permet d'indiquer un ou plusieurs types MIME pour les fichiers qui peuvent être transmis au serveur lorsque le formulaire est envoyé. L'implémentation prévue pour cet attribut consistait à filtrer les types de fichiers apparaissant dans des zones de dialogue utilisées pour choisir un fichier à télécharger. En un sens, cet attribut assure une validation sur le client d'un type de fichier, afin que les fichiers non conformes au type MIME autorisé ne soient même pas transmis au serveur. Les spécifications HTML 4.0 affectent également cet attribut à l'élément FORM. Il n'est pas certain que les implémentations dans les divers navigateurs reconnaissent cet attribut avec ces deux éléments.

Types de données en entrée file
Exemple
<INPUT TYPE="file" ACCEPT="text/html, image/gif" ...>
Valeur
Constante de type MIME (type de contenu) non sensible à la casse. Il est possible d'indiquer plusieurs valeurs, qui sont alors séparées par des virgules.
Par défaut Aucune.
ACCESSKEY | NN s.o. IE 4 HTML 4
ACCESSKEY=« caractère » | Facultatif

Caractère unique ; lorsque l'utilisateur appuie sur la touche correspondante, l'élément concerné est activé. Selon le navigateur et le système d'exploitation, l'utilisateur doit appuyer sur une touche de modification (par exemple Ctrl, Alt ou Commande) simultanément à la touche désignée pour activer le lien. Dans IE 4 pour Windows, c'est la touche Alt qui doit être enfoncée, et la touche du caractère n'est pas sensible à la casse. Cet attribut est inopérant dans IE 4 pour Macintosh.

Types de données en entrée button, checkbox, file, password, radio, reset, submit, text
Exemple
<INPUT TYPE="text" NAME="first" MAXLENGTH=15 ACCESSKEY="f"><BR>
Valeur
Un caractère unique pour l'ensemble du document.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.Nom_formulaire.Nom_contrôle.accessKey
[window.]document.forms[i].elements[i].accessKey
[window.]document.all.IDélément.align
ALIGN | NN tous IE tous HTML 3.2
ALIGN=« Constante_d'alignement » | Facultatif

Détermine le type d'alignement du rectangle de l'élément dans le contexte du contenu environnant. Consultez la section « Constantes d'alignement » ci-dessus pour avoir la description des possibilités définies dans Navigator et dans Internet Explorer pour cet attribut. Certaines valeurs d'attribut ne sont pas valides dans les navigateurs antérieurs à la version 4.

Les deux navigateurs respectent les mêmes règles de présentation du contenu environnant une image dont l'attribut ALIGN a été défini, mais les résultats effectifs sont parfois difficiles à prévoir si ce contenu environnant est complexe. Pour éviter toute mauvaise surprise, il est conseillé d'effectuer des tests complets, en variant la taille de fenêtre des navigateurs.

Types de données en entrée image
Exemple
<INPUT TYPE="image" NAME="icon" SRC="icon.gif" ALIGN="absmiddle">
Valeur
Constante non sensible à la casse. Toutes les constantes sont disponibles dans Navigator 4 et Internet Explorer 4.
Par défaut bottom
Référence de modèle d'objet
IE [window.]document.Nom_formulaire.Nom_contrôle.align
[window.]document.forms[i].elements[i].align
[window.]document.all.IDélément.align
ALT | NN s.o. IE 4 HTML 4
ALT=« Texte » | Facultatif

Si un navigateur ne prend pas en charge l'affichage des éléments graphiques (ou si cette fonctionnalité a été désactivée par l'utilisateur), le texte affecté à l'attribut ALT est supposé s'afficher dans le document à l'emplacement de l'élément INPUT de l'image. En général, ce texte indique à l'internaute le contenu graphique qu'il n'est pas en mesure de voir.

Types de données en entrée image
Exemple
<INPUT TYPE="image" NAME="icon" SRC="sndIcon.gif" ALT="Icône du haut-parleur">
Valeur
Chaîne de caractères quelconque entre guillemets.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.Nom_formulaire.Nom_contrôle.alt
[window.]document.forms[i].elements[i].alt
[window.]document.all.IDélément.alt
BORDER | NN 4 IE 4 HTML s.o.
BORDER=« Taille_en_pixels » | Facultatif

Navigator et Internet Explorer traitent les images affichées par l'élément INPUT de façon très proche du traitement des éléments IMG. Par exemple, vous pouvez spécifier une bordure autour de l'image. Navigator en affiche d'ailleurs une par défaut. Comme un élément INPUT dont l'attribut TYPE est "image" fonctionne comme un bouton du style « Envoyer », la bordure possède la couleur définie pour les liens dans le navigateur. Pour créer une bordure dans une autre couleur, utilisez les feuilles de style (en imbriquant l'élément IMG dans l'élément DIV ou SPAN approprié pour Navigator 4). Vous pouvez éliminer la bordure colorée dans Navigator en indiquant une valeur de zéro pour l'attribut BORDER.

Types de données en entrée image
Exemple
<INPUT TYPE="image" NAME="icon" SRC="sndIcon.gif" BORDER=0>
Valeur
Un nombre entier de pixels.
Par défaut 2 (Navigator 4) ou 0 (Internet Explorer 4).
Référence de modèle d'objet
IE [window.]document.Nom_formulaire.Nom_contrôle.border
[window.]document.forms[i].elements[i].border
[window.]document.all.IDélément.border
CHECKED | NN 4 IE 3 HTML 4
CHECKED | Facultatif

Attribut booléen indiquant si l'élément INPUT de type case à cocher ou bouton radio doit être déjà activé lors du chargement de la page. Dans le cas d'un groupe de boutons radio, un seul de ces éléments INPUT doit avoir l'attribut CHECKED activé. Il est possible de modifier par script la valeur de cet attribut après le chargement de la page. Lorsque le formulaire est envoyé, la paire nom / valeur correspondant à l'élément INPUT dont l'attribut CHECKED est activé est envoyée parmi les données du formulaire. La paire nom / valeur est composée des valeurs des attributs NAME et VALUE de cet élément. Si aucune valeur n'est affectée à l'attribut VALUE, la valeur de chaîne "active" lui est automatiquement affectée lorsque cette case à cocher ou ce bouton radio sont sélectionnés. Cette méthode est efficace pour les cases à cocher, puisque chacune doit posséder un nom unique. Par contre, tous les boutons radio d'un même groupe doivent avoir le même nom, si bien que ce comportement par défaut ne fournit pas suffisamment d'informations pour que la plupart des programmes sur le serveur puissent les utiliser.

Types de données en entrée checkbox, radio
Exemple
<INPUT TYPE="checkbox" NAME="ajouter_Liste" CHECKED>M'envoyer un message lorsque ce
site Web est modifié.
Valeur
La présence de cet attribut active sa propriété.
Par défaut Off.
Référence de modèle d'objet
NN | [window.]document.Nom_formulaire.Nom_contrôle.checked [window.]document.forms[i].elements[i].checked
IE | [window.]document.Nom_formulaire.Nom_contrôle.checked [window.]document.forms[i].elements[i].checked [window.]document.all.IDélément.checked
DATAFLD | NN s.o. IE 4 HTML s.o.
DATAFLD=« Nom_colonne » | Facultatif

Cet attribut est utilisé avec IE 4 dans le cadre d'une liaison de données, pour associer le nom d'une colonne d'une source de données distante à divers éléments INPUT. L'attribut DATASRC de l'élément doit être également défini.

Types de données en entrée button, checkbox, hidden, password, radio, text
Exemple
<INPUT TYPE="text" NAME="prenom" DATASRC="#DBSRC3" DATAFLD="firstName">
Valeur
Identifiant sensible à la casse.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.Nom_formulaire.Nom_contrôle.dataFld
[window.]document.forms[i].elements[i].dataFld
[window.]document.all.IDélément.dataFld
DATASRC | NN s.o. IE 4 HTML s.o.
DATASRC=« Nom_source_de_données » | Facultatif

Cet attribut est utilisé dans le cadre d'une liaison de données avec IE 4 pour spécifier le nom de la source de données ODBC distante (par exemple une base de données Oracle ou SQL Server) associée à l'élément. Le contenu de la source de données est spécifié à l'aide de l'attribut DATAFLD.

Types de données en entrée button, checkbox, hidden, password, radio, text
Exemple
<INPUT TYPE="text" NAME="prenom" DATASRC="#DBSRC3" DATAFLD="firstName">
Valeur
Identifiant sensible à la casse.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.Nom_formulaire.Nom_contrôle.dataSrc
[window.]document.forms[i].elements[i].dataSrc
[window.]document.all.IDélément.dataSrc
DISABLED | NN s.o. IE 4 HTML 4
DISABLED | Facultatif

Lorsqu'un élément INPUT est désactivé, il apparaît en grisé et ne peut pas être activé par l'utilisateur. Dans Windows, un contrôle de formulaire désactivé ne peut pas être l'élément actif, et il ne figure donc pas dans la séquence d'activation par appui sur la touche de tabulation. Les spécifications HTML 4.0 précisent par ailleurs que la paire nom / valeur d'un élément INPUT désactivé ne doit pas être transmise lorsque le formulaire est envoyé. Les éléments INPUT qui sont normalement chargés de déclencher l'envoi au serveur ne sont pas transmis lorsqu'ils sont désactivés.

L'attribut DISABLED est de type booléen, ce qui signifie que sa simple présence dans le jeu d'attributs définit sa valeur comme true (vrai). Cette valeur peut également être modifiée par la suite à l'aide d'un script (voir l'objet "button" dans le ).

Types de données en entrée Tous
Exemple
<BUTTON TYPE="submit" DISABLED>Remplissez tous les champs obligatoires </BUTTON>
Valeur
La présence de cet attribut désactive l'élément.
Par défaut false
Référence de modèle d'objet
IE [window.]document.Nom_formulaire.Nom_contrôle.disabled
[window.]document.forms[i].elements[i].disabled
[window.]document.all.IDélément.disabled
ID | NN s.o. IE 4 HTML 4
ID=« ID_élément » | Facultatif

Identifiant unique distinguant cet élément du reste du document. Il permet d'associer un élément à une règle de style, en utilisant la valeur de cet attribut comme ID de sélecteur. Il ne faut pas confondre l'attribut ID avec l'attribut NAME, dont la valeur est envoyée avec le formulaire, dans la paire nom / valeur.

Types de données en entrée Tous
Exemple
<INPUT TYPE="button" ID="suivant" VALUE=">>Suivant>>" onClick="goNext(3)">
Valeur
Identifiant sensible à la casse.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.Nom_formulaire.Nom_contrôle.id
[window.]document.forms[i].elements[i].id
[window.]document.all.IDélément.id
MAXLENGTH | NN tous IE tous HTML tous
MAXLENGTH=« nombre_de_caractères » | Facultatif

Définit le nombre maximal de caractères qui peuvent être saisis dans un élément INPUT de type champ texte. En pratique, les navigateurs préviennent l'utilisateur (par un signal sonore ou un message) lorsque le nombre de caractères saisis dépasse la valeur définie pour MAXLENGTH. Il n'existe pas de corrélation directe entre les attributs MAXLENGTH et SIZE. Si l'attribut MAXLENGTH autorise un plus grand nombre de caractères que ce qui peut être affiché en fonction de la largeur choisie pour cet élément, le navigateur assure un défilement horizontal (très peu apprécié de la plupart des utilisateurs) pour autoriser la saisie et la modification du contenu de ce champ.

Types de données en entrée password, text
Exemple
<INPUT TYPE="text" NAME="ZIP" MAXLENGTH=10>
Valeur
Entier positif.
Par défaut Illimitée.
Référence de modèle d'objet
IE [window.]document.Nom_formulaire.Nom_contrôle.maxLength
[window.]document.forms[i].elements[i].maxLength
[window.]document.all.IDélément.maxLength
NAME | NN tous IE tous HTML tous
NAME=« ID_élément » | Facultatif

Si l'élément INPUT fait partie d'un formulaire envoyé au serveur, l'attribut NAME est obligatoire pour que la valeur de cet élément soit transmise avec le formulaire. Dans le cas des formulaires qui figurent dans un document pour tirer parti des possibilités conjointes des éléments de formulaire et des scripts, il n'est pas obligatoire de donner un nom aux éléments INPUT, mais il est cependant recommandé de le faire pour pouvoir créer dans le script des références à ces objets, leurs propriétés et leurs méthodes.

Types de données en entrée Tous
Exemple
<INPUT TYPE="text" NAME="ZIP" MAXLENGTH=10>
Valeur
Identifiant sensible à la casse.
Par défaut Aucune.
Référence de modèle d'objet
NN | [window.]document.Nom_formulaire.Nom_contrôle.name [window.]document.forms[i].elements[i].name
IE | [window.]document.Nom_formulaire.Nom_contrôle.name [window.]document.forms[i].elements[i].name [window.]document.all.IDélément.name
READONLY | NN s.o. IE 4 HTML 4
READONLY | Facultatif

Lorsque son attribut READONLY est présent, un élément INPUT de type champ texte ne peut pas être modifié par le visiteur (mais son contenu peut être modifié à l'aide d'un script). Un champ doté de l'attribut READONLY ne doit normalement pas être activé lorsque l'utilisateur appuie sur la touche de tabulation, mais IE 4 pour Macintosh active ce champ quelle que soit la valeur de cet attribut.

Types de données en entrée password, text
Exemple
<INPUT TYPE="text" NAME="ZIP" READONLY>
Valeur
La présence de cet attribut définit sa valeur comme true (vrai).
Par défaut false
Référence de modèle d'objet
IE [window.]document.Nom_formulaire.Nom_contrôle.readOnly
[window.]document.forms[i].elements[i].readOnly
[window.]document.all.IDélément.readOnly
SIZE | NN tous IE tous HTML tous
SIZE=« Largeur_élément » | Facultatif

Dans la pratique, l'attribut SIZE se limite à la description de la largeur (en nombre de caractères) des éléments INPUT de type champ de texte. La largeur effective est calculée à partir de la police définie pour l'élément, ou de la police par défaut, mais le résultat est loin d'être toujours parfait. Certaines variantes de rendu des polices (et, dans Internet Explorer, la possibilité de choisir des polices et des tailles différentes) entraînent parfois l'affichage de champs trop étroits. Il est donc déconseillé d'attribuer automatiquement la même valeur aux attributs SIZE et MAXLENGTH sans tester le résultat sur un grand nombre de navigateurs et de systèmes d'exploitation, et en prévoyant le pire (par exemple, en tapant une série de caractères « m » ou « W » en police proportionnelle). Selon les spécifications HTML 4.0, l'attribut SIZE peut être appliqué à d'autres types de l'élément INPUT, mais ce n'est pas le cas avec la version 4 des navigateurs. Vous pouvez toutefois utiliser le positionnement par feuilles de style CSS (CSS-P) pour obtenir des boutons plus larges que leur largeur par défaut, qui est basée sur la largeur définie par l'attribut VALUE.

Types de données en entrée password, text
Exemple
<INPUT TYPE="text" NAME="ZIP" MAXLENGTH=10>
Valeur
Tout entier positif.
Par défaut 20
Référence de modèle d'objet
IE [window.]document.Nom_formulaire.Nom_contrôle.size
[window.]document.forms[i].elements[i].size
[window.]document.all.elementID.size
SRC | NN tous IE tous HTML tous
SRC=« URL » | Obligatoire

Adresse URL d'un fichier contenant l'image affichée par le type « image » de l'élément INPUT. Le navigateur doit prendre en charge le type MIME du format d'image utilisé. Sur le World Wide Web, les formats d'image les plus répandus sont GIF et JPEG.

Types de données en entrée image
Exemple
<INPUT TYPE="image" NAME="icon" SRC="sndIcon.gif" BORDER=0>
Valeur
Une adresse URL complète ou relative.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.Nom_formulaire.Nom_contrôle.src
[window.]document.forms[i].elements[i].src
[window.]document.all.IDélément.src
TABINDEX | NN s.o. IE 3 HTML 4
TABINDEX=chiffre_entier | Facultatif

Chiffre entier indiquant le numéro d'ordre de cet élément dans la séquence de tabulation de tous les éléments du document pouvant être activés. L'ordre de tabulation correspond à des règles très strictes. Les éléments dont l'attribut TABINDEX possède une valeur supérieure à zéro sont les premiers activés lorsque l'utilisateur se sert de la touche de tabulation au sein d'une page. Le premier élément qui est activé (qui « reçoit le Focus ») est celui dont l'attribut TABINDEX a la valeur la plus faible ; le système passe ensuite aux éléments dont les valeurs sont de plus en plus élevées, quel que soit leur emplacement physique sur la page ou au sein du document. Si la valeur de l'attribut TABINDEX est identique pour deux éléments, c'est celui qui apparaît le premier dans le document qui est d'abord activé. Viennent ensuite tous les éléments pour lesquels il n'existe pas d'attribut TABINDEX, ou dont cet attribut a reçu la valeur zéro. Ces éléments sont activés dans leur ordre d'apparition au sein du document.

Notez que l'interface utilisateur du Macintosh ne permet pas d'activer par tabulation d'autres éléments que les éléments INPUT de type texte et mot de passe.

Types de données en entrée button, checkbox, file, password, radio, reset, submit, text
Exemple
<INPUT TYPE="text" NAME="pays" TABINDEX=3>
Valeur
Un entier compris entre 0 et 32767. Dans IE 4, si l'attribut TABINDEX reçoit la valeur -1, cet élément ne sera pas inclus dans la séquence de tabulation.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.Nom_formulaire.Nom_contrôle.tabIndex
[window.]document.forms[i].elements[i].tabIndex
[window.]document.all.IDélément.tabIndex
TYPE | NN tous IE tous HTML tous
TYPE=« Type_élément » | Obligatoire

Indique au navigateur le type d'élément INPUT, donc la façon dont il doit être affiché (ou signifie éventuellement que cet élément ne doit pas être affiché). Les choix possibles sont les suivants :

Type

Description

button

Bouton sur lequel l'utilisateur peut cliquer, et dont l'action doit être contrôlée par script. Le contenu de ce bouton est défini par l'attribut VALUE. Si vous désirez utiliser du code HTML pour modifier le formatage de ce contenu, utilisez l'élément BUTTON, au lieu de l'élément INPUT de type « button ».

checkbox

Case à cocher isolée possédant deux états (activée et désactivée). Son texte explicatif figure dans un texte HTML qui précède ou suit la balise de l'élément INPUT. La valeur de l'attribut VALUE est transmise dans le formulaire ; il est donc possible d'avoir plusieurs cases à cocher ayant le même nom mais différentes valeurs, si le script CGI du serveur nécessite de recevoir les données de la sorte.

file

Bouton accompagné d'un texte, qui permet à l'utilisateur de sélectionner un fichier local pour le transmettre au serveur. Un clic sur ce bouton fait apparaître la boîte de dialogue « Fichier », et le nom (ou le chemin) du fichier sélectionné apparaît dans le champ d'accompagnement du bouton. Un script CGI doit être exécuté sur le serveur pour accepter en temps réel le fichier transmis par l'utilisateur.

hidden

Champ invisible fréquemment utilisé pour conserver les données d'une base de données ou les données d'état entre deux soumissions, sans que l'utilisateur ait à se préoccuper de son contenu (ou sans avoir à stocker provisoirement ces données sur le serveur). La paire nom / valeur est transmise avec le formulaire.

image

Bouton graphique dont la seule action possible consiste à transmettre (« soumettre ») le formulaire. Les coordonnées x et y du point cliqué dans l'image sont transmises sous forme de deux paires nom / valeur : nomBouton.x=n; nomBouton.y=m.

password

Champ texte affichant des symboles graphiques ou des astérisques lors de la frappe des caractères, pour que personne ne puisse lire le code indiqué par-dessus l'épaule de l'utilisateur. Le texte tapé (en clair) est envoyé comme valeur de cet élément.

radio

Chaque bouton d'un groupe de boutons dits « boutons radio » (l'activation de l'un d'entre eux désactive tous les autres, comme les boutons de présélection des anciens postes de radio). Pour grouper plusieurs boutons radio de sorte que l'activation de l'un désactive tous les autres, il faut donner la même valeur à leur attribut NAME. Un clic sur l'un des boutons de ce groupe désactive alors tous les autres. La valeur de l'attribut VALUE est transmise avec le formulaire.

reset

Bouton dont le seul rôle consiste à réinitialiser tous les éléments du formulaire à leurs valeurs initiales, lors du chargement du formulaire par le navigateur client. Le contenu de ce bouton (texte explicatif) peut être défini à l'aide de l'attribut VALUE.

submit

Bouton dont la seule fonction consiste à transmettre (« soumettre ») le formulaire. Le contenu de ce bouton (texte explicatif) peut être défini à l'aide de l'attribut VALUE. Si les attributs NAME et VALUE de cet élément ont reçu des valeurs, celles-ci sont transmises avec le formulaire.

text

Champ texte d'une seule ligne, permettant à l'utilisateur de saisir du texte qui sera transmis comme valeur de cet élément. Pour obtenir un champ texte de plusieurs ligne, utilisez l'élément TEXTAREA.

Exemple
<INPUT TYPE="button" VALUE="Ecouter le son" onClick="toggleSnd()">
<INPUT TYPE="checkbox" NAME="connexions" VALUE="ISDN">ISDN
<INPUT TYPE="file" NAME="chargeFichier">
<INPUT TYPE="hidden" NAME="prevState" VALUE="modifier">
<INPUT TYPE="image" NAME="Dessin_envoi" SRC="submit.jpg" HEIGHT=40 WIDTH=40>
<INPUT TYPE="password" NAME="mot_de_passe" MAXLENGTH=12 SIZE=20>
<INPUT TYPE="radio" NAME="carteCredit" VALUE="Visa">Visa
<INPUT TYPE="reset">
<INPUT TYPE="submit" VALUE="Envoyer les données cryptées">
Numéro de Sécurité sociale:<INPUT TYPE="text"NAME="nss" VALUE="## ##-##-## ### ###"
onClick="validateSSN(this)">
Valeur
L'un des types possibles de l'élément INPUT : button | checkbox | file | hidden | image | password | radio | reset | submit | text.
Par défaut text
Référence de modèle d'objet
NN | [window.]document.Nom_formulaire.Nom_contrôle.type [window.]document.forms[i].elements[i].type
IE | [window.]document.Nom_formulaire.Nom_contrôle.type [window.]document.forms[i].elements[i].type [window.]document.all.IDélément.type
USEMAP | NN s.o. IE s.o. HTML 4
USEMAP=« URL_de_la_carte_graphique » | Facultatif
Les spécifications HTML 4.0 prévoient l'attribut USEMAP pour un élément INPUT de type « image ». Dans un proche avenir, cet attribut pourrait permettre un lien entre les éléments INPUT de type « image »et la puissance des scripts associés aux cartes graphiques côté client (par exemple dans le cas des boutons de survol), mais pour l'instant, la façon dont cet attribut sera implémenté dans les divers navigateurs n'est pas certaine.
VALUE | NN tous IE tous HTML tous
VALUE=« texte » | Facultatif / Obligatoire

Affecte une valeur préalable à l'élément INPUT, qui est transmise au serveur dans le cadre de la paire nom / valeur de cet élément. Certains types de l'élément INPUT ne sont pas envoyés (par exemple les boutons radio non activés), mais toute valeur associée à un élément INPUT, sauf à ceux qui sont de type « button » ou « reset », est envoyée au serveur avec l'élément.

Dans le cas des éléments INPUT de type « text » et « password », l'attribut VALUE contient une valeur par défaut. Lorsque l'utilisateur modifie le contenu du champ texte, la valeur de celui-ci change, mais pas le code source. Lorsqu'un formulaire est réinitialisé (à l'aide d'un élément INPUT de type « reset »), Les valeurs par défaut sont replacées dans les champs texte.

L'attribut VALUE n'est obligatoire que pour les éléments INPUT de type « checkbox » et « radio ». Pour les éléments INPUT qui apparaissent sous la forme de boutons standard pouvant être cliqués, l'attribut VALUE définit le texte du bouton.

Types de données en entrée Tous
Exemple
<INPUT TYPE="checkbox" NAME="connexions" VALUE="RNIS">RNIS
Valeur
Toute chaîne de texte.
Par défaut Aucune.
Référence de modèle d'objet
NN | [window.]document.Nom_formulaire.Nom_contrôle.value [window.]document.forms[i].elements[i].value
IE | [window.]document.Nom_formulaire.Nom_contrôle.value [window.]document.forms[i].elements[i].value [window.]document.all.IDélément.value


<INS> | NN s.o. IE 4 HTML 4
<INS>...</INS> | Balise de fin : obligatoire

L'élément INS et son élément compagnon DEL définissent un format qui indique les segments du contenu d'un document qui ont été marqués pour insertion (ou suppression) durant le processus de création. Nous sommes encore loin d'un modèle de gestion du flux de travail, mais dans le cadre d'un programme graphique de création HTML ces éléments peuvent aider à suivre les modifications au sein des diverses générations d'un même document au cours de son élaboration.

Parmi les navigateurs de quatrième génération, seul Internet Explorer prend en charge l'attribut INS. Le texte délimité par cet élément est affiché en souligné (alors que le texte délimité par l'élément DEL est en style barré). Les spécifications HTML 4.0 comportent deux attributs potentiellement utiles (mais qui ne sont pas pris en charge par IE 4), l'un pour préserver des informations cachées relatives à la date et à l'heure de modification, et l'autre pour ajouter un texte décrivant la modification.

Exemple
<P>Quatre matches et
<DEL CITE="j'ai corrigé l'erreur">huit</DEL><INS>sept</INS> ans plus tôt...</P>
Référence de modèle objet
IE [window.]document.all.IDélément
CITE | NN s.o. IE s.o. HTML 4
CITE=« chaîne » | Facultatif

Description textuelle de la modification, ou toute autre note associée à l'élément, mais normalement invisible pour le visiteur du site. Ces informations sont destinées à être affichées par les logiciels de développement pour le Web, pas par les navigateurs.

Exemple
<INS CITE="j'ai corrigé l'erreur --A.L.">sept</INS>
Valeur
Toute chaîne de caractères. Cette chaîne doit figurer entre guillemets (simples ou doubles, mais identiques).
Par défaut Aucun.
DATETIME | NN s.o. IE s.o. HTML 4
DATETIME=« chaîne_date_et_heure » | Facultatif

Date et heure de l'insertion. Ces informations sont en général insérées dans un document à l'aide d'un logiciel de création HTML conçu pour assurer le suivi des insertions et suppressions. Les données de cet attribut peuvent être exploitées ultérieurement pour assurer un audit des modifications apportées au document. Il ne peut y avoir qu'une seule valeur d'attribut DATETIME associée à un élément INS donné.

Exemple
<INS DATETIME="1998-09-11T20:03:32-08:00">Texte_inséré_ici</INS>
Valeur
La valeur de l'attribut DATETIME doit répondre à un format date-heure spécial, qui indique la date et l'heure de façon à ce que le moment exact puisse être identifié indépendamment de tout fuseau horaire. La syntaxe de ce format est la suivante :
aaaa-MM-jjThh:mm:ssIFH

aaaa | Année sur quatre chiffres
MM | Mois sur deux chiffres (de 01 à 12)
jj | Jour sur deux chiffres (de 01 à 31)
T | Un « T » majuscule séparant la date de l'heure
hh | Heure sur 24 heures, sur 2 chiffres (de 00 à 23)
mm | Minute sur deux chiffres (de 00 à 59)
ss | Seconde sur deux chiffres (de 00 à 59)
IFH | Indicateur de Fuseau Horaire
Deux formats sont possibles. Le premier se résume à la lettre « Z », en majuscule, qui signifie UTC (Coordinated Universal Time, ou Temps universel, qui est également appelé « Zulu ») et est l'équivalent de l'heure GMT. L'autre format indique le décalage, par rapport à l'heure GMT, de l'heure indiquée (que le symbole hh:mm:ss représente ici). Ce décalage horaire se compose du signe « plus » ou « moins » suivi d'une autre paire de hh:mm:ss . Pour les fuseaux horaires situés à l'ouest du Méridien de Greenwich (l'heure GMT et l'heure UTC sont identiques en pratique), l'opérateur est un signe négatif, puisque l'heure indiquée par hh:mm:ss est inférieure à l'heure GMT ; pour les fuseaux horaires situés à l'est du méridien de Greenwich, le décalage est un chiffre positif. Par exemple, la côte Ouest des États-Unis est à l'heure PST (Pacific Standard Time), qui est décalée de huit heures par rapport à l'heure GMT : Lorsqu'il est 18h00 dans la zone PST, il est 2h00 (le lendemain matin) sur le Méridien de Greenwich. Les exemples suivants représentent donc tous exactement le même moment (l'indicateur de fuseau horaire apparaît ici en gras pour des raisons de lisibilité) :
1998-09-12T02:00:00Z | Heure GMT
1998-09-11T21:00:00-05:00 | Eastern Standard Time (côte Est des Etats-Unis)
1998-09-11T18:00:00-08:00 | Pacific Standard Time (côte Ouest des Etats-Unis)
1998-09-12T13:00:00+11:00 | Sydney, Australie
Pour plus de détails sur cette méthode de représentation de l'heure, consultez la documentation sur le standard ISO-8601.
Par défaut Aucune.


<ISINDEX> | NN tous IE tous HTML tous
<ISINDEX> | Balise de fin : interdite

L'élément ISINDEX remonte aux premiers temps du HTML et est déprécié en HTML 4.0, en faveur de l'élément INPUT de type texte. La balise de l'élément ISINDEX doit figurer dans l'élément HEAD. Dans les navigateurs modernes, cet élément apparaît sous la forme d'un simple champ texte entre deux éléments HR. Lorsqu'un utilisateur saisit du texte dans ce champ et appuie sur la touche Entrée ou Retour, le contenu du champ est codé sous forme d'adresse URL (avec des symboles + à la place des espaces) et transmis au serveur avec l'adresse URL de son document d'origine. Un programme CGI doit résider sur le serveur pour traiter cette adresse URL et renvoyer un texte en HTML qui sera affiché dans la fenêtre ou le cadre actifs.

Exemple
<HEAD>
<ISINDEX PROMPT="Tapez le texte recherché :">
</HEAD>
Référence de modèle objet
IE [window.]document.all.IDélément
PROMPT | NN< tous IE tous HTML 4
PROMPT=« message » | Facultatif

Cet attribut permet de définir le message d'invite qui apparaît avec cet élément.

Exemple
<ISINDEX PROMPT="Tapez le texte recherché :">
Valeur
Toute chaîne de texte entre guillemets.
Par défaut Aucune.


<KBD> | NN tous IE tous HTML tous
<KBD>...</KBD> | Balise de fin : obligatoire

L'élément KBD fait partie d'un important groupe d'éléments que les recommandations HTML 4.0 appellent éléments de phrase. Ces éléments affectent une signification structurelle à une partie désignée du document. Un élément KBD est destiné à afficher du texte que l'utilisateur est supposé saisir au clavier, a priori pour remplir un champ texte ou envoyer une commande.

Les navigateurs sont libres de déterminer comment faire la distinction (ou même s'il est nécessaire de faire la distinction) entre le contenu de l'élément KBD et le reste du contenu de l'élément BODY. Dans Navigator et Internet Explorer, une police non proportionnelle est utilisée pour ce texte. Vous pouvez toutefois modifier ce comportement à l'aide d'une feuille de style.

Exemple
<P>Si vous ne connaissez pas la réponse, tapez <KBD>AUCUN</KBD> dans la zone de texte.
</P>
Référence de modèle objet
IE [window.]document.all.IDélément


<KEYGEN> | NN tous IE s.o. HTML s.o.
<KEYGEN> | Balise de fin : interdite

Un élément KEYGEN permet d'envoyer un formulaire crypté, dans les cas où le serveur attend qu'un formulaire soit protégé par une clé de cryptage. Un certificat numérique doit avoir été installé au préalable sur le navigateur client. Lorsque l'élément KEYGEN est inclus dans un élément FORM, l'utilisateur peut le constater pour deux raisons. Tout d'abord, une liste des tailles de clés de cryptage disponibles est affichée sur le formulaire à l'emplacement où apparaît l'élément KEYGEN. Lorsque l'utilisateur envoie le formulaire, il voit apparaître un ou plusieurs messages relatifs à la sécurité à titre de confirmation. Cet élément s'appuie sur les systèmes de cryptage de clé publique incorporés dans Navigator.

Exemple
<FORM ...>
...
<KEYGEN NAME="encryptedOrder" CHALLENGE="39457582201">
</FORM>
CHALLENGE | NN tous IE s.o. HTML s.o.
CHALLENGE=« chaîne_de_vérification » | Facultatif

Si le serveur est équipé pour interpréter une chaîne de vérification qui permettra de vérifier une chaîne cryptée, l'attribut CHALLENGE contient cette chaîne de vérification.

Exemple
<KEYGEN NAME="encryptedOrder" CHALLENGE="39457582201">
Valeur
Toute chaîne de texte.
Par défaut Une chaîne vide.
NAME | NN tous IE s.o. HTML s.o.
NAME=« identifiant » | Obligatoire

Le fait de crypter les données d'un formulaire transforme celui-ci en une valeur qui fait partie d'une paire nom / valeur. L'attribut NAME contient la partie « nom » de cette paire. Si le serveur réussit à décrypter la chaîne codée, il disposera alors des paires individuelles nom / valeur des éléments du formulaire pour tout traitement ultérieur.

Exemple
<KEYGEN NAME="encryptedOrder" CHALLENGE="39457582201">
Valeur
Identifiant non sensible à la casse.
Par défaut Aucune.


<LABEL> | NN s.o. IE 4 HTML 4
<LABEL>...</LABEL> | Balise de fin : obligatoire

L'élément LABEL définit une structure et un conteneur pour l'étiquette de texte associée à un élément INPUT. Comme les « étiquettes » (légendes) affichées pour la plupart des contrôles d'un formulaire ne font pas partie de la balise de ces éléments, l'attribut LABEL permet au navigateur de faire clairement la liaison entre le contenu de cette étiquette et le contrôle concerné.

Il existe deux façons d'assurer cette association. L'une consiste à affecter la valeur de l'attribut ID du contrôle à l'attribut FOR de l'élément LABEL. L'autre consiste à insérer l'élément INPUT à l'intérieur d'un élément LABEL. Cette dernière méthode n'est possible que si l'étiquette et le contrôle font partie d'un même bloc de contenu ; si vous devez séparer physiquement l'étiquette du contrôle correspondant, par exemple lorsqu'ils figurent dans des éléments TD séparés au sein d'un tableau, vous devez utiliser l'attribut FOR pour établir le lien. L'étiquette sera affichée devant ou derrière le contrôle selon l'emplacement de leurs balises respectives dans le code source. Dans de futures applications de cet élément, des navigateurs dotés de la synthèse vocale pourront énoncer « à haute voix » le contenu de l'étiquette d'un contrôle.

Exemple
<FORM>
<LABEL>Société :<INPUT TYPE="text" NAME="company"></LABEL><BR>
<LABEL FOR="stateEntry">Etat :</LABEL>
<INPUT TYPE="text" NAME="etat" ID="stateEntry">
...
</FORM>
Référence de modèle objet
IE [window.]document.all.IDélément
ACCESSKEY | NN s.o. IE 4 HTML 4
ACCESSKEY=« caractère » | Facultatif

Caractère unique ; lorsque l'utilisateur appuie sur la touche correspondante, l'élément INPUT associé est activé. Le navigateur et le système d'exploitation déterminent si l'utilisateur doit appuyer sur une touche de modification (par exemple Ctrl, Alt ou Commande) en même temps que sur la lettre pour activer l'élément. Dans Internet Explorer 4 pour Windows, l'utilisateur doit appuyer sur la touche Alt, et la touche d'accès est insensible à la casse. Cet attribut est inopérant dans IE 4 pour Macintosh.

Exemple
<LABEL FOR="stateEntry" ACCESSKEY="e">Etat :</LABEL>
Valeur
Un caractère unique pour l'ensemble du document.
Par défaut Aucune.
Référence de modèle objet
IE [window.]document.all.IDélément.accessKey
DATAFLD | NN s.o. IE 4 HTML s.o.
DATAFLD=« Nom_colonne » | Facultatif

Cet attribut est utilisé avec IE 4 dans le cadre d'une liaison de données, pour associer le nom d'une colonne d'une source de données distante à l'étiquette d'un élément INPUT. Cette colonne de source de données doit être en texte brut ou en HTML (voir DATAFORMATAS). L'attribut DATASRC de l'élément LABEL doit être également défini.

Exemple
<LABEL FOR="stateEntry" DATASRC="#DBSRC3" DATAFLD="label"
DATAFORMATAS="HTML">
Etat :</LABEL>
Valeur
Identifiant sensible à la casse.
Par défaut Aucune.
Référence de modèle objet
IE [window.]document.all.IDélément.dataFld
DATAFORMATAS | NN s.o. IE 4 HTML s.o.
DATAFORMATAS=« Type_de_données » | Facultatif

Cet attribut est utilisé avec IE 4 dans le cadre d'une liaison de données, pour indiquer au navigateur si les informations qui proviennent de la source de données doivent être traitées comme du texte brut ou du texte HTML avec balises. Le paramétrage de cet attribut dépend entièrement de la structure de la source de données.

Exemple
<LABEL FOR="stateEntry" DATASRC="#DBSRC3" DATAFLD="label"
DATAFORMATAS="HTML">
Etat :</LABEL>
Valeur
IE 4 reconnaît deux valeurs possibles : text | HTML.
Par défaut text
Référence de modèle objet
IE [window.]document.all.elementID.dataFormatAs
DATASRC | NN s.o. IE 4 HTML s.o.
DATASRC=« Nom_source_de_données » | Facultatif

Utilisé avec la liaison de données Internet Explorer 4 pour déterminer la source de données ODBC distante (une base de données Oracle ou SQL par exemple) à associer à l'élément. Le contenu de la source de données est spécifié à l'aide de l'attribut DATAFLD.

Exemple
<LABEL FOR="stateEntry" DATASRC="#DBSRC3" DATAFLD="label"
DATAFORMATAS="HTML">
Etat :</LABEL>
Valeur
Identifiant sensible à la casse.
Par défaut Aucune.
Référence de modèle objet
IE [window.]document.all.IDélément.dataSrc
FOR | NN s.o. IE 4 HTML 4
FOR=« ID_de_l'élément_input » | Facultatif

Identificateur unique qui est également affecté à l'attribut ID de l'élément INPUT auquel l'étiquette doit être associée. L'attribut FOR n'est nécessaire que si vous choisissez de ne pas insérer l'élément INPUT à l'intérieur de l'élément LABEL, auquel cas l'attribut FOR est chargé de définir le lien entre ces deux éléments.

Exemple
<LABEL FOR="stateEntry">Etat :</LABEL>
Valeur
Identifiant sensible à la casse.
Par défaut Aucune.
Référence de modèle objet
IE [window.]document.all.IDélément.htmlFor
TABINDEX | NN s.o. IE s.o. HTML 4
TABINDEX=chiffre_entier | Facultatif

Nombre indiquant le numéro d'ordre de cet élément dans l'ordre de tabulation de tous les éléments du document pouvant être activés par tabulation L'ordre de tabulation obéit à un ensemble de règles strictes. Les éléments dont l'attribut TABINDEX possède une valeur supérieure à zéro sont les premiers activés lorsque l'utilisateur se sert de la touche de tabulation au sein d'une page. Le premier élément qui est activé (qui « reçoit le focus ») est celui dont l'attribut TABINDEX a la valeur la plus faible ; le système passe ensuite aux éléments dont les valeurs sont de plus en plus élevées, quel que soit leur emplacement physique sur la page ou au sein du document. Si la valeur de l'attribut TABINDEX est identique pour deux éléments, c'est celui qui apparaît le premier dans le document qui est d'abord activé. Viennent ensuite tous les éléments pour lesquels il n'existe pas d'attribut TABINDEX, ou dont cet attribut a reçu la valeur zéro. Ces éléments sont activés selon leur ordre d'apparition dans le document.

Bien que cet attribut ne soit pas encore implémenté dans les navigateurs, le comportement attendu est le suivant : lorsque l'élément LABEL est activé, il transfère automatiquement cette activation (le « focus ») à l'élément INPUT qui lui est associé.

Exemple
<LABEL FOR="stateEntry" TABINDEX=3>Etat :</LABEL>
Valeur
Un entier compris entre 0 et 32767.
Par défaut Aucune.


<LAYER> | NN 4 IE s.o. HTML s.o.
<LAYER>...</LAYER> | Balise de fin : obligatoire

Un élément LAYER est un élément positionnable dans le modèle d'objet de Navigator (c'est-à-dire un élément de niveau bloc dont l'attribut CSS position: serait paramétré comme « absolute »). C'est pourquoi un grand nombre d'attributs sont nommés en fonction de la méthode propre à Navigator pour le positionnement, le dimensionnement et l'empilement des éléments positionnables. Il est très peu probable que les éléments LAYER (ou les éléments ILAYER qui leur sont liés) soient adoptés par le W3C, c'est pourquoi il est conseillé d'utiliser le positionnement par feuille de style (CSS-Positioning), qui fonctionne avec les deux principaux navigateurs.

Le contenu d'un élément LAYER peut être lu dans un fichier séparé (à l'aide de l'attribut SRC) ou saisi directement dans le document, en plaçant le texte entre les balises de début et de fin. Ces deux types de contenu peuvent être insérés dans un même élément LAYER. Le contenu provenant d'un document externe et téléchargé à l'aide de l'attribut SRC est d'abord affiché (en tant qu'élément de niveau bloc propre), et le contenu supplémentaire commence ensuite sur sa propre ligne, sous le rectangle qui délimite le contenu externe.

Un élément LAYER peut être physiquement positionné n'importe où au sein du document, et peut recouvrir le contenu d'autres calques (y compris le contenu du niveau de base du document). Le contenu d'un calque peut être modifié à l'aide d'un lien ou par script, sans qu'il soit nécessaire de recharger le reste du contenu de la page. En outre, plusieurs éléments LAYER peuvent être imbriqués l'un dans l'autre. Voir pour plus de détails.

Exemple
<LAYER BGCOLOR="yellow" SRC="instrux.html" WIDTH=200 HEIGHT=300></LAYER>
Référence de modèle d'objet
NN [window.]document.Nom_du_calque
ABOVE | NN 4 IE s.o. HTML s.o.
ABOVE=« ID_calque » | Facultatif

Nomme l'élément positionnable qui doit se trouver au-dessus (c'est-à-dire devant) l'élément LAYER actuel dans l'ordre d'empilage. Cette opération revient à définir l'attribut Z-INDEX de façon relative, sans utiliser de numérotation arbitraire des calques. Si vous utilisez l'attribut ABOVE, n'utilisez pas conjointement l'attribut BELOW ou Z-INDEX pour le même élément LAYER.

Exemple
<LAYER ID="instrux" BGCOLOR="yellow" SRC="instrux.html" ABOVE="aide1"
WIDTH=200 HEIGHT=300>
</LAYER>
Valeur
Identifiant sensible à la casse.
Par défaut Aucune.
Référence de modèle d'objet
NN [window.]document.Nom_du_calque.above
BACKGROUND | NN 4 IE s.o. HTML s.o.
BACKGROUND=« URL » | Facultatif

Indique l'adresse URL d'un fichier image qui sera affiché en arrière-plan du texte et autre contenu de l'élément LAYER. À la différence des images normales, qui sont chargées par le navigateur en tant que contenu, les images d'arrière-plan sont chargées à leur taille originale (sans redimensionnement) et affichées côte à côte pour remplir l'espace disponible dans le calque. Les images de petite taille sont chargées plus rapidement, mais elles sont évidemment répétées un plus grand nombre de fois pour former la mosaïque d'arrière-plan. Les images GIF animées peuvent être utilisées en arrière-plan, mais elles occasionnent facilement de la gêne pour le visiteur. Lors du choix d'une image d'arrière-plan, veillez à en prendre une qui soit neutre par rapport au contenu principal, afin que celui-ci ressorte lisiblement. Si elles doivent vraiment être utilisées, les images d'arrière-plan doivent rester extrêmement discrètes.

Exemple
<LAYER BACKGROUND="blueCrinkle.jpg" SRC="instrux.html" WIDTH=200 HEIGHT=300>
</LAYER>
Valeur
Toute adresse URL valide (complète ou relative) d'un fichier image.
Par défaut Aucune.
Référence de modèle d'objet
NN [window.]document.Nom_du_calque.background
BELOW | NN 4 IE s.o. HTML s.o.
BELOW=« ID_calque » | Facultatif

Nomme l'élément positionnable qui doit se trouver en dessous (c'est-à-dire derrière) l'élément LAYER actuel dans l'ordre d'empilage. Cette opération revient à définir l'attribut Z-INDEX de façon relative, sans utiliser de numérotation arbitraire des calques. Si vous utilisez l'attribut BELOW, n'utilisez pas conjointement l'attribut ABOVE ou Z-INDEX pour le même élément LAYER.

Exemple
<LAYER BGCOLOR="yellow" SRC="instrux.html" WIDTH=200 HEIGHT=300 BELOW="calque_merci">
</LAYER>
Valeur
Identifiant sensible à la casse.
Par défaut Aucune.
Référence de modèle d'objet
NN [window.]document.Nom_du_calque.below
BGCOLOR | NN 4 IE s.o. HTML s.o.
BGCOLOR=« Triplet_de_couleurs_en_hexa ou Nom_en_anglais » | Facultatif

Définit une couleur de remplissage (derrière le texte et autre contenu) pour l'ensemble du rectangle de ce calque. L'utilisation combinée de BGCOLOR et de BACKGROUND permet de laisser apparaître la couleur d'arrière-plan dans les éventuelles zones transparentes de l'image d'arrière-plan.

Exemple
<LAYER BGCOLOR="yellow" SRC="instrux.html" WIDTH=200 HEIGHT=300></LAYER>
Valeur
Triplet de couleurs en hexadécimal, ou l'un des noms de couleurs en anglais. Si la valeur de cet attribut n'est pas indiquée, elle sera interprétée comme "#000000" (noir). Reportez-vous à l'annexe A pour connaître les noms de couleurs admissibles.
Par défaut Varie selon le système d'exploitation.
Référence de modèle d'objet
NN [window.]document.Nom_du_calque.bgColor
CLIP | NN 4 IE s.o. HTML s.o.
CLIP=« [Pixel_gauche, Pixel_haut,] Pixel_droit, Pixel_bas » | Facultatif

Une zone de « clipping » est une découpe rectangulaire à l'intérieur de l'élément LAYER complet. Seul le contenu qui se trouve à l'intérieur de ce rectangle de découpe apparaît sur la page. La valeur par défaut de l'attribut CLIP est soit la taille par défaut du contenu, soit la largeur de l'élément LAYER et la hauteur du contenu tel qu'il s'affiche automatiquement. L'utilisation de l'attribut CLIP permet de restreindre tout contenu long qui risquerait de déborder d'un rectangle dont les dimensions sont fixes pour des raisons de mise en page.

Exemple
<LAYER BGCOLOR="yellow" SRC="instrux.html" CLIP="50,50" WIDTH=200 HEIGHT=300>
</LAYER>
Valeur
Les valeurs de l'attribut CLIP sont exprimées en pixels, mesurés à partir du coin supérieur gauche de l'élément dans le flux du document. Les valeurs sont indiquées dans le sens des aiguilles d'une montre à partir du côté gauche : gauche, haut, droite, bas. Si vous n'indiquez que deux valeurs, Navigator suppose que les valeurs pour les côtés gauche et supérieur sont de zéro, et que vous ne désirez ajuster que les côtés droit et inférieur. Ainsi, des valeurs de « 50,50 » signifient que la zone de découpe est un carré de 50 pixels qui débute dans le coin supérieur gauche du rectangle défini par le calque. Pour obtenir une découpe de la même taille mais débutant 10 pixels plus à gauche, les paramètres de l'attribut CLIP devront être « 10,0,60,50 ».
Par défaut Zone d'affichage normale du contenu de l'élément LAYER.
Référence de modèle d'objet
NN [window.]document.Nom_du_calque.clip.left
[window.]document.Nom_du_calque.clip.top
[window.]document.Nom_du_calque.clip.right
[window.]document.Nom_du_calque.clip.bottom
HEIGHT, WIDTH | NN 4 IE s.o. HTML s.o.
HEIGHT=« hauteur » | Facultatif

WIDTH=« largeur »

Définit la taille minimale de l'élément LAYER. Toutefois, lorsqu'un contenu est ajouté dans le calque lors du chargement initial, les paramètres de ces attributs ne limitent pas la quantité de ce contenu qui est visible le long des deux axes. Par exemple, si vous affichez dans un élément LAYER une image de 120 pixels de large sur 90 pixels de haut, la taille visible de l'élément LAYER dont les attributs HEIGHT et WIDTH ont été définis pour une taille inférieure sera agrandie pour permettre l'affichage de la totalité de l'image. Le même phénomène se produit avec du texte ou tout autre contenu : la zone visible est agrandie pour autoriser l'affichage de tout le contenu. Pour diminuer la partie visible du contenu, il faut donc définir l'attribut CLIP.

Il est utile de paramétrer les attributs HEIGHT et WIDTH avec des valeurs spécifiques pour créer un rectangle coloré ou contenant un motif (à l'aide des attributs BGCOLOR ou BACKGROUND) qui fera fonction de calque d'arrière-plan, derrière un contenu positionné. Si le contenu du calque ne repousse pas les côtés de l'élément LAYER, les attributs HEIGHT et WIDTH adaptent la zone de découpe à leur propre taille.

Exemple
<LAYER BGCOLOR="yellow" SRC="instrux.html" WIDTH=200 HEIGHT=300></LAYER>
Valeur
Entier positif (éventuellement entre guillemets) ou pourcentage (entre guillemets). Ces deux valeurs peuvent être paramétrées à zéro non seulement pour masquer l'élément (ce qu'il est plus simple de faire avec l'attribut VISIBILITY), mais aussi pour empêcher l'élément d'occuper une zone précise de la page.
Par défaut Zone d'affichage normale du contenu de l'élément LAYER.
Référence de modèle d'objet
NN [window.]document.Nom_du_calque.height
[window.]document.Nom_du_calque.width
ID | NN 4 IE s.o. HTML s.o.
ID=« ID_élément » | Facultatif

Identifiant unique distinguant cet élément du reste du document. Cet identifiant est utilisé comme valeur pour les attributs ABOVE et BELOW. Les scripts utilisent également la valeur de l'attribut ID comme nom de l'élément LAYER pour le référencement des objets.

Exemple
<LAYER ID="vieuxjaune" BGCOLOR="yellow" SRC="instrux.html" WIDTH=200 HEIGHT=300>
</LAYER>
Valeur
Identifiant sensible à la casse.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.Nom_du_calque.name
LEFT, TOP | NN 4 IE s.o. HTML s.o.
LEFT=« Nombre_de_pixels » | Facultatif

TOP=« Nombre_de_pixels »

Définit le décalage des bords gauche et supérieur du calque par rapport aux coordonnées auxquelles cet élément LAYER apparaîtrait normalement suivant le code source du document. L'emplacement précis est relatif à la page et varie, sauf si vous avez également défini les attributs PAGEX et PAGEY, qui servent à positionner l'élément de façon absolue au sein de l'espace occupé par le document. À la différence de ce qui se produit pour l'élément ILAYER, Navigator ne préserve pas dans le document l'espace dans lequel doit apparaître l'élément LAYER. L'élément est placé dans son propre plan, et le contenu qui l'environne dans le code source est décalé - couvrant ainsi fréquemment le contenu de l'élément LAYER, sauf si celui-ci est positionné à un autre emplacement.

Exemple
<LAYER BGCOLOR="yellow" SRC="instrux.html" WIDTH=200 HEIGHT=300 LEFT=10 TOP=50>
</LAYER>
Valeur
Entier positif (éventuellement entre guillemets).
Par défaut 0
Référence de modèle d'objet
NN [window.]document.Nom_du_calque.left
[window.]document.Nom_du_calque.top
PAGEX, PAGEY NN 4 IE s.o. HTML s.o.
PAGEX=« Nombre_de_pixels »
PAGEY=« Nombre_de_pixels » 		Facultatif

Pour positionner un élément LAYER avec une précision véritablement reproductible, vous pouvez utiliser le coin supérieur gauche du document (de la page) comme point de référence. Lorsque les attributs PAGEX et PAGEY sont définis, ils indiquent le décalage des côtés gauche et haut de l'élément LAYER par rapport aux côtés correspondants du document entier. Le point zéro d'une page que l'utilisateur a fait défiler verticalement peut donc se trouver au-dessus de la partie visible de la fenêtre du navigateur.

Exemple
<LAYER BGCOLOR="yellow" SRC="instrux.html" WIDTH=200 HEIGHT=300 PAGEX=50
  PAGEY=350>
</LAYER>
Valeur
Entier positif (éventuellement entre guillemets).
Par défaut 0
Référence de modèle d'objet
NN [window.]document.Nom_du_calque.pageX
[window.]document.Nom_du_calque.pageY
SRC | NN 4 IE s.o. HTML s.o.
SRC=« URL » | Facultatif

Pour charger le contenu d'un fichier HTML externe dans un élément LAYER, il est nécessaire d'affecter l'adresse URL de ce fichier à l'attribut SRC. Un éventuel contenu HTML situé entre les balises de début et de fin de l'élément LAYER sera restitué sur la page après le contenu chargé depuis un fichier externe à l'aide de l'attribut SRC. Si l'attribut SRC est omis, seul le contenu situé entre les balises sera affiché. Les scripts peuvent modifier la propriété (src) correspondante après le chargement du document, ce qui permet de modifier de façon dynamique le contenu de l'élément LAYER sans recharger tout le document.

Exemple
<LAYER BGCOLOR="yellow" SRC="instrux.html" WIDTH=200 HEIGHT=300</LAYER>
Valeur
Une adresse URL complète ou relative.
Par défaut Aucune.
Référence de modèle d'objet
NN [window.]document.Nom_du_calque.src
TOP

Voir LEFT.

VISIBILITY | NN 4 IE s.o. HTML s.o.
VISIBILITY=« Constante_de_visibilité » | Facultatif

Détermine si Navigator doit afficher l'élément LAYER. Par défaut, un calque hérite du paramétrage de l'attribut VISIBILITY de son élément conteneur direct. Cela signifie qu'un élément LAYER inséré au premier niveau du document (dont l'élément conteneur est BODY), est toujours visible par défaut, puisque le contenu de base est toujours visible. Pour cacher un calque lors de l'affichage de la page, paramétrez l'attribut VISIBILITY avec la valeur "hidden". Il n'est nécessaire d'utiliser la valeur "show" que si l'élément LAYER est imbriqué dans un autre élément LAYER (ou ILAYER) dont l'attribut VISIBILITY est "hidden", par paramétrage ou par héritage.

Exemple
<LAYER BGCOLOR="yellow" SRC="instrux.html" WIDTH=200 HEIGHT=300
PAGEX=50 PAGEY=350 VISIBILITY="hidden">
</LAYER>
Valeur
L'une des trois constantes admises : hidden | inherit | visible
Par défaut inherit
Référence de modèle d'objet
NN [window.]document.Nom_du_calque.visibility


<LEGEND> | NN s.o. IE 4 HTML 4
<LEGEND>...</LEGEND> | Balise de fin : obligatoire

L'élément LEGEND fait fonction de légende pour un élément FIELDSET. Dans les navigateurs graphiques, cela signifie en général que cette légende est visuellement associée à la bordure du groupe représenté par l'élément FIELDSET. Internet Explorer 4 implante l'élément LEGEND dans la bordure de l'élément FIELDSET. On peut imaginer qu'un navigateur doté de la synthèse vocale énonce « à haute voix » le contenu de la légende lorsque l'utilisateur parcourt le formulaire. Dans Internet Explorer, l'élément LEGEND doit apparaître immédiatement après la balise de début de l'élément FIELDSET pour que l'association fonctionne. Comme le contenu de l'élément LEGEND est du texte HTML, vous pouvez, si vous le désirez, lui affecter des styles pour le mettre en valeur.

Exemple
<FORM METHOD=POST ACTION="...">
<FIELDSET>
<LEGEND>Informations relatives à votre carte de crédit</LEGEND>
......éléments de saisie......
</FIELDSET>
</FORM>
Référence de modèle d'objet
IE [window.]document.all.IDélément
ACCESSKEY | NN s.o. IE s.o. HTML 4
ACCESSKEY=« caractère » | Facultatif

Une touche de caractère unique qui active le premier élément contrôle du formulaire associé à l'élément LEGEND. Le navigateur et le système d'exploitation déterminent si l'utilisateur doit appuyer sur une touche de modification (par exemple Ctrl, Alt ou Commande) en même temps que sur la lettre pour activer l'élément. Dans Internet Explorer 4 pour Windows, l'utilisateur doit appuyer sur la touche Alt, et la touche d'accès est insensible à la casse. Cet attribut est inopérant dans IE 4 pour Macintosh.

Exemple
<LEGEND ACCESSKEY="c">Informations relatives à votre carte de crédit</LEGEND>
Valeur
Un caractère unique pour l'ensemble du document.
Par défaut Aucune.
ALIGN | NN s.o. IE 4 HTML 4
ALIGN=« alignement » | Facultatif

Contrôle l'alignement de l'élément LEGEND par rapport à son élément conteneur FIELDSET. Les valeurs autorisées ne fonctionnent pas toujours comme prévu dans Internet Explorer 4. Par exemple, la valeur "bottom" affiche la légende dans le coin supérieur gauche du rectangle de l'élément FIELDSET, au même titre que la valeur "top", qui est supposée aligner l'élément au centre du côté supérieur. Les autres valeurs (center, left et right) fonctionnent comme prévu, mais sur le Macintosh les valeurs "center" et "right" élargissent de façon inexplicable le rectangle de l'élément FIELDSET. Vérifiez l'effet de la valeur choisie avec les deux systèmes d'exploitation.

L'attribut ALIGN est déprécié en HTML 4.0, qui conseille d'utiliser les feuilles de style. Mais même une feuille de style ne parviendra pas à positionner une étiquette le long du côté inférieur de l'élément FIELDSET dans Internet Explorer 4.

Exemple
<LEGEND ALIGN="right">Informations relatives à votre carte de crédit</LEGEND>
Valeur
Les valeurs autorisées en HTML 4.0 sont les suivantes : bottom | left | right | top. IE 4 y ajoute la constante "center".
Par défaut left
Référence de modèle d'objet
IE [window.]document.all.IDélément.align
TITLE | NN s.o. IE 4 HTML 4
TITLE=« Commentaire » | Facultatif

Description de l'élément. Dans Internet Explorer 4, le titre apparaît dans une info-bulle lorsque le pointeur de la souris reste immobile quelques instants sur l'élément. L'attribut TITLE d'un élément LEGEND a la priorité sur la valeur de TITLE pour l'ensemble de l'élément FIELDSET.

Exemple
<LEGEND TITLE="Informations relatives à votre carte de crédit">...</LEGEND>
Valeur
Toute chaîne de caractères. Cette chaîne doit figurer entre guillemets (simples ou doubles, mais identiques).
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.all.IDélément.title


<LI> | NN tous IE tous HTML tous
<LI>...</LI> | Balise de fin : facultative

L'élément LI est un élément de liste unique imbriqué dans l'un des conteneurs de liste OL ou UL. Le type de conteneur détermine si l'élément LI est précédé, soit d'un chiffre ou d'une lettre (indiquant son numéro d'ordre au sein d'une séquence), soit d'un symbole n'indiquant aucun ordre particulier. Une catégorie spéciale d'attributs de feuille de style est consacrée au formatage des listes. C'est pourquoi un grand nombre d'attributs de formatage des éléments LI, OL et UL sont dépréciés en HTML 4.0.

Si vous allouez une règle de feuille de style à un élément LI pour ajuster sa couleur, seul le symbole d'en-tête sera coloré dans Navigator 4. Pour que le texte soit également coloré, insérez l'élément LI à l'intérieur d'un élément SPAN, et appliquez le style à l'élément SPAN. Cette technique fonctionne de la même façon dans Navigator et Internet Explorer.

Exemple
<UL>
    <LI>Henri
    <LI>Maurice
    <LI>Marcel
</UL>
Référence de modèle d'objet
IE [window.]document.all.IDélément
TYPE | NN tous IE tous HTML 3.2
TYPE=« Type_étiquette » | Facultatif

L'attribut TYPE offre une certaine souplesse quant à la façon dont le symbole ou le numéro d'ordre est affiché dans le navigateur. Les valeurs sont séparées en deux groupes, dédiés respectivement à l'élément OL et à l'élément UL. Pour une liste non ordonnée (UL), vous pouvez préciser si le symbole en début de ligne doit être un disque, un cercle ou un carré ; pour une liste ordonnée (OL), vous avez le choix entre des lettres (majuscules ou minuscules), des chiffres romains (majuscules ou minuscules) ou des chiffres arabes. L'attribut TYPE est déprécié en HTML 4.0, qui conseille d'utiliser l'attribut list-style-type: dans une feuille de style.

Pour une raison inconnue, le symbole « carré » des listes non ordonnées est plein dans les navigateurs Windows, et vide dans les navigateurs Macintosh.

Dans les implémentations des navigateurs actuelles, l'attribut TYPE d'un élément LI définit le type pour les éléments LI suivants de la liste, sauf si un nouvel attribut TYPE d'un autre élément LI reçoit une autre valeur. En général, il est préférable de définir l'attribut TYPE de l'élément OL ou UL, et de laisser celui-ci prendre en charge tous les éléments imbriqués.

Exemple
<LI TYPE="square">Poulet au curry
Valeur
Lorsque cet élément est contenu par l'élément UL, les valeurs possibles sont les suivantes : disc | circle | square. Lorsque cet élément est contenu par l'élément OL, les valeurs possibles sont les suivantes : A | a | I | i | 1. Les numéros d'ordre sont gérés automatiquement de la façon suivante :
Type Exemple
A
         A, B, C, ...
a
         a, b, c, ...
I
         I, II, III, ...
i
         i, ii, iii, ...
1
         1, 2, 3, ...
Par défaut 1 et disc.
Référence de modèle d'objet
IE [window.]document.all.IDélément.type
VALUE | NN tous IE tous HTML 3.2
VALUE=« nombre » | Facultatif

L'attribut VALUE ne s'applique que lorsque l'élément LI est imbriqué dans un élément OL. Vous pouvez définir manuellement le chiffre de départ de la séquence des éléments de la liste ordonnée. Cette possibilité est utile si vous devez interrompre le cours de l'élément OL par du texte ne faisant pas partie de la liste.

Bien que la valeur affectée à cet attribut soit un chiffre, le paramétrage de TYPE n'en est pas modifié pour autant. Par exemple, si vous donnez à l'attribut VALUE la valeur 3 alors que l'attribut TYPE possède la valeur A, la séquence de numérotation commencera par la lettre C (la 3e lettre de l'alphabet) à partir de cet élément LI.

Exemple
<LI VALUE=3>Insérez la vis C dans le trou M. Fixez-la à l'aide d'un tournevis.
Valeur
Tout entier positif.
Par défaut 1
Référence de modèle d'objet
IE [window.]document.all.IDélément.value


<LINK> | NN 4 IE 3 HTML tous
<LINK>...</LINK> | Balise de fin : interdite

À la différence de l'élément A (qui est abusivement appelé lien lorsqu'il contient un attribut HREF),l'élément LINK doit figurer à l'intérieur de l'élément HEAD ; il est destiné à permettre au document d'établir des liens avec des documents externes, par exemple des fichiers de définition de feuille de style ou de définition de polices de caractères. Les navigateurs sont encore loin d'exploiter tout le potentiel de cet élément. Un certain nombre d'attributs permettent à l'auteur d'établir des relations entre le document actuel et des documents qui lui sont potentiellement liés. En théorie, certaines de ces relations pourraient apparaître dans le document, ou sous forme de contrôles dans le navigateur. Les implémentations de cet élément dans Navigator 4 et Internet Explorer 4 sont minimales, par comparaison avec les spécifications HTML 4.0. Toutefois, plusieurs attributs (et tous les gestionnaires d'événements) définis dans les spécifications HTML 4.0 sont sans grande utilité pratique, car ils s'appliquent typiquement à des éléments destinés à afficher du contenu sur la page. Aucun contenu de document explicite n'est affiché grâce à l'élément LINK. Il se peut que certains de ces attributs apparaissent par erreur dans la liste, ou n'y figurent que pour des raisons de cohérence. Comme ils ne sont pas implémentés dans les navigateurs, ces attributs n'apparaissent ici qu'à fins d'informations.

Exemple
<HEAD>
<TITLE>Section 3</TITLE>
<LINK REV="Prev" HREF="sect2.html">
<LINK REL="Next" HREF="sect4.html">
<LINK REL="stylesheet" TYPE="text/css" HREF="mesStyles.css">
</HEAD>
Référence de modèle d'objet
IE [window.]document.all.IDélément
CHARSET | NN s.o. IE s.o. HTML 4
CHARSET=« code_de_caractères » | Facultatif

Codage de caractères du contenu de l'autre extrémité du lien.

Exemple
<LINK CHARSET="csISO5427Cyrillic" HREF="moscou.html">
Valeur
L'un des alias (non sensibles à la casse) du registre de jeux de caractères qui figure à l'adresse (ftp://ftp.isi.edu/in-notes/iana/assignments/character-sets).
Par défaut Suivant le navigateur.
DISABLED | NN s.o. IE 4 HTML s.o.
DISABLED | Facultatif

La présence de cet attribut désactive l'élément LINK. À la différence de ce qui se produit lorsque cet attribut est appliqué à des éléments possédant du contenu, dans ce cas de figure aucun contenu n'apparaît en grisé en réponse à l'attribut.

Exemple
<LINK REL="Index" HREF="indexList.html" DISABLED>
Valeur
La présence de cet attribut définit sa valeur comme true (vrai).
Par défaut false
Référence de modèle d'objet
IE [window.]document.all.IDélément.disabled
HREF | NN s.o. IE 3 HTML tous
HREF=« URI » | Obligatoire

L'adresse URI de destination d'un lien. Navigator 4 utilise l'attribut SRC à cet effet. Utilisez ces deux attributs simultanément pour un fonctionnement indépendant du navigateur.

Exemple
<LINK REV="Prev" HREF="sect2.html">
Valeur
Toute adresse URI et URL valide (complète ou relative).
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.all.IDélément.href
HREFLANG | NN s.o. IE s.o. HTML 4
HREFLANG=« code_langue » | Facultatif

Le code de langue du contenu de la page de destination d'un lien. L'attribut HREF doit obligatoirement être également défini. Cet attribut est essentiellement destiné à permettre au navigateur de se préparer à traiter une nouvelle langue, s'il en est capable.

Exemple
<LINK HREFLANG="HI" HREF="hindi/Chap3.html">
Valeur
Code de langue (constante texte) non sensible à la casse.
Par défaut Police par défaut du navigateur.
MEDIA | NN s.o. IE s.o. HTML 4
MEDIA=« liste_descriptive » | Facultatif

Définit le périphérique de sortie prévu pour le contenu du document de destination indiqué par l'attribut HREF. L'attribut MEDIA sera particulièrement utile le jour où les navigateurs seront en mesure d'adapter le contenu en fonction de types de périphériques spécifiques (ordinateurs de poche, synthétiseurs vocaux, téléviseurs, etc). Les spécifications HTML 4.0 définissent un certain nombre de constantes pour des périphériques déjà prévus, mais la liste est ouverte, et de futurs navigateurs pourront adapter le contenu à d'autres types de médias et de périphériques.

Exemple
<LINK REL="Glossary" HREF="gloss.html" MEDIA="screen, tv, handheld">
Valeur
Constante sensible à la casse. Plusieurs valeurs peuvent être regroupées (elles seront alors séparées par des virgules) au sein d'une liste incluse entre guillemets. Les valeurs définies en HTML 4.0 sont les suivantes : all | aura | braille | handheld | print | projection | screen | tty | tv .
Par défaut screen
REL | NN 3,2 IE 3 HTML 4
REL=« types_de_liens » | Facultatif

Définit la relation entre l'élément courant et la destination du lien. Les recommandations HTML 4.0 définissent plusieurs types de liens, en laissant aux navigateur le soin de déterminer comment employer ces valeurs. Cet élément doit comporter un attribut HREF pour que l'attribut REL puisse être appliqué.

Exemple
<LINK REL="Next" HREF="sect4.html">
Valeur
Types de liens standard HTML 4.0 applicables à l'élément, insensibles à la casse et séparés par un espace dans une liste. Internet Explorer 4 ne gère que les valeurs stylesheet; Navigator 4 reconnaît stylesheet et fontdef. Les types de liens approuvés par HTML 4.0 sont les suivants :
alternate | contents | index | start
appendix | copyright | next | stylesheet
bookmark | glossary | prev | subsection
chapter | help | section |
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.all.IDélément.rel
REV | NN s.o. IE s.o. HTML 4
REV=« types_de_liens » | Facultatif

Définit une relation de lien inversé. Comme pour l'attribut REL, les possibilités de l'attribut REV dépendent du navigateur, en particulier pour la façon dont celui-ci interprète et affiche les divers types de liens disponibles dans les spécifications HTML 4.0. Si deux documents (A et B) contiennent des liens pointant, pour chaque document, vers l'autre document, la valeur de l'attribut REV dans B exprimera la même relation entre ces deux documents que celle de l'attribut REL dans A.

Exemple
<LINK REV="Prev" HREF="sect4.html">
Valeur
Types de liens standard HTML 4.0 applicables à l'élément, insensibles à la casse et séparés par un espace dans une liste. Consultez l'attribut REL pour plus d'informations sur les types de liens approuvés.
Par défaut Aucune.
SRC | NN 4 IE s.o. HTML s.o.
SRC=« URL » | Facultatif

L'adresse URL de destination d'un lien. Internet Explorer 4 et HTML 4.0 utilisent l'attribut HREF dans ce but. Utilisez ces deux attributs simultanément pour un fonctionnement indépendant du navigateur.

Exemple
<LINK REL="fontdef" HREF="fonts/garamond.pfr">
Valeur
Toute adresse URL valide (complète ou relative).
Par défaut Aucune.
TARGET | NN s.o. IE s.o. HTML 4
TARGET=« nom_de_fenêtre_ou_de_cadre » | Facultatif

Il semble que l'attribut TARGET soit prévu en HTML 4.0 pour indiquer la destination d'affichage du document pointé par l'attribut HREF de l'élément LINK. Aucun navigateur n'implémente encore cet attribut, puisque l'élément LINK ne pointe pas encore sur du contenu susceptible d'être affiché.

Valeur
Identificateur sensible à la casse lorsque le nom du cadre ou de la fenêtre cible a été affecté à l'aide de l'attribut NAME dans l'élément cible. Il existe quatre constantes, qui sont des mots réservés désignant des types de cibles :
_blank | Le navigateur crée une nouvelle fenêtre pour le document de destination.
_parent | Le document de destination remplace le jeu de cadres du document courant (s'il existe un jeu de cadres, sinon le document est traité comme avec _self).
_self | Le document de destination remplace le document actuel dans sa fenêtre ou son cadre.
_top | Le document de destination doit occuper toute la fenêtre du navigateur, en remplaçant l'éventuel jeu de cadres qui y serait chargé (s'il n'existe pas de jeu de cadres, le document est traité comme avec _self).
Par défaut _self
TYPE | NN 4 IE 4 HTML 4
TYPE=« type_MIME » | Facultatif

Indication sur le type de contenu de document ou de la ressource de destination. En pratique, cet attribut n'est encore utilisé que pour préparer le navigateur au type de feuille de style indiqué.

Exemple
<LINK REL="stylesheet" TYPE="text/css" HREF="styles/mesStyles.css">
Valeur
Type MIME non sensible à la casse. Un catalogue des types MIME enregistrés figure à l'adresse (ftp://ftp.isi.edu/in-notes/iana/assignments/media-types).
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.all.IDélément.type


<LISTING> | NN< tous IE tous HTML 4
<LISTING>...</LISTING> | Balise de fin : obligatoire

L'élément LISTING affiche son contenu comme élément de bloc, avec une police de caractères à espacement non proportionnel, comme dans les listings informatiques imprimés sur 132 colonnes. Dans la plupart des navigateurs, la taille de cette police est également réduite par rapport à la taille par défaut. Les navigateurs respectent les sauts de ligne et autres espaces blancs contenus dans le texte. Cet élément est depuis longtemps déprécié en HTML, et il a même été supprimé des spécifications HTML 4.0. Il est fortement conseillé d'utiliser plutôt l'élément PRE.

Exemple
<LISTING>
&lt;SCRIPT LANGUAGE="JavaScript"&gt;
   document.write("Bonjour le monde.")
&lt;/SCRIPT&gt;
</LISTING>
Référence de modèle d'objet
IE [window.]document.all.IDélément


<MAP> | NN tous IE tous HTML 3.2
<MAP>...</MAP> | Balise de fin : obligatoire

L'élément MAP sert de conteneur pour des éléments AREA définissant l'emplacement et des liens des zones sensibles (« hotspots », « zones réactives » ou « références » selon les logiciels) des images interactives (« cartes images », (« cartes graphiques ») côté client. Le but essentiel de l'élément MAP est d'associer un identifiant (l'attribut NAME) vers lequel l'attribut USEMAP pourra pointer lorsqu'un élément IMG sera transformé en image interactive côté client. La plupart des autres attributs sont relatifs au style et ne sont destinés à être appliqués à l'élément MAP que pour les éléments qu'il contient puissent en hériter.

Exemple
<IMG SRC="images/logo.gif" ALT="Les boutons de navigation se trouvent en bas de la page."
HEIGHT=300 WIDTH=250 USEMAP="#navigation">
<MAP NAME="navigation">
<AREA SHAPE="rect" COORDS="0,0,100,100" HREF="products.html">
<AREA SHAPE="rect" COORDS="0,100,300,100" HREF="support.html">
</MAP>
Référence de modèle d'objet
IE [window.]document.all.IDélément
NAME | NN tous IE tous HTML 3.2
NAME=« identifiant » | Obligatoire

Identifiant vers lequel pointe l'attribut USEMAP d'un élément IMG. Comme l'attribut USEMAP est en fait de type URL, sa valeur ressemble à celle d'un lien vers anchor: le nom est précédé du signe dièse (seulement dans l'attribut USEMAP).

Exemple
<MAP NAME="navigation"> ...</MAP>
Valeur
Identifiant unique sensible à la casse.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.all.IDélément.name


<MARQUEE> | NN s.o. IE 3 HTML s.o.
<MARQUEE>...</MARQUEE> | Balise de fin : facultative

L'élément MARQUEE n'existe que dans Internet Explorer. Il sert à afficher du contenu HTML dans une zone défilante de la page. Le contenu qui défile est le texte qui figure entre les balises de début et de fin. Il n'existe pas d'élément équivalent dans Navigator, bien que cet effet puisse être reproduit de façon à fonctionner dans tous les navigateurs, à l'aide d'une applet Java ou en Dynamic HTML.

Exemple
<MARQUEE BEHAVIOR="slide" DIRECTION="left" WIDTH=250 BGCOLOR="white">
Consultez nos promotions du mois.
</MARQUEE>
Référence de modèle d'objet
IE [window.]document.all.IDélément
BEHAVIOR | NN s.o. IE 3 HTML s.o.
BEHAVIOR=« Type_de_défilement » | Facultatif

Définit le type de déplacement du contenu au sein de la zone rectangulaire réservée à l'élément MARQUEE. Il existe trois types de déplacement.

Exemple
<MARQUEE BEHAVIOR="slide" DIRECTION="left" WIDTH=250 BGCOLOR="white">
...
</MARQUEE>
Valeur
L'un des trois types de déplacement (non sensibles à la casse) de l'élément MARQUEE :
alternate | Le contenu effectue un mouvement alternatif de gauche à droite.
scroll | Le contenu défile (dans le sens défini par l'attribut DIRECTION), entre dans le champ et en sort avant de recommencer.
slide | Le contenu défile (dans le sens défini par l'attribut DIRECTION), entre dans le champ, s'arrête en fin de course et disparaît avant de recommencer.
Par défaut scroll
Référence de modèle d'objet
IE [window.]document.all.IDélément.behavior
BGCOLOR | NN s.o. IE 3 HTML s.o.
BGCOLOR=« Triplet_de_couleurs_en_hexa, ou Nom_en_anglais » | Facultatif

Définit une couleur de remplissage (derrière le texte et autre contenu) pour la zone rectangulaire réservée à l'élément MARQUEE.

Exemple
<MARQUEE BEHAVIOR="slide" DIRECTION="left" WIDTH=250 BGCOLOR="white">
...
</MARQUEE>
Valeur
Triplet de couleurs en hexadécimal, ou l'un des noms de couleurs en anglais. Si la valeur de cet attribut n'est pas indiquée, elle sera interprétée comme "#000000" (noir). Reportez-vous à l'annexe A pour connaître les noms de couleurs admissibles.
Par défaut Varie selon les versions du navigateur et les systèmes d'exploitation.
Référence de modèle d'objet
IE [window.]document.all.IDélément.bgColor
DATAFLD | NN s.o. IE 4 HTML s.o.
DATAFLD=« Nom_colonne » | Facultatif

Cet attribut est utilisé avec IE 4 dans le cadre d'une liaison de données, pour associer le nom d'une colonne d'une source de données distante au contenu défilant d'un élément MARQUEE. Cette colonne de source de données doit être en texte brut ou en HTML (voir DATAFORMATAS). L'attribut DATASRC de l'élément MARQUEE doit être également défini.

Exemple
<MARQUEE BEHAVIOR="slide" DIRECTION="left" WIDTH=200
DATASRC="#DBSRC3" DATAFLD="news" DATAFORMATAS="HTML">
...
</MARQUEE>
Valeur
Identifiant sensible à la casse.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.all.IDélément.dataFld
DATAFORMATAS | NN s.o. IE 4 HTML s.o.
DATAFORMATAS=« Type_de_données » | Facultatif

Cet attribut est utilisé avec IE 4 dans le cadre d'une liaison de données, pour indiquer au navigateur si les informations qui proviennent de la source de données doivent être traitées comme du texte brut ou du texte HTML avec balises. Le paramétrage de cet attribut dépend entièrement de la structure de la source de données.

Exemple
<MARQUEE BEHAVIOR="slide" DIRECTION="left" WIDTH=200
DATASRC="#DBSRC3" DATAFLD="news" DATAFORMATAS="HTML">
...
</MARQUEE>
Valeur
IE 4 reconnaît deux valeurs possibles : text | HTML.
Par défaut text
Référence de modèle d'objet
IE [window.]document.all.IDélément.dataFormatAs
DATASRC | NN s.o. IE 4 HTML s.o.
DATASRC=« Nom_source_de_données » | Facultatif

Utilisé avec la liaison de données Internet Explorer 4 pour déterminer la source de données ODBC distante (une base de données Oracle ou SQL par exemple) à associer à l'élément. Le contenu de la source de données est spécifié à l'aide de l'attribut DATAFLD.

Exemple
<MARQUEE BEHAVIOR="slide" DIRECTION="left" WIDTH=200
DATASRC="#DBSRC3" DATAFLD="news" DATAFORMATAS="HTML">
...
</MARQUEE>
Valeur
Identifiant sensible à la casse.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.all.IDélément.dataSrc
DIRECTION | NN s.o. IE 4 HTML s.o.
DIRECTION=« direction_de_défilement » | Facultatif

Le contenu d'un élément MARQUEE peut défiler dans quatre directions. Pour obtenir une bonne lisibilité dans les langues qui se lisent de gauche à droite, il est préférable que le contenu défile vers la gauche ou vers le bas.

Exemple
<MARQUEE BEHAVIOR="slide" DIRECTION="left" WIDTH=200>
...
</MARQUEE>
Valeur
L'une des quatre directions possibles : down | left | right | up.
Par défaut left
Référence de modèle d'objet
IE [window.]document.all.IDélément.direction
HEIGHT, WIDTH NN s.o. IE 4 HTML s.o.
HEIGHT=« longueur »
WIDTH=« largeur » 		Facultatif

Un élément MARQUEE représente une zone rectangulaire dans la page. Vous pouvez modifier la taille par défaut de ce rectangle en affectant les valeurs désirées aux attributs HEIGHT et WIDTH. La valeur par défaut de l'attribut HEIGHT est déterminée par la taille de l aplus grand epolice de caractères utilisée pour le contenu de l'élément MARQUEE. La valeur par défaut est égale à la largeur du conteneur père (habituellement, l'élément BODY). L'attribut WIDTH définit l'espace utilisé à un moment ou à un autre par le contenu lorsqu'il défile horizontalement. Lorsque l'élément MARQUEE est incorporé dans un élément TD qui laisse au navigateur le soin de calculer la largeur des cellules du tableau, l'attribut WIDTH de l'élément MARQUEE doit être défini, faute de quoi le navigateur risque de lui affecter la valeur 1, ce qui en rendrait le contenu illisible.

Pour laisser davantage de marge autour de l'espace utilisé, servez-vous des attributs HSPACE et VSPACE.

Exemple
<MARQUEE BEHAVIOR="slide" DIRECTION="left" HEIGHT=20 WIDTH=200>
...
</MARQUEE>
Valeur
Toute valeur en pixels ou en pourcentage de l'espace disponible.
Par défaut Largeur : 100%; hauteur : 12 pixels.
Référence de modèle d'objet
IE [window.]document.all.IDélément.height
[window.]document.all.IDélément.width
HSPACE, VSPACE NN s.o. IE 4 HTML s.o.
HSPACE=« Nombre_de_pixels »
VSPACE=« Nombre_de_pixels » 		Facultatif

Internet Explorer comporte des attributs permettant de définir la marge qui entoure l'élément MARQUEE. L'attribut HSPACE contrôle la marge extérieure le long des côtés gauche et droit (remplissage horizontal), et l'attribut VSPACE contrôle la marge extérieure le long des côtés supérieur et inférieur (remplissage vertical). Ce « remplissage » permet d'ajouter un espace vide autour du rectangle occupé par l'élément MARQUEE. Vous pouvez également utiliser les divers paramètres de marges dans une feuille de style, en particulier si vous ne désirez redéfinir l'espace vierge que le long d'un seul côté.

Exemple
<MARQUEE BEHAVIOR="slide" DIRECTION="left" HEIGHT=20 WIDTH=200
HSPACE=10 VSPACE=15>
...
</MARQUEE>
Valeur
Tout entier positif.
Par défaut 0
Référence de modèle d'objet
IE [window.]document.all.IDélément.hspace
[window.]document.all.IDélément.vspace
LOOP | NN s.o. IE 4 HTML s.o.
LOOP=« Compteur_de_boucle » | Facultatif

Définit le nombre de défilements du contenu de l'élément MARQUEE. Après le défilement final, le contenu reste en position fixe. Une animation permanente peut être source de distraction pour les visiteurs de la page : si l'animation de l'élément MARQUEE s'interrompt au bout de quelques défilements, un grand nombre de visiteurs vous en sauront gré.

Exemple
<MARQUEE BEHAVIOR="slide" DIRECTION="left" HEIGHT=20 WIDTH=200 LOOP=3>
...
</MARQUEE>
Valeur
Un entier positif après lequel le défilement s'interrompt. Pour qu'il ne s'interrompe jamais, la valeur doit être -1 ou infinite.
Par défaut -1
Référence de modèle d'objet
IE [window.]document.all.IDélément.loop
SCROLLAMOUNT | NN s.o. IE 4 HTML s.o.
SCROLLAMOUNT=« Nombre_de_pixels » | Facultatif

Si le contenu de l'élément MARQUEE semble animé, c'est parce que le navigateur efface son contenu et le redessine un peu plus loin (dans la direction définie par l'attribut DIRECTION). Il est possible d'accélérer ce défilement en augmentant l'espace entre les positions successives de chaque affichage du contenu ; inversement, le défilement sera ralenti en diminuant cet espace. Voir aussi SCROLLDELAY .

Exemple
<MARQUEE BEHAVIOR="slide" DIRECTION="left" HEIGHT=20 WIDTH=200 SCROLLAMOUNT=2>
...
</MARQUEE>
Valeur
Tout entier positif.
Par défaut 6
Référence de modèle d'objet
IE [window.]document.all.IDélément.scrollAmount
SCROLLDELAY | NN s.o. IE 4 HTML s.o.
SCROLLDELAY=« millisecondes » | Facultatif

La vitesse de défilement apparente peut dépendre de la fréquence de retraçage du contenu, dont la position est décalée avec chaque retraçage (voir SCROLLAMOUNT). L'augmentation de la valeur de SCROLLDELAY ralentit la vitesse de défilement, et la diminution de cette valeur l'accélère. Tenez compte du fait que sur les ordinateurs peu puissants, vous atteindrez rapidement une valeur au-delà de laquelle aucune augmentation de vitesse ne sera perceptible, quelle que soit la valeur de SCROLLDELAY (voir TRUESPEED).

Exemple
<MARQUEE BEHAVIOR="slide" DIRECTION="left" HEIGHT=20 WIDTH=200 SCROLLDELAY=100>
...
</MARQUEE>
Valeur
Un entier positif représentant le nombre de millisecondes entre les retraçages.
Par défaut 85(Windows) ou 90 (Macintosh)
Référence de modèle d'objet
IE [window.]document.all.IDélément.scrollDelay
TRUESPEED | NN s.o. IE 4 HTML s.o.
TRUESPEED | Facultatif

L'élément MARQUEE comporte une « limite de vitesse » pour éviter un défilement trop rapide pour que les visiteurs puissent le lire. Si vous désirez vraiment que le contenu défile très vite, vous pouvez inclure l'attribut TRUESPEED pour demander au navigateur de respecter des valeurs de SCROLLDELAY inférieures à 60 millisecondes.

Exemple
<MARQUEE BEHAVIOR="slide" DIRECTION="left" HEIGHT=20 WIDTH=200
SCROLLDELAY=45 TRUESPEED>
...
</MARQUEE>
Valeur
La présence de cet attribut définit sa valeur comme true (vrai).
Par défaut false
Référence de modèle d'objet
IE [window.]document.all.IDélément.trueSpeed


<MENU> | NN tous IE tous HTML tous
<MENU>...</MENU> | Balise de fin : obligatoire

L'objectif initial de l'élément MENU était de permettre aux navigateurs de générer des listes d'éléments sur une seule colonne. Pourtant, presque tous les navigateurs traitent l'élément MENU de la même façon que l'élément UL, en présentant une liste non ordonnée d'éléments (généralement précédés d'une puce) sur une seule colonne. L'élément MENU est déprécié en HTML 4.0. Il est conseillé de lui préférer l'élément UL dans tous les cas, car vous conserverez ainsi une compatibilité ascendante et descendante au cas où l'élément MENU disparaîtrait totalement des navigateurs. Ces remarques sont également valables pour l'élément DIR, qui est lui aussi déprécié.

Exemple
Types de connecteurs DB répandus :
<MENU>
    <LI>DB-9
    <LI>DB-12
    <LI>DB-25
</MENU>
Référence de modèle d'objet
IE [window.]document.all.IDélément
COMPACT | NN s.o. IE 3 HTML 3,2
COMPACT | Facultatif

Attribut booléen conçu à l'origine pour permettre aux navigateurs d'afficher la liste sous une forme plus compacte que la normale (en réduisant l'interligne entre les éléments). Internet Explorer ignore cet attribut (bien que la documentation d'IE 3 affirme qu'il est pris en charge).

Exemple
<MENU COMPACT>...</MENU>
Valeur
La présence de cet attribut définit sa valeur comme true (vrai).
Par défaut false


<META> | NN tous IE tous HTML tous
<META> | Balise de fin : interdite

Un élément META comporte des informations (invisibles à l'utilisateur) sur le document, à l'usage du serveur qui distribue le document et du client qui le charge. Cet élément est également utilisé pour insérer des informations relatives au document ; certains moteurs de recherche utilisent ces informations pour indexer et catégoriser les documents sur le Web.

Il est possible d'inclure dans un même document plusieurs éléments META, mais tous les éléments META doivent être inclus dans l'élément HEAD. La fonction spécifique de chaque élément META est définie par ses attributs. En général, un élément META se résume à une paire nom / valeur destinée au serveur ou au client. Par exemple, la plupart des navigateurs reconnaissent les valeurs des attributs qui forcent le rechargement de la page (ou la redirection vers une autre page) après un délai défini. Cette possibilité est utile pour les page dont le contenu est modifié à intervalles de quelques minutes, car le navigateur recharge alors la dernière version de la page à la fréquence indiquée par l'élément META.

En HTML 4.0, plusieurs autres éléments et attributs contiennent le même type de métadonnées qui figureraient autrement dans des éléments META. Choisissez la méthode la mieux adaptée au serveur et aux navigateurs cibles. Dans bien des cas, le premier facteur de décision d'une implémentation réaliste consistera à s'adapter aux spécifications HTML 4.0.

Voir également les éléments ADDRESS, DEL, INS, LINK et TITLE, ainsi que l'attribut PROFILE de l'élément HEAD.

Exemple
<HEAD PROFILE="http://www.giantco.com/profiles/common">
    <META NAME="Author" CONTENT="Jane Smith">
    <META NAME="keywords" CONTENT="avantages,assurance,épargne">
    <META HTTP-EQUIV="refresh"
CONTENT="1;URL=http://www.giantco.com/truindex.html">
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html;
charset=ISO-8859-5">
</HEAD>
CONTENT | NN tous IE tous HTML tous
CONTENT=« constante » | Obligatoire

Cet attribut est l'équivalent de la valeur d'une paire nom / valeur. Il est en général accompagné d'un attribut NAME ou HTTP-EQUIV, et l'un de ces deux attributs représente la partie « nom » d'une paire nom / valeur. Les valeurs spécifiques de l'attribut CONTENT varient selon la valeur d el'attribut NAME ou HTTP-EQUIV. L'attribut CONTENT contient parfois plusieurs valeurs. Dans ce cas, ces valeurs sont séparées par des virgules. Certaines de ces valeurs peuvent représenter de fait des paires nom / valeur : c'est le cas par exemple du contenu d'un élément META de type "refresh". La première valeur est un chiffre représentant le délai (en secondes) avant le chargement d'un autre document ; la seconde valeur indique l'URL du document à charger à l'expiration de ce délai.

Exemple
<META HTTP-EQUIV="refresh"
CONTENT="2;URL=http://www.giantco.com/basicindex.html">
Valeur
Toute chaîne de caractères. Cette chaîne doit figurer entre guillemets (simples ou doubles, mais identiques).
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.all.IDélément.content
HTTP-EQUIV | NN tous IE tous HTML tous
HTTP-EQUIV=« identifiant » | Facultatif

Lorsqu'un serveur envoie un document au client à l'aide du protocole HTTP, cette transmission comporte un grand nombre de champs d'en-tête HTTP, dont des directives au navigateur client sur le contenu à venir. Les éléments META peuvent s'ajouter à ces en-têtes HTTP lorsque l'attribut HTTP-EQUIV est affecté à un document. Les navigateurs convertissent les valeurs des attributs HTTP-EQUIV et CONTENT dans le format d'en-tête de réponses HTTP "nom: valeur", et les traitent comme si elles provenaient directement du serveur.

Les standards Web définissent une longue liste d'en-têtes HTTP (voir Webmaster in a Nutshell de Stephen Spainhour et Valerie Quercia, éditeur O'Reilly & Associates), mais certaines des valeurs les plus courantes sont présentées dans les exemples ci-dessous. Vous pouvez placer soit l'attribut HTTDIRECTIONP-EQUIV, soit l'attribut NAME dans un élément META, mais pas les deux à la fois.

Exemple
<META HTTP-EQUIV="refresh"
CONTENT="1,http://www.giantco.com/truindex.html">
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-5">
<META HTTP-EQUIV="expires" CONTENT="Sun, 15 Jan 1998 17:38:00 GMT">
Valeur
Toute chaîne de texte.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.all.IDélément.httpEquiv
NAME | NN tous IE tous HTML tous
NAME=« identifiant » | Facultatif

Identifiant de la paire nom / valeur qui constitue l'élément META. En général, la valeur de cet attribut est un mot anglais qui indique l'objectif de l'élément META, par exemple "author" (auteur) ou "keywords" (mots clés). Vous pouvez utiliser l'attribut NAME ou l'attribut HTTP-EQUIV, mais pas les deux, dans le même élément META.

Exemple
<META NAME="Author" CONTENT="Jane Smith">
<META NAME="keywords" CONTENT="avantages,assurance,épargne">
Valeur
Toute chaîne de texte.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.all.IDélément.name
SCHEME | NN s.o. IE s.o. HTML 4
SCHEME=« identifiant » | Facultatif

Cet attribut ajoute une ou plusieurs couches organisationnelles aux métadonnées figurant dans un document. Par exemple, un campus universitaires comportant plusieurs bibliothèques peut générer des documents associés à chacune de ces bibliothèques. À supposer qu'un navigateur soit en mesure d'interpréter de telles métadonnées, une approche plausible pour assembler les balises consisterait à créer un attribut NAME différent pour chaque bibliothèque : NAME="juridique", NAME="medical", NAME="scientifique", etc. Mais il peut aussi être nécessaire d'associer ces valeurs NAME à une université spécifique. L'attribut SCHEME pourrait alors être utilisé pour aligner les métadonnées avec une université particulière : SCHEME="Montpellier". Les autres bibliothèques de l'université pourraient certes utiliser la même organisation d'attributs NAME, mais l'attribut SCHEME permet d'associer clairement un élément META précis à une université et une bibliothèque spécifiques. Mais, encore une fois, cette démarche suppose que le navigateur soit en mesure de traiter ces méta-informations.

Exemple
<META SCHEME="Chicago" NAME="restaurant" CONTENT="1029">
Valeur
Toute chaîne de texte.
Par défaut Aucune.


<MULTICOL> | NN 3 IE s.o. HTML s.o.
<MULTICOL>...</MULTICOL> | Balise de fin : obligatoire

Cet élément spécifique à Navigator permet d'afficher son contenu dans un certain nombre de colonnes régulièrement espacées sur la page. La façon dont cet élément gère le flux de texte rappelle celle des programmes de mise en page, qui font automatiquement « couler » les textes longs dans les colonnes qui ont été définies sur la page. Il n'existe pas d'équivalent à cet élément en HTML ou dans Internet Explorer, mais la feuille de style "columns" est définie par CSS2.

Exemple
<MULTICOL COLS=2 GUTTER=20 WIDTH=500>
Contenu_HTML_de grande_longueur
</MULTICOL>
COLS | NN 3 IE s.o. HTML s.o.
COLS=« Nombre_de_colonnes » | Obligatoire

Définit le nombre de colonnes parmi lesquelles le navigateur répartit et affiche le contenu de l'élément. Pour une largeur de contenu donnée, le navigateur fait au mieux pour que toutes les colonnes aient la même hauteur.

Exemple
<MULTICOL COLS=2 GUTTER=20 WIDTH=500>
Contenu_HTML_de grande_longueur
</MULTICOL>
Valeur
Tout entier positif.
Par défaut 1
GUTTER | NN 3 IE s.o. HTML s.o.
GUTTER=« Nombre_de_pixels » | Facultatif

Indique l'espace, en pixels, entre deux colonnes. Le navigateur calcule alors la largeur disponible dans chaque colonne pour le contenu, en soustrayant la largeur totale des gouttières de la largeur totale disponible.

Exemple
<MULTICOL COLS=2 GUTTER=20 WIDTH=500>
Contenu_HTML_de grande_longueur
</MULTICOL>
Valeur
Tout entier positif.
Par défaut 10
WIDTH | NN 3 IE s.o. HTML s.o.
WIDTH=« Largeur_élément » | Facultatif

Définit la largeur totale des colonnes (contenu plus gouttières). Cette largeur peut être indiquée en pixels ou en pourcentage de la largeur du conteneur père (en général l'élément BODYdu document).

Exemple
<MULTICOL COLS=2 GUTTER=20 WIDTH=500>
Contenu_HTML_de grande_longueur
</MULTICOL>
Valeur
Toute valeur en pixels ou en pourcentage de l'espace disponible.
Par défaut 100%


<NOBR> | NN tous IE tous HTML s.o.
<NOBR>...</NOBR> | Balise de fin : obligatoire

L'élément NOBR indique au navigateur que son contenu doit être affiché sans renvoyer le texte à la ligne suivante lorsqu'il atteint le bord droit de la fenêtre ou de l'élément conteneur. Même si des retour-chariot figurent dans le code source du contenu de l'élément, le navigateur affiche le texte sur une seule ligne. Bien que cette méthode puisse paraître pratique dans certaines circonstances pour préserver la mise en page, elle peut obliger l'utilisateur à faire défiler horizontalement le contenu de la fenêtre pour lire le texte - ce qui n'est pas un impératif très apprécié des utilisateurs. Quoique l'élément NOBR figure depuis longtemps dans les navigateurs du commerce, il n'a jamais été inclus dans les recommandations HTML officielles.

Exemple
<NOBR>
L'heure est venue pour tous les hommes braves de
venir à l'aide de leur patrie, même si
ce texte les force à défiler à l'horizontale.
</NOBR>
Référence de modèle d'objet
IE [window.]document.all.IDélément


<NOEMBED> | NN 2 IE s.o. HTML s.o.
<NOEMBED>...</NOEMBED> | Balise de fin : obligatoire

Navigator prend en charge une balise permettant d' isoler un contenu informatif qui sera affiché dans les navigateurs incapables d'utiliser les plug-ins. Le contenu situé entre les balises de début et de fin de l'élément NOEMBED n'est pas affiché dans Navigator (ni dans Internet Explorer), mais apparaît dans les autres navigateurs (qui ignorent cette balise, mais pas son contenu). Cet élément ne possède pas d'attributs.

Exemple
<EMBED NAME="jukebox" SRC="jazz.aif" HEIGHT=100 WIDTH=200></EMBED>
<NOEMBED>
Pour écouter la musique associée à cette page, vous devez utiliser un navigateur moderne !
</NOEMBED>


<NOFRAMES> | NN 2 IE 3 HTML 4
<NOFRAMES>...</NOFRAMES> | Balise de fin : obligatoire

L'élément NOFRAMES contient le code HTML qui sera affiché par les navigateurs incapables d'afficher des cadres. Les navigateur qui gèrent les cadres ignorent le contenu de l'élément NOFRAMES. En principe, ce contenu doit rappeler à l'utilisateur que son navigateur ne gère pas les cadres, ou proposer un lien vers une version sans cadres de la page. L'élément NOFRAMES figure en général dans un élément FRAMESET. Toutefois, les spécifications HTML 4.0 ne voient rien à redire au fait d'incorporer cet élément dans un document affiché, si cette méthode peut vous être utile.

Tous les attributs de l'élément NOFRAMES ont été ajoutés pour assurer la prise en charge des CSS. Cet ajout est étrange, car il est peu vraisemblable qu'un navigateur prenne en charge les feuilles de style CSS et non les cadres. Il faut probablement y voir un souci de cohérence.

Exemple
<FRAMESET COLS="150,*">
    <FRAME NAME="navbar" SRC="nav.html">
    <FRAME NAME="main" SRC="page1.html">
    <NOFRAMES>Votre navigateur ne prend pas les cadres en charge.
    Cliquez <A HREF="noFramesIndex.html">ici</A> pour consulter la version sans cadres.
    </NOFRAMES>
</FRAMESET>


<NOLAYER> | NN 4 IE s.o. HTML s.o.
<NOLAYER>...</NOLAYER> | Balise de fin : obligatoire

Navigator prend en charge une balise permettant d' isoler un contenu informatif qui sera affiché dans les navigateurs qui ne reconnaissent pas l'élément LAYER. Le contenu situé entre les balises de début et de fin de l'élément NOLAYER n'est pas affiché dans Navigator 4, mais apparaît dans les autres navigateurs (qui ignorent cette balise, mais pas son contenu). Vous pouvez placer l'élément NOLAYER n'importe où, mais n'oubliez pas qu'il ne sera pas positionné au même titre qu'un élément LAYER.

Cet élément ne possède pas d'attributs. Si vous tentez de définir des règles de feuille de style pour l'élément NOLAYER, elles seront ignorées par d'autres navigateurs, par exemple Internet Explorer. Vous pouvez cependant imbriquer l'élément NOLAYER dans un élément DIV ou SPAN, afin d'associer une règle de feuille de style au texte d'information.

Exemple
<LAYER BGCOLOR="yellow" SRC="instrux.html" WIDTH=200 HEIGHT=300></LAYER>
<NOLAYER>
Vous n'utilisez pas Netscape Navigator 4 : une partie du contenu de cette page ne vous est pas visible.
</NOLAYER>


<NOSCRIPT> | NN 3 IE 4 HTML 4
<NOSCRIPT>...</NOSCRIPT> | Balise de fin : obligatoire

L'élément NOSCRIPT permet d'afficher du contenu lorsqu'un navigateur n'est pas paramétré pour exécuter les scripts inclus dans le document actuel. En pratique, cet élément n'a fait ses débuts qu'avec Navigator 3 et Internet Explorer 4. Lorsqu'un utilisateur désactive l'exécution des scripts dans son navigateur, le contenu de l'élément NOSCRIPT est affiché, quelle que soit sa position dans le code source. Dans les navigateurs anciens ou ne prenant pas les scripts en charge, l'élément NOSCRIPT est totalement ignoré. Les spécifications HTML 4.0 vont plus loin en recommandant que les navigateurs affichent également le contenu de l'élément NOSCRIPT lorsque le langage utilisé pour les scripts situés plus haut dans le document n'est pas pris en charge (ou pas activé) dans le navigateur. De plus, si un futur navigateur compatible HTML 4.0 venait à ne pas prendre en charge les scripts, il devrait lui aussi afficher le contenu de l'élément NOSCRIPT.

Tous les attributs de l'élément NOSCRIPT ont été ajoutés pour assurer la prise en charge des feuilles de style CSS, de l'internationalisation et des événements pour HTML 4.0.

Exemple
<NOSCRIPT>
Ce document contient des éléments interactifs qui nécessitent un navigateur prenant en charge les scripts, tel que Microsoft Internet Explorer ou Netscape Navigator. Actuellement, vous n'avez pas accès à tous les éléments qui font la richesse de cette page.
</NOSCRIPT>


<OBJECT> | NN 4 IE 3 HTML 4
<OBJECT>...</OBJECT> | Balise de fin : obligatoire

L'élément OBJECT fournit au navigateur des informations relatives au chargement et à l'affichage des types de données qui ne sont pas pris en charge de façon native par ce navigateur. Si le navigateur doit charger un programme externe (applet Java, plug-in, etc)., les informations sur le contenu à afficher figurent dans l'élément OBJECT, ses attributs et, éventuellement, les éléments PARAM qu'il contient. Bien que les navigateurs actuels reconnaissent les éléments APPLET et EMBED, on peut déduire des spécifications HTML une tendance à combiner tous ces éléments dans l'objet OBJECT.

Les spécifications HTML 4.0 autorisent l'imbrication d'éléments OBJECT pour permettre au navigateur de charger un contenu alternatif s'il ne possède pas le plug-in (ou tout autre composant logiciel) nécessaire. En essence, l'idée est que le navigateur puisse parcourir les différents niveaux d'éléments OBJECT imbriqués jusqu'à ce qu'il en trouve un qu'il prend en charge. Par exemple, un élément OBJECT tente de charger un clip vidéo MPEG2 ; si aucun composant multimédia n'est disponible, le navigateur recherche l'élément OBJECT imbriqué suivant, qui est une image fixe JPEG tirée de la vidéo ; si le navigateur ne permet pas d'afficher les images, il affichera le HTML brut contenu par l'élément (bien qu'il ne s'agisse pas, dans ce cas, d'un élément OBJECT) le plus imbriqué au sein de la hiérarchie des éléments OBJECT imbriqués :

<DIV>
<OBJECT data="proddemo.mpeg" type="application/mpeg">
    <OBJECT data="prodStill.jpg" type="image/jpeg">
        Le nouveau Gadget 3000 !
    </OBJECT>
</OBJECT>
</DIV>

HTML 4.0 détaille une structure destinée à transformer les éléments OBJECT composés d'images en cartes graphiques côté client. La syntaxe est légèrement différente de celle des éléments MAP et AREA utilisés pour les cartes graphiques des éléments IMG. Les attributs SHAPES doivent avoir été définis pour l'élément OBJECT qui contient l'image. Pour chaque zone active de l'image, vous devez ensuite définir un élément A imbriqué dans l'élément OBJECT. Chaque élément A contient des attributs SHAPE et COORDS, ainsi que l'attribut HREF et les autres attributs de liens nécessaires. Dans le cas d'éléments OBJECT imbriqués, un élément imbriqué peut partager ses zones de référence (zones réactives, ou « hotspots ») avec son élément père, à l'aide de l'attribut EXPORT, de la façon suivante :

<OBJECT data="widget399.pdf" SHAPES>
    <OBJECT data="widget399.gif" SHAPES EXPORT>
    <A HREF="w399Specs.html TARGET="main" SHAPE="rect" COORDS="10,10,40,50">
    <A HREF="w399Price.html TARGET="main" SHAPE="rect" COORDS="40,10,80,50">
    <A HREF="w399Order.html TARGET="main" SHAPE="rect" COORDS="10,50,80,100">
    </OBJECT>
</OBJECT>

La longue liste d'attributs que possède l'élément OBJECT est une tentative de prise en compte de tous les types de données possibles qui pourraient apparaître à l'avenir. De plus, des paramètres spécifiques selon le contenu peuvent également être passés à l'aide des éléments PARAM, qui peuvent être insérés entre les balises de début et de fin de l'élément OBJECT.

Pour déterminer les attributs qui s'appliquent à un type de contenu ou à un objet particuliers, et pour connaître leurs valeurs possibles, vous devrez consulter la documentation du fournisseur de l'objet ou du plug-in. Cette même documentation doit aussi vous permettre de savoir pour quels types de navigateurs et de systèmes d'exploitation sont disponibles les fonctionnalités du composant.

Exemple
<OBJECT ID="terre" CLASSID="clsid:83A38BF0-B33A-A4FF-C619A82E891D">
<PARAM NAME="srcStart" VALUE="images/earth0.gif">
<PARAM NAME="frameCount" VALUE="12">
<PARAM NAME="loop" VALUE="-1"
<PARAM NAME="fps" VALUE="10">
</OBJECT>
ACCESSKEY | NN s.o. IE 4 HTML 4
ACCESSKEY=« caractère » | Facultatif

Un caractère unique ; lorsque l'utilisateur appuie sur la touche correspondante, l'élément concerné est activé. Selon le navigateur et le système d'exploitation, l'utilisateur doit appuyer sur une touche de modification (par exemple Ctrl, Alt ou Commande) simultanément à la touche désignée pour activer l'élément. Dans Internet Explorer 4 pour Windows, l'utilisateur doit appuyer sur la touche Alt, et la touche d'accès est insensible à la casse. Cet attribut est inopérant dans IE 4 pour Macintosh.

Exemple
<OBJECT ... ACCESSKEY="g"></OBJECT>
Valeur
Un caractère unique pour l'ensemble du document.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.all.IDélément.accessKey
ALIGN | NN 4 IE 3 HTML 4
ALIGN=« Constante_d'alignement » | Facultatif

Détermine le type d'alignement du rectangle de l'élément OBJECT dans le contexte du contenu environnant. Consultez la section « Constantes d'alignement » ci-dessus pour avoir la description des possibilités définies dans Navigator et dans Internet Explorer pour cet attribut. Certaines valeurs d'attribut ne sont pas valides dans les navigateurs antérieurs à la version 4.

Les deux navigateurs respectent les mêmes règles de présentation du contenu environnant une image dont l'attribut ALIGN a été défini, mais les résultats effectifs sont parfois difficiles à prévoir si ce contenu environnant est complexe. Pour éviter toute mauvaise surprise, il est conseillé d'effectuer des tests complets, en variant la taille de fenêtre des navigateurs.

Exemple
<OBJECT ... ALIGN="baseline"></OBJECT>
Valeur
Constante non sensible à la casse. Toutes les constantes sont disponibles dans Navigator 4 et Internet Explorer 4.
Par défaut bottom
Référence de modèle d'objet
IE [window.]document.all.IDélément.align
ARCHIVE | NN s.o. IE s.o. HTML 4
ARCHIVE=« Liste_d'URL » | Facultatif

Liste d'adresses URL (séparées par des espaces) de fichiers prenant en charge le chargement et l'exécution de l'élément OBJECT. Si ces fichiers sont indiqués explicitement à l'aide de l'attribut ARCHIVE, le navigateur n'a pas à attendre que les fichiers de prise en charge soient appelés par le contenu lors du traitement dans l'élément OBJECT. Ces fichiers de prise en charge sont en effet téléchargés en même temps que le contenu principal. L'attribut ARCHIVE peut également comporter des URL affectées aux attributs CLASSID ou DATA, mais il est toutefois nécessaire que l'un de ces deux attributs pointe vers l'adresse URL du contenu principal.

Exemple
<OBJECT ... ARCHIVE=" /images/anim3.gif /images/anim4.gif"></OBJECT>
Valeur
Une adresse URL complète ou relative.
Par défaut Aucune.
BORDER | NN s.o. IE s.o. HTML 4
BORDER=« Taille_en_pixels » | Facultatif

Épaisseur de la bordure qui entoure l'élément OBJECT. Cet attribut, qui est pris en charge par Internet Explorer 3 mais pas par IE 4, est déprécié en HTML 4.0 en faveur des bordures définies dans les feuilles de style.

Exemple
<OBJECT ... BORDER=4></OBJECT>
Valeur
Un nombre entier de pixels.
Par défaut Aucune.
CLASSID | NN 4 IE 3 HTML 4
CLASSID=« URL » | Facultatif

Adresse URL de l'implémentation de l'objet. En général, cet attribut indique au navigateur des fichiers de classe programme, applet ou plug-in à charger. Avec Internet Explorer, l'adresse URL peut pointer sur le dossier CLSID qui contient tous les identifiants (ID) des contrôles ActiveX enregistrés, par exemple DirectAnimation. La valeur de CLASSID doit être indiquée par le fournisseur du contrôle ActiveX. Avec Navigator 4, le Gestionnaire d'installation d'archive Java (JAR) tente d'installer un plug-in à partir de l'adresse URL indiquée par CLASSID si ce plug-in n'est pas installé pour le type de données spécifié par l'attribut DATA. De fait, cet attribut peut être utilisé pour charger des applets Java (IE 4 comporte un attribut CODE chargé de cette opération), mais jusqu'aux versions 4 des deux navigateurs les applets Java ne sont pas encore prises en charge suivant cette méthode.

Exemple
<OBJECT ID="terre" CLASSID="clsid:83A38BF0-B33A-A4FF-C619A82E891D">
</OBJECT>
Valeur
Une adresse URL complète ou relative.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.all.IDélément.classid
CODE | NN s.o. IE 4 HTML s.o.
CODE=« nom_fichier.class » | Facultatif

L'attribut CODE semble être une solution intérimaire pour permettre à l'élément OBJECT d'effectuer dans Internet Explorer les mêmes tâches qu'un élément APPLET, en utilisant le même type d'attributs. La valeur de l'attribut CODE est le nom du fichier de classe de l'applet Java. Si ce fichier de classe ne se trouve pas dans le même chemin que le document, son chemin doit être indiqué par l'attribut CODEBASE, comme pour l'élément APPLET. Il est possible qu'à terme l'attribut CODE soit supplanté par l'attribut HTML 4.0 CLASSID, qui est destiné à toutes les implémentations d'objets. Les paramètres sont passés aux applets par les éléments PARAM, de la même façon que lorsque ces éléments sont imbriqués dans l'élément APPLET.

Exemple
<OBJECT CODE="fileReader.class" CODEBASE="classes"></OBJECT>
Valeur
Nom d'un fichier de classe d'applet.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.all.IDélément.code
CODEBASE | NN 4 IE 3 HTML 4
CODEBASE=« chemin » | Facultatif

Chemin du répertoire contenant le fichier de classe défini dans l'attribut CODE ou CLASSID. L'attribut CODEBASE nomme uniquement le chemin, et non le fichier de classe. Cet attribut peut être l'adresse URL complète du répertoire, mais n'essayez pas d'accéder à une adresse codebase située en dehors du domaine du document actuel.

Exemple
<OBJECT CODE="fileReader.class" CODEBASE="classes"></OBJECT>
Valeur
Nom de chemin sensible à la casse, qui est en général l'adresse relative par rapport au répertoire du document HTML courant.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.all.IDélément.codeBase
CODETYPE | NN s.o. IE 3 HTML 4
CODETYPE=« type_MIME » | Facultatif

Indication du type de contenu de l'objet auquel réfère l'attribut CLASSID. Cette information peut aider un navigateur à préparer la prise en charge d'une ressource nécessitant un composant logiciel multimédia. Si l'attribut CODETYPE est absent, le navigateur recherche la valeur de l'attribut TYPE (bien que ce dernier soit normalement associé au contenu indiqué par l'adresse URL de l'attribut DATA). Si ces deux attributs sont absents, le navigateur récupère les informations sur le type de contenu directement dans la ressource pendant que celle-ci se charge.

Exemple
<OBJECT CLASSID="clsid:83A38BF0-B33A-A4FF-C619A82E891D"
CODETYPE="application/x-crossword">
</OBJECT>
Valeur
Type MIME non sensible à la casse. Un catalogue des types MIME enregistrés figure à l'adresse (ftp://ftp.isi.edu/in-notes/iana/assignments/media-types).
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.all.IDélément.codeType
DATA | NN 4 IE 3 HTML 4
DATA=« URL » | Facultatif

Adresse URL d'un fichier contenant les données nécessaires à l'élément OBJECT (par opposition avec l'objet lui-même). Dans le cas de données dont le type de contenu peut être ouvert (et affiché ou exécuté) par un objet ou un plug-in compatibles, les attributs DATA et TYPE suffisent généralement pour exécuter le plug-in et charger le contenu. Toutefois, si le contenu nécessite un plug-in ou un contrôle ActiveX spécifiques, il est conseillé d'inclure également un attribut CLASSID pointant vers l'implémentation de l'objet. Vous pouvez alors indiquer le type de contenu avec l'attribut CODETYPE ou l'attribut TYPE. Les adresses URL relatives sont calculées à partir de l'attribut CODEBASE s'il existe ; dans le cas contraire, l'adresse URL est relative à celle du document.

Exemple
<OBJECT DATA="proddemo.mpeg" TYPE="application/mpeg"></OBJECT>
Valeur
Une adresse URL complète ou relative.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.IDélément.data
DATAFLD | NN s.o. IE 4 HTML s.o.
DATAFLD=« Nom_colonne » | Facultatif

Cet attribut est utilisé avec IE 4 dans le cadre d'une liaison de données, pour associer le nom d'une colonne d'une source de données distante à un attribut de l'élément OBJECT déterminé par les propriétés définies dans cet élément. L'attribut DATASRC de l'élément doit être également défini.

Exemple
<OBJECT CLASSID="clsid:83A38BF0-B33A-A4FF-C619A82E891D"
DATASRC="#DBSRC3" DATAFLD="dataFile">
</OBJECT>
Valeur
Identifiant sensible à la casse.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.all.IDélément.dataFld
DATASRC | NN s.o. IE 4 HTML s.o.
DATASRC=« Nom_source_de_données » | Facultatif

Cet attribut est utilisé avec IE 4 dans le cadre d'une liaison de données, pour indiquer la source de données ODBC distante (une base de données Oracle ou SQL par exemple) à associer à l'élément. Le contenu de la source de données est spécifié à l'aide de l'attribut DATAFLD.

Exemple
<OBJECT CLASSID="clsid:83A38BF0-B33A-A4FF-C619A82E891D"
DATASRC="#DBSRC3" DATAFLD="dataFile">
</OBJECT>
Valeur
Identifiant sensible à la casse.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.all.IDélément.dataSrc
DECLARE | NN s.o. IE s.o. HTML 4
DECLARE | Facultatif

La présence de l'attribut DECLARE indique au navigateur qu'il doit considérer l'élément OBJECT courant comme une simple déclaration, sans créer une instance de l'objet. Un navigateur peut ainsi mettre en cache anticipé les données qui ne nécessitent pas que l'objet soit chargé ou exécuté. Pour exécuter l'objet, utilisez un autre élément OBJECT pointant sur les mêmes valeurs d'attribut(s) CLASSID et / ou DATA, mais n'ayant pas d'attribut DECLARE.

Exemple
<OBJECT CLASSID="clsid:83A38BF0-B33A-A4FF-C619A82E891D"  DECLARE>
</OBJECT>
Valeur
La présence de cet attribut définit sa valeur comme true (vrai).
Par défaut false
EXPORT | NN s.o. IE s.o. HTML 4
EXPORT | Facultatif

Si un ensemble d'éléments OBJECT imbriqués contient des images définies comme images interactives (cartes graphiques), vous pouvez définir un ensemble d'images interactives pour un élément OBJECT imbriqué et partager ces spécifications avec l'élément OBJECT parent, en incluant un élément EXPORT.

Exemple
<OBJECT data="widget399.pdf" SHAPES>
    <OBJECT data="widget399.gif" SHAPES EXPORT>
    <A HREF="w399Specs.html TARGET="main" SHAPE="rect" COORDS="10,10,40,50">
    <A HREF="w399Price.html TARGET="main" SHAPE="rect" COORDS="40,10,80,50">
    <A HREF="w399Order.html TARGET="main" SHAPE="rect" COORDS="10,50,80,100">
    </OBJECT>
</OBJECT>
Valeur
La présence de cet attribut définit sa valeur comme true (vrai).
Par défaut false
HEIGHT, WIDTH NN 4 IE 3 HTML 4
HEIGHT=« longueur »
WIDTH=« largeur » 		Obligatoire

L'espace occupé dans un document par un objet imbriqué (ou par le panneau de contrôle de son plug-in) est défini par les valeurs des attributs HEIGHT et WIDTH. Certaines versions des navigateurs permettent de ne pas définir ces attributs, en laissant à l'interface utilisateur du plug-in le soin de déterminer les dimensions du rectangle visible qu'il occupera. Il est préférable d'indiquer si possible les dimensions exactes du panneau de contrôle d'un plug-in ou des données (dans le cas d'images) : les dimensions des panneaux de contrôle varient selon les navigateurs, et même avec des plug-ins différents pour un même navigateur. Dans certains cas, par exemple avec Navigator 4 pour Macintosh, l'objet peut ne pas s'afficher du tout si vous n'indiquez pas une hauteur suffisante sur la page. Si vous indiquez des valeurs supérieures aux dimensions réelles de l'objet ou de son panneau de contrôle, le navigateur réserve cet espace vide sur la page, ce qui peut altérer la mise en page désirée.

Exemple
<OBJECT DATA="blues.aif"HEIGHT=150 WIDTH=250></OBJECT>
Valeur
Entier positif (éventuellement entre guillemets) ou pourcentage (entre guillemets).
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.IDélément.height
[window.]document.IDélément.width
HSPACE, VSPACE NN s.o. IE 3 HTML 4
HSPACE=« Taille_en_pixels »
VSPACE=« Taille_en_pixels » 		Facultatif

Marge réservée autour du contenu visuel de l'espace rectangulaire occupé par l'élément OBJECT. L'attribut HSPACE définit la marge sur les côtés gauche et droit du rectangle, et VSPACE définit la marge sur les côtés haut et bas.

Exemple
<OBJECT DATA="blues.aif"HEIGHT=150 WIDTH=250 VSPACE=10 HSPACE=10></OBJECT>
Valeur
Un entier représentant le nombre de pixels désiré pour la largeur de marge sur les côtés du rectangle de l'élément OBJECT.
Par défaut 0
Référence de modèle d'objet
IE [window.]document.IDélément.hspace
[window.]document.IDélément.vspace
NAME | NN s.o. IE s.o. HTML 4
NAME=« ID_élément » | Facultatif

Les spécifications HTML 4.0 prévoient un attribut NAME pour l'élément OBJECT pour les cas où cet objet fait partie d'un formulaire dont le contenu sera transmis au serveur. Dans ce cas précis, l'attribut NAME joue le même rôle que l'attribut NAME d'un élément INPUT ; il fait fonction d'étiquette pour les informations demandées. Le code qui est chargé dans l'élément OBJECT doit être programmé pour renvoyer une valeur s'il doit être transmis dans un formulaire HTML.

Exemple
<OBJECT NAME="embedded" CLASSID="clsid:83A38BF0-B33A-A4FF-C619A82E891D"
HEIGHT=150 WIDTH=250>
</OBJECT>
Valeur
Identifiant sensible à la casse.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.all.IDélément.name
SHAPES | NN s.o. IE s.o. HTML 4
SHAPES | Facultatif

La présence de l'attribut SHAPES indique au navigateur qu'il doit traiter l'image contenue dans l'élément OBJECT comme image interactive (carte image) côté client, et les éléments A imbriqués comme définitions des zones réactives de la carte. Les éléments A imbriqués doivent contenir l'attribut COORDS. Un élément OBJECT peut hériter des spécification de la carte image d'un élément OBJECT imbriqué, à condition que les attributs SHAPES et EXPORT de ce dernier soient définis.

Exemple
<OBJECT data="widget399.pdf" SHAPES>
    <OBJECT data="widget399.gif" SHAPES EXPORT>
    <A HREF="w399Specs.html TARGET="main" SHAPE="rect" COORDS="10,10,40,50">
    <A HREF="w399Price.html TARGET="main" SHAPE="rect" COORDS="40,10,80,50">
    <A HREF="w399Order.html TARGET="main" SHAPE="rect" COORDS="10,50,80,100">
    </OBJECT>
</OBJECT>
Valeur
La présence de cet attribut définit sa valeur comme true (vrai).
Par défaut false
STANDBY | NN s.o. IE s.o. HTML 4
STANDBY=« Texte_HTML » | Facultatif

Le contenu HTML à afficher durant le chargement de l'élément OBJECT. Bien que cet attribut n'ait pas été implémenté dans les versions 4 des navigateurs, on peut supposer que le message doit être affiché dans la zone rectangulaire réservée pour l'élément OBJECT, de même que le message ALT apparaît dans l'espace réservé pour l'élément IMG pendant le chargement de l'image.

Exemple
<OBJECT CLASSID="clsid:83A38BF0-B33A-A4FF-C619A82E891D"
HEIGHT=150 WIDTH=250 STANDBY="Chargement en cours...">
</OBJECT>
Valeur
Tout contenu HTML.
Par défaut Aucune.
TABINDEX | NN s.o. IE 3 HTML 4
TABINDEX=chiffre_entier | Facultatif

Nombre indiquant le numéro d'ordre de cet élément dans l'ordre de tabulation de tous les éléments du document pouvant être activés par tabulation L'ordre de tabulation obéit à un ensemble de règles strictes. Les éléments dont l'attribut TABINDEX possède une valeur supérieure à zéro sont les premiers activés lorsque l'utilisateur se sert de la touche de tabulation au sein d'une page. Le premier élément qui est activé (qui « reçoit le focus ») est celui dont l'attribut TABINDEX a la valeur la plus faible ; le système passe ensuite aux éléments dont les valeurs sont de plus en plus élevées, quel que soit leur emplacement physique sur la page ou au sein du document. Si la valeur de l'attribut TABINDEX est identique pour deux éléments, c'est celui qui apparaît le premier dans le document qui est d'abord activé. Viennent ensuite tous les éléments pour lesquels il n'existe pas d'attribut TABINDEX, ou dont cet attribut a reçu la valeur zéro. Ces éléments sont activés selon leur ordre d'apparition dans le document.

Exemple
<OBJECT CLASSID="clsid:83A38BF0-B33A-A4FF-C619A82E891D"
HEIGHT=150 WIDTH=250 TABINDEX=4>...
</OBJECT>
Valeur
Un entier compris entre 0 et 32767. Dans IE 4, si l'attribut TABINDEX reçoit la valeur -1, cet élément ne sera pas inclus dans la séquence de tabulation.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.all.IDélément.tabIndex
TYPE | NN 4 IE 3 HTML 4
TYPE=« type_MIME » | Obligatoire

Indication du type de contenu des données auxquelles réfère l'attribut DATA. Cette information peut aider un navigateur à préparer la prise en charge d'une ressource nécessitant un composant logiciel multimédia. L'élément DATA recherche d'abord cette information dans l'attribut CODETYPE. Mais si l'attribut CODETYPE est absent, le navigateur recherche l valeur de l'attribut TYPE. Si ces deux attributs sont absents, le navigateur récupère les informations sur le type de contenu directement dans la ressource pendant que celle-ci se charge.

Exemple
<OBJECT DATA="movies/prodDemo.mpeg" TYPE="application/mpeg">
</OBJECT>
Valeur
Type MIME non sensible à la casse. Un catalogue des types MIME enregistrés figure à l'adresse (ftp://ftp.isi.edu/in-notes/iana/assignments/media-types).
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.all.IDélément.type
USEMAP | NN s.o. IE s.o. HTML 4
USEMAP=« URL_de_la_carte_graphique » | Facultatif
Les spécifications HTML 4.0 prévoient l'attribut USEMAP pour un élément OBJECT. Comme ces spécification comportent un autre moyen d'associer une carte graphique côté client à un élément OBJECT (voir l'attribut SHAPES), nous ne savons pas si l'objectif de l'attribut USEMAP est de permettre à un élément OBJECT de pointer sur un élément MAP nommé (comme c'est le cas pour un élément IMG avec sa carte image côté client).


<OL> | NN tous IE tous HTML tous
<OL>...</OL> | Balise de fin : obligatoire

L'élément OL contient une liste ordonnée d'éléments. Une « liste ordonnée » est une liste dans laquelle chaque élément est précédé d'un chiffre ou d'une lettre (selon la valeur de l'attribut TYPE ou de l'attribut de feuille de style list-style-type) suivant une séquence de numérotation. Le contenu de chaque élément de la liste est défini par un élément LI imbriqué. Si vous appliquez une règle de feuille de style à un élément OL, les éléments LI imbriqués hériteront de ce style.

Exemple
<OL>
    <LI>Choisissez 'Ouvrir' dans le menu 'Fichier'.
    <LI>Cliquez sur le nom du fichier que vous désirez modifier.
    <LI>Cliquez sur le bouton 'Ouvrir'.
</OL>
Référence de modèle d'objet
IE [window.]document.all.IDélément
COMPACT | NN s.o. IE s.o. HTML 3,2
COMPACT | Facultatif

Attribut booléen conçu à l'origine pour permettre aux navigateurs d'afficher la liste sous une forme plus compacte que la normale (en réduisant l'interligne entre les éléments). Cet attribut n'est pas implémenté dans les navigateurs actuels.

Exemple
<OL COMPACT>...</OL>
Valeur
La présence de cet attribut définit sa valeur comme true (vrai).
Par défaut false
START | NN tous IE tous HTML tous
START=« nombre » | Facultatif

Affecte une valeur de départ à la séquence de numérotation des éléments de la liste de l'élément OL. Cette possibilité est utile si vous devez interrompre la séquence de numérotation par du texte ne faisant pas partie de la liste. Bien que la valeur affectée à cet attribut soit un chiffre, c'est son équivalent en chiffres arabes, chiffres romains ou lettres qui sera utilisé. Cet attribut est déprécié en HTML 4.0, qui conseille d'utiliser le jeu d'attributs de style de décompte spécifié dans les recommandations finales CSS2.

Exemple
<OL START=5> ...</OL>
Valeur
Tout entier positif.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.all.IDélément.start
TYPE | NN tous IE tous HTML 3.2
TYPE=« Type_étiquette » | Facultatif

L'attribut TYPE offre une certaine souplesse quant à la façon dont le numéro d'ordre est affiché dans le navigateur. Pour une liste ordonnée, vous avez le choix entre des lettres (majuscules ou minuscules), des chiffres romains (majuscules ou minuscules) ou des chiffres arabes. L'attribut TYPE est déprécié en HTML 4.0, qui conseille d'utiliser l'attribut de feuille de style list-style-type:

Exemple
<OL TYPE="a">...</OL>
Valeur
Les valeurs possibles sont les suivantes : A | a | I | i | 1. Les numéros d'ordre sont gérés automatiquement de la façon suivante :
Type | Exemple
A | A, B, C, ...
a | a, b, c, ...
I | I, II, III, ...
i | i, ii, iii, ...
1 | 1, 2, 3, ...
Par défaut 1
Référence de modèle d'objet
IE [window.]document.all.IDélément.type


<OPTGROUP> | NN s.o. IE s.o. HTML 4
<OPTGROUP>...</OPTGROUP> | Balise de fin : obligatoire

L'élément OPTGROUP est destiné à permettre à de futures versions des navigateurs de gérer un élément SELECT hiérarchique. L'élément OPTGROUP représente un conteneur pour des éléments OPTION. L'attribut LABEL indique le texte qui doit apparaître dans la liste principale d'éléments SELECT, qui contient des éléments OPTION qui apparaissent en cascade lorsque l'élément OPTGROUP est sélectionné.

Exemple
<SELECT NAME="constructeurs">
    <OPTGROUP LABEL="Français">
        <OPTION VALUE="Renault">Renault
        <OPTION VALUE="Peugeot">Peugeot
        <OPTION VALUE="Citroën">Citroën
    </OPTGROUP>
    <OPTGROUP LABEL="Japonais">
        <OPTION VALUE="Toyota">Toyota
        <OPTION VALUE="Honda">Honda
        <OPTION VALUE="Nissan">Nissan
    </OPTGROUP>
</SELECT>
DISABLED | NN s.o. IE s.o. HTML 4
DISABLED | Facultatif

La présence de cet attribut désactive l'élément OPTGROUP et les éléments OPTION qu'il contient.

Exemple
<OPTGROUP LABEL="Engineering" DISABLED>
Valeur
La présence de cet attribut définit sa valeur comme true (vrai).
Par défaut false
LABEL | NN s.o. IE s.o. HTML 4
LABEL=« texte_étiquette » | Obligatoire

L'attribut LABEL contient le texte d'une entrée d'élément SELECT de l'élément OPTGROUP. Il s'agit ici de texte pur, non codé en HTML.

Exemple
<OPTGROUP LABEL="Engineering" DISABLED>
Valeur
Toute chaîne de caractères. Cette chaîne doit figurer entre guillemets (simples ou doubles, mais identiques).
Par défaut Aucune.


<OPTION> | NN tous IE tous HTML tous
<OPTION>...</OPTION> | Balise de fin : facultative

L'élément OPTION définit une entrée dans une liste créée à l'aide de l'élément SELECT, que cette liste soit un menu déroulant ou une liste défilante. Les éléments OPTION associés à un élément SELECT doivent être inclus entre les balises de début et de fin de ce dernier.

Lorsque l'utilisateur clique sur le bouton d'envoi du formulaire, l'élément FORM est envoyé et les éléments SELECT transmettent des paires nom / valeur. En général, ce sont l'attribut NAME de l'élément SELECT et l'attribut VALUE de l'option sélectionnée qui composent cette paire nom / valeur. Il est donc important d'affecter une valeur significative à l'attribut VALUE de chaque élément OPTION d'une liste. Vous pouvez utiliser l'attribut VALUE pour présenter à l'utilisateur des entrées de liste clairement lisibles masquant des valeurs qui ne sont guère compréhensibles que par le serveur. Pour une liste de sélection, le contenu destiné à apparaître à l'utilisateur doit être indiqué après la balise de début de l'élément OPTION. La balise de fin est facultative puisque cette entrée est de toute façon délimitée, soit par la balise de début de l'élément OPTION suivant, soit par la balise de fin de l'élément SELECT. La section consacrée à l'attribut OPTGROUP aborde les possibilités futures de groupage d'éléments OPTION dans des menus hiérarchiques.

Exemple
<SELECT NAME="chapitres">
    <OPTION VALUE="1">Chapitre 1
    <OPTION VALUE="2">Chapitre 2
    <OPTION VALUE="3">Chapitre 3
    <OPTION VALUE="4">Chapitre 4
</SELECT>
Référence de modèle d'objet
NN | [window.]document.Nom_formulaire.Nom_élément_select.Nom_élément_option [window.]document.forms[i].elements[i].Nom_élément_option
IE | [window.]document.Nom_formulaire.Nom_élément_select.Nom_élément_option [window.]document.forms[i].elements[i].Nom_élément_option [window.]document.all.IDélément
DISABLED | NN s.o. IE s.o. HTML 4
DISABLED | Facultatif

La présence de cet attribut désactive l'élément OPTION au sein de la liste.

Exemple
<OPTION VALUE="Met101" DISABLED>Météorologie 101
Valeur
La présence de cet attribut définit sa valeur comme true (vrai).
Par défaut false
LABEL | NN s.o. IE s.o. HTML 4
LABEL=« texte_étiquette » | Obligatoire

L'attribut LABEL est inclus dans les spécifications HTML 4.0 en prévision de la possibilité d'inclure des listes de sélection hiérarchiques. L'attribut LABEL est destiné à représenter une forme plus courte d'entrée pour les éléments OPTION affichés de façon hiérarchique. Il apparaît alors à la place du texte normal associé à l'élément OPTION.

Exemple
<OPTION LABEL="Météo 101" VALUE="met101"> Météorologie 101
Valeur
Toute chaîne de caractères. Cette chaîne doit figurer entre guillemets (simples ou doubles, mais identiques).
Par défaut Aucune.
SELECTED | NN tous IE tous HTML tous
SELECTED | Facultatif

La présence de l'attribut SELECTED présélectionne l'élément OPTION auquel il appartient au sein d'un élément SELECT. Lorsque l'élément SELECT possède l'attribut MULTIPLE, plusieurs éléments OPTION peuvent posséder l'attribut SELECTED.

Exemple
<OPTION VALUE="Met101" DISABLED>Météorologie 101
Valeur
La présence de cet attribut définit sa valeur comme true (vrai).
Par défaut false
Référence de modèle d'objet
NN | [window.]document.Nom_formulaire.Nom_élément_select.Nom_élément_option.selected [window.]document.forms[i].elements[i].selected
IE | [window.]document.Nom_formulaire.Nom_élément_select.Nom_élément_option.selected [window.]document.forms[i].elements[i].selected
VALUE | NN tous IE tous HTML tous
VALUE=« texte » | Facultatif

Associe une valeur à un élément OPTION ; cette valeur peut être ou non identique au texte affiché dans l'élément SELECT. Lorsque l'élément SELECT se trouve dans un formulaire transmis au serveur, la valeur de l'attribut VALUE est affectée à la paire nom / valeur de l'élément SELECT si cette option a été sélectionnée par l'utilisateur (ou si elle est désignée comme sélectionnée à l'aide de l'attribut SELECTED et si l'utilisateur n'a pas effectué de sélection). L'attribut VALUE peut contenir des valeurs (adresses URL ou représentations textuelles d'objets, par exemple) destinées à être ensuite traitées à l'aide d'un script.

Exemple
<OPTION VALUE="met101"> Météorologie 101
Valeur
Toute chaîne de caractères. Cette chaîne doit figurer entre guillemets (simples ou doubles, mais identiques).
Par défaut Aucune.
Référence de modèle d'objet
NN | [window.]document.Nom_formulaire.Nom_élément_select.Nom_élément_option.value [window.]document.forms[i].elements[i].value
IE | [window.]document.Nom_formulaire.Nom_élément_select.Nom_élément_option.value [window.]document.forms[i].elements[i].value


<P> | NN tous IE tous HTML tous
<P>...</P> | Balise de fin : facultative

L'élément P définit un paragraphe (en tant qu'élément de structuration du texte) dans un document. Avec HTML 4.0, l'élément P devient officiellement un élément de niveau bloc, ce qui signifie que le contenu de cet élément débute sur une nouvelle ligne, et que le contenu qui suit cet élément P débute lui aussi sur une nouvelle ligne. Aucun autre élément de niveau bloc ne peut être inséré dans un élément P. Si vous omettez la balise de fin, l'élément se termine avec la balise de début de l'élément de niveau bloc suivant.

La nature de l'élément P a changé depuis ses premières versions. Dans les premières implémentations du langage HTML, cet élément ne représentait qu'un saut de paragraphe (un saut à la ligne avec un interligne supplémentaire). Les versions 4 des navigateurs affichent l'élément P de manière hybride : la balise de début de l'élément P insère un espacement supplémentaire avant le bloc. L'élément P ne peut donc pas apparaître tout en haut d'une page, sauf s'il a été positionné à l'aide d'une feuille de style CSS-P. Il est conseillé d'utiliser l'élément P pour structurer le texte, et non à fins de mise en page.

Le contenu d'un élément P ignore les espaces blancs supplémentaires qui peuvent apparaître dans le code source. D'autres éléments, par exemple PRE, affichent le contenu exactement tel qu'il est formaté dans le code source.

Exemple
<P>Voici un paragraphe simple, d'une seule phrase.</P>
<P>Ce second paragraphe débute en ligne suivante, après un espacement
supplémentaire entre les lignes<P>
Référence de modèle d'objet
IE [window.]document.all.IDélément
ALIGN | NN tous IE tous HTML 3.2
ALIGN=« alignement » | Facultatif

Détermine la façon dont le texte du paragraphe est justifié au sein de la largeur disponible du conteneur père (habituellement, l'élément BODY).

L'attribut ALIGN est déprécié en HTML 4.0, qui conseille d'utiliser l'attribut de feuille de style équivalent.

Exemple
<P ALIGN="center">...</P>
Valeur
Les valeurs d'alignement de texte disponibles sont les suivantes : center | left | right.
Par défaut left
Référence de modèle d'objet
IE [window.]document.all.IDélément.align


<PARAM> | NN 3,2 IE 3 HTML 2
<PARAM> | Balise de fin : interdite

L'élément PARAM peut être imbriqué dans un élément APPLET ou OBJECT pour passer des paramètres à un objet ou une applet Java pendant son chargement. Les paramètres permettent aux développeurs HTML d'ajuster le paramétrage de l'applet ou de l'objet sans devoir en modifier ou réécrire le code. En règle générale, un paramètre est une paire nom / valeur affectée aux attributs NAME et VALUE. Il peut exister plusieurs éléments PARAM par applet ou par objet. La documentation de l'applet ou de l'objet doit fournir toutes les informations nécessaires au passage de paramètres.

Exemple
<APPLET CODE="simpleClock.class" NAME="myClock" WIDTH=400 HEIGHT=50>
<PARAM NAME="bgColor" VALUE="black">
<PARAM NAME="fgColor" VALUE="yellow">
</APPLET>
DATAFLD | NN s.o. IE 4 HTML s.o.
DATAFLD=« Nom_colonne » | Facultatif

Utilisé avec la fonction de liaison de données d'IE 4 pour associer au paramètre passé à un objet ou une applet Java. Dans l'exemple suivant, les données provenant d'une colonne de source de données nommée backColor sont affectées à l'attribut VALUE, bien que celui-ci n'apparaisse pas explicitement dans la balise. Il est également possible d'établir des relations plus complexes avec les éléments OBJECT et APPLET. Il est probable que dans un proche avenir Internet Explorer sera en mesure de lier les modifications apportées aux valeurs de propriété des applets aux colonnes de source de données, afin de mettre à jour la source de données, et de passer les modifications de celle-ci à une applet à l'aide de la technique JavaBeans permettant de nommer les méthodes « get » et « set ».

Exemple
<PARAM NAME="bgColor" DATASRC="#DBSRC2"DATAFORMATAS="text" DATAFLD="backColor">
Valeur
Identifiant sensible à la casse.
Par défaut Aucune.
DATAFORMATAS | NN s.o. IE 4 HTML s.o.
DATAFORMATAS=« Type_de_données » | Facultatif

Cet attribut est utilisé avec IE 4 dans le cadre d'une liaison de données, pour indiquer au navigateur si les informations qui proviennent de la source de données doivent être traitées comme du texte brut ou du texte HTML avec balises. Le paramétrage de cet attribut dépend entièrement de la structure de la source de données et du type de données attendu par l'élément PARAM.

Exemple
<PARAM NAME="bgColor" DATASRC="#DBSRC2"DATAFORMATAS="text" DATAFLD="backColor">
Valeur
IE 4 reconnaît deux valeurs possibles : text | HTML.
Par défaut text
DATASRC | NN s.o. IE 4 HTML s.o.
DATASRC=« Nom_source_de_données » | Facultatif

Cet attribut est utilisé avec IE 4 dans le cadre d'une liaison de données, pour indiquer la source de données ODBC distante (une base de données Oracle ou SQL par exemple) à associer à l'élément. Le contenu de la source de données est spécifié à l'aide de l'attribut DATAFLD.

Exemple
<PARAM NAME="bgColor" DATASRC="#DBSRC2"DATAFORMATAS="text" DATAFLD="backColor">
Valeur
Identifiant sensible à la casse.
Par défaut Aucune.
NAME | NN 3,2 IE 3 HTML 2
NAME=« ID_élément » | Obligatoire

Affecte un identifiant au paramètre attendu par l'applet ou l'objet. Un paramètre comprend généralement une paire nom/valeur. Par exemple, une applet comporte une routine qui relève le nom de chaque paramètre et affecte la valeur qui l'accompagne à une variable interne. La documentation de l'applet ou de l'objet doit fournir la liste des noms et des types de valeurs correspondant aux éléments PARAM.

Exemple
<PARAM NAME="loop" VALUE="4">
Valeur
Identifiant sensible à la casse.
Par défaut Aucune.
TYPE | NN s.o. IE s.o. HTML 4
TYPE=« type_MIME » | Facultatif

Lorsque la valeur de l'attribut VALUETYPE est "ref", la valeur de l'attribut TYPE indique au navigateur le type de contenu du fichier référencé par l'adresse URL que contient l'attribut VALUE. N'utilisez pas l'attribut TYPE lorsque l'attribut VALUETYPE contient d'autres valeurs.

Exemple
<PARAM NAME="help" VALUE="http://www.giantco.com/help.html" VALUETYPE="ref"
TYPE="text/html">
Valeur
Type MIME non sensible à la casse. Un catalogue des types MIME enregistrés figure à l'adresse (ftp://ftp.isi.edu/in-notes/iana/assignments/media-types).
Par défaut Aucune.
VALUE | NN 3,2 IE 3 HTML 2
VALUE=« Valeur_de_paramètre_pour_l'exécution » | Facultatif

Valeur de paramètre à passer à une applet ou à un objet lors du chargement de l'exécutable ou des données. Les valeurs de paramètre sont passées sous forme de chaîne, et il est laissé à l'applet ou à l'objet le soin d'effectuer en interne la conversion de type nécessaire. L'attribut VALUE est indiqué comme étant optionnel, car dans certains cas la présence de l'attribut NAME de l'élément PARAM peut suffire à l'objet.

Exemple
<PARAM NAME="loop" VALUE="4">
Valeur
Toute chaîne de texte.
Par défaut Aucune.
VALUETYPE | NN s.o. IE s.o. HTML 4
VALUETYPE=« Type_de_valeur_du_paramètre » | Facultatif

Les paramètres de l'élément OBJECT peuvent être de trois types : data, object et ref. L'attribut VALUETYPE utilise ces constantes pour indiquer au navigateur comment traiter la valeur affectée à l'attribut VALUE pour la transmettre à l'objet. Lorsque la valeur de VALUETYPE est data, l'attribut VALUE est passé sous forme d'une chaîne en texte brut. Lorsque la valeur de VALUETYPE est object, l'attribut VALUE se compose de l'identifiant d'un autre élément OBJECT défini précédemment dans le même document. L'attribut DECLARE de cet autre objet peut avoie été défini, et les valeurs de paramètre sont alors passées pour instancier l'objet. Lorsque la valeur de VALUETYPE est ref, l'attribut VALUE est une adresse URL qui pointe sur un fichier ou toute autre ressource contenant les valeurs nécessaires à l'exécution (par exemple un ensemble de valeurs à prendre comme paramètre).

Exemple
<PARAM NAME="anime" VALUE="http://www.giantco.com/params/animation.txt"
VALUETYPE="ref" TYPE="text/html">
Valeur
L'une des trois constantes possibles suivantes : data, object et ref.
Par défaut data


<PLAINTEXT> | NN< tous IE tous HTML 4
<PLAINTEXT>...</PLAINTEXT> | Balise de fin : facultative

Le contenu de l'élément bloc PLAINTEXT est affiché avec une police non proportionnelle, mais cet élément pose un problème de taille. Tout le code source qui apparaît dans le document après la balise de début est affiché tel quel dans la fenêtre du navigateur. Il est impossible de désactiver l'effet de l'élément PLAINTEXT. Même la balise de fin est affichée sous forme de balise. Cet élément est depuis longtemps déprécié en HTML, et il a même été supprimé des spécifications HTML 4.0. Il est fortement conseillé d'utiliser plutôt l'élément PRE.

Dans Internet Explorer 4 pour Macintosh, l'élément PLAINTEXT est ignoré si l'un de ses attributs est défini. En d'autres termes, le code source est affiché et l'attribut est appliqué au contenu de l'élément le cas échéant (par exemple dans le cas d'une feuille de style).

Exemple
<P>Le reste du code HTML suit :</P>
<PLAINTEXT>
...
</HTML>
Référence de modèle d'objet
IE [window.]document.all.IDélément


<PRE> | NN tous IE tous HTML tous
<PRE>...</PRE> | Balise de fin : obligatoire

L'élément PRE définit un bloc de texte pré-formaté. Le texte pré-formaté est en général affiché par défaut à l'aide d'une police de caractères non proportionnelle, mais, détail important, il préserve les espaces blancs (les espaces multiples insérés entre les mots, ainsi que les sauts de ligne) saisis dans le code source du contenu. À la différence de l'élément PLAINTEXT, qui est déprécié, l'élément PRE n'ignore pas les balises HTML, qu'il transmet correctement au navigateur, assurant ainsi un affichage normal. Si vous désirez afficher des balises HTML dans un bloc de texte pré-formaté, utilisez des entités HTML pour les symboles « inférieur à » (&lt;) et « supérieur à » (&gt;). Cela évitera que ces symboles soient interprétés comme appartenant à des balises, et ils seront affichés tels quels dans le bloc de texte pré-formaté.

Les navigateurs sont censés ignorer tout espace blanc de type saut de ligne suivant immédiatement la balise de début de l'élément PRE, au cas où le développeur désirerait faire débuter le contenu sur une nouvelle ligne de code source. La quasi-totalité des versions 4 des navigateurs respectent cette règle, à l'exception d'IE 4 pour Macintosh.

Les spécifications HTML 4.0 sont inflexibles sur le fait que l'élément PRE doit conserver sa police de caractères non proportionnelle et son interligne propre. Elles précisent également la liste des éléments qui ne doivent pas être inclus dans un élément PRE : APPLET, BASEFONT, BIG, FONT, IMG, OBJECT, SMALL, SUB et SUP. La présence de l'un de ces éléments détruirait la nature non proportionnelle des caractères de l'élément PRE. Il est également fortement suggéré aux développeurs d'éviter de modifier les paramètres de la police non proportionnelle à l'aide de feuilles de style.

Un dernier avertissement concerne l'utilisation de caractères de tabulation pour indenter ou aligner le texte que contient un élément PRE. Les navigateurs n'interprètent pas tous les tabulations de la même façon. Pour éviter les problèmes potentiels, utilisez des espaces blancs pour modifier l'alignement du texte, et fiez vous au fait que l'élément PRE préserve les espaces blancs. Il n'est donc pas nécessaire d'insérer des espaces insécables (&nbsp;) dans un élément PRE.

Exemple
<P>Voici un exemple de script :</P>
<PRE>
&lt;SCRIPT LANGUAGE="JavaScript"&gt;
   document.write("Bonjour le monde.")
&lt;/SCRIPT&gt;
</PRE>
Référence de modèle d'objet
IE [window.]document.all.IDélément
COLS | NN tous IE s.o. HTML s.o.
COLS=« Nombre_de_colonnes » | Facultatif

Nombre maximal de caractères par ligne de code pré-formaté. Cet attribut spécifique à Navigator donne automatiquement à l'attribut WRAP la valeur true. Si cet attribut est absent, le formatage code source régente la largeur de ligne.

Exemple
<PRE COLS=80>...</PRE>
Valeur
Tout entier positif.
Par défaut Aucune.
WIDTH | NN s.o. IE s.o. HTML 4
WIDTH=« Nombre_de_colonnes » | Facultatif

Les spécifications HTML 4.0 introduisent l'attribut WIDTH pour permettre de définir un nombre maximal de caractères à afficher sur une ligne de texte pré-formaté. Il est probable que les futurs navigateurs qui prendront en charge cet attribut assureront un saut à la ligne pour éviter une coupure de mot. Si cet attribut est absent, le formatage code source régente la largeur de ligne. Navigator offre la même fonctionnalité avec l'attribut COLS.

Exemple
<PRE WIDTH=80>...</PRE>
Valeur
Tout entier positif.
Par défaut Aucune.
WRAP | NN tous IE s.o. HTML s.o.
WRAP | Facultatif

La présence de l'attribut WRAP indique à Navigator que le texte pré-formaté doit être renvoyé à la ligne afin de ne pas déborder de la fenêtre ou du cadre actuels. L'attribut WRAP prend automatiquement la valeur true si l'attribut COLS est défini.

Exemple
<PRE WRAP>...</PRE>
Valeur
La présence de cet attribut définit sa valeur comme true (vrai).
Par défaut false


<Q> | NN s.o. IE 4 HTML 4
<Q>...</Q> | Balise de fin : obligatoire

L'élément Q permet de mettre en valeur une brève citation à l'intérieur d'un document. Les spécifications HTML 4.0 précisent que le navigateur doit automatiquement encadrer par des guillemets (dont le type est défini par la langue déclarée du document) le contenu de l'élément Q, et que les auteurs ne doivent donc pas inclure ces guillemet dans le code. Internet Explorer 4 n'affiche pas ces guillemets. Si vous désirez que la citation apparaisse entre guillemets, le seul choix possible à l'heure actuelle consiste à les insérer vous-même, et à ne pas utiliser l'élément Q (une future version des navigateurs est en effet susceptible d'encadrer le contenu de cet élément avec des guillemets). Pour une longue citation, de niveau bloc, utilisez l'élément BLOCKQUOTE.

Exemple
<P>Le préambule de la Constitution des USA commence par les mots
<Q>Nous, le peuple des États-Unis</Q></P>
Référence de modèle d'objet
IE [window.]document.all.IDélément
CITE | NN s.o. IE s.o. HTML 4
CITE=« URL » | Facultatif

Adresse URL désignant le document source sur le Web dont est issue la citation. Il ne s'agit en aucune façon d'un mécanisme permettant de copier ou extraire le contenu d'un autre document. Cette recommandation HTML 4.0 est censée encourager les futurs navigateurs et moteurs de recherche à renvoyer le lecteur vers les documents source en ligne.

Valeur
Toute adresse URL valide (absolue ou relative) d'un document sur le Web.
Par défaut Aucune.


<S> | NN 3 IE 3 HTML 3.2
<S>...</S> | Balise de fin : obligatoire

Le contenu de l'élément S est affiché avec l'attribut typographique « barré ». Cet élément est identique à l'élément STRIKE, et n'a été adopté que parce qu'il ressemblait davantage aux autres noms d'éléments à un seul caractère destinés à la mise en forme du texte (tels que les éléments B, I et U). Quoi qu'il en soit, les éléments S et STRIKE sont tous deux dépréciés en HTML 4.0, en faveur de l'attribut de feuille de style text-decoration:line-through.

Exemple
<P>Si vous ne réussissez pas du premier coup, <S>recommencez</S> essayez autant de fois que nécessaire.</P>
Référence de modèle d'objet
IE [window.]document.all.IDélément


<SAMP> | NN tous IE tous HTML tous
<SAMP>...</SAMP> | Balise de fin : obligatoire

L'élément SAMP appartient à un large groupe d'éléments que les recommandations HTML 4.0 appellent éléments de phrase. Ces éléments affectent une signification structurelle à une partie désignée du document. Un élément SAMP contient du texte destiné à représenter un exemple de programme ou de script. Il diffère d'un exemple de code, qui est pris en charge par l'élément CODE.

Les navigateurs sont libres de déterminer comment établir la distinction (ou même s'il est nécessaire de faire la distinction) entre le contenu de l'élément SAMP et le reste du contenu de l'élément BODY. Navigator et Internet Explorer affichent tous deux ce texte avec une police non proportionnelle. Vous pouvez toutefois modifier ce comportement à l'aide d'une feuille de style.

Exemple
<P>Appuyez sur la touche Entrée : vous voyez apparaître le texte <SAMP>Hello, world!</SAMP>
à l'écran.</P>
Référence de modèle d'objet
IE [window.]document.all.IDélément


<SCRIPT> | NN 2 IE 3 HTML 4
<SCRIPT>...</SCRIPT> | Balise de fin : obligatoire

L'élément SCRIPT est un conteneur pour les lignes de code de script utilisant l'un des langages de script que le navigateur est capable d'interpréter. Les instructions comprises à l'intérieur des balises Script mais ne figurant pas dans la définition d'une fonction sont directement exécutées lors du chargement de la page ; les définitions de fonctions sont chargées, mais leur exécution est différée tant qu'elles ne sont pas explicitement appelées par l'utilisateur ou par un événement système. Il est possible d'insérer plusieurs éléments SCRIPT dans un document, et un même document peut comporter des éléments SCRIPT écrits dans différents langages de script.

Avec HTML 4.0, un important changement a été apporté à la syntaxe d'un attribut. Depuis que les navigateurs prennent les scripts en charge, l'attribut LANGUAGE était utilisé pour indiquer le langage de script des instructions figurant dans l'élément SCRIPT. HTML 4.0 déprécie cet attribut en faveur de l'attribut TYPE, dont la valeur est un type MIME. Lorsque l'attribut TYPE sera largement répandu parmi les navigateurs, vous pourrez inclure les deux attributs dans vos documents pour assurer une compatibilité ascendante à long terme avec les navigateurs anciens.

Les navigateurs récents permettent aussi d'importer dans le document des instructions de scripts provenant d'un autre document dont l'adresse URL est indiquée par l'attribut SRC. Les très anciens navigateurs qui ne prennent pas les scripts en charge ne reconnaissent pas l'élément SCRIPT et tentent d'afficher les instructions du script comme du contenu HTML normal. C'est pourquoi les instructions des scripts doivent être insérées entre des marqueurs de commentaires HTML. Le marqueur de fin de commentaire (-->) doit être précédé d'un marqueur de commentaire JavaScript (//) pour empêcher JavaScript de générer un message d'erreur.

Exemple
<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!--
function howdy() {
    alert("Hello, world!")
}
//-->
</SCRIPT>>
CHARSET | NN s.o. IE s.o. HTML 4
CHARSET=« code_de_caractères » | Facultatif

Le code de caractères du contenu du fichier auquel réfère l'attribut SRC.

Exemple
<SCRIPT CHARSET="csISO5427Cyrillic" SRC="moscou.js"></SCRIPT>
Valeur
L'un des alias (non sensibles à la casse) du registre de jeux de caractères qui figure à l'adresse (ftp://ftp.isi.edu/in-notes/iana/assignments/character-sets).
Par défaut Suivant le navigateur.
DEFER | NN s.o. IE 4 HTML 4
DEFER | Facultatif

La présence de l'attribut DEFER indique au navigateur qu'il doit afficher le contenu HTML normal de la page pendant le chargement de celle-ci, sans attendre que le script génère un éventuel contenu. Cet attribut est purement informatif. Le navigateur n'a pas besoin de retarder l'affichage du contenu HTML qui suit le script tant qu'il n'a pas fini d'analyser l'élément SCRIPT pour voir s'il contient des instructions document.write().

Exemple
<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript" DEFER>
...
</SCRIPT>>
Valeur
La présence de cet attribut définit sa valeur comme true (vrai).
Par défaut false
Référence de modèle d'objet
IE [window.]document.all.IDélément.defer
EVENT | NN s.o. IE 4 HTML s.o.
EVENT=« nom_événement » | Facultatif

Le modèle d'événement d'Internet Explorer 4 permet de lier des événements transmis par des objets aux éléments SCRIPT à l'aide des attributs EVENT et FOR. Pendant le chargement de la page, le navigateur enregistre chaque élément SCRIPT avec sa liaison événements / objets, si bien que lorsque l'objet génère l'événement, les instructions qui figurent dans l'élément SCRIPT s'exécutent, sans qu'il soit nécessaire d'écrire des gestionnaires d'événements pour les divers objets, ou d'insérer les instructions du script dans des définitions de fonctions. Les valeurs d'événements sont transmises soit sous forme du nom de l'événement sans guillemets, soit sous forme du nom de l'événement entre guillemets et formaté comme une fonction (avec parenthèses et noms de paramètres facultatifs). Ce type de liaison entre un script et un événement ne peut être utilisé qu'avec Internet Explorer. Navigator tente toujours d'exécuter les instructions du script durant le chargement de la page.

Exemple
<SCRIPT FOR=window EVENT=onresize>
...
</SCRIPT>>
Valeur
Nom d'événement sensible à la casse (sans guillemets) ou nom d'événement passé comme une fonction entre guillemets. L'objet décrit dans l'attribut FOR doit prendre en charge l'événement dont le nom apparaît dans l'attribut EVENT.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.all.IDélément.event
FOR | NN s.o. IE 4 HTML s.o.
FOR=« IDélément » | Facultatif

Le modèle d'événement d'Internet Explorer 4 permet de lier des événements objet aux éléments SCRIPT à l'aide des attributs EVENT et FOR. Pendant le chargement de la page, le navigateur enregistre chaque élément SCRIPT avec sa liaison événements / objets, si bien que lorsque l'objet génère l'événement, les instructions qui figurent dans l'élément SCRIPT s'exécutent, sans qu'il soit nécessaire d'écrire des gestionnaires d'événements pour les divers objets, ni d'insérer les instructions du script dans des définitions de fonctions. Utilisez l'attribut ID (dont la valeur doit être unique) de l'élément dont vous désirez gérer l'événement. Ce type de liaison entre un script et un événement ne peut être utilisé qu'avec Internet Explorer. Navigator tente toujours d'exécuter les instructions du script durant le chargement de la page.

Exemple
<SCRIPT FOR=firstNameEntry EVENT="onChange()">
...
</SCRIPT>>
Valeur
Valeur d'ID sensible à la casse de l'élément qui génère l'événement, sans guillemets. L'objet décrit dans l'attribut FOR doit prendre en charge l'événement dont le nom apparaît dans l'attribut EVENT.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.all.IDélément.htmlFor
LANGUAGE | NN 2 IE 3 HTML 4
LANGUAGE=« Langage_de_script » | Facultatif

Définit le langage de script des instructions contenues dans l'élément. Cet attribut est déprécié en HTML 4.0 (en faveur de l'attribut TYPE), mais il est si largement répandu depuis l'apparition des navigateurs prenant les scripts en charge qu'il continuera à être utilisé et pris en charge pendant longtemps encore.

Exemple
<SCRIPT LANGUAGE="JavaScript">
...
</SCRIPT>>
Valeur
Internet Explorer reconnaît quatre noms de langage, insensibles à la casse : JAVASCRIPT | JSCRIPT | VBS | VBSCRIPT. Navigator ne reconnaît que JAVASCRIPT. Les diverses versions de JavaScript sont également prises en charge dans les navigateurs appropriés. Pour que les valeurs de l'attribut restent des identifiants sur un seul mot, les numéros de version sont ajoutés à la fin du nom de langage « JavaScript ». Le mot « JavaScript » sans indication de version est reconnu par tous les navigateurs ; « JavaScript1.1 » n'est reconnu que par Navigator 3; « JavaScript1.2 » est reconnu par Navigator 4 et Internet Explorer 4. Lorsque ces valeurs de versions récentes sont précisées pour l'élément SCRIPT, les anciens navigateurs qui ne prennent pas ces version en charge ignorent l'élément SCRIPT concerné.
Par défaut JavaScript
Référence de modèle d'objet
IE [window.]document.all.IDélément.language
SRC | NN 3 IE 4 HTML 4
SRC=« URL » | Facultatif

Importe un fichier externe contenant des instructions de script. Lorsque les instructions externes sont chargées, le navigateur les traite comme si elles étaient incorporées dans le document HTML principal. Cet attribut est relativement pris en charge dans Internet Explorer 3, mais il dépend d'une version spécifique de JScript.dll, ce qui rend son utilisation avec IE 3 peu fiable.

En théorie, il est possible d'ajouter des instructions de script dans un élément SCRIPT chargeant un fichier de script externe. En pratique, il est plus fiable d'utiliser un élément SCRIPT séparé pour chaque fichier de script externe et pour les scripts internes au document.

Les implémentations actuelles limitent les possibilités de l'attribut SRC à des noms de fichiers JavaScript externes. Ces fichiers doivent avoir l'extension .js, et il est nécessaire que l'extension et le type MIME application/x-javascript soient pris en charge par le serveur.

Exemple
<SCRIPT LANGUAGE="JavaScript" SRC="stringParseLib.js"></SCRIPT>
Valeur
Une adresse URL valide. Avec les navigateurs actuels, le nom du fichier à charger doit posséder l'extension .js. Une adresse URL complète peut aider à résoudre des difficultés avec les premières versions des navigateurs dans lesquelles cet attribut a été implémenté.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.all.IDélément.src
TYPE | NN s.o. IE 4 HTML 4
TYPE=« Type_élément » | Obligatoire

Indication sur le type de contenu des instructions du script. Le type de contenu doit indiquer au navigateur le moteur de script à utiliser pour interpréter les instructions du script. Il n'est pas impossible que l'attribut TYPE finisse par remplacer à terme l'attribut LANGUAGE comme attribut définissant le langage de script utilisé pour les instructions contenues par l'élément. Pour préserver la compatibilité avec les navigateurs futurs et anciens, vous pouvez inclure à la fois les attributs LANGUAGE et TYPE dans un élément SCRIPT.

Exemple
<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
...
</SCRIPT>>
Valeur
Type MIME non sensible à la casse. Les valeurs sont limitées à celles qu'un navigateur donné est capable de prendre en charge.
Par défaut text/javascript dans Internet Explorer 4.
Référence de modèle d'objet
IE [window.]document.all.IDélément.type


<SELECT> | NN tous IE tous HTML tous
<SELECT>...</SELECT> | Balise de fin : obligatoire

L'élément SELECT affiche des informations provenant des éléments OPTION qu'il contient, sous forme de liste déroulante ou de menu contextuel dans le document. En règle générale, l'utilisateur effectue un choix parmi les éléments de la liste (ou un choix multiple dan une liste déroulante si la valeur de l'attribut SIZE est supérieure à 1 et si l'attribut MULTIPLE est défini). L'attribut VALUE de l'élément OPTION sélectionné est envoyé au serveur avec le formulaire, comme partie « valeur » d'une paire nom / valeur. Avec Navigator, l'élément SELECT doit être placé dans un élément FORM.

Exemple
<SELECT NAME="chapitres">
    <OPTION VALUE="chap1.html">Chapitre 1
    <OPTION VALUE="chap2.html">Chapitre 2
    <OPTION VALUE="chap3.html">Chapitre 3
    <OPTION VALUE="chap4.html">Chapitre 4
</SELECT>
Référence de modèle d'objet
NN | [window.]document.Nom_formulaire.Nom_élément_select [window.]document.forms[i].elements[i]
IE | [window.]document.Nom_formulaire.Nom_élément_select [window.]document.forms[i].elements[i] [window.]document.all.IDélément
ACCESSKEY | NN s.o. IE 4 HTML s.o.
ACCESSKEY=« caractère » | Facultatif

Un caractère unique ; lorsque l'utilisateur appuie sur la touche correspondante, l'élément concerné est activé. Selon le navigateur et le système d'exploitation, l'utilisateur doit appuyer sur une touche de modification (par exemple Ctrl, Alt ou Commande) simultanément à la touche désignée pour activer l'élément. Dans Internet Explorer 4 pour Windows, l'utilisateur doit appuyer sur la touche Alt, et la touche d'accès est insensible à la casse. Cet attribut est inopérant dans IE 4 pour Macintosh.

Exemple
<SELECT NAME="chapitres" ACCESSKEY="c">
...
</SELECT>
Valeur
Un caractère unique pour l'ensemble du document.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.Nom_formulaire.Nom_élément_select.accessKey
[window.]document.forms[i].elements[i].accessKey
ALIGN | NN s.o. IE 4 HTML 4
ALIGN=« Constante_d'alignement » | Facultatif

Détermine le type d'alignement du rectangle de l'élément SELECT dans le contexte du contenu environnant (en particulier lorsque la valeur de l'attribut SIZE est supérieure à 1). Consultez la section « Constantes d'alignement » ci-dessus pour avoir la description des possibilités définies dans Navigator et dans Internet Explorer pour cet attribut.

Exemple
<SELECT NAME="chapitres"MULTIPLE ALIGN="baseline">
...
</SELECT>
Valeur
Constante non sensible à la casse. Toutes les constantes sont disponibles dans Internet Explorer 4.
Par défaut bottom (IE 4/Windows); absmiddle (IE 4/Macintosh).
Référence de modèle d'objet
IE [window.]document.Nom_formulaire.Nom_élément_select.align
[window.]document.forms[i].elements[i].align
DATAFLD | NN s.o. IE 4 HTML s.o.
DATAFLD=« Nom_colonne » | Facultatif

Cet attribut est utilisé avec IE 4 dans le cadre d'une liaison de données, pour associer le nom d'une colonne d'une source de données distante à la propriété selectedIndex d'un élément SELECT (c'est-à-dire la valeur d'index à base zéro de l'élément actuellement sélectionné dans la liste, comme il est décrit pour l'objet SELECT du ). Il n'est donc possible d'utiliser la liaison de données qu'avec des éléments SELECT n'ayant pas l'attribut MULTIPLE. L'attribut DATASRC de l'élément doit être également défini.

Exemple
<SELECT NAME="chapitres" DATASRC="#DBSRC3" DATAFLD="chapterRequest">
    <OPTION VALUE="chap1.html">Chapitre 1
    <OPTION VALUE="chap2.html">Chapitre 2
    <OPTION VALUE="chap3.html">Chapitre 3
    <OPTION VALUE="chap4.html">Chapitre 4
</SELECT>
Valeur
Identifiant sensible à la casse.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.Nom_formulaire.Nom_élément_select.dataFld
[window.]document.forms[i].elements[i].dataFld
DATASRC | NN s.o. IE 4 HTML s.o.
DATASRC=« Nom_source_de_données » | Facultatif

Cet attribut est utilisé avec IE 4 dans le cadre d'une liaison de données, pour indiquer la source de données ODBC distante (une base de données Oracle ou SQL par exemple) à associer à l'élément. Le contenu de la source de données est spécifié à l'aide de l'attribut DATAFLD.

Exemple
<SELECT NAME="chapitres" DATASRC="#DBSRC3" DATAFLD="chapterRequest">
    <OPTION VALUE="chap1.html">Chapitre 1
    <OPTION VALUE="chap2.html">Chapitre 2
    <OPTION VALUE="chap3.html">Chapitre 3
    <OPTION VALUE="chap4.html">Chapitre 4
</SELECT>
Valeur
Identifiant sensible à la casse.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.Nom_formulaire.Nom_élément_select.dataSrc
[window.]document.forms[i].elements[i].dataSrc
DISABLED | NN s.o. IE 4 HTML 4
DISABLED | Facultatif

La présence de cet attribut désactive l'ensemble de l'élément SELECT et les éléments OPTION qu'il contient. L'élément ne reçoit aucun événement lorsqu'il est désactivé.

Exemple
<SELECT NAME="chapitres" DISABLED>
    <OPTION VALUE="chap1.html">Chapitre 1
    <OPTION VALUE="chap2.html">Chapitre 2
    <OPTION VALUE="chap3.html">Chapitre 3
    <OPTION VALUE="chap4.html">Chapitre 4
</SELECT>
Valeur
La présence de cet attribut définit sa valeur comme true (vrai).
Par défaut false
Référence de modèle d'objet
IE [window.]document.Nom_formulaire.Nom_élément_select.disabled
[window.]document.forms[i].elements[i].disabled
MULTIPLE | NN tous IE tous HTML tous
MULTIPLE | Facultatif

La présence de l'attribut MULTIPLE indique au navigateur qu'il doit afficher l'élément SELECT sous forme de zone de liste et permettre aux utilisateurs de sélectionner plusieurs éléments de la liste. Par défaut, la valeur de l'attribut SIZE correspond au nombre d'éléments OPTION imbriqués, mais il est possible de définir une autre valeur pour l'attribut SIZE. L'utilisateur peut sélectionner des éléments contigus en maintenant la touche Maj enfoncée tout en cliquant sur le premier et le dernier élément du groupe. Pour sélectionner des éléments non contigus, l'utilisateur doit maintenir la touche Ctrl (Windows) ou Commande (Macintosh) enfoncée tout en cliquant sur chaque élément désiré. L'attribut MULTIPLE est inopérant si la valeur 1 a été donnée à l'attribut SIZE pour afficher un menu contextuel.

Exemple
<SELECT NAME="equipment" MULTIPLE>
<OPTION VALUE="monitor">Moniteur vidéo
<OPTION VALUE="modem">Modem
<OPTION VALUE="printer">Imprimante
...
</SELECT>
Valeur
La présence de cet attribut définit sa valeur comme true (vrai).
Par défaut false
Référence de modèle d'objet
NN | [window.]document.Nom_formulaire.Nom_élément_select.type [window.]document.forms[i].elements[i].type
IE | [window.]document.Nom_formulaire.Nom_élément_select.multiple [window.]document.forms[i].elements[i].multiple [window.]document.Nom_formulaire.Nom_élément_select.type [window.]document.forms[i].elements[i].type
NAME | NN tous IE tous HTML tous
NAME=« IDélément » | Facultatif

Le nom envoyé avec le formulaire dans la paire nom / valeur de l'élément. Il est similaire à l'attribut NAME des éléments INPUT.

Exemple
<SELECT NAME="cpu">
<OPTION VALUE="486">486
<OPTION VALUE="pentium">Pentium
<OPTION VALUE="pentium2">Pentium II
...
</SELECT>
Valeur
Identifiant sensible à la casse.
Par défaut Aucune.
Référence de modèle d'objet
NN | [window.]document.Nom_formulaire.Nom_élément_select.name [window.]document.forms[i].elements[i].name
IE | [window.]document.Nom_formulaire.Nom_élément_select.name [window.]document.forms[i].elements[i].name
SIZE | NN tous IE tous HTML tous
SIZE=« Nombre_de_lignes » | Facultatif

Contrôle le nombre de lignes des éléments OPTION qui apparaissent dans l'élément SELECT. Avec une valeur de 1, l'élément SELECT présente son contenu dans un menu contextuel ; pour une valeur supérieure à 1, les éléments OPTION sont affichés dans une zone de liste. Les navigateurs contrôlent la largeur de l'élément en fonction du texte le plus large associé aux éléments OPTION imbriqués.

Exemple
<SELECT NAME="equipment" SIZE=3>
<OPTION VALUE="monitor">Moniteur vidéo
<OPTION VALUE="modem">Modem
<OPTION VALUE="printer">Imprimante
...
</SELECT>
Valeur
Tout entier positif.
Par défaut 1
Référence de modèle d'objet
IE [window.]document.Nom_formulaire.Nom_élément_select.size
[window.]document.forms[i].elements[i].size
TABINDEX | NN s.o. IE 4 HTML 4
TABINDEX=« chiffre_entier » | Facultatif

Nombre indiquant le numéro d'ordre de cet élément dans l'ordre de tabulation de tous les éléments du document pouvant être activés par tabulation L'ordre de tabulation obéit à un ensemble de règles strictes. Les éléments dont l'attribut TABINDEX possède une valeur supérieure à zéro sont les premiers activés lorsque l'utilisateur se sert de la touche de tabulation au sein d'une page. Le premier élément qui est activé (qui « reçoit le focus ») est celui dont l'attribut TABINDEX a la valeur la plus faible ; le système passe ensuite aux éléments dont les valeurs sont de plus en plus élevées, quel que soit leur emplacement physique sur la page ou au sein du document. Si la valeur de l'attribut TABINDEX est identique pour deux éléments, c'est celui qui apparaît le premier dans le document qui est d'abord activé. Viennent ensuite tous les éléments pour lesquels il n'existe pas d'attribut TABINDEX, ou dont cet attribut a reçu la valeur zéro. Ces éléments sont activés selon leur ordre d'apparition dans le document. Notez que l'interface utilisateur du Macintosh ne permet pas d'activer par tabulation d'autres éléments que les éléments INPUT de type texte et mot de passe.

Exemple
<SELECT NAME="chapitres" TABINDEX=5>
...
</SELECT>
Valeur
Un entier compris entre 0 et 32767. Dans IE 4, si l'attribut TABINDEX reçoit la valeur -1, cet élément ne sera pas inclus dans la séquence de tabulation.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.Nom_formulaire.Nom_élément_select.tabIndex
[window.]document.forms[i].elements[i].tabIndex


<SERVER> | NN 2 IE s.o. HTML s.o.
<SERVER>...</SERVER> | Balise de fin : obligatoire

L'élément SERVER est spécifique à Navigator ; il indique au serveur Web de Netscape (FastTrack ou Enterprise Server) que des routines JavaScript doivent être exécutées côté serveur. Ces routines peuvent être destinées à la récupération ou à la création d'enregistrements de base de données, ou à l'assemblage de contenu qui sera transmis à la page courante. L'explication des scripts côté serveur déborde du cadre de ce document.

Exemple
<BODY>
<P>Valeurs à la clôture :</P>
<SERVER>displayClose()</SERVER>
</BODY>


<SMALL> | NN 2 IE 3 HTML 3.2
<SMALL>...</SMALL> | Balise de fin : obligatoire

L'élément SMALL indique que son contenu doit être affiché dans une taille relative inférieure d'une unité au texte qui précède cet élément. Les tailles de l'élément FONT peuvent être indiquées à l'aide d'une plage de 1 à 7 ; dans ce contexte, l'élément SMALL affiche son contenu dans la taille immédiatement inférieure à celle du texte qui le précède. Cet attribut a le même effet que <FONT SIZE=-1>.

Exemple
<P>Et maintenant, un texte vraiment <SMALL>très petit</SMALL>.</P>
Référence de modèle d'objet
IE [window.]document.all.IDélément


<SPACER> | NN 3 IE s.o. HTML s.o.
<SPACER> | Balise de fin : interdite

Comme solution au besoin de créer des espaces blancs sans utiliser d'entités d'espace forcé (&nbsp;), de suites incessantes d'éléments <P> ou d'images transparentes, Navigator 3 a marqué l'introduction de l'élément SPACER. Celui-ci crée un espace vide dans une ligne de texte, entre plusieurs lignes ou dans un espace rectangulaire. Certaines de ces fonctionnalités peuvent être recréée dans une implémentation indépendante du navigateur, à l'aide de feuilles de style.

Exemple
<P>Voici un paragraphe d'une seule ligne.
<SPACER TYPE="vertical" SIZE=36>
Et ce texte complète le paragraphe précédent après un espacement de trois lignes.</P>
ALIGN | NN 3 IE s.o. HTML s.o.
ALIGN=« Constante_d'alignement » | Facultatif

Détermine le type d'alignement du rectangle de l'élément SPACER dans le contexte du contenu environnant. Consultez la section « Constantes d'alignement » ci-dessus pour avoir la description des possibilités de cet attribut.

Exemple
<SPACER TYPE="block" HEIGHT=90 WIDTH=40 ALIGN="absmiddle">
Valeur
Constante non sensible à la casse. Toutes les constantes sont disponibles dans Navigator 4.
Par défaut bottom
HEIGHT, WIDTH NN 3 IE s.o. HTML s.o.
HEIGHT=« Nombre_de_pixels »
WIDTH=« Nombre_de_pixels » 		Obligatoire

La taille de l'emplacement occupé par un élémentSPACER de type bloc dans un document est déterminée par la valeur de ses attributs HEIGHT et WIDTH. Ces attributs ne s'appliquent que si la valeur de l'attribut TYPE est " block ".

Exemple
<SPACER TYPE="block" HEIGHT=150 WIDTH=250>
Valeur
Entier positif (éventuellement entre guillemets).
Par défaut 0
SIZE | NN 3 IE s.o. HTML s.o.
SIZE=« Taille_en_pixels » | Facultatif

Le nombre de pixels d'espace blanc à insérer horizontalement ou verticalement, selon que l'attribut TYPE a la valeur horizontal ou vertical. Si la valeur de l'attribut TYPE est " block ", l'attribut SIZE est ignoré.

Exemple
<SPACER TYPE="horizontal" SIZE=40>
Valeur
Tout entier positif.
Par défaut 0
TYPE | NN 3 IE s.o. HTML s.o.
TYPE=« Type_d'espacement » | Obligatoire

Définit le type de géométrie d'espacement spécifié pour l'élément SPACER. Le type horizontal ajoute un espace vide sur la même ligne de texte que le contenu qui le précède, le type vertical ajoute un espace vide entre plusieurs lignes de texte, et le type block définit un espace rectangulaire en deux dimensions. Pour les types horizontal et vertical, l'attribut SIZE doit être défini ; pour le type block, ce sont les attributs HEIGHT et WIDTH qui doivent être définis.

Exemple
<SPACER TYPE="horizontal" SIZE=40>
Valeur
Une des trois valeurs suivantes, non sensibles à la casse : block | horizontal | vertical.
Par défaut horizontal


<SPAN> | NN 4 IE 3 HTML 4
<SPAN>...</SPAN> | Balise de fin : obligatoire

L'élément SPAN permet de définir une structure et un contexte pour tout contenu inclus dans un document. Contrairement à d'autres éléments structurels qui ont des connotations très spécifiques (par exemple l'élément P), l'auteur est libre de la signification et de la raison d'être de chaque élément SPAN, en fonction de la valeur des attributs de cet élément et de la teneur de son contenu. Chaque élément SPAN devient un conteneur générique pour tout le contenu qui est délimité par ses balises de début et de fin (obligatoires).

L'élément SPAN est couramment utilisé comme conteneur de petits éléments de contenu contrôlés à l'aide de feuilles de style. Par exemple, pour différencier quelques mots d'un paragraphe en utilisant l'équivalent de petites majuscules, les mots concernés peuvent être inclus dans un élément SPAN dont la feuille de style définit la police et le style de texte désirés. Cette feuille de style peut être de type incorporé, en étant définie à l'aide de l'attribut STYLE de l'élément SPAN, ou être extérieure à celui-ci en étant définie à l'aide des attributs CLASS ou ID, selon la structure du reste du document.

Si vous recherchez un conteneur arbitraire pour du contenu de niveau bloc, utilisez l'élément DIV.

HTML 4.0 définit pour l'élément SPAN un nombre d'attributs beaucoup plus élevé qu'il n'en est implémenté dans la version 4 des navigateurs. La richesse des attributs HTML témoigne de la puissance potentielle de cet élément générique pour inclure des liens vers des ressources et de nombreux attributs renseignant ces liens. Dans les spécifications HTML 4.0, le même ensemble d'attributs s'applique à l'élément DIV.

Exemple
<SPAN STYLE="font-size:10pt; text-transform:uppercase">
Offre spéciale du mois</SPAN>
Référence de modèle d'objet
IE [window.]document.all.IDélément
CHARSET | NN s.o. IE s.o. HTML 4
CHARSET=« code_de_caractères » | Facultatif

Codage de caractères du contenu de l'autre extrémité du lien.

Exemple
<SPAN CHARSET="csISO5427Cyrillic">Texte_en_caractères_cyrilliques</SPAN>
Valeur
L'un des alias (non sensibles à la casse) du registre de jeux de caractères qui figure à l'adresse (ftp://ftp.isi.edu/in-notes/iana/assignments/character-sets).
Par défaut Suivant le navigateur.
DATAFLD | NN s.o. IE 4 HTML s.o.
DATAFLD=« Nom_colonne » | Facultatif

Cet attribut est utilisé avec IE 4 dans le cadre d'une liaison de données, pour associer le nom d'une colonne d'une source de données distante au contenu HTML d'un élément SPAN. Cette colonne de source de données doit être en HTML (voir DATAFORMATAS). Les attributs DATASRC et DATAFORMATAS de l'élément SPAN doivent être également définis.

Exemple
<SPAN  DATASRC="#DBSRC3" DATAFLD="quote" DATAFORMATAS="HTML"> ...</SPAN>
Valeur
Identifiant sensible à la casse.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.all.IDélément.dataFld
DATAFORMATAS | NN s.o. IE 4 HTML s.o.
DATAFORMATAS=« Type_de_données » | Facultatif

Cet attribut est utilisé avec IE 4 dans le cadre d'une liaison de données, pour indiquer au navigateur si les informations qui proviennent de la source de données doivent être traitées comme du texte brut ou du texte HTML avec balises. Un élément SPAN ne doit recevoir des données qu'en format HTML.

Exemple
<SPAN  DATASRC="#DBSRC3" DATAFLD="quote" DATAFORMATAS="HTML"> ...</SPAN>
Valeur
HTML
Par défaut text
Référence de modèle d'objet
IE [window.]document.all.IDélément.dataFormatAs
DATASRC | NN s.o. IE 4 HTML s.o.
DATASRC=« Nom_source_de_données » | Facultatif

Utilisé avec la liaison de données Internet Explorer 4 pour déterminer la source de données ODBC distante (une base de données Oracle ou SQL par exemple) à associer à l'élément. Le contenu de la source de données est spécifié à l'aide de l'attribut DATAFLD.

Exemple
<SPAN  DATASRC="#DBSRC3" DATAFLD="quote" DATAFORMATAS="HTML"> ...</SPAN>
Valeur
Identifiant sensible à la casse.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.all.IDélément.dataSrc
HREF | NN s.o. IE s.o. HTML 4
HREF=« URI » | Facultatif

D'après les spécifications HTML 4.0, l'attribut HREF est destiné à contenir l'adresse URL d'une ressource pouvant fournir « plus d'informations » sur le contenu de l'élément SPAN. Rien n'indique si cette adresse URL doit être affichée d'une façon quelconque (comme l'attribut HREF d'un élément A). Il est possible qu'un futur navigateur utilise cette adresse URL pour générer une note de marge ou une note de pied de page sous forme d'un lien. Plusieurs autres attributs laissent clairement penser que l'adresse URL de l'attribut HREF est destinée à être accessible d'une façon ou d'une autre par l'utilisateur.

Exemple
<SPAN HREF="bibliogs/chap3.html"><A HREF="chap3.html">Chapitre 3</A></SPAN>
Valeur
N'importe quelle adresse URL valide, notamment des adresses URL complètes et relatives, des ancres figurant sur la même page (et dont le nom doit être précédé du caractère #), et, dans les navigateurs gérant le JavaScript, la pseudo-URL javascript: qui précède une instruction de script au lieu de contenir une destination.
Par défaut Aucune.
HREFLANG | NN s.o. IE s.o. HTML 4
HREFLANG=« code_langue » | Facultatif

Le code de langue du contenu de la page de destination d'un lien. L'attribut HREF doit obligatoirement être également défini. Cet attribut est essentiellement destiné à permettre au navigateur de se préparer à traiter une nouvelle langue, s'il en est capable.

Exemple
<SPAN HREFLANG="HI" HREF="bibliogs/hindi/chap3.html">
<A HREF="...">Chapitre 3 (Hindi)</A>
</SPAN>
Valeur
Code de langue (constante texte) non sensible à la casse.
Par défaut Valeur par défaut du navigateur.
MEDIA | NN s.o. IE s.o. HTML 4
MEDIA=« liste_descriptive » | Facultatif

Définit le périphérique de sortie prévu pour le contenu de l'élément SPAN. L'attribut MEDIA sera particulièrement utile le jour où les navigateurs seront en mesure d'adapter le contenu en fonction de types de périphériques spécifiques (ordinateurs de poche, synthétiseurs vocaux, téléviseurs, etc.) Les spécifications HTML 4.0 définissent un certain nombre de constantes pour des périphériques déjà prévus, mais la liste est ouverte, et de futurs navigateurs pourront adapter le contenu à d'autres types de médias et de périphériques.

Exemple
<SPAN MEDIA="screen, tv, handheld">...</SPAN>
Valeur
Constante sensible à la casse. Plusieurs valeurs peuvent être regroupées (elles seront alors séparées par des virgules) au sein d'une liste incluse entre guillemets. Les valeurs définies en HTML 4.0 sont les suivantes : all | aura | braille | handheld | print | projection | screen | tty | tv .
Par défaut screen
REL | NN s.o. IE s.o. HTML 4
REL=« types_de_liens » | Facultatif

Définit la relation entre l'élément courant et la destination du lien. Également connu sous le nom de relation de lien positive, à ne pas confondre avec le document de destination dont l'adresse est définie par l'attribut HREF. Les recommandations HTML 4.0 définissent plusieurs types de liens, en laissant aux navigateur le soin de déterminer comment employer ces valeurs. Cet élément doit comporter un attribut HREF pour que l'attribut REL puisse être appliqué.

Exemple
<SPAN REL="next chapter" HREF="chapter3.html">...</SPAN>
Valeur
Types de liens standard HTML 4.0 applicables à l'élément, insensibles à la casse et séparés par un espace dans une liste. Quelques types de liens approuvés :
alternate

contents

index

start

appendix

copyright

next

stylesheet

bookmark

glossary

prev

subsection

chapter

help

section

Par défaut
Aucune.

REV  | NN s.o.    IE s.o.    HTML 4

REV=« types_de_liens »  | Facultatif

Définit une relation de lien inversé. Comme pour l'attribut REL, les possibilités de l'attribut REV dépendent du navigateur, en particulier pour la façon dont celui-ci interprète et affiche les divers types de liens disponibles dans les spécifications HTML 4.0. Si deux documents (A et B) contiennent des liens pointant, pour chaque document, vers l'autre document, la valeur de l'attribut REV dans B exprimera la même relation entre ces deux documents que celle de l'attribut REL dans A.

Exemple
<SPAN REV="previous chapter" HREF="chapter2.html">...</SPAN>

Valeur
  Types de liens standard HTML 4.0  applicables à l'élément, insensibles à la casse et séparés par un espace dans une liste. Consultez l'attribut REL pour plus d'informations sur les types de liens approuvés.

Par défaut
Aucune.

TARGET  | NN s.o.    IE s.o.    HTML 4

TARGET=« nom_de_fenêtre_ou_de_cadre »  | Facultatif

Si le document cible associé à l'attribut HREF doit être chargé dans une fenêtre ou dans un cadre autres que la fenêtre ou le cadre actuels, vous pouvez préciser l'endroit où il doit s'afficher en associant un nom de fenêtre ou de cadre à l'attribut TARGET. Il faut impérativement affecter un nom aux cadres et aux fenêtres cibles afin de les identifier. Pour attribuer un nom à un cadre, utilisez l'attribut NAME de l'élément FRAME ; pour attribuer un nom à une nouvelle fenêtre, utilisez le second paramètre de la méthode de script window.open(). Si vous omettez cet attribut, le document cible s'affiche à la place du document contenant le lien. Cet attribut s'applique uniquement lorsqu'une valeur est affectée à l'attribut HREF de l'élément.

Si cette fonctionnalité est implémentée dans les futurs navigateurs, il est probable que l'élément SPAN n'aura qu'un document de destination et une cible (comme l'élément A). Si vous voulez qu'un lien modifie le contenu de plusieurs cadres, vous pouvez utiliser le gestionnaire d'événement onClick d'un élément SPAN, ou la pseudo-URL javascript: pour exécuter un script chargeant plusieurs documents. Affectez l'adresse URL souhaitée à la propriété location.href de chaque cadre.

Exemple
<SPAN TARGET="display" HREF="chap3.html#sec2">...</SPAN>

Valeur
  identifiant sensible à la casse lorsque le nom du cadre ou de la fenêtre cible a été défini à l'aide de l'attribut NAME dans l'élément cible. Il existe quatre constantes, qui sont des mots réservés désignant des types de cibles :
_blank | Le navigateur crée une nouvelle fenêtre pour le document de destination.
_parent | Le document de destination remplace le jeu de cadres du document courant (s'il existe un jeu de cadres, sinon le document est traité comme avec _self).
_self | Le document de destination remplace le document actuel dans sa fenêtre ou son cadre.
_top | Le document de destination doit occuper toute la fenêtre du navigateur, en remplaçant l'éventuel jeu de cadres qui y serait chargé (s'il n'existe pas de jeu de cadres, le document est traité comme avec _self).

Par défaut
_self

TYPE  | NN s.o.    IE s.o.    HTML 4

TYPE=« type_MIME »  | Facultatif

Indication sur le type de contenu de document ou de la ressource de destination. Cette information peut aider un navigateur à préparer la prise en charge d'une ressource nécessitant un composant logiciel multimédia.

Exemple
<SPAN TYPE="video/mpeg" HREF="ski4.mpeg">...</SPAN>

Valeur
  Type MIME non sensible à la casse. Un catalogue des types MIME enregistrés figure à l'adresse (ftp://ftp.isi.edu/in-notes/iana/assignments/media-types).

Par défaut
Aucune.


<STRIKE> | NN 3 IE 3 HTML 3.2
<STRIKE>...</STRIKE> | Balise de fin : obligatoire

Le contenu de l'élément STRIKE est affiché avec l'attribut typographique « barré ». Cet élément est identique à l'élément S, qui n'a été adopté que parce qu'il ressemblait davantage aux autres noms d'éléments à un seul caractère destinés à la mise en forme du texte (tels que les éléments B, I et U). Quoi qu'il en soit, les éléments S et STRIKE sont tous deux dépréciés en HTML 4.0, en faveur de l'attribut de feuille de style text-decoration:line-through.

Exemple
<P>Si vous ne réussissez pas du premier coup, <STRIKE>recommencez</STRIKE> essayez autant de fois que nécessaire.</P>
Référence de modèle d'objet
IE [window.]document.all.IDélément


<STRONG> | NN tous IE tous HTML tous
<STRONG>...</STRONG> | Balise de fin : obligatoire

L'élément STRONG appartient à un large groupe d'éléments que les recommandations HTML 4.0 nomment éléments de phrase. Ces éléments affectent une signification structurelle à une partie désignée du document. Un élément STRONG contient du texte qui est davantage mis en valeur qu'avec l'élément EM. Alors que le contenu d'un élément EM est en général affiché en italique, celui d'un élément STRONG est en général affiché en gras. Vous pouvez toutefois modifier ce comportement à l'aide d'une feuille de style.

Exemple
<P>N'attendez pas. <STRONG>Commandez dès aujourd'hui</STRONG> pour bénéficier de la réduction maximale.
</P>
Référence de modèle d'objet
IE [window.]document.all.IDélément


<STYLE> | NN 4 IE 3 HTML 4
<STYLE>...</STYLE> | Balise de fin : obligatoire

L'élément STYLE est le conteneur des règles de feuilles de style. L'élément STYLE ne doit être inséré que dans l'élément HEAD. Vous pouvez insérer plusieurs éléments STYLE dans un élément HEAD (voir l'attribut MEDIA).

Les anciens navigateurs qui ne gèrent pas les feuilles de style peuvent tenter d'afficher le contenu de l'élément STYLE. C'est pourquoi il est conseillé d'insérer les règles de feuilles de style entre des balises de commentaires HTML. Voir pour tous détails sur la création de règles de feuilles de style.

Exemple
<STYLE TYPE="text/css">
<!--
H1 {font-size:18pt; text-transform:capitalize}
P  {font-size:12pt}
-->
</STYLE>
DISABLED | NN s.o. IE 4 HTML s.o.
DISABLED | Facultatif

Désactive l'ensemble de l'élément STYLE comme s'il n'existait pas au sein du document. Cet attribut ne fonctionne pas dans la version Macintosh d'Internet Explorer 4.

L'attribut DISABLED est de type booléen, ce qui signifie que sa simple présence dans le jeu d'attributs définit sa valeur comme true (vrai). Cette valeur peut également être modifiée par la suite à l'aide d'un script (voir l'objet "button" dans le ).

Exemple
<STYLE TYPE="text/css"  DISABLED>...</STYLE>
Valeur
La présence de cet attribut désactive l'élément.
Par défaut false
Référence de modèle d'objet
IE [window.]document.all.tags("STYLE")[i].disabled
MEDIA | NN s.o. IE 4 HTML 4
MEDIA=« liste_descriptive » | Facultatif

Définit le périphérique de sortie prévu pour le contenu de l'élément. L'attribut MEDIA sera particulièrement utile le jour où les navigateurs seront en mesure d'adapter le contenu en fonction de types de périphériques spécifiques (ordinateurs de poche, synthétiseurs vocaux, téléviseurs, etc.) Les spécifications HTML 4.0 définissent un certain nombre de constantes pour des périphériques déjà prévus, mais la liste est ouverte, et de futurs navigateurs pourront adapter le contenu à d'autres types de médias et de périphériques.

Exemple
<STYLE TYPE="text/css"  MEDIA="print">...</STYLE>
Valeur
Constante sensible à la casse. Plusieurs valeurs peuvent être regroupées (elles seront alors séparées par des virgules) au sein d'une liste incluse entre guillemets. Les valeurs définies en HTML 4.0 sont les suivantes : all | aura | braille | handheld | print | projection | screen | tty | tv . Les valeurs reconnues par Internet Explorer sont les suivantes : all | print |screen.
Par défaut screen
Référence de modèle d'objet
IE [window.]document.all.tags("STYLE")[i].media
TYPE | NN 4 IE 4 HTML 4
TYPE=« type_MIME » | Obligatoire

L'attribut TYPE indique au navigateur la syntaxe de feuille de style à utiliser pour interpréter les règles de style définies dans cet élément.

Exemple
<STYLE TYPE="text/css">...</STYLE>
Valeur
Type MIME non sensible à la casse. Le type is "text/css" est accepté à la fois par Navigator 4 et Internet Explorer 4. Navigator 4 reconnaît également le type "text/javascript" qui permet d'utiliser la syntaxe du JavaScript dans des feuilles de style.
Par défaut text/css
Référence de modèle d'objet
IE [window.]document.all.tags("STYLE")[i].type


<SUB> | NN 2 IE 3 HTML 3.2
<SUB>...</SUB> | Balise de fin : obligatoire

L'élément SUB est un élément typographique qui indique au navigateur que son contenu doit être affiché en indice, dans une taille de police correspondant à celle du contenu environnant. Les navigateurs affichent généralement le contenu de cet élément dans une taille plus petite que celle du contenu environnant.

Exemple
<P>L'eau lourde (H<SUB>3</SUB>O) compte un atome d'hydrogène de plus
que l'eau.</P>
Référence de modèle d'objet
IE [window.]document.all.IDélément


<SUP> | NN 2 IE 3 HTML 3.2
<SUP>...</SUP> | Balise de fin : obligatoire

L'élément SUP est un élément typographique qui indique au navigateur que son contenu doit être affiché en exposant, dans une taille de police correspondant à celle du contenu environnant. Les navigateurs affichent généralement le contenu de cet élément dans une taille plus petite que celle du contenu environnant.

Exemple
<P>Ce livre est édité par O'Reilly<SUP>&#153;<P>...</P>
Référence de modèle d'objet
IE [window.]document.all.IDélément


<TABLE> | NN tous IE tous HTML 3.2
<TABLE>...</TABLE> | Balise de fin : obligatoire

L'élément TABLE est le conteneur d'éléments complémentaires qui indiquent le contenu d'un tableau. Un tableau est un contenu présenté en lignes et en colonnes. Les autres éléments relatifs à l'élément TABLE sont les suivants : CAPTION, COL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD et TR. L'objectif de l'élément TABLE est de définir un certain nombre d'attributs visibles qui s'appliquent au tableau entier, indépendamment du nombre de lignes et de colonnes qu'il contient. La valeur d'un grand nombre d'attributs peut être localement remplacée par une valeur d'attribut affectée individuellement à une ligne, une colonne ou une cellule. Le nombre de lignes et de colonnes définit strictement la structure des éléments TR et TD du tableau.

Les tableaux sont utilisés depuis relativement longtemps, non seulement pour organiser du contenu en lignes et colonnes, mais aussi pour positionner du contenu. Les lignes et les colonnes d'un tableau peuvent ne pas avoir de bordures visibles et contenir simplement des espaces forcés. Avec l'arrivée du contenu positionnable, la pratique qui consiste à utiliser des tableaux pour contrôler l'emplacement du contenu est déconseillée.

Exemple
<TABLE COLS=3>
<THEAD>
<TR>
<TH>Heure<TH>Evénement<TH>Lieu
</TR>
</THEAD>
<TBODY>
<TR>
<TD>7:30 - 17:00<TD>Inscription<TD>Hall principal
</TR>
<TR>
<TD>9:00 - 24:00<TD>Conférences<TD>Salle bleue
</TR>
</TBODY>
</TABLE>
Référence de modèle d'objet
IE [window.]document.all.IDélément
ALIGN | NN tous IE tous HTML 3.2
ALIGN=« alignement » | Facultatif

Détermine l'alignement du tableau par rapport au conteneur père (habituellement, l'élément BODY). L'attribut ALIGN est déprécié en HTML 4.0, qui conseille d'utiliser les attributs de feuilles de style.

Exemple
<TABLE ALIGN="center"> </TABLE>
Valeur
Constante d'alignement insensible à la casse : center | left | right.
Par défaut left
Référence de modèle d'objet
IE [window.]document.all.IDélément.align
BACKGROUND | NN s.o. IE 3 HTML s.o.
BACKGROUND=« URL » | Facultatif

Indique un fichier image utilisé comme arrière-plan du tableau. Contrairement aux images normales, qui sont chargées par le navigateur en tant que contenu, les images d'arrière-plan sont chargées à leur taille originale (sans redimensionnement) et affichées côte à côte pour remplir l'espace disponible dans le tableau. Les images de petite taille sont chargées plus rapidement, mais elles sont évidemment répétées un plus grand nombre de fois pour former la mosaïque d'arrière-plan. Les images GIF animées peuvent être utilisées en arrière-plan, mais elles occasionnent facilement de la gêne pour le visiteur. Lors du choix d'une image d'arrière-plan, veillez à en prendre une qui soit neutre par rapport au contenu principal, afin que celui-ci ressorte lisiblement. Si elles doivent vraiment être utilisées, les images d'arrière-plan doivent rester extrêmement discrètes.

Exemple
<TABLE BACKGROUND="watermark.jpg">...</TABLE>
Valeur
Toute adresse URL valide (complète ou relative) d'un fichier image.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.all.IDélément.background
BGCOLOR | NN 3 IE 3 HTML 3.2
BGCOLOR=« Triplet_de_couleurs_en_hexa ou Nom_en_anglais » | Facultatif

Définit la couleur de remplissage à appliquer au tableau. Cette couleur apparaît derrière le texte et tout autre contenu. L'utilisation combinée de BGCOLOR et de BACKGROUND permet de laisser apparaître la couleur d'arrière-plan dans les éventuelles zones transparentes de l'image d'arrière-plan. Cet attribut est déprécié en HTML 4.0 en faveur de l'attribut de feuille de style background-color.

Exemple
<TABLE BGCOLOR="tan">...</TABLE>
Valeur
Triplet de couleurs en hexadécimal, ou l'un des noms de couleurs en anglais. Si la valeur de cet attribut n'est pas indiquée, elle sera interprétée comme "#000000" (noir). Reportez-vous à l'annexe A pour connaître les noms de couleurs admissibles.
Par défaut Varie selon les versions du navigateur et les systèmes d'exploitation.
Référence de modèle d'objet
IE [window.]document.all.IDélément.bgColor
BORDER | NN tous IE tous HTML 3.2
BORDER=« Taille_en_pixels » | Facultatif

Épaisseur (en pixels) de la bordure qui entoure l'élément TABLE. Si l'attribut BORDER possède une valeur quelconque, les navigateurs afficheront par défaut des bordures étroites autour de chaque cellule du tableau. L'épaisseur des bordures internes entre les cellules est définie par l'attribut CELLSPACING de l'élément TABLE.

Si vous insérez l'attribut BORDER sans lui affecter une valeur, le navigateur affichera des bordures avec leur taille par défaut autour du tableau entier et entre les cellules, sauf si vous définissez d'autres attributs.

Les navigateurs affichent les bordures en 3D : elles paraissent surélevées par rapport au contenu des cellules. De nombreux autres attributs affectent l'aspect des bordures : BORDERCOLOR, BORDERCOLORDARK, BORDERCOLORLIGHT, FRAME et RULES. Le type de bordure affiché pour les tableaux est différent des bordures définies à l'aide de règles de feuilles de style. Vous obtiendrez un meilleur contrôle de l'aspect des bordures en utilisant les attributs spécifiques de l'élément TABLE.

Exemple
<TABLE BORDER=1>...</TABLE>
Valeur
Un entier positif.
Par défaut 0
Référence de modèle d'objet
IE [window.]document.all.IDélément.border
BORDERCOLOR | NN 4 IE 3 HTML 4
BORDERCOLOR=« Triplet_de_couleurs_en_hexa, ou Nom_en_anglais » | Facultatif

Couleurs utilisées pour afficher une partie des pixels afin de donner l'illusion de bordures autour des cellules et de tout le tableau. Pour que cette couleur apparaisse, l'attribut BORDER doit avoir une valeur différente de zéro. L'effet tridimensionnel des bordures d'un tableau dans Navigator et Internet Explorer est créé par une disposition minutieuse de lignes claires et foncées sur l'arrière-plan ou la couleur par défaut de la page (voir ). Les couleurs standard sont en général des nuances de gris et de blanc, selon le navigateur.

L'application de couleurs aux bordures d'un tableau n'a pas le même effet dans Navigator et Internet Explorer. Dans Navigator, la couleur est appliquée à ce qui est normalement la plus sombre des deux teintes utilisées pour créer la bordure. De plus, Navigator ajuste automatiquement le niveau de luminosité de certaines lignes pour améliorer l'effet 3D de la bordure. De son côté, Internet Explorer applique la couleur à toutes les lignes qui composent la bordure. Il en résulte un aplatissement de l'effet 3D (pour colorer les bordures tout en préservant l'effet 3D, reportez-vous aux attributs BORDERCOLORDARK et BORDERCOLORLIGHT).

Exemple
<TABLE BORDERCOLOR="green" BORDER=2>...</TABLE>
Valeur
Triplet de couleurs en hexadécimal, ou l'un des noms de couleurs en anglais. Si la valeur de cet attribut n'est pas indiquée, elle sera interprétée comme "#000000" (noir). Reportez-vous à l'annexe A pour connaître les noms de couleurs admissibles.
Par défaut Varie en fonction du navigateur et du système d'exploitation.
Référence de modèle d'objet
IE [window.]document.all.IDélément.borderColor
BORDERCOLORDARK, BORDERCOLORLIGHT NN s.o. IE 3 HTML s.o.
BORDERCOLORDARK=« Triplet_de_couleurs_en_hexa ou Nom_en_anglais »
BORDERCOLORLIGHT=« Triplet_de_couleurs_en_hexa ou Nom_en_anglais » 		Facultatif

L'effet tridimensionnel des bordures d'un tableau dans Internet Explorer est créé par une disposition minutieuse de lignes claires et foncées sur l'arrière-plan ou la couleur par défaut de la page (voir figure 8-4). Vous pouvez contrôler indépendamment les couleurs utilisées pour les lignes claires et sombres en affectant des valeurs aux attributs BORDERCOLORDARK et BORDERCOLORLIGHT. Pour que les couleurs apparaissent, l'attribut BORDER doit avoir une valeur différente de zéro.

En général, il est conseillé d'affecter à la paire d'attributs des couleurs complémentaires. Toutefois rien ne vous oblige à définir une couleur foncée pour BORDERCOLORDARK. Comme les attributs ne contrôlent qu'un jeu de lignes bien défini, vous pouvez aisément déterminer les lignes de bordure qui changeront avec chaque attribut.

Exemple
<TABLE BORDERCOLORDARK="darkred" BORDERCOLORLIGHT="salmon" BORDER=3>...
</TABLE>
Valeur
Triplet de couleurs en hexadécimal, ou l'un des noms de couleurs en anglais. Si la valeur de cet attribut n'est pas indiquée, elle sera interprétée comme "#000000" (noir). Reportez-vous à l'annexe A pour connaître les noms de couleurs admissibles.
Par défaut Varie selon le système d'exploitation.
Référence de modèle d'objet
IE [window.]document.all.IDélément.borderColorDark
[window.]document.all.IDélément.borderColorLight
CELLPADDING | NN tous IE 3 HTML 3.2
CELLPADDING=« largeur » | Facultatif

Quantité d'espace blanc entre la bordure d'une cellule du tableau et le contenu de cette cellule. Notez que cet attribut s'applique à l'espace interne d'une cellule. Si cet attribut n'est pas défini, la plupart des navigateurs affichent le contenu de la cellule de telle sorte que les pixels les plus à gauche viennent toucher la bordure gauche de la cellule. Si le tableau comporte des bordures, l'ajout de quelques pixels pour aérer l'espace entre la bordure et le contenu rendra ce contenu plus lisible. Un large espace peut également être souhaitable pour des raisons de mise en page. L'utilisation de cet attribut est plus discrète lorsque le tableau ne comporte pas de bordures (auquel cas l'attribut CELLSPACING peut vous aider à ajuster l'espace entre les cellules).

Exemple
<TABLE BORDER=2 CELLPADDING=3>...</TABLE>
Valeur
Toute valeur en pixels ou en pourcentage de l'espace disponible.
Par défaut 0
Référence de modèle d'objet
IE [window.]document.all.IDélément.cellPadding
CELLSPACING | NN tous IE 3 HTML 3.2
CELLSPACING=« largeur » | Facultatif

Quantité d'espace vide entre les bords extérieurs de chaque cellule du tableau. Si l'attribut BORDER de l'élément TABLE reçoit comme valeur un entier positif, l'attribut CELLSPACING aura pour effet de définir l'épaisseur des bordures affichées entre les cellules. Même lorsqu'un tableau ne possède pas de bordures visibles, sa lisibilité sera fréquemment améliorée par un espacement des cellules.

Exemple
<TABLE BORDER=2 CELLSPACING=10>...</TABLE>
Valeur
Tout entier positif.
Par défaut 0 (sans bordure de tableau); 2 (avec bordure de tableau).
Référence de modèle d'objet
IE [window.]document.all.IDélément.cellSpacing
COLS | NN 4 IE 3 HTML s.o.
COLS=« Nombre_de_colonnes » | Facultatif

Nombre de colonnes du tableau. Les spécifications HTML n'ont jamais adopté cet attribut. En HTML 4.0, la fonctionnalité de cet attribut est assurée par les éléments COLGROUP et COL. Dans l'intervalle, l'attribut COLS est reconnu par les navigateurs actuels. Cet attribut aide le navigateur à préparer l'affichage du tableau. En l'absence de cet attribut, le navigateur doit effectuer une interprétation de tous les éléments TR et TD chargés pour déterminer la façon dont le tableau doit être divisé.

Exemple
<TABLE COLS=4>...</TABLE>
Valeur
Tout entier positif.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.all.IDélément.cols
DATAPAGESIZE | NN s.o. IE 4 HTML s.o.
DATAPAGESIZE=« Nombre_d'enregistrements » | Facultatif

Cet attribut est utilisé avec IE 4 dans le cadre d'une liaison de données, afin d' indiquer au navigateur le nombre de lignes de tableau qui doivent être affichées pour recevoir le nombre d'enregistrements de source de données défini par cet attribut. Une application courante consiste à paramétrer une cellule de tableau pour afficher un élément INPUT de type texte dont l'attribut DATAFLD est lié à une colonne particulière de la source de données (l'attribut DATASRC est défini dans l'élément TABLE). Si l'attribut DATAPAGESIZE reçoit la valeur 5, le navigateur doit afficher cinq lignes du tableau (mais ces lignes ne seront spécifiées qu'une fois dans le code HTML).

Exemple
<TABLE DATASRC="#DBSRC3" DATAPAGESIZE=5">
<TR>
  <TD><INPUT TYPE="text" DATAFLD="stockNum">
  <TD><INPUT TYPE="text" DATAFLD="qtyOnHand">
</TR>
</TABLE>
Valeur
Tout entier positif.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.all.IDélément.dataPageSize
DATASRC | NN s.o. IE 4 HTML s.o.
DATASRC=« Nom_source_de_données » | Facultatif

Utilisé avec la liaison de données d'Internet Explorer 4 pour déterminer la source de données ODBC distante (une base de données Oracle ou SQL par exemple) à associer à l'élément. Le contenu de la source de données est déterminé par l'attribut DATAFLD dans les éléments TD individuels. Un bloc d'enregistrements contigus peut être affiché dans le tableau si l'attribut DATAPAGESIZE du tableau est également défini.

Exemple
<TABLE DATASRC="#DBSRC3" DATAPAGESIZE=5">...</TABLE>
Valeur
Identifiant sensible à la casse.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.all.IDélément.dataSrc
DIR | NN s.o. IE s.o. HTML 4
DIR=« direction » | Facultatif

Direction d'affichage des caractères et des cellules de l'élément. L'affichage des caractères et des cellules va de gauche à droite ou de droite à gauche. Cet attribut est en général utilisé de concert avec l'attribut LANG et doit être utilisé pour indiquer une direction d'affichage des caractères différente de la direction actuelle.

Exemple
<TABLE LANG="ar" dir="rtl">Eléments_de_tableau_en_arabe</TABLE>
Valeur
ltr | rtl (insensible à la casse)
Par défaut ltr
FRAME | NN s.o. IE 3 HTML 4
FRAME=« Constante_d'encadrement » | Facultatif

Indique les côtés de la bordure externe d'un tableau (définie avec l'attribut BORDER) qui sont affichés. Cet attribut est sans effet sur les bordures internes entre les cellules. L'utilisation de l'attribut BORDER sans lui donner une valeur donne le même résultat que l'utilisation de l'attribut FRAME avec la valeur " border ".

Exemple
<TABLE BORDER=3 FRAME="void">...</TABLE>
Valeur
Une des constantes suivantes, non sensibles à la casse :
above | Affiche uniquement la bordure sur le côté supérieur du tableau
below | Affiche uniquement la bordure sur le côté inférieur du tableau
border | Affiche les quatre côtés de la bordure (valeur par défaut dans IE)
box | Affiche les quatre côtés de la bordure (comme " border ")
hsides | Affiche uniquement les bordures sur les côtés supérieur et inférieur du tableau (aspect très propre)
lhs | Affiche uniquement la bordure sur le côté gauche du tableau
rhs | Affiche uniquement la bordure sur le côté droit du tableau
void | Masque toutes les bordures (valeur par défaut en HTML 4.0)
vsides | Affiche uniquement la bordure sur les côtés gauche et droit du tableau
Par défaut Navigator : void (si BORDER=0); border (si BORDER possède une autre valeur). Internet Explorer: border.
Référence de modèle d'objet
IE [window.]document.all.IDélément.frame
HEIGHT, WIDTH NN tous IE 3 HTML 3.2
HEIGHT=« hauteur »
WIDTH=« largeur » 		Facultatif

Les dimensions rectangulaires d'un tableau, qui peuvent être différentes de la taille par défaut calculée par le navigateur. Lorsque les valeurs de ces attributs sont inférieures à l'espace minimal nécessaire pour afficher le contenu des cellules du tableau, le navigateur n'en tient pas compte et affiche tout le contenu, quitte à ce que du texte soit renvoyé à la ligne suivante. Vous pouvez également étirer les dimensions d'un tableau au-delà des dimensions calculées par le navigateur. Un espace blanc supplémentaire apparaît dans les cellules du tableau pour compenser cette différence. Si vous n'utilisez qu'un de ces attributs, le navigateur effectuera les calculs nécessaires pour ajuster automatiquement l'autre dimension.

Notez que l'attribut HEIGHT ne fait pas partie des spécifications HTML. Cela suppose que la hauteur du tableau est calculée par le navigateur pour afficher au mieux tout le contenu des cellules, en fonction de la largeur par défaut ou de la largeur indiquée par l'attribut WIDTH. Comme des combinaisons différentes de navigateurs et de systèmes d'exploitation peuvent afficher le texte avec des tailles de polices relatives diverses, il n'est pas inhabituel de laisser au navigateur le soin de calculer la hauteur du tableau.

Exemple
<TABLE WIDTH="80%">...</TABLE>
Valeur
Toute valeur en pixels ou en pourcentage de l'espace disponible.
Par défaut Navigator : une largeur de 100% du conteneur père ; une hauteur en fonction du contenu. Internet Explorer 4 : calcule la hauteur et la largeur en fonction du contenu.
Référence de modèle d'objet
IE [window.]document.all.IDélément.height
[window.]document.all.IDélément.width
RULES | NN s.o. IE 3 HTML 4
RULES=« Constante_de_barres_de_séparation » | Facultatif

Définit si (et, dans ce cas, où) les bordures intérieures entre les cellules sont affichées par le navigateur. Vous pouvez non seulement paramétrer le tableau pour que des bordures soient affichées de telle sorte que chaque cellule soit indépendamment encadrée, mais aussi paramétrer les bordures pour qu'elles ne soient affichées que pour des lignes, des colonnes ou un groupe de cellules définis (THEAD, TBODY, TFOOT, COLGROUP ou COL). L'attribut BORDER doit être présent - soit de façon booléenne par sa seule présence, soit avec une taille de bordure spécifique - pour que les bordures des cellules apparaissent.

Exemple
<TABLE BORDER RULES="groups">...</TABLE>
Valeur
Une des constantes suivantes, non sensibles à la casse :
all | Affiche des bordures autour de chaque cellule
cols | Affiche des bordures uniquement entre les colonnes
groups | Affiche des bordures entre des groupes de cellules, suivant les valeurs des éléments THEAD, TFOOT, TBODY, COLGROUP ou COL.
none | Masque toutes les bordures intérieures
rows | Affiche des bordures uniquement entre les lignes
Par défaut none (si BORDER=0); all (si BORDER possède une autre valeur).all
Référence de modèle d'objet
IE [window.]document.all.IDélément.rules
SUMMARY | NN s.o. IE s.o. HTML 4
SUMMARY=« texte » | Facultatif

Description textuelle du tableau, y compris, mais sans y être limitée, des instructions permettant à des navigateurs non visuels de décrire le but et l'organisation des données du tableau.

Exemple
<TABLE SUMMARY="Bon de commande pouvant accepter jusqu'à cinq produits.">...</TABLE>
Valeur
Chaîne de caractères quelconque entre guillemets.
Par défaut Aucune.


<TBODY> | NN s.o. IE 3 HTML 4
<TBODY>...</TBODY> | Balise de fin : facultative

L'élément TBODY est un conteneur arbitraire pour une ou plusieurs lignes de cellules d'un tableau. Plusieurs éléments TBODY peuvent être définis au sein d'un même élément TABLE. Utilisez l'élément TBODY pour définir dans un tableau des segments structurels pouvant nécessiter leur propre style ou leur propre traitement des bordures (voir l'attribut RULES). L'élément TBODY est l'équivalent pour les lignes de l'élément COLGROUP pour les colonnes. Les autres types de regroupement de lignes disponibles sont les éléments TFOOT et THEAD, qui ne peuvent pas se chevaucher avec un élément TBODY.

Exemple
<TABLE COLS=3>
<THEAD>
<TR>
<TH>Heure<TH>Evénement<TH>Lieu
</TR>
</THEAD>
<TBODY>
<TR>
<TD>7:30 - 17:00<TD>Inscription<TD>Hall principal
</TR>
<TR>
<TD>9:00 - 24:00<TD>Conférences<TD>Salle bleue
</TR>
</TBODY>
</TABLE>
Référence de modèle d'objet
IE [window.]document.all.IDélément
ALIGN | NN s.o. IE 4 HTML 4
ALIGN=« Constante_d'alignement » | Facultatif

Définit les caractéristiques de l'alignement horizontal du contenu de toutes les lignes incluses dans l'élément TBODY. Les spécifications HTML 4.0 définissent pour l'attribut ALIGN des paramètres dont l'équivalent n'existe pas encore dans les spécifications CSS. Cet attribut ALIGN n'est donc pas encore totalement déprécié comme c'est le cas de nombreux autres éléments. En règle générale, il est conseillé d'utiliser si possible des feuilles de style pour contrôler l'alignement.

Exemple
<TBODY ALIGN="center">
Valeur
HTML 4.0 et IE 4 possèdent deux jeux de valeurs d'attributs :
Valeur IE 4 HTML 4.0
center
         * *
char
         - *
justify
         - *
left
         * *
right
         * *
Les noms des valeurs center (centré), left (gauche) et right (droite) sont explicites. La valeur justify est destinée à justifier le texte, en l'alignant sur les bords gauche et droit à la fois. Avec la valeur char, l'attribut CHAR doit être également défini pour indiquer le caractère utilisé pour l'alignement du contenu. Dans l'exemple des spécifications HTML 4.0, tout contenu dans lequel ce caractère n'apparaît pas sera aligné à droite par rapport à l'emplacement de ce caractère dans les autres lignes de la même colonne. Il est important de noter que l'attribut ALIGN s'applique à toutes les cellules de toutes les lignes incluses dans l'élément TBODY, y compris celles d'un élément TH que vous auriez inséré dans le tableau. Si vous désirez obtenir un alignement différent pour la ligne d'en-tête, compensez le paramétrage général en insérant un attribut ALIGN séparé ou en affectant l' attribut de feuille de style text-align à l'élément THEAD ou, individuellement, aux éléments TH.
Par défaut left
Référence de modèle d'objet
IE [window.]document.all.IDélément.align
BGCOLOR | NN s.o. IE 4 HTML s.o.
BGCOLOR=« Triplet_de_couleurs_en_hexa ou Nom_en_anglais » | Facultatif

Définit une couleur de remplissage (derrière le texte et autre contenu) pour les cellules contenues par l'élément TBODY.

Exemple
<TBODY BGCOLOR="tan">
Valeur
Triplet de couleurs en hexadécimal, ou l'un des noms de couleurs en anglais. Si la valeur de cet attribut n'est pas indiquée, elle sera interprétée comme "#000000" (noir). Reportez-vous à l'annexe A pour connaître les noms de couleurs admissibles.
Par défaut Varie selon les versions du navigateur et les systèmes d'exploitation.
Référence de modèle d'objet
IE [window.]document.all.IDélément.bgColor
CHAR | NN s.o. IE s.o. HTML 4
CHAR=« caractère » | Facultatif

Le caractère utilisé comme point d'alignement pour le texte des cellules. Cet attribut n'est utile que si l'attribut ALIGN reçoit la valeur "char".

Exemple
<TBODY ALIGN="char" CHAR=".">
Valeur
Tout caractère alphabétique unique.
Par défaut Aucune.
CHAROFF | NN s.o. IE s.o. HTML 4
CHAROFF=« longueur » | Facultatif

Définit un point de décalage spécifique auquel le caractère spécifié par l'attribut CHAR doit apparaître dans chaque cellule. Cet attribut est destiné à résoudre les cas où le positionnement par défaut du navigateur ne correspondrait pas aux objectifs de mise en page du tableau.

Exemple
<TBODY ALIGN="char" CHAR="." CHAROFF="80%">
Valeur
Toute valeur en pixels ou en pourcentage de l'espace disponible dans les cellules.
Par défaut Aucune.
VALIGN | NN s.o. IE 4 HTML 4
VALIGN=« Constante_d'alignement » | Facultatif

Définit les caractéristiques de l'alignement vertical du contenu des cellules de toutes les colonnes incluses dans l'élément TBODY. Vous pouvez modifier manuellement l'alignement vertical d'une cellule particulière d'une colonne.

Exemple
<TBODY VALIGN="bottom">
Valeur
IE 4 et HTML 4.0 reconnaissent quatre constantes possibles : top | middle | bottom | baseline. Avec top et bottom, le contenu est aligné sur le haut et le bas de la cellule (ou en est très proche). Avec middle (la valeur par défaut), le contenu est parfaitement centré verticalement dans les cellules. Dans les cas où le contenu d'une cellule pourrait s'étendre sur plusieurs lignes dans les largeurs de fenêtre courantes (dans l'hypothèse d'un tableau de largeur variable), il est conseillé de donner à l'attribut VALIGN la valeur baseline. Ainsi, la ligne de base des caractères de la première (ou de la seule) ligne de texte de la cellule sera alignée sur celle du contenu des autres cellules de la même ligne, ce qui est en général le meilleur compromis sur le plan esthétique.
Par défaut middle
Référence de modèle d'objet
IE [window.]document.all.IDélément.vAlign


<TD> | NN tous IE tous HTML 3.2
<TD>...</TD> | Balise de fin : facultative

L'élément TD est le conteneur de tous le contenu affiché dans une cellule d'un élément TABLE. Une cellule est constituée de l'intersection d'une ligne et d'une colonne. Les autres éléments relatifs à l'élément TD sont les suivants : CAPTION, COL, COLGROUP, TABLE, TBODY, TFOOT, TH, THEAD et TR. L'élément TD ne sert pas uniquement à délimiter le contenu d'une cellule : il définit un certain nombre d'attributs visibles qui s'appliquent à une cellule, souvent pour compenser l'effet d'attributs identiques définis à un niveau plus élevé dans le tableau.

Quatre attributs - ABBR, AXIS, HEADERS et SCOPE - ont été ajoutés dans les spécifications HTML 4.0 en prévision des futurs navigateurs non visuels, qui offriront des fonctionnalités de synthèse vocale pour décrire le contenu d'une page HTML - en un « affichage oral », en quelque sorte Ces attributs ne sont décrits brièvement ici que pour des raisons d'exhaustivité : leurs applications dans des navigateurs non visuels débordent le cadre de ce texte sur le DHTML. Consultez les recommandations HTML 4.0 pour plus de détails.

Exemple
<TABLE COLS=3>
<THEAD>
<TR>
<TH>Heure<TH>Evénement<TH>Lieu
</TR>
</THEAD>
<TBODY>
<TR>
<TD>7:30 - 17:00<TD>Inscription<TD>Hall principal
</TR>
<TR>
<TD>9:00 - 24:00<TD>Conférences<TD>Salle bleue
</TR>
</TBODY>
</TABLE>
Référence de modèle d'objet
IE [window.]document.all.IDélément
ABBR | NN s.o. IE s.o. HTML 4
ABBR=« texte » | Facultatif

Chaîne abrégée décrivant le contenu de la cellule. Il s'agit en général d'une brève légende qu'un navigateur non visuel pourrait énoncer à haute voix pour décrire ce que représente le contenu de la cellule.

Exemple
<TD ABBR="Evénement"> Conférences
Valeur
Toute chaîne de texte entre guillemets.
Par défaut Aucune.
ALIGN | NN tous IE tous HTML 3.2
ALIGN=« Constante_d'alignement » | Facultatif

Définit les caractéristiques de l'alignement horizontal du contenu de la cellule définie par l'élément TD. Les spécifications HTML 4.0 définissent pour l'attribut ALIGN des paramètres dont l'équivalent n'existe pas encore dans les spécifications CSS. Cet attribut ALIGN n'est donc pas encore totalement déprécié comme c'est le cas de nombreux autres éléments. En règle générale, il est conseillé d'utiliser si possible des feuilles de style pour contrôler l'alignement.

Exemple
<TD ALIGN="center">
Valeur
Navigator 4 et Internet Explorer 4 partagent les mêmes valeurs pour cet attribut, alors que HTML 4.0 en prévoit quelques-unes de plus :
Valeur NN 4 IE 4 HTML 4.0
center
         * * *
char
         - - *
justify
         - - *
left
         * * *
right
         * * *
Les noms des valeurs center (centré), left (gauche) et right (droite) sont explicites. La valeur justify est destinée à justifier le texte, en l'alignant sur les bordsq gauche et droit à la fois. Avec la valeur char, l'attribut CHAR doit être également défini pour indiquer le caractère utilisé pour l'alignement du contenu. Dans l'exemple des spécifications HTML 4.0, tout contenu dans lequel ce caractère n'apparaît pas sera aligné à droite par rapport à l'emplacement de ce caractère dans les autres lignes de la même colonne.
Par défaut left
Référence de modèle d'objet
IE [window.]document.all.IDélément.align
AXIS | NN s.o. IE s.o. HTML 4
AXIS=« texte » | Facultatif

Chaîne abrégée décrivant la catégorie de la cellule. Il s'agit en général d'une brève légende qu'un navigateur non visuel pourrait énoncer à haute voix pour décrire ce que représente le contenu de la cellule.

Exemple
<TD AXIS="Evénement"> Conférences
Valeur
Toute chaîne de texte entre guillemets.
Par défaut Aucune.
BACKGROUND | NN s.o. IE 3 HTML s.o.
BACKGROUND=« URL » | Facultatif

Indique un fichier image utilisé comme arrière-plan de la cellule. À la différence des images normales, qui sont chargées par le navigateur en tant que contenu, les images d'arrière-plan sont chargées à leur taille originale (sans redimensionnement) et affichées côte à côte pour remplir l'espace disponible dans la cellule. Les images de petite taille sont chargées plus rapidement, mais elles sont évidemment répétées un plus grand nombre de fois pour former la mosaïque d'arrière-plan. Les images GIF animées peuvent être utilisées en arrière-plan, mais elles occasionnent facilement de la gêne pour le visiteur. Lors du choix d'une image d'arrière-plan, veillez à en prendre une qui soit neutre par rapport au contenu principal, afin que celui-ci ressorte lisiblement. Si elles doivent vraiment être utilisées, les images d'arrière-plan doivent rester extrêmement discrètes.

Exemple
<TD BACKGROUND="watermark.jpg">
Valeur
Toute adresse URL valide (complète ou relative) d'un fichier image.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.all.IDélément.background
BGCOLOR | NN 3 IE 3 HTML 3.2
BGCOLOR=« Triplet_de_couleurs_en_hexa ou Nom_en_anglais » | Facultatif

Définit une couleur de remplissage (derrière le texte et autre contenu) pour la cellule définie par l'élément TD.

Exemple
<TD BGCOLOR="yellow">
Valeur
Triplet de couleurs en hexadécimal, ou l'un des noms de couleurs en anglais. Si la valeur de cet attribut n'est pas indiquée, elle sera interprétée comme "#000000" (noir). Reportez-vous à l'annexe A pour connaître les noms de couleurs admissibles.
Par défaut Varie selon les versions du navigateur et les systèmes d'exploitation.
Référence de modèle d'objet
IE [window.]document.all.IDélément.bgColor
BORDERCOLOR | NN s.o. IE 3 HTML s.o.
BORDERCOLOR=« Triplet_de_couleurs_en_hexa ou Nom_en_anglais » | Facultatif

Couleurs utilisées pour afficher une partie des pixels afin de donner l'illusion de bordures autour des cellules et de tout le tableau. Internet Explorer applique la couleur aux quatre lignes de la bordure d'une cellule. Par conséquent, les couleurs de cellules adjacentes ne se touchent pas.

Exemple
<TD BORDERCOLOR="green">
Valeur
Triplet de couleurs en hexadécimal, ou l'un des noms de couleurs en anglais. Si la valeur de cet attribut n'est pas indiquée, elle sera interprétée comme "#000000" (noir). Reportez-vous à l'annexe A pour connaître les noms de couleurs admissibles.
Par défaut Varie en fonction du navigateur et du système d'exploitation.
Référence de modèle d'objet
IE [window.]document.all.IDélément.borderColor
BORDERCOLORDARK, BORDERCOLORLIGHT NN s.o. IE 3 HTML s.o.
BORDERCOLORDARK=« Triplet_de_couleurs_en_hexa ou Nom_en_anglais »
BORDERCOLORLIGHT=« Triplet_de_couleurs_en_hexa ou Nom_en_anglais » 		Facultatif

L'effet tridimensionnel des bordures d'un tableau dans Internet Explorer est créé par une disposition minutieuse de lignes claires et foncées sur l'arrière-plan ou la couleur par défaut de la page (voir figure 8-4 dans la présentation de l'élément TABLE). Vous pouvez contrôler indépendamment les couleurs utilisées pour les lignes claires et foncées en affectant des valeurs aux attributs BORDERCOLORDARK (bords gauche et supérieur de la cellule) et BORDERCOLORLIGHT (bords droit et inférieur).

En général, il est conseillé de donner à la paire d'attributs des couleurs complémentaires. Toutefois rien ne vous oblige à définir une couleur foncée pour BORDERCOLORDARK. Comme les attributs ne contrôlent qu'un jeu de lignes bien défini, vous pouvez aisément déterminer quelles lignes de bordure changeront avec chaque attribut.

Exemple
<TD BORDERCOLORDARK="darkred" BORDERCOLORLIGHT="salmon">
Valeur
Triplet de couleurs en hexadécimal, ou l'un des noms de couleurs en anglais. Si la valeur de cet attribut n'est pas indiquée, elle sera interprétée comme "#000000" (noir). Reportez-vous à l'annexe A pour connaître les noms de couleurs admissibles.
Par défaut Varie selon le système d'exploitation.
Référence de modèle d'objet
IE [window.]document.all.IDélément.borderColorDark
[window.]document.all.IDélément.borderColorLight
CHAR | NN s.o. IE s.o. HTML 4
CHAR=« caractère » | Facultatif

Le caractère utilisé comme point d'alignement pour le texte des cellules. Cet attribut n'est utile que si l'attribut ALIGN reçoit la valeur "char".

Exemple
<TD ALIGN="char" CHAR=".">
Valeur
Tout caractère alphabétique unique.
Par défaut Aucune.
CHAROFF | NN s.o. IE s.o. HTML 4
CHAROFF=« longueur » | Facultatif

Définit un point de décalage spécifique auquel le caractère spécifié par l'attribut CHAR doit apparaître dans chaque cellule. Cet attribut est destiné à résoudre les cas où le positionnement par défaut du navigateur ne correspondrait pas aux objectifs de mise en page du tableau.

Exemple
<TD ALIGN="char" CHAR="." CHAROFF="80%">
Valeur
Toute valeur en pixels ou en pourcentage de l'espace disponible dans les cellules.
Par défaut Aucune.
COLSPAN | NN tous IE tous HTML 3.2
COLSPAN=« Nombre_de_colonnes » | Facultatif

Nombre de colonnes du tableau sur lequel la cellule doit s'étendre. Pour chaque colonne supplémentaire incluse dans le compte COLSPAN, il faut un élément TD de moins dans la ligne de tableau. Si vous donnez à l'attribut ALIGN la valeur center ou right, l'alignement est calculé par rapport à la largeur totale de l'élément TD sur le nombre de colonnes indiqué. La ligne suivante du tableau retrouve le nombre de colonnes original à moins que vous ayez précisé un attribut ROWSPAN.

Exemple
<TD COLSPAN=2 ALIGN="center">
Valeur
Tout entier positif, généralement égal ou supérieur à deux.
Par défaut 1
Référence de modèle d'objet
IE [window.]document.all.IDélément.colSpan
DATAFLD | NN s.o. IE 4 HTML s.o.
DATAFLD=« nom_colonne » | Facultatif

Utilisé avec la fonction de liaison de données d'IE 4 pour associer le nom d'une colonne d'une source de données distante au contenu d'une cellule de tableau. Les attributs DATASRC et, éventuellement, DATAPAGESIZE de l'élément père TABLE doivent être également définis.

Exemple
<TABLE DATASRC="#DBSRC3" DATAPAGESIZE=5">
<TR>
  <TD><INPUT TYPE="text" DATAFLD="stockNum">
  <TD><INPUT TYPE="text" DATAFLD="qtyOnHand">
</TR>
</TABLE>
Valeur
Identifiant sensible à la casse.
Par défaut Aucune.
HEADERS | NN s.o. IE s.o. HTML 4
HEADERS=« Liste_des_ID_des_cellules » | Facultatif

Pointe sur un ou plusieurs éléments TH ou TD faisant office d'en-têtes de colonne ou de ligne pour la cellule de tableau actuelle. La valeur affectée à cet attribut est une liste des valeurs des attributs ID affectés aux éléments TH correspondants ; dans la liste, ces identifiants sont séparés par des espaces. On peut imaginer qu'un navigateur non visuel énonce le contenu de l'en-tête avant le contenu de la cellule, afin d'aider les visiteurs à identifier la nature de ce dernier.

Exemple
<TR>
<TH ID="hdr1">Numéro de produit
<TH ID="hdr2">Description
</TR>
<TR>
<TD HEADERS="hdr1">0392
<TD HEADERS="hdr2">Bague
</TR>
Valeur
Liste des identifiants (sensibles à la casse et séparés par des espaces) des cellules faisant fonction d'en-tête pour la cellule actuelle.
Par défaut Aucune.
HEIGHT, WIDTH NN tous IE tous HTML 3.2
HEIGHT=« hauteur »
WIDTH=« largeur » 		Facultatif

Les dimensions rectangulaires d'une cellule, qui peuvent être différentes de la taille par défaut calculée par le navigateur. Lorsque les valeurs de ces attributs sont inférieures à l'espace minimal nécessaire pour afficher le contenu des cellules du tableau, le navigateur n'en tient pas compte et affiche tout le contenu, quitte à ce que du texte soit renvoyé à la ligne suivante. Vous pouvez également étirer les dimensions d'un tableau au-delà des dimensions calculées par le navigateur. Un espace blanc supplémentaire apparaît dans les cellules du tableau pour compenser cette différence. Si vous n'utilisez qu'un seul de ces attributs, le navigateur effectuera les calculs nécessaires pour ajuster automatiquement l'autre dimension. La cellule doit contenir quelque chose, sinon elle peut rétrécir à une taille minimale.

En raison de la nature régulière, par définition, des tableaux, si vous définissez une hauteur précise pour une cellule, toutes les cellules de la même ligne auront la même hauteur ; de même, en cas d'affectation d'une largeur précise à une cellule, toutes les cellules de la même colonne auront la même largeur.

Les attributs HEIGHT et WIDTH sont dépréciés en HTML 4.0, en faveur des attributs de feuilles de style height et width (qui ne sont pas disponibles pour les cellules de tableaux dans Navigator 4).

Exemple
<TD WIDTH="80%" HEIGHT=30>
Valeur
Toute valeur en pixels ou en pourcentage de l'espace disponible.
Par défaut Adaptée à la taille du contenu.
Référence de modèle d'objet
IE [window.]document.all.IDélément.height
[window.]document.all.IDélément.width
NOWRAP | NN tous IE tous HTML 3.2
NOWRAP | Facultatif

La présence de l'attribut NOWRAP indique au navigateur qu'il doit élargir la cellule pour permettre l'affichage d'une ligne de texte insécable sur une seule ligne. Il est conseillé de ne pas abuser de cet attribut, car il oblige l'utilisateur à faire défiler horizontalement la page pour en afficher tout le contenu. L'élément NOWRAP est déprécié en HTML 4.0.

Exemple
<TD NOWRAP>
Valeur
La présence de cet attribut définit sa valeur comme true (vrai).
Par défaut false
Référence de modèle d'objet
IE [window.]document.all.IDélément.noWrap
ROWSPAN | NN tous IE tous HTML 3.2
ROWSPAN=« Nombre_de_lignes » | Facultatif

Nombre de lignes sur lequel la cellule active doit s'étendre vers le bas. Pour chaque ligne supplémentaire incluse dans le compte ROWSPAN, il faut un élément TD de moins dans la ligne de tableau suivante, à la position qui correspond à celle de cette cellule dans la colonne.

Exemple
<TD ROWSPAN=2>
Valeur
Tout entier positif, généralement égal ou supérieur à deux.
Par défaut 1
Référence de modèle d'objet
IE [window.]document.all.IDélément.rowSpan
SCOPE | NN s.o. IE s.o. HTML 4
SCOPE=« Constante_de_plage » | Facultatif

L'attribut SCOPE est davantage utilisé avec l'élément TH qu'avec l'élément TD il définit la plage de cellules (par rapport à la cellule actuelle) qui se comportent comme si cette dernière était leur en-tête. Dans le cas de tableaux dont la structure est régulière, l'attribut SCOPE permet d'obtenir le même résultat qu'en utilisant l'attribut HEADERS, mais de façon plus simple, sans devoir définir des attributs ID pour les cellules de l'en-tête.

Exemple
<TR>
<TH SCOPE="col">Numéro de produit
<TH SCOPE="col">Description
</TR>
<TR>
<TD>0392
<TD>Bague
</TR>
Valeur
L'une des quatre constantes de plage reconnues :
col | Le texte de la cellule actuelle devient le texte d'en-tête de toutes les autres cellules de la colonne.
colgroup | Le texte de la cellule actuelle devient le texte d'en-tête de toutes les autres cellules de l'élément COLGROUP.
row | Le texte de la cellule actuelle devient le texte d'en-tête de toutes les autres cellules de l'élément TR.
rowgroup | Le texte de la cellule actuelle devient le texte d'en-tête de toutes les autres cellules de l'élément TBODY.
Par défaut Aucune.
VALIGN | NN tous IE tous HTML 3.2
VALIGN=« constante_d'alignement » | Facultatif

Détermine l'alignement vertical du texte à l'intérieur de l'élément TD. Si vous définissez une valeur pour une cellule individuelle, cette valeur annulera la valeur du même attribut des conteneurs externes, tels que TR et TBODY.

Exemple
<TD VALIGN="bottom">
Valeur
Internet Explorer 4 et HTML 4.0 reconnaissent quatre valeurs constantes : top | middle | bottom | baseline. Avec top et bottom, le contenu est aligné sur le haut et le bas de la cellule (ou en est très proche). Avec middle (la valeur par défaut), le contenu est parfaitement centré verticalement dans les cellules. Dans les cas où le contenu d'une cellule pourrait s'étendre sur plusieurs lignes dans les largeurs de fenêtre courantes (dans l'hypothèse d'un tableau de largeur variable), il est conseillé de donner à l'attribut VALIGN la valeur baseline. Ainsi, la ligne de base des caractères de la première (ou de la seule) ligne de texte de la cellule sera alignée sur celle du contenu des autres cellules de la même ligne, ce qui est en général le meilleur compromis sur le plan esthétique.
Par défaut middle
Référence de modèle d'objet
IE [window.]document.all.IDélément.vAlign


<TEXTAREA> | NN tous IE tous HTML tous
<TEXTAREA>...</TEXTAREA> | Balise de fin : obligatoire

L'élément TEXTAREA est un contrôle de saisie de texte sur plusieurs lignes ; il est principalement destiné à être utilisé dans un élément FORM (obligatoire dans Navigator). Contrairement à l'élément INPUT de type texte, l'élément TEXTAREA peut être dimensionné pour accepter plusieurs lignes de texte. Les versions récentes des navigateurs prennent en charge le renvoi à la ligne, et l'utilisateur peut saisir des sauts de ligne (combinaison des caractères 13 et 10 en ASCII décimal) dans la zone de texte. Lorsqu'un élément TEXTAREA figure dans un formulaire envoyé au serveur, il est transmis sous forme d'une paire nom / valeur dans laquelle la valeur est le contenu de la zone de texte (et dans laquelle l'attribut NAME doit avoir été défini). Le programme CGI implanté sur le serveur doit être capable de traiter d'éventuels sauts de ligne dans le texte.

Si vous désirez que du texte soit déjà affiché dans l'élément TEXTAREA lors de son chargement, ce texte doit être inséré entre les balises de début et de fin; sinon, aucun caractère affichable ne doit apparaître dans le code source entre ces balises. Si une légende doit accompagner l'élément TEXTAREA, elle doit être placée avant ou après cet élément ; avec les navigateurs récents, cette légende peut être insérée dans un élément LABEL pour des raisons de structuration.

Exemple
<TEXTAREA ROWS=5 COLS=60 NAME="notes">Indiquez ici vos notes et commentaires.
</TEXTAREA>
Référence de modèle d'objet
NN | [window.]document.Nom_formulaire.Nom_élément [window.]document.forms[i].elements[i]
IE | [window.]document.Nom_formulaire.Nom_élément [window.]document.forms[i].elements[i] [window.]document.all.IDélément
ACCESSKEY | NN s.o. IE 4 HTML s.o.
ACCESSKEY=« caractère » | Facultatif

Un caractère unique ; lorsque l'utilisateur appuie sur la touche correspondante, l'élément concerné est activé. Selon le navigateur et le système d'exploitation, l'utilisateur doit appuyer sur une touche de modification (par exemple Ctrl, Alt ou Commande) simultanément à la touche désignée pour activer l'élément. Dans Internet Explorer 4 pour Windows, l'utilisateur doit appuyer sur la touche Alt, et la touche d'accès est insensible à la casse. Cet attribut est inopérant dans IE 4 pour Macintosh. Cet attribut ne figure pas dans les spécifications HTML 4.0 ; il semble que ce soit par inadvertance.

Exemple
<TEXTAREA NAME="notes" ACCESSKEY="n"></TEXTAREA>
Valeur
Un caractère unique pour l'ensemble du document.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.Nom_formulaire.Nom_élément.accessKey
[window.]document.forms[i].elements[i].accessKey
[window.]document.all.IDélément.accessKey
ALIGN | NN s.o. IE 4 HTML s.o.
ALIGN=« Constante_d'alignement » | Facultatif

Détermine le type d'alignement du rectangle de l'élément au sein du contenu environnant. Consultez la section « Constantes d'alignement » ci-dessus pour avoir la description des possibilités définies dans Navigator et dans Internet Explorer pour cet attribut. Bien que Microsoft affirme prendre en charge de façon complète cet attribut, seules certaines valeurs fonctionnent dans Internet Explorer 4 pour Macintosh, et aucune ne fonctionne dans la version Windows. Si nécessaire, utilisez des feuilles de style pour positionner cet élément. Par ailleurs, l'alignement par défaut varie selon le système d'exploitation.

Référence de modèle d'objet
IE [window.]document.Nom_formulaire.Nom_élément.align
[window.]document.forms[i].elements[i].align
[window.]document.all.IDélément.align
COLS | NN tous IE tous HTML tous
COLS=« Nombre_de_colonnes » | Facultatif

Largeur de l'espace modifiable de l'élément TEXTAREA. Cette valeur désigne le nombre de caractères d'une police non proportionnelle qui doivent s'afficher dans la largeur de l'élément. Lorsque la taille de police peut-être modifiée à l'aide de feuilles de style, la largeur réelle est modifiée en conséquence.

Exemple
<TEXTAREA COLS=40></TEXTAREA>
Valeur
Tout entier positif.
Par défaut Varie selon le navigateur et le système d'exploitation.
Référence de modèle d'objet
IE [window.]document.Nom_formulaire.Nom_élément.cols
[window.]document.forms[i].elements[i].cols
[window.]document.all.IDélément.cols
DATAFLD | NN s.o. IE 4 HTML s.o.
DATAFLD=« Nom_colonne » | Facultatif

Cet attribut est utilisé avec IE 4 dans le cadre d'une liaison de données, pour associer le nom d'une colonne d'une source de données distante au contenu de l'élément TEXTAREA. L'attribut DATASRC de l'élément doit être également défini.

Exemple
<TEXTAREA NAME="summary" DATASRC="#DBSRC3" DATAFLD="summary">
Valeur
Identifiant sensible à la casse.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.Nom_formulaire.Nom_élément.dataFld
[window.]document.forms[i].elements[i].dataFld
[window.]document.all.IDélément.dataFld
DATASRC | NN s.o. IE 4 HTML s.o.
DATASRC=« Nom_source_de_données » | Facultatif

Utilisé avec la liaison de données d'Internet Explorer 4 pour déterminer la source de données ODBC distante (une base de données Oracle ou SQL par exemple) à associer à l'élément. Le contenu de la source de données est spécifié à l'aide de l'attribut DATAFLD.

Exemple
<TEXTAREA NAME="summary" DATASRC="#DBSRC3" DATAFLD="summary">
Valeur
Identifiant sensible à la casse.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.Nom_formulaire.Nom_élément.dataSrc
[window.]document.forms[i].elements[i].dataSrc
[window.]document.all.IDélément.dataSrc
DISABLED | NN s.o. IE 3 HTML 4
DISABLED | Facultatif

Un élément TEXTAREA désactivé à l'aide de cet attribut ne peut pas être activé par l'utilisateur. Dans Windows, un élément TEXTAREA grisé ne peut pas être activé à l'aide de la touche de tabulation. Les spécifications HTML 4.0 précisent par ailleurs que la paire nom / valeur d'un élément désactivé ne doit pas être transmise lorsque le formulaire est envoyé.

L'attribut DISABLED est de type booléen, ce qui signifie que sa simple présence dans le jeu d'attributs définit sa valeur comme true (vrai). Cette valeur peut également être modifiée par la suite à l'aide d'un script (voir l'objet textarea dans le ).

Exemple
<TEXTAREA DISABLED></TEXTAREA>
Valeur
La présence de cet attribut désactive l'élément.
Par défaut false
Référence de modèle d'objet
IE [window.]document.Nom_formulaire.Nom_élément.disabled
[window.]document.forms[i].elements[i].disabled
[window.]document.all.IDélément.disabled
NAME | NN tous IE tous HTML tous
NAME=« ID_élément » | Facultatif

Si l'élément TEXTAREA fait partie d'un formulaire envoyé au serveur, l'attribut NAME est obligatoire pour que la valeur de cet élément soit transmise avec le formulaire. Dans le cas des formulaires qui figurent dans un document pour tirer parti des possibilités conjointes des éléments de formulaire et des scripts, il n'est pas obligatoire de donner un nom aux éléments TEXTAREA, mais il est cependant recommandé de le faire pour pouvoir créer dans le script des références à ces objets, leurs propriétés et leurs méthodes.

Exemple
<TEXTAREA NAME="commentaires"></TEXTAREA>
Valeur
Identifiant sensible à la casse.
Par défaut Aucune.
Référence de modèle d'objet
NN | [window.]document.Nom_formulaire.Nom_élément.name [window.]document.forms[i].elements[i].name
IE | [window.]document.Nom_formulaire.Nom_élément.name [window.]document.forms[i].elements[i].name [window.]document.all.IDélément.name
READONLY | NN s.o. IE 4 HTML 4
READONLY | Facultatif

Lorsque son attribut READONLY est présent, un élément TEXTAREA de type champ texte ne peut pas être modifié par le visiteur (mais son contenu peut être modifié à l'aide d'un script). Un élément TEXTAREA doté de l'attribut READONLY ne doit normalement pas être activé lorsque l'utilisateur appuie sur la touche de tabulation, mais IE 4 pour Macintosh active ce champ quelle que soit la valeur de cet attribut.

Exemple
<TEXTAREA NAME="instructions" READONLY></TEXTAREA>
Valeur
La présence de cet attribut définit sa valeur comme true (vrai).
Par défaut false
Référence de modèle d'objet
IE [window.]document.Nom_formulaire.Nom_élément.readOnly
[window.]document.forms[i].elements[i].readOnly
[window.]document.all.IDélément.readOnly
ROWS | NN tous IE tous HTML tous
ROWS=« Nombre_de_lignes » | Facultatif

Hauteur de l'élément TEXTAREA en fonction du nombre de lignes de texte qui doivent s'afficher sans faire défiler l'écran. Cette valeur représente le nombre de lignes (avec une police non proportionnelle) qui doivent s'afficher dans la hauteur sans que la barre de défilement soit activée. Lorsque la taille de police peut-être modifiée à l'aide de feuilles de style, la hauteur réelle est modifiée en conséquence.

Exemple
<TEXTAREA ROWS=5 COLS=40></TEXTAREA>
Valeur
Tout entier positif.
Par défaut Varie selon le navigateur et le système d'exploitation.
Référence de modèle d'objet
IE [window.]document.Nom_formulaire.Nom_élément.rows
[window.]document.forms[i].elements[i].rows
[window.]document.all.IDélément.rows
STYLE | NN s.o. IE 4 HTML 4
STYLE=« Propriétés_de_feuille_de_style » | Facultatif

Cet attribut permet de définir une ou plusieurs propriétés de style pour l'élément. Le format des valeurs passées à ces propriétés dépend du style par défaut du navigateur, mais Navigator et Internet Explorer acceptent tous deux la syntaxe des feuilles de style CSS. Les feuilles de style ont plus d'effet sur cet élément dans Internet Explorer 4 pour Macintosh que dans la version Windows. Il est conseillé d'attendre une implémentation plus complète dans les deux navigateurs avant de définir des styles pour l'élément TEXTAREA.

Exemple
<TEXTAREA STYLE="text-size:14pt"></TEXTAREA>
Valeur
L'ensemble de la règle de feuille de style, qui est conforme à la syntaxe des CSS, est entre guillemets. Les divers attributs de style et leurs valeurs sont séparés par des points-virgules. Les attributs des feuilles de style sont présentés en détail dans le .
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.Nom_formulaire.Nom_élément.style
[window.]document.forms[i].elements[i].style
[window.]document.all.IDélément.style
TABINDEX | NN s.o. IE 4 HTML 4
TABINDEX=chiffre_entier | Facultatif

Nombre indiquant le numéro d'ordre de cet élément dans l'ordre de tabulation de tous les éléments du document pouvant être activés par tabulation L'ordre de tabulation obéit à un ensemble de règles strictes. Les éléments dont l'attribut TABINDEX possède une valeur supérieure à zéro sont les premiers activés lorsque l'utilisateur se sert de la touche de tabulation au sein d'une page. Le premier élément qui est activé (qui « reçoit le focus ») est celui dont l'attribut TABINDEX a la valeur la plus faible ; le système passe ensuite aux éléments dont les valeurs sont de plus en plus élevées, quel que soit leur emplacement physique sur la page ou au sein du document. Si la valeur de l'attribut TABINDEX est identique pour deux éléments, c'est celui qui apparaît le premier dans le document qui est d'abord activé. Viennent ensuite tous les éléments pour lesquels il n'existe pas d'attribut TABINDEX, ou dont cet attribut a reçu la valeur zéro. Ces éléments sont activés selon leur ordre d'apparition dans le document.

Exemple
<TEXTAREA NAME="commentaires" TABINDEX=3></TEXTAREA>
Valeur
Un entier compris entre 0 et 32767. Dans IE 4, si l'attribut TABINDEX reçoit la valeur -1, cet élément ne sera pas inclus dans la séquence de tabulation.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.Nom_formulaire.Nom_élément.tabIndex
[window.]document.forms[i].elements[i].tabIndex
[window.]document.all.IDélément.tabIndex
WRAP | NN 2 IE 4 HTML s.o.
WRAP=« Type_de_retour_à_la_ligne » | Obligatoire

L'attribut WRAP indique au navigateur s'il doit renvoyer le texte à la ligne suivante dans un élément TEXTAREA et, dans l'affirmative, s'il doit convertir les renvois à la ligne automatiques en sauts de ligne « en dur » lors de la transmission au serveur. Navigator et Internet Explorer divergent sur les valeurs possibles, et les spécifications HTML sont muettes à ce sujet. Il existe toutefois des solutions fonctionnant avec les deux navigateurs.

Si le renvoi à la ligne (WRAP) est désactivé (valeur par défaut), l'élément TEXTAREA active la barre de défilement horizontal si le nombre de caractères excède la largeur de colonne originale. Un appui sur la touche Entrée amène le curseur au début de la ligne suivante. Pour que le contenu de cet élément soit transmis au serveur sans que les renvois à la ligne automatiques soient convertis en sauts de ligne en dur (en d'autres termes, pour que le texte soit transmis tel qu'il a été saisi), activez l'attribut WRAP en l'insérant dans l'élément comme s'il s'agissait d'un attribut booléen. Pour que les renvois à la ligne automatiques soient convertis en sauts de ligne en dur (en préservant ainsi le formatage du contenu tel qu'il apparaît dans l'élément), donnez à l'attribut WRAP la valeur hard. Navigator et Internet Explorer reconnaissent tous deux ce paramètre, alors que Navigator ne reconnaît pas la valeur physical propre à IE.

Exemple
<TEXTAREA NAME="commentaires" WRAP></TEXTAREA>
Valeur
La présence de l'attribut WRAP (sans qu'une valeur lui soit affectée) provoque le renvoi à la ligne (et filtre les renvois à la ligne automatiques avant l'envoi au serveur). La valeur hard renvoie également le texte à la ligne suivante, et convertit les renvois à la ligne automatiques en caractères CR-LF dans la valeur transmise au serveur. La valeur off , ou l'absence de l'attribut, désactive le renvoi à la ligne suivante. Les valeurs reconnues sont les suivantes :
Valeur NN IE
hard
         * *
off
         * *
physical
         - *
soft
         * -
virtual
         - *
Par défaut off
Référence de modèle d'objet
IE [window.]document.Nom_formulaire.Nom_élément.wrap
[window.]document.forms[i].elements[i].wrap
[window.]document.all.IDélément.wrap


<TFOOT> | NN s.o. IE 3 HTML 4
<TFOOT>...</TFOOT> | Balise de fin : facultative

L'élément TFOOT est un conteneur spécialisées pour une ou plusieurs lignes de cellules de tableau apparaissant en bas du tableau. En général, l'élément TFOOT reproduit le contenu de l'élément THEAD, à l'intention des utilisateurs qui ont fait défiler la page jusqu'au bout (ou pour tenir compte de futurs navigateurs capables de faire défiler le contenu du tableau). Il n'est possible de définir qu'un seul élément TFOOT dans un même élément TABLE, et cet élément TFOOT doit en principe figurer dans le code source avant tout élément TBODY défini au sein du tableau. L'élément TFOOT est un regroupement de ligne, tout comme les éléments TBODY et THEAD. Navigator 4 ignore la balise TFOOT et affiche donc les éléments TR qu'elle contient comme des éléments TR standard, dans l'ordre dans lequel ils apparaissent dans le code source.

Exemple
<TABLE COLS=3>
<THEAD>
<TR>
<TH>Heure<TH>Evénement<TH>Lieu
</TR>
</THEAD>
<TFOOT>
<TR>
<TH>Heure<TH>Evénement<TH>Lieu
</TR>
</TFOOT>
<TBODY>
<TR>
<TD>7:30 - 17:00<TD>Inscription<TD>Hall principal
</TR>
<TR>
<TD>9:00 - 24:00<TD>Conférences<TD>Salle bleue
</TR>
</TBODY>
</TABLE>
Référence de modèle d'objet
IE [window.]document.all.IDélément
ALIGN | NN s.o. IE 4 HTML 4
ALIGN=« Constante_d'alignement » | Facultatif

Définit les caractéristiques de l'alignement horizontal du contenu de toutes les lignes incluses dans l'élément TFOOT. Les spécifications HTML 4.0 définissent pour l'attribut ALIGN des paramètres dont l'équivalent n'existe pas encore dans les spécifications CSS. Cet attribut ALIGN n'est donc pas encore totalement déprécié comme c'est le cas de nombreux autres éléments. En règle générale, il est conseillé d'utiliser si possible des feuilles de style pour contrôler l'alignement.

Exemple
<TFOOT ALIGN="center">
Valeur
HTML 4.0 et IE 4 possèdent deux jeux de valeurs d'attributs :
Valeur IE 4 HTML 4.0
center
         * *
char
         - *
justify
         - *
left
         * *
right
         * *
Les noms des valeurs center (centré), left (gauche) et right (droite) sont explicites. La valeur justify est destinée à justifier le texte, en l'alignant sur les bords gauche et droit à la fois. Avec la valeur char, l'attribut CHAR doit être également défini pour indiquer le caractère utilisé pour l'alignement du contenu. Dans l'exemple des spécifications HTML 4.0, tout contenu dans lequel ce caractère n'apparaît pas sera aligné à droite par rapport à l'emplacement de ce caractère dans les autres lignes de la même colonne. Il est important de noter que l'attribut ALIGN s'applique à toutes les cellules de toutes les lignes incluses dans l'élément TFOOT, y compris celle d'un élément TH que vous auriez inséré dans le tableau. Si vous désirez obtenir un alignement différent pour la ligne d'en-tête, compensez le paramétrage général en insérant un attribut ALIGN séparé ou en affectant l'attribut de feuille de style text-align individuellement aux éléments TH.
Par défaut left
Référence de modèle d'objet
IE [window.]document.all.IDélément.align
BGCOLOR | NN s.o. IE 4 HTML s.o.
BGCOLOR=« Triplet_de_couleurs_en_hexa ou Nom_en_anglais » | Facultatif

Définit une couleur de remplissage (derrière le texte et autre contenu) pour les cellules contenues par l'élément TFOOT.

Exemple
<TFOOT BGCOLOR="tan">
Valeur
Triplet de couleurs en hexadécimal, ou l'un des noms de couleurs en anglais. Si la valeur de cet attribut n'est pas indiquée, elle sera interprétée comme "#000000" (noir). Reportez-vous à l'annexe A pour connaître les noms de couleurs admissibles.
Par défaut Varie selon les versions des navigateurs et les systèmes d'exploitation.
Référence de modèle d'objet
IE [window.]document.all.IDélément.bgColor
CHAR | NN s.o. IE s.o. HTML 4
CHAR=« caractère » | Facultatif

Le caractère utilisé comme point d'alignement pour le texte des cellules. Cet attribut n'est utile que si l'attribut ALIGN reçoit la valeur "char".

Exemple
<TFOOT ALIGN="char" CHAR=".">
Valeur
Tout caractère alphanumérique unique.
Par défaut Aucune.
CHAROFF | NN s.o. IE s.o. HTML 4
CHAROFF=« longueur » | Facultatif

Définit un point de décalage spécifique auquel le caractère spécifié par l'attribut CHAR doit apparaître dans chaque cellule. Cet attribut est destiné à résoudre les cas où le positionnement par défaut du navigateur ne correspondrait pas aux objectifs de mise en page du tableau.

Exemple
<TFOOT ALIGN="char" CHAR="." CHAROFF="80%">
Valeur
Toute valeur en pixels ou en pourcentage de l'espace disponible dans les cellules.
Par défaut Aucune.
VALIGN | NN s.o. IE 4 HTML 4
VALIGN=« Constante_d'alignement » | Facultatif

Définit les caractéristiques de l'alignement vertical du contenu des cellules de toutes les colonnes incluses dans l'élément TFOOT. Vous pouvez modifier manuellement l'alignement vertical d'une cellule particulière d'une colonne.

Exemple
<TFOOT VALIGN="bottom">
Valeur
IE 4 et HTML 4.0 reconnaissent quatre constantes possibles : top | middle | bottom | baseline. Avec top et bottom, le contenu est aligné sur le haut et le bas de la cellule (ou en est très proche). Avec middle (la valeur par défaut), le contenu est parfaitement centré verticalement dans les cellules. Dans les cas où le contenu d'une cellule pourrait s'étendre sur plusieurs lignes dans les largeurs de fenêtre courantes (dans l'hypothèse d'un tableau de largeur variable), il est conseillé de donner à l'attribut VALIGN la valeur baseline. Ainsi, la ligne de base des caractères de la première (ou de la seule) ligne de texte de la cellule sera alignée sur celle du contenu des autres cellules de la même ligne, ce qui est en général le meilleur compromis sur le plan esthétique.
Par défaut middle
Référence de modèle d'objet
IE [window.]document.all.IDélément.vAlign


<TH> | NN tous IE tous HTML 3.2
<TH>...</TH> | Balise de fin : facultative

L'élément TH est le conteneur de tout le contenu d'une cellule d'un élément TABLE dont le format doit distinguer ce contenu comme en-tête de tableau La plupart des navigateurs affichent en gras le contenu de cet élément. Une cellule est constituée de l'intersection d'une ligne et d'une colonne. Les autres éléments relatifs à l'élément TH sont les suivants : CAPTION, COL, COLGROUP, TABLE, TBODY, TD, TFOOT, THEAD et TR. L'élément TH ne sert pas uniquement à délimiter le contenu d'une cellule : il définit un certain nombre d'attributs visibles qui s'appliquent à une cellule, souvent pour compenser l'effet d'attributs identiques définis à un niveau plus élevé dans le tableau.

Quatre attributs - ABBR, AXIS, HEADERS et SCOPE - ont été ajoutés dans les spécifications HTML 4.0 en prévision des futurs navigateurs non visuels, qui offriront des fonctionnalités de synthèse vocale pour décrire le contenu d'une page HTML - en un " affichage oral ", en quelque sorte Ces attributs ne sont décrits brièvement ici que pour des raisons d'exhaustivité : leurs applications dans des navigateurs non visuels débordent le cadre de ce texte sur le DHTML. Consultez les recommandations HTML 4.0 pour plus de détails.

Exemple
<TABLE COLS=3>
<THEAD>
<TR>
<TH>Heure<TH>Evénement<TH>Lieu
</TR>
</THEAD>
<TBODY>
<TR>
<TD>7:30 - 17:00<TD>Inscription<TD>Hall principal
</TR>
<TR>
<TD>9:00 - 24:00<TD>Conférences<TD>Salle bleue
</TR>
</TBODY>
</TABLE>
Référence de modèle d'objet
IE [window.]document.all.IDélément
ABBR | NN s.o. IE s.o. HTML 4
ABBR=« texte » | Facultatif

Chaîne abrégée décrivant le contenu de la cellule. Il s'agit en général d'une brève légende qu'un navigateur non visuel pourrait énoncer à haute voix pour décrire ce que représente le contenu de la cellule.

Exemple
<TH ABBR="Contenu"> Event
Valeur
Toute chaîne de texte entre guillemets.
Par défaut Aucune.
ALIGN | NN tous IE tous HTML 3.2
ALIGN=« Constante_d'alignement » | Facultatif

Définit les caractéristiques de l'alignement horizontal du contenu de la cellule définie par l'élément TH. Les spécifications HTML 4.0 définissent pour l'attribut ALIGN des paramètres dont l'équivalent n'existe pas encore dans les spécifications CSS. Cet attribut ALIGN n'est donc pas encore totalement déprécié comme c'est le cas de nombreux autres éléments. En règle générale, il est conseillé d'utiliser si possible des feuilles de style pour contrôler l'alignement.

Exemple
<TH ALIGN="center">
Valeur
Navigator 4 et Internet Explorer 4 partagent les mêmes valeurs pour cet attribut, alors que HTML 4.0 en prévoit quelques-unes de plus :
Valeur NN 4 IE 4 HTML 4.0
center
         * * *
char
         - - *
justify
         - - *
left
         * * *
right
         * * *
Les noms des valeurs center (centré), left (gauche) et right (droite) sont explicites. La valeur justify est destinée à justifier le texte, en l'alignant sur les bords gauche et droit à la fois. Avec la valeur char, l'attribut CHAR doit être également défini pour indiquer le caractère utilisé pour l'alignement du contenu. Dans l'exemple des spécifications HTML 4.0, tout contenu dans lequel ce caractère n'apparaît pas sera aligné à droite par rapport à l'emplacement de ce caractère dans les autres lignes de la même colonne.
Par défaut left
Référence de modèle d'objet
IE [window.]document.all.IDélément.align
AXIS | NN s.o. IE s.o. HTML 4
AXIS=« texte » | Facultatif

Chaîne abrégée décrivant la catégorie de la cellule. Il s'agit en général d'une brève légende qu'un navigateur non visuel pourrait énoncer à haute voix pour décrire ce que représente le contenu de la cellule.

Exemple
<TH AXIS="événements">Evénements
Valeur
Toute chaîne de texte entre guillemets.
Par défaut Aucune.
BACKGROUND | NN s.o. IE 3 HTML s.o.
BACKGROUND=« URL » | Facultatif

Indique un fichier image utilisé comme arrière-plan de la cellule. À la différence des images normales, qui sont chargées par le navigateur en tant que contenu, les images d'arrière-plan sont chargées à leur taille originale (sans redimensionnement) et affichées côte à côte pour remplir l'espace disponible dans la cellule. Les images de petite taille sont chargées plus rapidement, mais elles sont évidemment répétées un plus grand nombre de fois pour former la mosaïque d'arrière-plan. Les images GIF animées peuvent être utilisées en arrière-plan, mais elles occasionnent facilement de la gêne pour le visiteur. Lors du choix d'une image d'arrière-plan, veillez à en prendre une qui soit neutre par rapport au contenu principal, afin que celui-ci ressorte lisiblement. Si elles doivent vraiment être utilisées, les images d'arrière-plan doivent rester extrêmement discrètes.

Exemple
<TH BACKGROUND="watermark.jpg">
Valeur
Toute adresse URL valide (complète ou relative) d'un fichier image.
Par défaut Aucune.
Référence de modèle d'objet
IE [window.]document.all.IDélément.background
BGCOLOR | NN 3 IE 3 HTML 3.2
BGCOLOR=« Triplet_de_couleurs_en_hexa ou Nom_en_anglais » | Facultatif

Définit une couleur de remplissage (derrière le texte et autre contenu) pour la cellule définie par l'élément TH.

Exemple
<TH BGCOLOR="yellow">
Valeur
Triplet de couleurs en hexadécimal, ou l'un des noms de couleurs en anglais. Si la valeur de cet attribut n'est pas indiquée, elle sera interprétée comme "#000000" (noir). Reportez-vous à l'annexe A pour connaître les noms de couleurs admissibles.
Par défaut Varie selon les versions des navigateurs et les systèmes d'exploitation.
Référence de modèle d'objet
IE [window.]document.all.IDélément.bgColor
BORDERCOLOR | NN s.o. IE 3 HTML s.o.
BORDERCOLOR=« Triplet_de_couleurs_en_hexa ou Nom_en_anglais » | Facultatif

Couleurs utilisées pour afficher une partie des pixels afin de donner l'illusion de bordures autour des cellules et de tout le tableau. Internet Explorer applique la couleur aux quatre lignes de la bordure d'une cellule. Par conséquent, les couleurs de cellules adjacentes ne se touchent pas.

Exemple
<TH BORDERCOLOR="green">
Valeur
Triplet de couleurs en hexadécimal, ou l'un des noms de couleurs en anglais. Si la valeur de cet attribut n'est pas indiquée, elle sera interprétée comme "#000000" (noir). Reportez-vous à l'annexe A pour connaître les noms de couleurs admissibles.
Par défaut Varie selon le navigateur et le système d'exploitation.
Référence de modèle d'objet
IE [window.]document.all.IDélément.borderColor
BORDERCOLORDARK, BORDERCOLORLIGHT NN s.o. IE 3 HTML s.o.
BORDERCOLORDARK=« Triplet_de_couleurs_en_hexa ou Nom_en_anglais »
BORDERCOLORLIGHT=« Triplet_de_couleurs_en_hexa ou Nom_en_anglais » 		Facultatif

L'effet tridimensionnel des bordures d'un tableau dans Internet Explorer est créé par une disposition minutieuse de lignes claires et foncées sur l'arrière-plan ou la couleur par défaut de la page (voir figure 8-4 dans la présentation de l'élément TABLE). Vous pouvez contrôler indépendamment les couleurs utilisées pour les lignes claires et foncées en affectant des valeurs aux attributs BORDERCOLORDARK (bords gauche et supérieur de la cellule) et BORDERCOLORLIGHT (bords droit et inférieur). En général, il est conseillé d'affecter à la paire d'attributs des couleurs complémentaires. Toutefois rien ne vous oblige à définir une couleur foncée pour BORDERCOLORDARK. Comme les attributs ne contrôlent qu'un jeu de lignes bien défini, vous pouvez aisément déterminer les lignes de bordure qui changeront avec chaque attribut.

Exemple
<TH BORDERCOLORDARK="darkred" BORDERCOLORLIGHT="salmon">
Valeur
Triplet de couleurs en hexadécimal, ou l'un des noms de couleurs en anglais. Si la valeur de cet attribut n'est pas indiquée, elle sera interprétée comme "#000000" (noir). Reportez-vous à l'annexe A pour connaître les noms de couleurs admissibles.
Par défaut Varie selon le système d'exploitation.
Référence de modèle d'objet
IE [window.]document.all.IDélément.borderColorDark
[window.]document.all.IDélément.borderColorLight
CHAR | NN s.o. IE s.o. HTML 4
CHAR=« caractère » | Facultatif

Le caractère utilisé comme point d'alignement pour le texte des cellules. Cet attribut n'est utile que si l'attribut ALIGN reçoit la valeur "char".

Exemple
<TH ALIGN="char" CHAR=".">
Valeur
Tout caractère alphanumérique unique.
Par défaut Aucune.
CHAROFF | NN s.o. IE s.o. HTML 4
CHAROFF=« longueur » | Facultatif

Définit un point de décalage spécifique auquel le caractère spécifié par l'attribut CHAR doit apparaître dans chaque cellule. Cet attribut est destiné à résoudre les cas où le positionnement par défaut du navigateur ne correspondrait pas aux objectifs de mise en page du tableau.

Exemple
<TH ALIGN="char" CHAR="." CHAROFF="80%">
Valeur
Toute valeur en pixels ou en pourcentage de l'espace disponible dans les cellules.
Par défaut Aucune.
COLSPAN | NN tous IE tous HTML 3.2
COLSPAN=« Nombre_de_colonnes » | Facultatif

L'attribut COLSPAN spécifie le nombre de colonnes du tableau sur lequel la cellule doit s'étendre. Pour chaque colonne supplémentaire incluse dans le compte COLSPAN, il faut un élément TH ou TD de moins dans la ligne de tableau. Si vous donnez à l'attribut ALIGN la valeur center ou right, l'alignement est calculé par rapport à la largeur totale de l'élément TH sur le nombre de colonnes indiqué. La ligne suivante du tableau retrouve le nombre de colonnes original, à moins que vous ayez également affecté un attribut ROWSPAN à cette cellule

Exemple
<TH COLSPAN=2 ALIGN="right">
Valeur
Tout entier positif, normalement égal ou supérieur à deux.
Par défaut 1
Référence de modèle d'objet
IE [window.]document.all.IDélément.colSpan
DATAFLD | NN s.o. IE 4 HTML s.o.
DATAFLD=« Nom_colonne » | Facultatif

Utilisé avec la fonction de liaison de données d'IE 4 pour associer le nom d'une colonne d'une source de données distante au contenu d'une cellule d'en-tête de tableau. Les attributs DATASRC et, éventuellement, DATAPAGESIZE de l'élément père TABLE doivent être également définis.

Exemple
<TABLE DATASRC="#DBSRC3" DATAPAGESIZE=5">
<TR>
  <TH><INPUT TYPE="text" DATAFLD="stockNum">
  <TH><INPUT TYPE="text" DATAFLD="qtyOnHand">
</TR>
</TABLE>
Valeur
Identifiant sensible à la casse.
Par défaut Aucune.
HEADERS | NN s.o. IE s.o. HTML 4
HEADERS=« Liste_des_ID_des_cellules » | Facultatif

Pointe sur un ou plusieurs éléments TH ou TD faisant office d'en-têtes de colonne ou de ligne pour la cellule de tableau actuelle. La valeur affectée à cet attribut est une liste des valeurs des attributs ID affectés aux éléments TH correspondants ; dans la liste, ces identifiants sont séparés par des espaces. On peut imaginer qu'un navigateur non visuel énonce le contenu de l'en-tête avant le contenu de la cellule, afin d'aider les visiteurs à identifier la nature de ce dernier.

Exemple
<TR>
<TH id="hdr1">Numéro de produit
<TH id="hdr2">Description
</TR>
<TR>
<TH headers="hdr1">0392
<TH headers="hdr2">Bague
</TR>
Valeur
Liste des identifiants (sensibles à la casse et séparés par des espaces) des cellules faisant fonction d'en-tête pour la cellule actuelle.
Par défaut Aucune.
HEIGHT, WIDTH NN tous IE tous HTML 3.2
HEIGHT=« hauteur »
WIDTH=« largeur » 		Facultatif

Les dimensions rectangulaires d'une cellule, qui peuvent être différentes de la taille par défaut calculée par le navigateur. Lorsque les valeurs de ces attributs sont inférieures à l'espace minimal nécessaire pour afficher le contenu des cellules du tableau, le navigateur n'en tient pas compte et affiche tout le contenu, quitte à ce que du texte soit renvoyé à la ligne suivante. Vous pouvez également étirer les dimensions d'un tableau au-delà des dimensions calculées par le navigateur. Un espace blanc supplémentaire apparaît dans les cellules du tableau pour compenser cette différence. Si vous n'utilisez qu'un seul de ces attributs, le navigateur effectuera les calculs nécessaires pour ajuster automatiquement l'autre dimension.

En raison de la nature régulière, par définition, des tableaux, si vous définissez une hauteur précise pour une cellule, toutes les cellules de la même ligne auront la même hauteur ; de même, en cas d'affectation d'une largeur précise à une cellule, toutes les cellules de la même colonne auront la même largeur.

Les attributs HEIGHT et WIDTH sont dépréciés en HTML 4.0, en faveur des attributs de feuilles de style height et width (qui ne sont pas disponibles pour les cellules de tableaux dans Navigator 4).

Exemple
<TH WIDTH="80%" HEIGHT=30>
Valeur
Toute valeur en pixels ou en pourcentage de l'espace disponible.
Par défaut Adaptée à la taille du contenu.
Référence de modèle d'objet
IE [window.]document.all.IDélément.height
[window.]document.all.IDélément.width
NOWRAP | NN tous IE tous HTML 3.2
NOWRAP | Facultatif

La présence de l'attribut NOWRAP indique au navigateur qu'il doit élargir la cellule pour permettre l'affichage d'une ligne de texte insécable sur une seule ligne. Il est conseillé de ne pas abuser de cet attribut, car il oblige l'utilisateur à faire défiler horizontalement la page pour en afficher tout le contenu. L'élément NOWRAP est déprécié en HTML 4.0.

Exemple
<TH NOWRAP>
Valeur
La présence de cet attribut définit sa valeur comme true (vrai).
Par défaut false
Référence de modèle d'objet
IE [window.]document.all.IDélément.noWrap
ROWSPAN | NN tous IE tous HTML 3.2
ROWSPAN=« Nombre_de_lignes » | Facultatif

Nombre de lignes sur lequel la cellule active doit s'étendre vers le bas. Pour chaque ligne supplémentaire incluse dans le compte ROWSPAN, il faut un élément TH ou TD de moins dans la ligne de tableau suivante, à la position qui correspond à celle de cette cellule dans la colonne.

Exemple
<TH ROWSPAN=2>
Valeur
Tout entier positif, généralement égal ou supérieur à deux.
Par défaut 1
Référence de modèle d'objet
IE [window.]document.all.IDélément.rowSpan
SCOPE | NN s.o. IE s.o. HTML 4
SCOPE=« Constante_de_plage » | Facultatif

La plage de cellules, par rapport à la cellule actuelle, qui se comportent comme si cette dernière était leur en-tête. Dans le cas de tableaux dont la structure est régulière, l'attribut SCOPE permet d'obtenir le même résultat qu'en utilisant l'attribut HEADERS, mais de façon plus simple, sans devoir définir des attributs ID pour les cellules de l'en-tête.

Exemple
<TR>
<TH SCOPE="col">Numéro de produit
<TH SCOPE="col">Description
</TR>
<TR>
<TD>0392
<TD>Bague
</TR>
Valeur
L'une des quatre constantes de plage reconnues :
col | Le texte de la cellule actuelle devient le texte d'en-tête de toutes les autres cellules de la colonne.
colgroup | Le texte de la cellule actuelle devient le texte d'en-tête de toutes les autres cellules de l'élément COLGROUP.
row | Le texte de la cellule actuelle devient le texte d'en-tête de toutes les autres cellules de l'élément TR.
rowgroup | Le texte de la cellule actuelle devient le texte d'en-tête de toutes les autres cellules de l'élément TBODY.
Par défaut Aucune.
VALIGN | NN tous IE tous HTML 3.2
VALIGN=« Constante_d'alignement » | Facultatif

Détermine l'alignement vertical du texte à l'intérieur de l'élément TD. Si vous définissez une valeur pour une cellule individuelle, cette valeur annulera la valeur du même attribut des conteneurs externes, tels que TR et TBODY.

Exemple
<TH VALIGN="bottom">
Valeur
IE 4 et HTML 4.0 reconnaissent quatre constantes possibles : top | middle | bottom | baseline. Avec top et bottom, le contenu est aligné sur le haut et le bas de la cellule (ou en est très proche). Avec middle (la valeur par défaut), le contenu est parfaitement centré verticalement dans les cellules. Dans les cas où le contenu d'une cellule pourrait s'étendre sur plusieurs lignes dans les largeurs de fenêtre courantes (dans l'hypothèse d'un tableau de largeur variable), il est conseillé de donner à l'attribut VALIGN la valeur baseline. Ainsi, la ligne de base des caractères de la première (ou de la seule) ligne de texte de la cellule sera alignée sur celle du contenu des autres cellules de la même ligne, ce qui est en général le meilleur compromis sur le plan esthétique.
Par défaut middle
Référence de modèle d'objet
IE [window.]document.all.IDélément.vAlign


<THEAD> | NN s.o. IE 3 HTML 4
<THEAD>...</THEAD> | Balise de fin : facultative

L'élément THEAD est un conteneur spécialisées pour une ou plusieurs lignes de cellules de tableau apparaissant en haut du tableau. Il n'est possible de définir qu'un seul élément THEAD dans un même élément TABLE, et cet élément THEAD doit en principe figurer dans le code source juste après la balise de début de l'élément TABLE. Vous êtes libre d'utiliser une combinaison quelconque d'éléments TD et TH à l'intérieur de l'élément THEAD. L'élément THEAD est un regroupement de ligne, tout comme les éléments TBODY et TFOOT. Navigator 4 ignore la balise THEAD et affiche donc les éléments TR qu'elle contient comme des éléments TR standard, dans l'ordre dans lequel ils apparaissent dans le code source.

Exemple
<TABLE COLS=3>
<THEAD>
<TR>
<TH>Heure<TH>Evénement<TH>Lieu
</TR>
</THEAD>
<TFOOT>
<TR>
<TH>Heure<TH>Evénement<TH>Lieu
</TR>
</TFOOT>
<TBODY>
<TR>
<TD>7:30 - 17:00<TD>Inscription<TD>Hall principal
</TR>
<TR>
<TD>9:00 - 24:00<TD>Conférences<TD>Salle bleue
</TR>
</TBODY>
</TABLE>
Référence de modèle d'objet
IE [window.]document.all.IDélément
ALIGN | NN s.o. IE 4 HTML 4
ALIGN=« Constante_d'alignement » | Facultatif

Définit les caractéristiques de l'alignement horizontal du contenu de toutes les lignes incluses dans l'élément THEAD. Les spécifications HTML 4.0 définissent pour l'attribut ALIGN des paramètres dont l'équivalent n'existe pas encore dans les spécifications CSS. Cet attribut ALIGN n'est donc pas encore totalement déprécié comme c'est le cas de nombreux autres éléments. En règle générale, il est conseillé d'utiliser si possible des feuilles de style pour contrôler l'alignement.

Exemple
<THEAD ALIGN="center">
Valeur
HTML 4.0 et IE 4 possèdent deux jeux de valeurs d'attributs :
Valeur IE 4 HTML 4.0
center
         * *
char
         - *
justify
         - *
left
         * *
right
         * *
Les noms des valeurs center (centré), left (gauche) et right (droite) sont explicites. La valeur justify est destinée à justifier le texte, en l'alignant sur les bords gauche et droit à la fois. Avec la valeur char, l'attribut CHAR doit être également défini pour indiquer le caractère utilisé pour l'alignement du contenu. Dans l'exemple des spécifications HTML 4.0, tout contenu dans lequel ce caractère n'apparaît pas sera aligné à droite par rapport à l'emplacement de ce caractère dans les autres lignes de la même colonne. Il est important de noter que l'attribut ALIGN s'applique à toutes les cellules de toutes les lignes incluses dans l'élément THEAD, y compris celle d'un élément TH que vous auriez inséré dans le tableau. Si vous désirez obtenir un alignement différent pour la ligne d'en-tête, compensez le paramétrage général en insérant un attribut ALIGN séparé ou en affectant l'attribut de feuille de style text-align individuellement aux éléments TH.
Par défaut left
Référence de modèle d'objet
IE [window.]document.all.IDélément.align
BGCOLOR | NN s.o. IE 4 HTML s.o.
BGCOLOR=« Triplet_de_couleurs_en_hexa ou Nom_en_anglais » | Facultatif

Définit une couleur de remplissage (derrière le texte et autre contenu) pour les cellules contenues par l'élément THEAD.

Exemple
<THEAD BGCOLOR="tan">
Valeur
Triplet de couleurs en hexadécimal, ou l'un des noms de couleurs en anglais. Si la valeur de cet attribut n'est pas indiquée, elle sera interprétée comme "#000000" (noir). Reportez-vous à l'annexe A pour connaître les noms de couleurs admissibles.
Par défaut Varie selon les versions des navigateurs et les systèmes d'exploitation.
Référence de modèle d'objet
IE [window.]document.all.IDélément.bgColor
CHAR | NN s.o. IE s.o. HTML 4
CHAR=« caractère » | Facultatif

Le caractère utilisé comme point d'alignement pour le texte des cellules. Cet attribut n'est utile que si l'attribut ALIGN reçoit la valeur "char".

Exemple
<THEAD ALIGN="char" CHAR=".">
Valeur
Tout caractère alphanumérique unique.
Par défaut Aucune.
CHAROFF | NN s.o. IE s.o. HTML 4
CHAROFF=« longueur » | Facultatif

Définit un point de décalage spécifique auquel le caractère spécifié par l'attribut CHAR doit apparaître dans chaque cellule. Cet attribut est destiné à résoudre les cas où le positionnement par défaut du navigateur ne correspondrait pas aux objectifs de mise en page du tableau.

Exemple
<THEAD ALIGN="char" CHAR="." CHAROFF="80%">
Valeur
Toute valeur en pixels ou en pourcentage de l'espace disponible dans les cellules.
Par défaut Aucune.
VALIGN | NN s.o. IE 4 HTML 4
VALIGN=« Constante_d'alignement » | Facultatif

Définit les caractéristiques de l'alignement vertical du contenu des cellules de toutes les colonnes incluses dans l'élément THEAD. Vous pouvez modifier manuellement l'alignement vertical d'une cellule particulière d'une colonne.

Exemple
<THEAD VALIGN="bottom">
Valeur
IE 4 et HTML 4.0 reconnaissent quatre constantes possibles : top | middle | bottom | baseline. Avec top et bottom, le contenu est aligné sur le haut et le bas de la cellule (ou en est très proche). Avec middle (la valeur par défaut), le contenu est parfaitement centré verticalement dans les cellules. Dans les cas où le contenu d'une cellule pourrait s'étendre sur plusieurs lignes dans les largeurs de fenêtre courantes (dans l'hypothèse d'un tableau de largeur variable), il est conseillé de donner à l'attribut VALIGN la valeur baseline. Ainsi, la ligne de base des caractères de la première (ou de la seule) ligne de texte de la cellule sera alignée sur celle du contenu des autres cellules de la même ligne, ce qui est en général le meilleur compromis sur le plan esthétique.
Par défaut middle
Référence de modèle d'objet
IE [window.]document.all.IDélément.vAlign


<TITLE> | NN tous IE tous HTML tous
<TITLE>...</TITLE> | Balise de fin : obligatoire

L'élément TITLE sert à identifier le contenu général d'un document. Le contenu de cet élément n'est pas affiché comme faisant partie du document, mais les navigateurs l'affichent dans leur barre de titre. Un seul élément TITLE doit figurer dans chaque document, et il doit se trouver à l'intérieur de l'élément HEAD. Il n'est pas interdit d'être quelque peu « bavard » pour le titre du document, car les pages d'un site Web ne sont pas toujours consultées dans leur séquence normale. Le titre peut donc replacer le document dans son contexte.

Exemple
<TITLE>Déclaration d'Indépendance</TITLE>
Référence de modèle d'objet
IE [window.]document.all.IDélément


<TR> | NN tous IE tous HTML tous
<TR>...</TR> | Balise de fin : facultative

L'élément TR est le conteneur d'une ligne de cellules de tableau. Chaque cellule d'une ligne peut être un élément TH ou TD. Chaque ligne doit comporter au moins une balise de départ, qui indique au navigateur qu'il doit commencer à afficher les éléments de cellule qui suivent sur la même ligne du tableau. Les autres types de regroupement de lignes disponibles sont les éléments TFOOT et THEAD, ainsi que l'élément TBODY, dont le rôle est plus général.

Exemple
<TABLE COLS=3>
<THEAD>
<TR>
<TH>Heure<TH>Evénement<TH>Lieu
</TR>
</THEAD>
<TBODY>
<TR>
<TD>7:30 - 17:00<TD>Inscription<TD>Hall principal
</TR>
<TR>
<TD>9:00 - 24:00<TD>Conférences<TD>Salle bleue
</TR>
</TBODY>
</TABLE>
Référence de modèle d'objet
IE [window.]document.all.IDélément
ALIGN | NN s.o. IE 4 HTML 4
ALIGN=« Constante_d'alignement » | Facultatif

Définit l'alignement horizontal du contenu de la ligne. Les spécifications HTML 4.0 définissent pour l'attribut ALIGN des paramètres dont l'équivalent n'existe pas encore dans les spécifications CSS. Cet attribut ALIGN n'est donc pas encore totalement déprécié comme c'est le cas de nombreux autres éléments. En règle générale, il est conseillé d'utiliser si possible des feuilles de style pour contrôler l'alignement.

Exemple
<TR ALIGN="center">
Valeur
Navigator 4 et Internet Explorer 4 partagent les mêmes valeurs pour cet attribut, alors que HTML 4.0 en prévoit deux de plus :
Valeur NN 4 IE 4 HTML 4.0
center
         * * *
char
         - - *
justify
         - - *
left
         * * *
right
         * * *
Les noms des valeurs center (centré), left (gauche) et right (droite) sont explicites. La valeur justify est destinée à justifier le texte, en l'alignant sur les bords gauche et droit à la fois. Avec la valeur char, l'attribut CHAR doit être également défini pour indiquer le caractère utilisé pour l'alignement du contenu. Dans l'exemple des spécifications HTML 4.0, tout contenu dans lequel ce caractère n'apparaît pas sera aligné à droite par rapport à l'emplacement de ce caractère dans les autres lignes de la même colonne. Il est important de noter que l'attribut ALIGN s'applique à toutes les cellules incluses dans l'élément TR, y compris celles d'un élément TH que vous auriez inséré dans le tableau. Si vous désirez obtenir un alignement différent pour la ligne d'en-tête, compensez le paramétrage général en insérant un attribut ALIGN séparé ou en affectant l'attribut de feuille de style text-align à l'élément TR ou, individuellement, aux éléments TH.
Par défaut center
Référence de modèle d'objet
IE [window.]document.all.IDélément.align
BGCOLOR | NN 4 IE 3 HTML 4
BGCOLOR=« Triplet_de_couleurs_en_hexa ou Nom_en_anglais » | Facultatif

Définit une couleur de remplissage (derrière le texte et autre contenu) pour les cellules contenues par l'élément TR.

Exemple
<TR BGCOLOR="lavender">
Valeur
Triplet de couleurs en hexadécimal, ou l'un des noms de couleurs en anglais. Si la valeur de cet attribut n'est pas indiquée, elle sera interprétée comme "#000000" (noir). Reportez-vous à l'annexe A pour connaître les noms de couleurs admissibles.
Par défaut Varie selon les versions des navigateurs et les systèmes d'exploitation.
Référence de modèle d'objet
IE [window.]document.all.IDélément.bgColor
BORDERCOLOR | NN s.o. IE 3 HTML s.o.
BORDERCOLOR=« Triplet_de_couleurs_en_hexa ou Nom_en_anglais » | Facultatif

Couleur utilisée pour afficher une partie des pixels afin de donner l'illusion de bordures autour des cellules et de tout le tableau. Internet Explorer applique la couleur aux quatre lignes de la bordure d'une cellule. Par conséquent, les couleurs de cellules adjacentes ne se touchent pas.

Exemple
<TR BORDERCOLOR="green">
Valeur
Triplet de couleurs en hexadécimal, ou l'un des noms de couleurs en anglais. Si la valeur de cet attribut n'est pas indiquée, elle sera interprétée comme "#000000" (noir). Reportez-vous à l'annexe A pour connaître les noms de couleurs admissibles.
Par défaut Varie selon le navigateur et le système d'exploitation.
Référence de modèle d'objet
IE [window.]document.all.IDélément.borderColor
BORDERCOLORDARK, BORDERCOLORLIGHT NN s.o. IE 3 HTML s.o.
BORDERCOLORDARK=« Triplet_de_couleurs_en_hexa ou Nom_en_anglais »
BORDERCOLORLIGHT=« Triplet_de_couleurs_en_hexa ou Nom_en_anglais » 		Facultatif

L'effet tridimensionnel des bordures d'un tableau dans Internet Explorer est créé par une disposition minutieuse de lignes claires et foncées sur l'arrière-plan ou la couleur par défaut de la page (voir figure 8-4 dans la présentation de l'élément TABLE). Vous pouvez contrôler indépendamment les couleurs utilisées pour les lignes claires et foncées, en affectant des valeurs aux attributs BORDERCOLORDARK (bords gauche et supérieur de la cellule) et BORDERCOLORLIGHT (bords droit et inférieur).

En général, il est conseillé d'affecter à la paire d'attributs des couleurs complémentaires. Toutefois rien ne vous oblige à définir une couleur foncée pour BORDERCOLORDARK. Comme les attributs ne contrôlent qu'un jeu de lignes bien défini, vous pouvez aisément déterminer les lignes de bordure qui changeront avec chaque attribut.

Exemple
<TH BORDERCOLORDARK="darkred" BORDERCOLORLIGHT="salmon">
Valeur
Triplet de couleurs en hexadécimal, ou l'un des noms de couleurs en anglais. Si la valeur de cet attribut n'est pas indiquée, elle sera interprétée comme "#000000" (noir). Reportez-vous à l'annexe A pour connaître les noms de couleurs admissibles.
Par défaut Varie selon le système d'exploitation.
Référence de modèle d'objet
IE [window.]document.all.IDélément.borderColorDark
[window.]document.all.IDélément.borderColorLight
CHAR | NN s.o. IE s.o. HTML 4
CHAR=« caractère » | Facultatif

Le caractère utilisé comme point d'alignement pour le texte des cellules. Cet attribut n'est utile que si l'attribut ALIGN reçoit la valeur "char".

Exemple
<TR ALIGN="char" CHAR=".">
Valeur
Tout caractère alphanumérique unique.
Par défaut Aucune.
CHAROFF | NN s.o. IE s.o. HTML 4
CHAROFF=« longueur » | Facultatif

Définit un point de décalage spécifique auquel le caractère spécifié par l'attribut CHAR doit apparaître dans chaque cellule. Cet attribut est destiné à résoudre les cas où le positionnement par défaut du navigateur ne correspondrait pas aux objectifs de mise en page du tableau.

Exemple
<TR ALIGN="char" CHAR="." CHAROFF="80%">
Valeur
Toute valeur en pixels ou en pourcentage de l'espace disponible dans les cellules.
Par défaut Aucune.
VALIGN | NN s.o. IE 4 HTML 4
VALIGN=« Constante_d'alignement » | Facultatif

Définit les caractéristiques de l'alignement vertical du contenu des cellules de toutes les colonnes incluses dans l'élément TR. Vous pouvez modifier manuellement l'alignement vertical d'une cellule particulière de la ligne.

Exemple
<TR VALIGN="bottom">
Valeur
IE 4 et HTML 4.0 reconnaissent quatre constantes possibles : top | middle | bottom | baseline. Avec top et bottom, le contenu est aligné sur le haut et le bas de la cellule (ou en est très proche). Avec middle (la valeur par défaut), le contenu est parfaitement centré verticalement dans les cellules. Dans les cas où le contenu d'une cellule pourrait s'étendre sur plusieurs lignes dans les largeurs de fenêtre courantes (dans l'hypothèse d'un tableau de largeur variable), il est conseillé de donner à l'attribut VALIGN la valeur baseline. Ainsi, la ligne de base des caractères de la première (ou de la seule) ligne de texte de la cellule sera alignée sur celle du contenu des autres cellules de la même ligne, ce qui est en général le meilleur compromis sur le plan esthétique.
Par défaut middle
Référence de modèle d'objet
IE [window.]document.all.IDélément.vAlign


<TT> | NN tous IE tous HTML tous
<TT>...</TT> | Balise de fin : obligatoire

Le contenu de l'élément TT est affiché en police non proportionnelle, comme s'il était imprimé par un téléscripteur (« télex »). Cet élément n'a aucune fonction contextuelle, il est strictement destiné à modifier la présentation du texte. Si vous désirez utiliser un formatage contextuel pour afficher du code informatique ou un exemple de saisie, utilisez l'un des éléments CODE, KBD et SAMP. Comme pour tous les éléments relatifs aux polices de caractères, il est préférable d'utiliser des feuilles de style.

Exemple
<P>L'ordinateur a répondu <TT> « Erreur de calcul. »</TT></P>
Référence de modèle d'objet
IE [window.]document.all.IDélément


<U> | NN 3 IE 3 HTML 3.2
<U>...</U> | Balise de fin : obligatoire

Le contenu de l'élément U est affiché avec un trait de soulignement. Cet élément est déprécié en HTML 4.0 en faveur de l'attribut de feuille de style text-decoration:underline.

Exemple
<P>Vous êtes peut-être le <U>gagnant</U>!</P>
Référence de modèle d'objet
IE [window.]document.all.IDélément


<UL> | NN tous IE tous HTML tous
<UL>...</UL> | Balise de fin : obligatoire

L'élément UL contient une liste non ordonnée d'éléments. Une « liste non ordonnée » est une liste dans laquelle chaque élément est précédé d'un symbole (selon la valeur de l'attribut TYPE ou de l'attribut de feuille de style list-style-type), mais ces éléments ne suivent pas de séquence de numérotation, leur seul ordre est celui de leur apparition dans la liste. Le contenu de chaque élément de la liste est défini par un élément LI imbriqué. Si vous appliquez une règle de feuille de style à un élément UL, les éléments LI imbriqués hériteront de ce style.

Exemple
<UL>
    <LI>Afrique
    <LI>Antarctique
    <LI>Asie
    <LI>Australie
    <LI>Europe
    <LI>Amérique du Nord
    <LI>Amérique du Sud
</UL>
Référence de modèle d'objet
IE [window.]document.all.IDélément
COMPACT | NN s.o. IE s.o. HTML 3,2
COMPACT | Facultatif

Attribut booléen conçu à l'origine pour permettre aux navigateurs d'afficher la liste sous une forme plus compacte que la normale (en réduisant l'interligne entre les éléments). Cet attribut n'est pas implémenté dans les navigateurs actuels.

Exemple
<UL COMPACT>...</UL>
Valeur
La présence de cet attribut définit sa valeur comme true (vrai).
Par défaut false
TYPE | NN tous IE tous HTML 3.2
TYPE=« Type_étiquette » | Facultatif

L'attribut TYPE offre une certaine souplesse quant à la façon dont le symbole ou le numéro d'ordre est affiché dans le navigateur. Le symbole affiché devant chaque élément peut être un disque, un cercle ou un carré. Un disque est un cercle plein (fréquemment appelé « puce »). Le symbole « carré » est plein dans les navigateurs Windows, et vide dans les navigateurs Macintosh. L'attribut TYPE est déprécié en HTML 4.0, qui conseille d'utiliser l'attribut de feuille de style list-style-type:

Exemple
<UL TYPE="disc">...</UL>
Valeur
Les valeurs possibles sont les suivantes : circle | disc | square.
Par défaut disc
Référence de modèle d'objet
IE [window.]document.all.IDélément.type


<VAR> | NN tous IE tous HTML tous
<VAR>...</VAR> | Balise de fin : obligatoire

L'élément VAR appartient à un large groupe d'éléments que les recommandations HTML 4.0 nomment éléments de phrase. Ces éléments affectent une signification structurelle à une partie désignée du document. L'élément VAR permet principalement d'afficher un ou plusieurs caractères incorporés représentant un nom de variable dans du code informatique.

Les navigateurs sont libres de déterminer comment faire la distinction (ou même s'il est nécessaire de faire la distinction) entre le contenu de l'élément VAR et le reste du contenu de l'élément BODY. Navigator et Internet Explorer affichent tous deux le contenu de l'élément VAR avec une police italique. Vous pouvez en décider autrement à l'aide d'une feuille de style.

Exemple
<P>La valeur de <VAR>offsetWidth</VAR> devient alors 20.</P>
Référence de modèle d'objet
IE [window.]document.all.IDélément


<WBR> | NN tous IE tous HTML s.o.
<WBR> | Balise de fin : interdite

Si vous utilisez l'élément NOBR pour délimiter du contenu qui ne doit pas être automatiquement renvoyé à la ligne ni contenir de saut de ligne, vous pouvez utiliser conjointement l'élément WBR pour signaler au navigateur qu'il peut cependant renvoyer le contenu à la ligne si la largeur de la fenêtre du navigateur le justifie. L'emplacement de ces sauts de ligne conditionnels est indiqué dans le code source par l'élément WBR. En un sens, les éléments NOBR et WBR permettent à l'auteur de contrôler les renvois à la ligne du texte. Aucun de ces deux éléments ne figure dans les spécifications HTML, mais ils font partie depuis longtemps du vocabulaire HTML des deux principaux navigateurs.

Exemple
<NOBR>Cette longue ligne de texte peut s'étendre au-delà de la fenêtre du navigateur, mais <WBR>nous venons de forcer celui-ci à afficher la barre de défilement horizontal après un certain nombre de mots.</NOBR>
Référence de modèle d'objet
IE [window.]document.all.IDélément


<XMP> | NNtous IE tous HTML 4
<XMP>...</XMP> | Balise de fin : obligatoire

L'élément XMP affiche son contenu comme élément de bloc, avec une police de caractères à espacement non proportionnel, comme dans les listings informatiques imprimés sur 80 colonnes. Dans la plupart des navigateurs, la taille de cette police est également réduite par rapport à la taille par défaut. Les navigateurs respectent les sauts de ligne et autres espaces blancs contenus dans le texte. Cet élément est depuis longtemps déprécié en HTML, et il a même été supprimé des spécifications HTML 4.0. Il est fortement conseillé d'utiliser plutôt l'élément PRE.

Exemple
<XMP>
&lt;SCRIPT LANGUAGE="JavaScript"&gt;
   document.write("Bonjour le monde.")
&lt;/SCRIPT&gt;
</XMP>
Référence de modèle d'objet
IE [window.]document.all.IDélément


<A...>

The Anchor element is the essence of HTML. It is marked text that is the start and/or destination of a hypertext link. Anchor elements are defined by the <A> element. The <A> element accepts several attributes, but either the NAME or HREF attribute is required.

Attributes of the <A> element :

HREF
If the HREF attribute is present, the text between the opening and closing anchor elements becomes a hypertext link. If the link is selected by readers, they are moved to the document or location specified by the value of the attribute.

Example :

See <A HREF="http://subnet.virtual-pc.com/~le387818/">The HTMLib site</A> for updated info on the HTMLib.

In this example, selecting "The HTMLib" takes the reader to a document located at http://subnet.virtual-pc.com/~le387818/ (which is the HTMLib web site)

With the HREF attribute, the form HREF="#identifier" can refer to another anchor in the same document.

Example :

The <A HREF="document.html#glossary">glossary</A> defines terms used in the document.

In this example, selecting "glossary" takes the reader to another anchor (i.e. <A NAME="glossary">Glossary</A>) in the document document.html. The NAME attribute is described below. If the anchor is in another document and the HREF attribute provides a partial URL, the new document will be resolved from either the present document, or from any specified base address.

Several other forms of the HREF attribute are permitted by browsers. They are as follows :

<A HREF="http://...">
Makes a link to another document located on a World Wide Web server.
<A HREF="ftp://...">
Makes a link to an ftp site. Within an HTML document, normally a connection to an anonymous ftp site would be made. Recent browsers allows connection to private ftp sites. The Anchor would take the form ftp://jdoe@your.com. The browser would then prompt the user for a password.
<A HREF="gopher://...">
Makes a link to a gopher server.
<A HREF="mailto:...">
Activating such a link would bring up the browsers mailing dialog (or application associated with internet mail) allowing the user to send mail messages to the author of the document, or whoever's address follows the mailto attribute. NCSA Mosaic supports use of the TITLE attribute for a mailto link. It allows the author to specify the subject of the mail message that will be sent. Netscape allows specification of the subject line by using the following syntax:
<A HREF="mailto:htmlib@htmlib.demon.co.uk?subject=The HTMLib is fantastic">link text</A>. Internet Explorer 4.0 and above meanwhile supports and extends the above possibility, allowing various mail fields to be automatically filled in, by using the syntax:
<A HREF="mailto:htmlib@htmlib.demon.co.uk?subject=Subscribe to mailing list&cc=htmlib@htmlib.demon.co.uk&body=I'd like to subscribe to the mailing list please">Link text</A>

Note that spaces are allowed in the mail fields

Note : while this works when Outlook Express is used as the default e-mail client, it may not work for all e-mail clients.

<A HREF="news:...">
Makes a link to a newsgroup. Care should be taken in using such links because the author can not know what newsgroups are carried by the local news server of the user.
<A HREF="newsrc:...">
Makes a link to a specific newsrc file.
<A HREF="nntp://...">
Can be used to specify a different news server to that which the user may normally use. This is useful if you want to link to a newsgroup that the users local news server may not carry (see above).
<A HREF="telnet://...">
Activating such a link would initiate a telnet session (using an external application) to the machine specified after the telnet:// label.
<A HREF="wais://...">
Makes a link that connects to a specified WAIS index server.
<A HREF="view-source://...>
This Netscape specific HREF attribute value forces the standard Netscape 'view source' window to appear, containing the document specified in the value of the attribute.
<A HREF="nethelp:vendor/product:topic_id">
This is another Netscape specific HREF attribute value and is specifically only used when delivering on-line help via the NetHelp method. For more details, visit the NetHelp site at http://home.netscape.com/eng/help/ and download the NetHelp SDK.

NAME
If present, the NAME attribute allows the anchor to be the target of a link (another <A HREF...> element). The value of the NAME attribute is an identifier for the anchor. Identifiers are arbitrary strings but must be unique within the HTML document. Also, note that they are case sensitive within HTML documents and can not contain spaces.

Example of use:

<A NAME="coffee">Coffee</A> is an example of...
An example of this is <A HREF="#coffee">coffee</A>.

Another document can then make a reference explicitly to this anchor by putting the identifier after the address, separated by a hash character :

<A HREF="drinks.html#coffee">

TITLE
The TITLE attribute is for informational purposes only (unless used with a mailto: attribute). If present, the Title attribute should provide the title of the document whose address is given by the HREF attribute. When it was introduced, it was anticipated that perhaps browsers would display the contents of the TITLE attribute when the user focuses on the link (like a ToolTip). So far, Internet Explorer 4.0 (and above) is the only browser to implement this.

REL
The REL attribute gives the relationship(s) described by the hypertext link from the anchor to the target. The value should be a comma-separated list of relationship values. Values and their semantics will be registered by the HTML registration authority. The default relationship if none other is given is void. The REL attribute is only used when the HREF attribute is present. (See also <LINK REL="...">)

REV
The REV attribute is the same as the REL attribute, but the semantics of the link type are in the reverse direction. A link from A to B with REL="X" expresses the same relationship as a link from B to A with REV="X". An anchor may have both REL and REV attributes. (See also <LINK REV="...">)

URN
If present, the URN attribute specifies a uniform resource name (URN) for a target document. The format of URNs is still under discussion (since 1994) by various working groups of the Internet Engineering Task Force.

METHODS
The METHODS attributes of anchors and links provide information about the functions that the user may perform on an object. These are more accurately given by the HTTP protocol when it is used, but it may, for similar reasons as for the TITLE attribute, be useful to include the information in advance in the link. For example, the HTML user agent may chose a different rendering as a function of the methods allowed; for example, something that is searchable may get a different link appearance. The value of the METHODS attribute should be a comma separated list of HTTP methods supported by the object for public use.

TARGET
Browser windows can now have names associated with them. Links in any window can refer to another window by name. When the link is activated, the document referenced will appear in that named window. If the window is not already open, the browser will open and name a new window for you. Such an action is only supported by frames capable browsers (i.e. Netscape and Internet Explorer.)

The syntax for the targeted windows is:

<A HREF="url.html" TARGET="window_name">Link text</A>

The TARGET attribute can accept the following values :

window_name
The name of any window specified by a <FRAME> element, or by using the window.open scripting method. If a window_name is used which does not correlate to a previously defined window, then a new window is created and NAMEd according the the window name used in the TARGET attribute. This new window can then be referenced using its new name.
_self
Using this reserved keyword value, would cause any form feedback page to be loaded into the window that currently contains the form.
_parent
Using this reserved keyword value, would cause any form feedback page to be loaded into the window that is the parent of the window currently containing the form. i.e. if the form's window is part of a framed document, it would load into the window controlled by the <FRAMESET> element definitions that control the form's current window.
_top
Using the reserved keyword value would cause the form feedback page to be loaded into the topmost window, clearing any currently existing framed windows.
_blank
Using this reserved keyword value would cause the form feedback page to be loaded into a newly created window. Using this value is the same as using TARGET="window_name" where the window_name used is not a previously defined window. NOTE : Unlike using the window_name using a previously undefined window name, using _blank will not name the new window for future use.

See Also, <BASE TARGET=...>

ACCESSKEY
The ACCESSKEY attribute can be used to specify a shortcut key for the link (activated by pressing 'Alt' and the ACCESSKEY together - like standard Windows applications menu shortcuts). The ACCESSKEY setting does not have to be a character in the actual link text and the link text is not modified in any way to reflect that an ACCESSKEY has been defined for the link. A sensible way around this would be something like :

<A HREF="url.htm" ACCESSKEY="W">W<SPAN STYLE="{text-decoration:none}">hat's New</SPAN></A>

Which displays as :

What's New

alerting the user that there's something special about the 'W' in the link. Pressing 'Alt+W' would then activate the link. Note that more than one link in a document can use the same ACCESSKEY setting. If from the same document, an ACCESSKEY is re-used, the next ACCESSKEY enabled link in the document (in the order they appear) that uses the same setting will be activated. Unless you can guarantee where in the current document the user is, it makes sense to try and use unique ACCESSKEY settings for links. Also note that ACCESSKEY settings override those of the main Internet Explorer menus.
The ACCESSKEY attribute is Internet Explorer 4.0 and above specific.

LANGUAGE
The LANGUAGE attribute accepts values of Javascript or VBscript to explicitly set the scripting language used in any in-line scripts within the element. It attempts to set the language of all scripts relating to the element, but external script blocks (using the <SCRIPT> element) should contain their own LANGUAGE setting in the <SCRIPT> element. (See Javascript or Visual Basic Script topics for more information). LANGUAGE can be useful if you set multiple in-line event handling routines within an anchor element, to save using event="javascript:..." or event="vbscript:..." in each event handler, however, doing so would over-ride the LANGUAGE setting. For example, the following HTML fragment :

<A HREF="url.htm" onclick="javascript:return false">Link text</A>

'kills' the link, by cancelling the 'click' action. This could be simplified by using :

<A HREF="url.htm" LANGUAGE="Javascript" onclick="return false">Link text</A>

as the LANGUAGE element expressly sets the scripting language to be Javascript. The same 'idea' in Visual Basic Script could be :

<A HREF="url.htm" LANGUAGE="VBscript" onclick="window.event.returnvalue=false">Link text</A>

(Note the different syntax for event cancelling.)

INDEXSTRING and TOCSTRING
These two Netscape specific attributes of the <A> element are specific for authoring on-line help/user assistance, employing NetHelp. For more information about NetHelp, visit http://home.netscape.com/eng/help/ and download the NetHelp SDK.
For NetHelp help systems, the INDEXSTRING and TOCSTRING are used to define table of contents and index entries. NetHelp uses extensive scripting to dynamically create a table of content and an index for the files that make up the help system. To author a NetHelp system, table of contents entries and index keywords are defined in anchors within <Hx> elements. The INDEXSTRING and TOCSTRING attributes are then used to define the text that will appear in the table of contents and the keywords that will appear in the index. For example:

<H1>
<A NAME="intro" TOCSTRING="The HTMLib"></A>
</H1>
<H2>
<A NAME="introidx" TOCSTRING="Introduction to the HTMLib" INDEXSTRING="introduction^HTMLib^help">Introduction to the HTMLib</A>
</H2>

In a NetHelp system, this would result in a 'chapter' in the table of contents, headed "The HTMLib" (<H1> elements are interpreted as chapter headings by the NetHelp tools). The first section inside the "The HTMLib" chapter in the table of contents, would be entitled "Introduction to the HTMLib" (<H2> elements are interpreted as section headings, within a chapter heading by the NetHelp tools). Clicking on "The HTMLib" in the NetHelp generated table of contents would navigate to the anchor NAMEd intro and searching the NetHelp index with either "introduction", "HTMLib", or "help" would result in 'hits' which would navigate to the section NAMEd introidx. Clicking on the "Introduction to the HTMLib" entry in the table of contents would also navigate to the same section.

DATAFLD
The DATAFLD attribute can be used to specify a data column name from the Data source (see DATASRC) that the <A> is bound to. For more information on the DATAFLD attribute, see the Data Binding topic. Note that the data being taken from the Data Source will be used for the HREF attribute value if an anchor is data-bound. Therefore, having it receive data that isn't a valid URL would make the link useless.

DATASRC
The DATASRC attribute can be used to specify a data source that the <A> is bound to. For more information on the DATASRC attribute, see the Data Binding topic.

LANG
The LANG attribute can be used to specify what language the <A> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

CLASS
The CLASS attribute is used to specify the <A> as using a particular style sheet class. For example, external links throughout the HTMLib use a style class declared as:

<STYLE TYPE="text/css">
.external {color : #0000FF}
</STYLE>

with the external links being referenced as:

<A CLASS="external" HREF="http://www.microsoft.com">http://www.microsoft.com/</A>

See the Style Sheets overview for more information and style sheet settings.

ID
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <ADDRESS> element for scripting purposes. Any <ADDRESS> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

STYLE
As well as using previously defined style sheet settings, the <A> element can have in-line stylings attached to it. For example:

<A STYLE="color:#0000FF" HREF="http://www.microsoft.com">http://www.microsoft.com/</A>

would display exactly as the above example. See the Style Sheets section for more details about style sheet settings.

The <A> element style can also be controlled by using the Anchor pseudo-elements.
Using a Style Sheet definition in the <STYLE> element, the pseudo-classes A:link, A:visited and A:active can be used to set the text style of links, visited links and active links respectively (just as the LINK, ALINK and VLINK attributes of the <BODY> element do for those browsers that do not support style sheets). Note however, that while Internet Explorer 4.0 currently supports the use of these pseudo-classes, it 'breaks' any scripting for the particular <A> element (either using an event handler in the element, or a separate script function referenced by the anchors ID attribute).

<A...> Scripting

<A...> Properties
Besides the Standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title), each link object (i.e. <A HREF...>) has the following properties, which are available for manipulation for every link in the document, either directly (within an in-line event handler, or via referencing of the anchor/links ID attribute) or via the Links array/collection.
Note that most of the following properties are only supported by Internet Explorer 4.0's Dynamic HTML scripting model. Some properties and events are supported by Netscape (and earlier versions of Internet Explorer as each <A ...> element creates an Anchor and/or a Link object (depending on whether it's <A HREF...> or <A NAME...>, whose properties and events are exposed through the Links array/collection and Anchor topic.

accessKey - (Internet Explorer 4.0+)
If the ACCESSKEY attribute (see above) is set for a link, then the accessKey property reflects the setting, otherwise it remains empty. It is possible to change a links accessKey property in script code.

datafld - (Internet Explorer 4.0+)
The dataFld property directly reflects the value of the DATAFLD attribute (see above). For more information on the DATAFLD attribute, see the Data Binding topic.

datasrc - (Internet Explorer 4.0+)
The dataSrc property directly reflects the value of the DATASRC attribute (see above). For more information on the DATASRC attribute, see the Data Binding topic.

hash - (Internet Explorer 3.0+, Netscape 2.0+)
The hash property reflects, or sets any 'bookmark' definitions within the link's HREF attribute. For example :

<A HREF="http://www.htmlib.com/intro.htm#contents" ID="ContentsLink">View the contents</A>
. . .
<SCRIPT LANGUAGE="VBScript">
strHash=ContentsLink.hash
</SCRIPT>

would make strHash have the value of contents.

host - (Internet Explorer 3.0+, Netscape 2.0+)
The host property is essentially a combination of the hostname (see below) and port (see below) properties. For the above example (for the hash property), the host property would be www.htmlib.com:80. (80 is the standard port for Web servers)

hostname - (Internet Explorer 3.0+, Netscape 2.0+)
The hostname property reflects, or sets the name of the computer identified in the HREF attribute. Using the above example (for the hash property), the hostname property would be www.htmlib.com.

href - (Internet Explorer 3.0+, Netscape 2.0+)
The href property reflects, or sets, the HREF attribute of the link. It is possible to change a link's href property through scripting.

Methods - (Internet Explorer 4.0+)
The Methods property reflects, or sets the links METHODS attribute (if set)

name - (Internet Explorer 3.0+, Netscape 2.0+)
The name property reflects the anchors NAME attribute.

pathname - (Internet Explorer 3.0+, Netscape 2.0+)
The pathname property reflects, or sets the full path to the target document, as given in the HREF attribute. For example :

<A HREF ="http://www.htmlib.com/html/Block Level Elements/address.htm" ID="ContentsLink">View the contents</A>
. . .
<SCRIPT LANGUAGE="VBScript">
strPathName=ContentsLink.pathname
</SCRIPT>

would give strPathName a value of html/Block Level Elements/address.htm.

port - (Internet Explorer 3.0+, Netscape 2.0+)
As mentioned above, the port property reflects, or sets the port setting (if given) in the HREF attribute (if set). If not port is specified in the HREF setting, then port 80 is assumed (the standard port for Web servers).

protocol - (Internet Explorer 3.0+, Netscape 2.0+)
The protocol property reflects, or sets the protocol of the HREF attribute (if set). For example :

<A HREF="http://www.microsoft.com/">Microsoft</A>
<A HREF="ftp://ftp.microsoft.com/">Microsoft (ftp)</A>

would have protocol properties of http:// and ftp:// respectively. For relative URLs in the HREF attribute, the protocol of the currently displayed document is used.

rel - (Internet Explorer 4.0+)
The rel property directly reflects, or sets the value of the REL attribute (if set).

rev - (Internet Explorer 4.0+)
The rev property directly reflects, or sets the value of the REV attribute (if set).

search - (Internet Explorer 3.0+, Netscape 2.0+)
The search property reflects, or sets any search strings appended to the URL given in the HREF attribute (if set). For example :

<A HREF= "http://www.htmlib.com/intro.htm?contents">Link text</A>

would have a search property value of contents

target - (Internet Explorer 3.0+, Netscape 2.0+)
The target property reflects, or sets the link's TARGET attribute (if set)

urn - (Internet Explorer 4.0+)
The urn property reflects, or sets the link's URN attribute (if set)

<A...> Methods
Besides the Standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute), each Link object has the following methods, which are available for manipulation for every link/anchor in the document. Note that all of these methods are Internet Explorer (4.0 and above) specific. The Anchors array and Links array as supported by Netscape (and earlier versions of Internet Explorer) have a few Javascript specific methods, but this reference isn't a Javascript language reference, so they aren't detailed. For details, see any Javascript language reference.

blur - (Internet Explorer 4.0+)
The blur method can be used to force the users focus away from the referenced <A>.

focus - (Internet Explorer 4.0+)
The focus method can be used to force the users focus onto the referenced <A>. For example:

Link1.focus()

would force the focus to the link, whose ID attribute is Link1.

<A...> Events
Besides the Standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart), each <A...> element/object accepts the following events (both in separate script functions and within the element). Note that while some are supported in various versions of Netscape (via the anchors array/collection and links array/collection, depending on whether it's <A HREF...> or <A NAME...>, or both), most are Internet Explorer (4.0 and above) specific and are standard Dynamic HTML Events. Each event handler details its browser support. Also detailed are the various methods and properties accessible by script functions for anchors within the document. To navigate to specific information, use the 'Anchor Scripting' popup in the title of this topic.

onblur - (Internet Explorer 4.0+)
The onblur event can be used to execute script functions when the particular link loses the focus. Note the subtle difference between this event and the onmouseout event in that removing the mouse from being over the link does not lose the focus. This requires either programmatically forcing another object to receive the focus, or by the user manually passing the focus to another object or control in the document, or clicking the document background
The example link below (containing ID="egOnBlurLink") executes the following script function when it loses the focus :

Sub changetext()
egOnBlurLink.innerHTML = "Now I've <STRONG>lost</STRONG> the focus"
End Sub

Give it a try : Click me, then click the document background

onfocus - (Internet Explorer 4.0+)
The onfocus event can be used to execute script functions when the particular link receives the focus. Note the subtle difference between this event and the onmouseover event in that passing the mouse over the link does not give it focus. This requires either programmatically forcing the link to receive the focus, or by using the 'tab' key to progress through the document links.
The example link below (containing ID="egOnFocusLink") executes the following script function when it receives the focus:

Sub ReceivedFocus()
egOnFocusLink.innerHTML = "I received the <STRONG>focus</STRONG>"
End Sub

Which causes the link text to be replaced with the new message. Try it below by pressing the button above the link and following the instructions.

Link text

Dynamic HTML in action! Note that clicking the link will also activate the script function (because the link receives the focus - before any reaction to clicking the link is determined), but that's not the point of the example. particular document.

© 1995-1998, Stephen Le Hunte


Document Localisation

Document localisation (known as 'HTML Inernationalisation' in the RFC documents) is a separate extension to standard HTML, to provide methods for creating HTML documents in other languages other than English. In most Western languages for example, the text flows from right to left and from the top to the bottom of the page. In other languages (Hebrew, Arabic, some Chinese dialects), this isn't the case. HTML Internationalisation is effectively a pair of specifications to address such issues.

A full discussion of HTML Internationalisation is outside the scope of this reference and so users are encouraged to obtain the following documents:

RFC1766 (Tags for the Identification of Languages)
This rfc discusses (in detail) the standardised use of the LANG attribute, for specifying the language content of elements. Basically, the LANG attribute takes any ISO-standard language code, which basically specifies, in two parts the language, followed by a sub-definition which specifies information such as dialect descriptors etc. For example, 'fr' for French, 'de' for German, 'en-valleys' for English language, with a South Wales 'valley' regional accent/dialect.

RFC2070 (Internationalization of the Hypertext Markup Language)
RFC2070 builds on RFC1766 and introduces attributes such as CHARSET, DIR and elements such as <BDO>. These attributes are intended to be supported by all elements that contain, or display some textual information that may be language dependant.

For further details about document internationalisation, readers are encouraged to seek out the two above-mentioned RFC documents.

Note that with recent advances in font-embedding technology with the version 4.0x browsers, it's possible to dynamically embed fonts in documents. These can include localised fonts (Japanese character sets for example). For example, for Netscape 4.0 and above, an author can create a font-definition file which can be included into a style sheet by using:

<STYLE TYPE="text/css">
<!--
@fontdef url(http://www.htmlib.com/fonts/htmlib.pfr);
-->
</STYLE>

or:

<LINK REL=FONTDEF SRC="http://www.htmlib.com/fonts/htmlib.pfr">

with elements then using the font as they normally would for style sheets. Internet Explorer 4.0 supports the @font-face style sheet property for embedding fonts. For more details about font embedding, visit either the Netscape, or Microsoft web sites.

© 1995-1998, Stephen Le Hunte


ActiveX

Microsoft's ActiveX technology, recently announced and supported by Internet Explorer 3.0 (for Windows 95/NT) only, represents a huge advance in the capabilities of the Internet Explorer. ActiveX has relaxed the OLE control requirements to practically nothing. While previous OLE controls (such as the .OCX files shipped with Visual Basic) contained a lot of baggage inappropriate to use on the internet, new ActiveX controls (conforming to the re-designed control requirements specification) can be a lot more streamlined, facilitating the easy production of high quality dynamic content for HTML documents.

Internet Explorer 3.0 allows for the use of ActiveX controls, active scripts (such as Visual Basic Script) and active documents. (NOTE : The embedding mechanism, using the <OBJECT> element has been designed in coalition with the W3C, a technical report of which can be found at http://www.w3.org/pub/www/TR/WD-object.html) ActiveX can be used encapsulate practically any application or applet, for use within HTML documents, or any ActiveX control container (i.e. Visual Basic, MS Access, Visual C++ etc.)

The specific method of construction of ActiveX controls is outside the scope of this reference. Users interested in the use of ActiveX components are encouraged to visit the Microsoft Internet Explorer web site at http://www.microsoft.com/ie/, where the ActiveX SDK is available and Visual Basic programmers are encouraged to investigate the Visual Basic Control Creation Edition, which can create ActiveX controls. (Currently this is available in beta form as a free download, visit http://www.microsoft.com/vbasic/ for more information).

Microsoft (and various other software companies) have made available a number of ActiveX controls, which can be readily downloaded and used within HTML documents. Also, the ActiveX development kit can be downloaded, this kit contains many ActiveX/ActiveX Script/Visual Basic Script examples as well as all the specifications necessary for ActiveX control authoring.

The Ncompass plug-in for Netscape allows embedded ActiveX controls to work within Netscape.

Example
This HTML fragment uses the 'label' ActiveX control. NOTE : Netscape will not display these controls. For these to work, you require Internet Explorer 3 with the control installed.

<OBJECT
classid="clsid:99B42120-6EC7-11CF-A6C7-00AA00A47DD2"
id=lbl1
width=50
height=325
align=left
>
<param name="angle" value="90">
<param name="alignment" value="2">
<param name="BackStyle" value="0">
<param name="caption" value="The HTML Reference">
<param name="FontName" value="Arial">
<param name="FontSize" value="24">
<param name="FontBold" value="1">
<param name="Forecolor" value="8421376">
</OBJECT>
<BR><BR>
<B>Welcome to the new Reference pages</B>

NOTE : Netscape will not display the label in the above example. As yet, Netscape doesn't support the <OBJECT> element.

© 1995-1998, Stephen Le Hunte


ActiveX examples

As the ActiveX controls available from Microsoft keep changing (and their number increases), the topics previously topics contained in this section have been removed, so as not to provide confusing/outdated information.

There are examples of ActiveX <OBJECT> embedding on the <OBJECT> page and Visual Basic Script examples on the Visual Basic Script page

© 1995-1998, Stephen Le Hunte


Client Pull

The main use of client pull is to cause a document to be automatically reloaded on a regular basis. For example, consider the following document :

<META HTTP-EQUIV="Refresh" CONTENT="x">
<TITLE>Document ONE</TITLE>
<H1>This is a document</H1>
Here's some text.

If loaded into a browser supporting Client Pull, it would re-load itself every x seconds.

In most cases, Client Pull is used to automatically load another document (automatic re-direction). For this, the HTTP response header needs to be :

Refresh: x; URL=http://foo.bar/blatz.html

and the corresponding <META> element syntax is:

<META HTTP-EQUIV="Refresh" CONTENT="x; URL=http://foo.bar/blatz.html">

This loads the document referenced by the URL part of the CONTENT attribute after x seconds.

© 1995-1998, Stephen Le Hunte


Data Binding

Dynamic Data Binding

Note : This is not by any means an exhaustive guide to Data Binding HTML elements, nor a control reference for the TDC control, or RDS. Some information on data binding is available in the Internet Client SDK, and some feature articles at the Sitebuilder Network describe Data Binding in greater detail. Data Binding is only currently supported by Internet Explorer 4.0.

Data binding represents a relatively simple way to display data in web pages without having to write extensive server side procedures. Basically, you insert a standard <OBJECT> element, which inserts a Data Source object. Then, HTML elements that support Data Binding can use the data referenced by the Data Source object in the HTML document.

Data Sources
Internet Explorer 4.0 supports 2 types of data sources. RDS (Remote Data Service - formerly known as ADC) and TDC (the Tabular Data Control).

Generally speaking, the RDS Data Binding component would be used if you wish to publish data from ODBC, SQL, Access, Oracle etc, databases, or you wish for users to be able to interact with the data from the database (i.e. add, or update records for example). The somewhat simpler to use TDC Data Binding component can be used if you have simple data to display. For example, if you just want to publish some data that's been extracted from a data source as a standard text file. Using the TDC Data Binding component doesn't allow any udpate/creation interaction with the data, although the user can sort, filter and manipulate the data in any way you allow through scripting in the document.

Displaying Data
Once you've decided on a Data Source object and what data is going to be presented to the user, you need to decide how that data is presented to the user. There's three basic options:

  1. Tabular
    Display the entire data set in one go in a table that essentially repeats itself for every record in the dataset referenced.
  2. Single Record
    You can choose to display one record at a time. This is useful for RDS based Data Binding - especially if you're allowing users to dynamically update the data in the data source. Only one record is displayed at a time (most commonly using <FORM> fields, allowing the user to change the data), with scripted navigation buttons, allowing the user to navigate forwards and backwards through the recordset.
  3. A combination
    Both Repeated tables and single-record presentation can be combined. This may be necessary with more complex data.

Binding HTML elements
Once the data source and presentation method are decided, the elements that are going to be used for the presentation of the data need to be bound to the Data Source. Below are the Data Binding HTML attribute extensions, supported by elements that support Data Binding.

DATAFLD
The DATAFLD attribute is used to set which column in the data referenced by the data source the element is going to use as the contents of its display. See the examples for an example

DATAFORMATAS
The DATAFORMATAS attribute accepts either text or HTML as its values and specifies whether the data being taken from the data source should be displayed literally DATAFORMATAS="text" or parsed before being displayed DATAFORMATAS="HTML". If the data source column being used contains HTML formatting, then DATAFORMATAS="HTML" should be explicitly used. DATAFORMATAS defaults to text if not specified, and any HTML from the data source would be treated as plain text.

DATAPAGESIZE
For repeated Data bound tables, the DATAPAGESIZE attribute specifies how many records should be displayed by the table at any one time. The table will then be repeated to display that number of records only. If this doesn't cover the entire contents of the data source data, then navigational buttons will need to be used to allow the user to retrieve the next 'block' of records. Using data bound tables in this way can greatly increase the perceived speed of your site, as the rendering time for smaller tables is less.

DATASRC
The DATASRC attribute is the most important Data Binding attribute, as it defines for the element, which Data Source object it is to use, to retrieve the data from. Once a Data Source object has been included in the document (with the <OBJECT> element), the DATASRC attribute should be set to #ID, where ID reflects the ID attribute of the <OBJECT> element used to insert the Data Source object.
Note that the DATASRC attribute can be inherited. In the case of repeated tables, if the DATASRC attribute specifies a valid data source in the main <TABLE>, then subsequent DATAFLD attributes in elements contained within the table need only specify a DATAFLD attribute - the data source referenced will be resolved by looking to the parent <TABLE> element for a valid DATASRC attribute.

Data Binding Scripting
When elements are data bound, they support a number of properties and events. The dataFld, dataFormatAs, dataPageSize and dataSrc properties are all read-only and directly reflect the DATAFLD, DATAFORMATAS, DATAPAGESIZE and DATASRC attribute settings for the elements. For the HTML elements that support in-place editing/Data Binding (e.g. <INPUT>, <SELECT>, <TEXTAREA> etc.) and certain other Data Consumers support the following events (when used with RDS Data Binding, which is allowing user updates to the data source). (Note : Review the element topic to see what (if any) of the following topics it supports. Also, these are events that are supported on the element object, not the data source object. For such information, consult the ADO/TDC/RDS documentation in the Internet Client SDK).

onafterupdate
The onafterupdate event is fired after data is transferred from the element to the data provider and will only fire after the onbeforeupdate event has fired and was successful.

onbeforeupdate
onbeforeupdate fires when a data bound element loses the focus, or the current document is unloaded and will only fire if the value of the element is different to the original value that was present when the element received the users focus. Note that onbeforeupdate is a cancelable event (setting returnValue=false for the Event object), which allows the document /script author a chance to validate the new data entered by the user on the client-side, before sending the data to the data provider.

onerrorupdate
The onerrorupdate event fires when a data transfer error occurs, through some action by the user (i.e. pressing the 'Stop' button on the browser for example), but not if a script generates the transfer error.

onrowenter
The onrowenter event fires on the data source control when the current record has been changed, so new data is available to populate the HTML display elements that are bound to the data source. Somewhat confusingly, this will typically happen after the onrowexit event has been fired.

onrowexit
The onrowexit event is fired immediately before the data source changes the current record (i.e. when the user has requested another record, or set of records by pressing a button perhaps). Note that unlike the onafterupdate and onbeforeupdate events, onrowexit is fired by the data source, not any of the HTML elements used to display the data. Changes to the data in the HTML elements should have been transferred to the data source (with validation being taken care of in the on*update events). onrowexit will also fire if the record position is changed through scripting.

onbeforeunload
The onbeforeunload event fires on the document (via the Window Object), firing before any onunload events, in order to give the author a chance to do any necessary data updates, before the page is unloaded. For example, the user makes some data edits, but before moving to another record (and having the changes committed to the data source through the on*update events), they close down the browser, or navigate to a different site. Any unsaved data changes should be taken care of in the onbeforeunload event. For security reasons, the onbeforeunload event is not cancelable, but a string value can be returned from the event, which is used as a prompt to the user.

Data Source Object events
Only the <OBJECT> and <APPLET> elements can insert Data source objects into a document. For these elements, the following properties and events have been introduced with data binding.

recordset
The recordset property returns a reference to the ADO recordset supplied by the Data Source object. For more information, see the ADO reference in the Internet Client SDK.

ondatasetchanged
The ondatasetchanged event is fired when a new set of data is available and a recordset can be retrieved from that set of data, or when an existing set of data has been changed - for example after a filter has been applied to the data.

ondataavailable
The ondataavailable event being fired indicates that more records for the referenced Data Source Object are available. It doesn't necessarily fire for every single additional record though.

ondatasetcomplete
When all the data in the referenced recordset is available, the ondatdasetcomplete event fires. For the ondatasetcomplete event, a reason parameter is available through the Event Object, which can have values of 0, 1 or 2, corresponding to successful completion, Aborted completion (i.e. 'Stop' button pressed for example), or Error (some other error) respectively.

<TABLE> Paging
For most small data sets, using the standard <TABLE> template method of table repetition will be OK, but for larger datasets, to prevent swamping the user with data, the DATAPAGESIZE attribute in the <TABLE> can be used to specify that only a certain number of records are retrieved and displayed at any one time. The table still repeats, as normal, but only by the number of times specified in the DATAPAGESIZE attribute.

When such a table is used, the previousPage() and nextPage() methods can be used (typically attached to buttons in the document) to refresh the table with the next, or previous DATAPAGESIZE records from the data set. Whenever the amount of records to display is less than the value of the DATAPAGESIZE attribute, then the table will simply repeat its content until all the records are displayed and then close - i.e. 'shrinking' to fit the amount of data shown.

Data Binding examples
Presented here is a brief and simple data binding example, with the necessary code explained. Firstly, the code will be examined, then the table example will be shown. For the purposes of this example, a portion of the HTMLib Comparison table will be used to provide the data.

Inserting the TDC control
The TDC control that ships with Internet Explorer 4.0 is just like any other ActiveX control and is inserted into a document with the <OBJECT> element, as below:

<OBJECT id=comp CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
<PARAM NAME="DataURL" VALUE="compdata.txt">
<PARAM NAME="UseHeader" VALUE="True">
 </OBJECT>

Notice the ID attribute that's been used - that's what is used to bind the <TABLE> to the Data Source.

Creating the <TABLE> template
Next, the <TABLE> template needs to be set up. The data file that we're using compdata.txt is a comma delimited file.

As you can see, in the data file there is references to images and some text that needs to be formatted as HTML. The main <TABLE> element used in the template is:

<TABLE datasrc="#comp" BORDER DATAPAGESIZE="10" ID="TABLE1">

The DATASRC attribute references the TDC control inserted into the document earlier and the DATAPAGESIZE attribute is set to 10, which means that only 10 records from the data set will be displayed at any one time. The main part of the table that is repeated for each record is:

<TBODY>
<TR>
<TD><DIV DATAFLD="Element" DATAFORMATAS="html"></DIV></TD>
<TD><IMG DATAFLD="IEx" WIDTH="11" HEIGHT="11" ALT="Y"></TD>
<TD><IMG DATAFLD="Netscape" WIDTH="11" HEIGHT="11" ALT="Y"></TD>
<TD><IMG DATAFLD="Mosaic" WIDTH="11" HEIGHT="11" ALT="Y"></TD>
<TD><DIV DATAFLD="Spec" DATAFORMATAS="text"></DIV></TD>
</TR>
</TBODY>

The DATAFLD attribute for each element specifies the column name that it uses from the data file (see above), with the DATAFORMATAS attribute specifying whether the two text fields are formatted as HTML, or text. Note that for the <IMG> element, the data taken from the data source is used for the SRC attribute of the element, so extra attributes, such as WIDTH and HEIGHT etc., still need to be specified. The <TBODY> element is used to separate what is actually repeated for each record. Only table rows/cells between the <TBODY> and </TBODY> elements are repeated.

What's next?
That's about as much as it takes to set up a data bound repeating table. The only HTML that's not been included in the sample code given above is additional stylings and the table header and footer. All that's left is a pair of navigational buttons. Remember, only 10 records are being displayed at any one time, so there must be a way for the user to navigate through the records. Any standard button will do, the script function it runs just needs to be:

TABLE1.nextPage()

or

TABLE1.previousPage()

Depending on whether it's navigating forwards or backwards through the recordset.

© 1995-1998, Stephen Le Hunte


Visual Filters

Note : The filters described here are only supported by Internet Explorer 4.0. Strictly speaking, Visual Filters should be detailed under Style Sheets as they are applied by using Style Sheet attributes. However, currently, they are a Microsoft Internet Explorer 4.0 specific style sheets extension (in early versions of Internet Explorer 4.0, the filters were implemented as a set of ActiveX controls, only being implemented as style sheet attributes in the later preview versions of Internet Explorer 4.0

The Visual Filters provide a way for manipulating visual objects (basically, anything on a page) to provide visual effects previously only manageable by using graphics. Also, through scripting, the applied filters are dynamically changeable, without reloading the document, which gives them a major advantage over images. Most commonly, they would be applied to <IMG> elements, but can be applied to <DIV> elements, which in turn can contain any HTML, so the visual filters can be applied to virtually any content. Note that if they are applied to text blocks (wrapped in <DIV> elements, then the <DIV> element must specify width and height style sheet attributes.

Inter-page/site transitions
Internet Explorer 4.0 also supports inter-page and inter-site transitions, using a Visual Filter set in the <META> element. These can be used to set transitions that play when a page is entered (i.e. first loaded) or exited or when a site (individual sites are determined by a change in the host - i.e. http://www.htmlib.com/ and http://faq.htmlib.com/ would be considered individual sites) is entered, or exited. Any of the standard Visual Filter effects can be used with either blend or reveal transitions. The syntax is as used for other Visual Filters, setting the filter type in the CONTENT attribute of the <META> element. For example:

<META HTTP-EQUIV="Page-Enter" CONTENT="filter:RevealTrans(Duration=3.000, Transition=23)">

This would play a random dissolve filter, over 3 seconds when the page is first displayed.

Note : For page-enter, page-exit, site-enter and site-exit transitions to work, the <META> element specifying the filter must be the first element in the <HEAD> section of the document and inter-page transitions do not appear to work across framed documents.

The Visual filters available are:

Filter effect | Description
Alpha | Sets a uniform transparency level.
Blur | Creates the impression of moving at high speed.
Chroma | Makes a specific color transparent.
DropShadow | Creates a solid silhouette of the object.
FlipH | Creates a horizontal mirror image.
FlipV | Creates a vertical mirror image.
Glow | Adds radiance around the outside edges of the object.
Gray | Drops color information from the image.
Invert | Reverses the hue, saturation, and brightness values.
Light | Projects a light source onto an object.
Mask | Creates a transparent mask from an object.
Shadow | Creates an offset solid silhouette.
Wave | Creates a sine wave distortion along the X axis.
XRay | Shows just the edges of the object.

Internet Explorer also supports two Transition Filters (Reveal and Blend transitions) for creating effects for revealing and blending objects.

The basic syntax for applying visual filters to an object is:

STYLE="filter:filtername(fparameter1, fparameter2...)}

where filtername is the name of the filter (as in the above table) and fparamter1... represents the parameters associated with each different filter type. These are detailed below, by filter name.

alpha
The Alpha visual filter can be used to set the opacity of an object, either the whole image, or a gradient region.

STYLE="filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity, Style=style, StartX=startX, StartY=startY, FinishX=finishX, FinishY=finishY)"
Opacity
Opacity level, 0-100, where 0 is transparent, 100 is fully opaque
FinishOpacity
Optional finish opacity level, 0-100, 0 is transparent, 100 is fully opaque
Style
values can be 0 (uniform), 1 (linear), 2 (radial) or 3 (rectangular)
StartX
X coordinate for start of opacity gradient
StartY
Y coordinate for start of opacity gradient
FinishX
X coordinate for finish of opacity gradient
FinishY
Y coordinate for finish of opacity gradient

For example:

Pressing the button below the image causes the following filter to be applied:

filter:Alpha(Opacity="0",FinishOpacity="75",Style="2")

blur
The Blur filter gives the impression that the object is moving.

STYLE="filter:Blur(Add = add, Direction = direction, Strength = strength)"
Add
Boolean value, any integer value adds the original object to the blurred object, '0' doesn't
Direction
0 - 315 in increments of 45 - specifies the direction of the motion blur to be added
Strength
An integer value representing the number of pixels of 'depth' for the motion blur

For example:

Pressing the button below the image causes the following filter to be applied:

filter:Blur(Add="1",Direction="45",Strength="5")

chroma
The Chroma filter makes a specific colour of the object transparent.

STYLE="filter:Chroma(Color = color)"
Color
Any colour (as a #rrggbb triplet). For the Chroma filter to work properly, this must be a colour used in the object

For example:

Pressing the button below the image causes the following filter to be applied:

filter:Chroma(Color="#FFFFFF")

dropShadow
The dropShadow filter adds a solid silhouette of the object, offset in the specified direction.

STYLE="filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)"
Color
A #rrggbb hex triplet, specifying the colour to use for the shadow
OffX
Horizontal offset for the shadow
OffY
Vertical offset for the shadow
Positive
A boolean value. Any nonzero integer (true) creates a shadow for non-transparent pixels in the object, '0' (false) creates a shadow for transparent pixels.

For example:

Pressing the button below the text causes the following filter to be applied:

filter:DropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1")

DropShadow this text!

flipH
The FlipH filter flips the object horizontally

STYLE="filter:FlipH"

For example:

Pressing the button below the text causes the following filter to be applied:

filter:FlipH

Flip this text!

flipV
The FlipV filter flips the object vertically

STYLE="filter:FlipV"

For example:

Pressing the button below the text causes the following filter to be applied:

filter:FlipV

Flip this text!

glow
The Glow filter adds radiance around the object, causing it to appear to glow.

STYLE="filter:Glow(Color=color, Strength=strength)"
Color
Any #rrggbb hex triplet for the colour of the glow
Strength
Glow intensity, from 0-100

For example:

Pressing the button below the text causes the following filter to be applied:

filter : Glow(Color="#6699CC",Strength="5")

Make me glow

gray
The Gray filter drops colour information from the object, rendering it in gray scales only.

STYLE="filter:Gray"

For example:

Pressing the button below the image causes the following filter to be applied:

filter:Gray

invert
The Invert filter reverses the hue, saturation and brightness of the object

STYLE="filter:Invert"

For example:

Pressing the button below the image causes the following filter to be applied:

filter:Invert

light
The Light filter can be used to make the object appear as if a light source is illuminating it. Initially, Light filters need to be applied, then have the light source specified with one of the following methods.

AddAmbient(R,G,B,strength)
Adds an ambient light source to the image. Ambient light is non-directional and lights the entire area. The sun emits ambient light. The syntax is:

call object.style.filters.Light(n).addAmbient(R,G,B,strength)

where R, G and B are values (0-255) to determine the ambient light colour and strength determines the 'amount' of light cast.

AddCone(x1,y1,z1,x2,y2,R,G,B,strength,spread)
Adds a cone light source to the image. Cone light is directional and lights only a defined area. The syntax is:

call object.style.filters.Light(n).addCone(x1,y1,z1,x2,y2,R,G,B,strength,spread)

where x1, y1 represent the location of the source light, x2 and y2 represent the location that the light is targeted towards, R, G and B are values (0-255) to determine the light colour, strength determines the 'amount' of light cast and spread determines the angle of spread (0-90, in degrees).

AddPoint(x,y,z,R,G,B,strength)
Adds an point light source to the image. Point light is emitted by light bulbs. The syntax is:

call object.style.filters.Light(n).addPoint(x,y,z,R,G,B,strength)

where x, y and z represent the point lights coordinates, R, G and B are values (0-255) to determine the ambient light colour and strength determines the 'amount' of light cast.

For example:

Pressing the button below the text causes the following script function to execute:

call document.all.divLight.filters.Light(0).addPoint(10,10,100,255,255,255,1000)
call divLight.filters.Light(0).addAmbient(0,0,255,50)

which adds a white point light and a blue ambient light to the text.

Light me up

The following methods are also available for the Light Visual filter:

ChangeColor(lightnumber, r,g,b, fAbsolute)
The ChangeColor method will change the colour of a light filter applied to an object. Use lightnumber to identify the particular light source whose colour is to be changed (it's position in the Lights array), r,g and b, represent the new colour to be changed to and fAbsoloute is a boolean flag. If fAbsoloute is true (nonzero), then the referenced Light filter colour is changed to the new amount specified, if false (i.e. zero), then the referenced Light filter colour is changed by the specified amount.

ChangeStrength(lightnumber, strength, fAbsolute)
ChangeStrength changes the strength of the particular Light filter (referenced by the lightnumber argument) to the strength specified in strength if the fAbsolute flag is true (nonzero), or by the amount specified if it's false (zero).

Clear
The Clear method removes all light sources for the referenced Light filter.

MoveLight(lightnumber, x, y, z, fAbsolute)
The MoveLight method moves the light source (for point lights), or the target location (for cone lights) and has no effect on ambient lights. The x, y and z values represent positions to move the light to, either absolutely (fAbsoloute=nonzero) or relatively (fAbsolute=false).

mask
The Mask filter takes all the transparent pixels in a visual object, sets them to a certain colour and creates a transparent mask from the nontransparent pixels. The syntax is:

STYLE="filter:Mask(Color=color)"

where Color is the colour to be used for the mask.

For example:

Pressing the button below the image causes the following filter to be applied:

filter:Mask (Color="#FFFFE0")

Mask Me

shadow
The shadow filter can be used to apply a shadow to the specified object. The syntax is:

filter:Shadow(Color=color, Direction=direction)
Color
A #rrggbb hex triplet that specifies the shadow colour
Direction
0-315 in 45 degree increments, specifying the direction that the shadow should be applied for.

For example:

Pressing the button below the image causes the following filter to be applied:

filter:Shadow (Color="#6699CC", Direction="135")

Spooky Shadows

wave
The wave causes sine wave distortion of the referenced object. The syntax is:

filter: Wave(Add=add, Freq=freq, LightStrength=strength, Phase=phase, Strength=strength)
Add
A Boolean value specifying whether the original object is added (true, nonzero) to the filtered object or not (false, zero)
Freq
An integer value specifying the number of waves to appear in the distortion
LightStrength
Strength of the light on the wave effect as a percentage value
Phase
Specifying the angular offset of the wave, in percentage (i.e. 0/100% = 360 degrees, 25% = 90 degrees
Strength
An integer value specifying the intensity of the wave effect

For example:

Pressing the button below the image causes the following filter to be applied:

filter: wave(Add="0", Phase="4", Freq="5", LightStrength="5", Strength="2")

Make me Wavey

xray
The xray filter causes the object to appear as if it had been x-rayed. The syntax is:

STYLE="filter:Xray"

For example:

Pressing the button below the image causes the following filter to be applied:

filter:Xray

Transition Filters
There are two types of transition filter supported by Internet Explorer 4.0, the Reveal Transition and the Blend Transition. As their names suggest, the Reveal Transition filter allows selective revealing of any visual object and the blend transition performs a fade in/out of a visual object.

RevealTrans Filter
The RevealTrans filter can be applied to any visual object, to selectively show or hide it, using a variety of different techniques. The basic syntax is:

STYLE="filter: revealtrans(duration=duration, transition=transitionshape)

where Duration is a time value that the transition will take. It accepts values in the format of seconds.milliseconds For example 2.1 = 2 seconds, 100 milliseconds. Transition can be any one of the following:

Value | Description
0 | Box in
1 | Box out
2 | Circle in
3 | Circle out
4 | Wipe up
5 | Wipe down
6 | Wipe right
7 | Wipe left
8 | Vertical blinds
9 | Horizontal blinds
10 | Checkerboard across
11 | Checkerboard down
12 | Random dissolve
13 | Split vertical in
14 | Split vertical out
15 | Split horizontal in
16 | Split horizontal out
17 | Strips left down
18 | Strips left up
19 | Strips right down
20 | Strips right up
21 | Random bars horizontal
22 | Random bars vertical
23 | Random effect (any of the other 23)

Note : The Reveal Transition Filter is most useful when used with the following events:

Apply
The Apply method is used to actually apply the filter. Event though it may have been specified in the STYLE attribute of the element, it still needs to be applied via the apply method.

Play
The Play method causes the referenced Reveal Transition filter to start playing. It starts the transition type, for the time specified in the Duration attribute (if no Duration argument is specified in the method. A Duration can be specified in the Play method, which will override any settings in the elements filter declaration.

Stop
The Stop method is used to stop a transition and can be called at any time while the transition is playing. To determine whether the transition is playing, use the status property (described below).

Properties
Reveal Transition filters have status and duration properties. The Duration property reflects the current duration set for the filter and status returns a value depending on the current status of the transition. "0" = transition stopped, "1" = transition applied, "2" = transition playing.

For example. Pressing the button below the (currently hidden) image below starts the random dissolve transition. The image is initially hidden, so that the filter is applied to dissolve the image into appearance, rather than dissolve it away.

The script function executed when the button is pressed is:

call logo.filters.item(0).Apply()
logo.style.visibility=""
call logo.filters.item(0).Play()

which applies the filter, then resets the images visibility before playing the dissolve transition.

BlendTrans Filter
The BlendTrans filter can be applied to any visual object, to fade it in or out, over a certain time period. The basic syntax is:

STYLE="filter: blendtrans(duration=duration)"

where Duration is a time value that the transition will take. It accepts values in the format of seconds.milliseconds For example 2.1 = 2 seconds, 100 milliseconds.

For example, below there is an image above the button that's not displayed yet. When the button is clicked, the following script function is executed:

call logo2.filters.item(0).Apply()
logo2.style.display="inline"
logo2.style.visibility=""
call logo2.filters.item(0).Play()

which applies the blendTrans filter on the image, sets it to display as an 'in-line' element, makes it visible and finally, plays the transition (causing it to blend in over a 3 second period).

© 1995-1998, Stephen Le Hunte


Dynamic HTML overview

Dynamic HTML

What is Dynamic HTML?
Reviewing the W3C 'Document Object Model' section http://www.w3.org/pub/WWW/MarkUp/DOM/, it's clear what the W3C sees as 'Dynamic HTML'. The current draft requirements detail an 'open' standard object model that allows total document and content manipulation, that all elements (event those not directly supported by the browser) within the document are programmable objects with support for mouse and keyboard events, that all the document content can be manipulated (content added, changed or removed 'on-the-fly', without a return trip to the server) and that the document style sheet settings are also exposed as programmable objects, allowing stylings to be changed on-the-fly. As such, it represents a significant enhancement to static HTML and also to currently available 'dynamic' methods (i.e. scripting, server-side scripting/CGI etc.) 'Dynamic HTML' is apparently supported by both Microsoft and Netscape in Internet Explorer 4.0 and Communicator 4.0. An 'open' standard supported by both browsers...surely this is too good to be true...

Implementation differences
Yes, it is!
Netscape's implementation of 'Dynamic HTML' revolves around a slightly enhanced scripting object model, dynamic style sheets (through proprietary Javascript style sheets), absolute positioning (primarily through the use of layers - see <LAYER> and <ILAYER> and the Layer Object for all style sheet positioned elements). Netscape does support full CSS positioning of elements, but their position can only be manipulated by working through the Layers collection - and dynamic fonts (allowing fonts to be embedded in pages and downloaded along with them). Microsoft's implementation revolves around a significantly enhanced object model, dynamic style sheets (through the W3C standard CSS object model), absolute positioning (for all elements) and also implements some of the finer points of what 'Dynamic HTML' should be by allowing direct document and content manipulation (the ability to add, remove, or change any element or content). Essentially, Microsoft have fully embraced the 'Document Object Model concept and HTML 4.0, previously known as Cougar, for support in Internet Explorer 4.0.
To see what the W3C envisage as 'Dynamic HTML', visit http://www.w3.org/pub/WWW/MarkUp/DOM/drafts/requirements.html, as mentioned above, a document that details the requirements of the 'Document Object Model' - the name the W3C is using, where Microsoft and Netscape use 'Dynamic HTML'.

Dynamic HTML specifics
The following pages detail the various standard 'Dynamic HTML' properties, methods and events. Note that most of these are supported for almost every possible HTML element by Internet Explorer, with Communicator support being somewhat more limited. The details are basically an overview (with examples) of the properties, methods and events. For element/object specific properties, methods and events (and relevant browser support details), see the specific element/object topics.

© 1995-1998, Stephen Le Hunte


Dynamic HTML standard Events

Standard DHTML Events

Standard Events
NOTE : Certain events detailed here are supported by some versions of Netscape and older versions of Internet Explorer for certain HTML elements (see the particular element for browser specific details). To use browser v4.0 specific scripting, ensure your target audience is using the required browser, or they've been re-directed appropriately.

onclick
Unsurprisingly, the onclick event can be used to execute script functions when the user clicks on the particular element. Internet Explorer 4.0 supports this event for almost all HTML elements, while Netscape and earlier versions of Internet Explorer only support it in a handful of elements (such as links, image map 'hot-spots' etc). See the onmouse* event ordering section for details of the order in which mouse related events occur.

ondblclick
The ondblclick event occurs when the user double-clicks on the particular element (almost all elements for Internet Explorer 4.0, link, document and area objects (see <A>, Document Object and <AREA> for details) for Communicator). For example, the following link does not respond to single-clicking in the normal fashion, but double-clicking navigates to the new document. This event handler is Internet Explorer 4.0 and above and Netscape 4.0 and above specific. Netscape 3.0 fully supports the onclick event and would 'kill' the link when single-clicking, but doesn't support the ondblclick event, so essentially, to Netscape 3.0 users, the link would be totally dead. Internet Explorer 3.0x users would receive a scripting error, as Internet Explorer 3.0 doesn't support the link 'killing' method.

<A HREF="other_page.htm" onclick="javascript:return false" ondblclick="self.location.href ='other_page.htm'">Link text</A>

Give it a try (note that the link won't navigate anywhere, even on double-clicking, but will present a message for the purposes of the example).

Link text

Note that the system mouse settings are used to determine the difference between a single and double-click - as a HTML author, you have no method for setting what counts as a double-click. See the onmouse* event ordering section for details of the order in which mouse related events occur.

ondragstart
Whenever the user focuses on an element or a text selection and attempts to drag it somewhere different in the document, the ondragstart event is fired. As a simple example, the following link text will change when the link is dragged.

Give it a try: Drag me

NOTE : For the purposes of this example, the default action of the dragging procedure has been cancelled. The normal action would be to load the document referenced in the link on top of all documents currently displayed, which would 'break' the HTMLib display. This means that the 'dragging' cursor (the normal pointer, with a 'shortcut' attachment) will not be seen when dragging the example.

onfilterchange
Whenever a Filter applied to an element is changing, it fires an onfilterchange event. The srcFilter property of the Event Object can be used to obtain a reference to the exact filter object that is causing the event to occur.

onhelp
The onhelp event is used to execute script functions when the user presses the 'F1' key. Note that for the event to be fired from an object, the object must currently have the focus (i.e. the user has 'tabbed' to the link, or clicked on it). It could be used for example, to open a new window, containing user-assistance on the current document, or the specific element. As a simple example, the following link only responds to double-clicking (see ondblclick above), so provides a 'help' message to the confused user who is single-clicking it (provided they press the F1 key after single-clicking the link produced no response).

<A HREF="other_page.htm" LANGUAGE="Javascript" onclick="return false"
onhelp="alert ('Double-click this link to view the target document');return false"
ondblclick="self.location.href= 'other_page.htm'">Link text</A>

Give it a try : Link text

Note the use of the return false keyword in the onhelp event handler, to cancel the default action of the event. Internet Explorer 4.0's default action on pressing the 'F1' key (firing the onhelp event is to bring up the Internet Explorer help file. Using return false in the event handler prevents this happening.

onkeydown
The onkeydown event can be used (in conjunction with the event object) to determine whether the user is holding down any keys when the referenced element has the current users focus. By using the keyCode and altKey, ctrlKey and shiftKey properties of the event object it's possible to determine any key combination that the user may be using when the element has the focus. Note : The onkeydown event is supported by Netscape Communicator for the document, image, link and textarea objects (see the relevant Document Object, <IMG>, <A> and <TEXTAREA> topics)

onkeypress
The onkeypress event is similar to the onkeydown event (described above), except that it returns the UNICODE value of the key or keys being pressed when the event occurs. This allows for case-sensitivity detection when using the shift key in conjunction with other keys. For example, the onkeydown event is fired by pressing the 'Alt', 'Ctrl', or 'Shift' keys and the keyCode property of the event object returns the corresponding code, whereas the onkeypress event isn't. If the onkeypress event is used instead, then the 'Alt', 'Ctrl' and 'Shift' keys can be combined with other keys to fire the event. I.e. 'Shift+S' (returning the keyCode value for a capital 'S') can be separated from 's' (returning the keyCode value for a lower case s). Note : The onkeypress event is supported by Netscape Communicator for the document, image, link and textarea objects (see the relevant Document Object, <IMG>, <A> and <TEXTAREA> topics)

onkeyup
The onkeyup event is fired when a previously pressed key is released while the referenced element has the focus. It returns the same keyCode property as the onkeydown event would. Note : The onkeyup event is supported by Netscape Communicator for the document, image, link and textarea objects (see the relevant Document Object, <IMG>, <A> and <TEXTAREA> topics)

onmousedown
The onmousedown event fires whenever the user presses a button on the mouse, with the event being initially fired for the element that has the focus when the mouse button is clicked, and bubbling up through the element objects until an onmousedown event handler is found. (Note : Initial versions of the Internet Client SDK detailed the onmousedown event as having various arguments for detecting keystates and the mouse button pressed etc. - these have since been removed from the event declaration, as they're supported through the Event Object for all events that occur).
See the onmouse* event ordering section for details of the order in which mouse related events occur. Note : Netscape Communicator supports the onmousedown event for button, document and link objects - see <INPUT>, Document Object and <A> topics)

onmousemove
The onmousemove event occurs whenever the users mouse moves over a document (essentially, it is continually firing). onmousemove event handlers can be written for almost any element (for Internet Explorer 4.0 - Netscape 4.0 only supports it for the Document Object and Window Object), which will then handle the onmousemove events for whenever the mouse moves over the referenced elements only. Note that nested onmousemove events should cancel the bubbling of the event in order to work properly. For example, consider:

<P onmousemove="top.status='Over the P'">Here's some <EM onmousemove="top.status='Over the EM'">italicised</EM> text</P>

The status bar will imply that the mouse is only ever moving over the <P> element contents, as the event bubbles from the <EM> element, when the mouse moves over it, causing both onmouseover events to fire. However:

<P onmousemove="top.status='Over the P'">Here's some <EM onmousemove="top.status='Over the EM';self.event.cancelBubble=true">italicised</EM> text</P>

Try it, the second line cancels the event bubbling

Here's some italicised text

Here's some italicised text

would cancel the bubbling and the two distinct status bar messages will be seen.
See the onmousedown event for details of the correct argument list order and values of the mouse button and key states.

onmouseout
The onmouseout event fires when the users mouse leaves the area defined by the referenced element. See the onmouse* event ordering section for details of the order in which mouse related events occur. Note : Netscape supports the onmouseout event for area, layer and link objects. See <AREA>, <LAYER>/<ILAYER> and <A>)

onmouseover
The onmouseover event fires when the users mouse enters the area defined by the referenced element. See the onmouse* event ordering section for details of the order in which mouse related events occur. Note : Netscape supports the onmouseout event for area, layer and link objects. See <AREA>, <LAYER>/<ILAYER> and <A>)

onmouseup
The onmouseup event can be used to execute script functions after the users mouse has been pressed and released - the opposite of the onmousedown event in effect. See the onmouse* event ordering section for details of the order in which mouse related events occur. Note : Netscape supports the onmouseout event for button, document and link objects. See <INPUT>, Document Object and <A>)

onselectstart
The onselectstart event is fired whenever the users starts to select some text that is the contents of the referenced element. For example, selecting any of the text in the white paragraph below causes it to change its style (fairly drastically) :

Selecting any of this text will cause it to change its colours...sometimes wildly

onmouse* event ordering
During mouse events for which there is no button interaction (i.e. no clicking of either mouse buttons), the events occur in the following order:

onmouseover
onmousemove
onmouseout

So, any script functions executed by the onmouseover event will occur first, followed by those attached to the onmousemove event, followed by those attached to the onmouseout event.

For mouse events that also entail 'clicking' of the mouse, the event order changes to:

onmouseover
onmousemove
onmousedown
onmouseup
onclick
ondblclick
onmouseout

so any script functions executed by onmousedown or onmouseup events would occur before the onclick or ondblclick events.

© 1995-1998, Stephen Le Hunte


Dynamic HTML standard Methods

Standard DHTML Methods

Standard Methods
All of the following methods are specific to Internet Explorer 4.0's Dynamic HTML object model. None are supported by Netscape or any previous versions of Internet Explorer

click
The click method can be used to 'click' a referenced object through scripting, forcing an onClick event for the particular element. For example, click the top of the following two links and it 'clicks' the second link:

Link 1
Link 2

contains
The contains method can be used to determine whether the referenced element totally encloses (contains) another element. For example:

<P ID="para1">Some <STRONG ID="str1">strong, bold</STRONG> text</P>

alert (para1.contains(str1)) would return true.

getAttribute
the getAttribute method can be used to retrieve the value of a specific attribute for the referenced element. For example:

varCol=document.all.MySpan.getAttribute("BGCOLOR",false)

would retrieve the value of the BGCOLOR attribute of the element whose ID is MySpan. The false argument is a boolean value (i.e. true or false), specifying whether or not the search to find the attribute is case-sensitive or not. 'True' means that the attribute case must match that give in the attribute value, for the getAttribute method to work - the default value is 'false'. Depending on the value of the attribute, the getAttribute method returns either a string, a number, or a variant.

insertAdjacentHTML
The insertAdjacentHTML method can be used to insert a new HTML element into the document, without removing a previous one (as manipulation of the innerHTML and outerHTML Properties insertAdjacentHTML places the string specified in the second argument, at the position specified in the first argument. For example:

document.all.tags("P").item(1).insertAdjacentHTML("BeforeBegin", "<P>Here's a new paragraph")

would add <P>Here's a new paragraph before the second paragraph in the document. The possible values for the positioning are:

BeforeBegin
Insert the HTML before the referenced elements opening element.
AfterBegin
Insert the HTML after the referenced elements opening element, but before its text content
BeforeEnd
Insert the HTML before the referenced elements closing element, after its text content.
AfterEnd
Insert the HTML after the referenced elements closing element

insertAdjacentText
The insertAdjacentText method is essentially identical to the insertAdjacentHTML method, except that it inserts literal text, regardless of the strings actual content. It takes the same argument set - i.e. (string, position) where position can be one of the four values mentioned above.

removeAttribute
removeAttribute can be used to remove an attribute and its associated value from the referenced element. This is subtly different to dynamically setting the attribute property value to nothing. Using the removeAttribute value forces removal of the attribute, as if it had never been set in the first place. The removeAttribute method returns a boolean (i.e. true or false) value depending on whether the attribute was successfully removed or not. Its optional second argument is a boolean value, which specifies whether to use a case-sensitive search to locate the attribute to remove. For example:

bKilldataSrc=dataTable.removeAttribute "DATASRC", "false"

would make the bKilldataSrc true or false, depending on whether the DATASRC attribute was removed from the element referenced by dataTable. The search is case-insensitive. The default value for the case-sensitivity argument, if none is given, is 'true'.

scrollIntoView
The scrollIntoView method can be used to force the current viewing window to scroll to a referenced element object. It accepts a boolean argument (true or false) which determines whether the window should be scrolled so that the referenced element object is at the top (true) or bottom (false) of the window. For example, the button below will scroll the links given in the click example, so that they're at the bottom of the viewing window.

setAttribute
Like the other *Attribute methods, setAttribute can be used to set the value of a specific attribute for a referenced element. For example:

MyTable.setAttribute "DATASRC", "#Comp1", true

would set the DATASRC attribute to #Comp1 for the element referenced by MyTable. Basically, the first and second arguments for the method specify the attribute and its value to be set, with the third argument being 'true' or 'false', specifying whether case sensitive setting of the attribute is used or not. If this is set to 'true' (the default) and the attribute name you specify for the referenced element has a different case than any existing setting of that attribute, then a new attribute will be created, with the value specified in the value argument.

© 1995-1998, Stephen Le Hunte


Dynamic HTML standard properties

Standard DHTML Properties

Standard Properties
Internet Explorer 4.0's scripting object model is all-encompassing, to the point that unknown attributes for known elements are available through scripting. I.e. for any element that Internet Explorer 4.0 supports, any attributes of your choice can be added to the element and their values are available through scripting. Inquisitive readers will have noticed that the title documents in the HTMLib use XSIZE and YSIZE attributes in their links. These are available to the rest of the HTMLib for scripting, enabling the popups to work. Detailed below are the standard Dynamic HTML properties supported for practically every element in Internet Explorer 4.0

className
The className property can be used to determine, or set, which particular style sheet class the referenced element uses, from the documents style sheet settings, i.e. whatever the CLASS attribute is set to. For example, the following <A> element utilises the style sheet class "warning"

<A HREF="warning.htm" CLASS="warning">Read the warning first</A>

thus, its className property would be warning.

Dynamically setting an elements class to one that doesn't exist causes the element to use the browsers default settings for the element, or the default style sheet setting for the element in any style sheet declarations attached to the document.

dataFld
The dataFld property directly reflects the value of the elements DATAFLD property, for those elements that support Data Binding. The DATAFLD attribute is used to set the column name that the element will take data from - the column name being a valid column in the Data source object referenced by the DATASRC attribute/property (see below). For more information, see the Data Binding topic.

dataFormatAs
The dataFormatAs property directly reflects the DATAFORMATAS attribute for those elements that supported HTML formatted Data Binding. The DATAFORMATAS attribute can have values of "Text" or "HTML" and specifies whether the data provided by the Data Source object should be treated literally ("Text"), or parsed ("HTML"). Note that if the data contains HTML formatting, but the DATAFORMATAS="HTML" attribute is not set, it will be treated as plain text.

dataSrc
The dataSrc property directly reflects the DATASRC attribute for elements that support Data Binding. The DATASRC attribute referenced the Data Source that has been bound to elements in the document using the <OBJECT> element. For more information, see the Data Binding topic.

document
The document property contains a reference to the Document Object in which the element is contained. Through it, various properties of the Document Object can be obtained.

filters
The filters collection property represents a Filters collection applied to the referenced element. For example:

<IMG ID="logo" SRC="images/logo2.gif" WIDTH="384" HEIGHT="154" STYLE="filter:revealTrans(Duration=3.0, Transition=12);VISIBILITY:hidden" ALT="HTMLib logo" ALIGN="center">
. . .
call logo.filters.item(0).Apply()
logo.style.visibility=""
call logo.filters.item(0).Play()

The image has a Transition filter applied to it and is later referenced in a script by calling the first item of the elements filters collection.

id
The id property reflects the referenced element's ID property (if set), which contains a unique identifier for the element, within the document content.

innerHTML
The innerHTML property reflects the content contained by the referenced element, including all the HTML elements. For example, consider the following <ADDRESS> element:

<ADDRESS ID="Address1">
Stephen Le Hunte,<BR>
1, HTMLib Way,<BR>
Swansea,<BR>
U.K.
</ADDRESS>

The address' innerHTML property (obtained by referencing it via its ID property) would be:

Stephen Le Hunte,<BR>1, HTMLib Way,<BR>Swansea,<BR>U.K.<BR>

The innerHTML property has read-write permissions, meaning that HTML content can be 'written' into any element through scripting, with the document being re-displayed accordingly, dynamically re-positioning surrounding document content. The new HTML content would adopt whatever stylings (and ID) were applied to the referenced element, before the new content was supplied. Note that inappropriate nesting cannot occur when using the innerHTML property. For example, a <BUTTON> cannot contain another <BUTTON> element, so trying to apply some <BUTTON> HTML to the innerHTML property of another <BUTTON> element will fail. Also, note that adding elements through an elements innerHTML property changes the documents All collection and any associated sourceIndex properties.

innerText
Like the innerHTML property described above, the innerText property reflects the content of any referenced element, but without the actual HTML elements included in the content. For example, the innerText property of the above example would be:

Stephen Le Hunte,
1, HTMLib Way,
Swansea,
U.K.

Note that the <BR> element's are honoured. If the contents of the innerText property were displayed using the alert method (see the Window Object for details), then the displayed message would include such white space (Paragraph elements (<P>) and horizontal rules(<HR>) are other elements that are represented in the innerText property)

The innerText property has read-write permissions, meaning that text content can be 'written' into any element through scripting, with the document being re-displayed accordingly, dynamically re-positioning surrounding document content. The new text written into the element would adopt whatever stylings (and ID) were applied to the element beforehand.

isTextEdit
The isTextEdit property has a boolean value, reflecting whether or not the referenced element is one that accepts text editing. Currently, this is just <BUTTON>, <TEXTAREA> and <INPUT TYPE="text"> elements. If the referenced element is such an element, then the isTextEdit property value would be true, otherwise it's false. The isTextEdit property is most useful when trying to determine whether the referenced object can have a TextRange Object created from its contents. Those elements that return true can, those that return false can't.

lang
The lang property directly reflects the referenced elements LANG attribute value (if set). LANG is a standard HTML attribute supported by most elements for describing the language of the elements content. For more information, see the Document Localisation topic.

language
The language property reflects the referenced elements LANGUAGE attribute value (if set). As most elements support direct in-line scripting (i.e. using scripting event handlers within the element), the LANGUAGE property is used to explicitly tell the browser which particular scripting language the event handler information is written for. Internet Explorer defaults to using JScript (the Microsoft JavaScript implementation) to attempt to execute in-line script functions.

offsetHeight
The offsetHeight property is read-only and returns a value specifying the height of the referenced element (in pixels), relative to its parent containing element.

offsetLeft
The offsetLeft property is also read-only and returns a pixel value for the referenced elements left offset, relative to its parent containing objects left-most position.

offsetParent
The offsetParent element is read-only and returns a reference to the current referenced elements parent containing element object. This is the element whose positions are used to determine the relative offset* properties for any referenced element.

offsetTop
The offsetTop property is also read-only and returns a pixel value for the referenced elements top offset, relative to its parent containing objects top-most position.

offsetWidth
The offsetWidth property is read-only and returns a value specifying the width of the referenced element (in pixels), relative to its parent containing element.

outerHTML
The outerHTML property is much like the innerHTML property, except that reflects the HTML of the whole element, including any content. For example:

<A HREF="#footnote"><STRONG>Make sure</STRONG> to read the footnotes</A>

would have an innerHTML property of <STRONG>Make sure</STRONG> to read the footnotes, while its outerHTML property would be:

<A HREF="#footnote"><STRONG>Make sure</STRONG> to read the footnotes</A>

I.e., exactly what the element is.

The outerHTML property has read-write permissions, meaning that entire HTML elements can be changed to a different element through scripting, with the document being re-displayed accordingly, dynamically re-positioning surrounding document content. The only styling (and ID) information applied to the new element would be whatever is specified in the new contents of the outerHTML property. Note that changing an element through its outerHTML property changes the documents All collection and the referenced elements sourceIndex property.

outerText
Like the innerText property described above, the outerText property reflects text contained in the referenced element. Any text outside the element, is not considered part of the element's content, so the values of the two properties are identical. However, as the outerText property has read-write permissions, entire HTML elements can be replaced with straight text through scripting, with the document being re-displayed accordingly, dynamically re-positioning surrounding document content.

parentElement
The parentElement property can be used to obtain a reference to the element immediately preceding the element specified, whose properties and/or methods can be manipulated and/or invoked respectively. Note that the parentElement property is read-only and works on a 'content-model' basis. This means that the parentElement property of elements will be their containing Block Formatting Element, with the parentElement property of BLock formatting elements being the <BODY> element, unless they're contained in another Block-level element.

parentTextEdit
If the isTextEdit property returns false, indicating that the referenced element does not support TextRange object creation, then the parentTextEdit can be used to determine the next element object up in the element hierarchy that does support text editing (and the creation of TextRange objects) and would completely enclose the referenced element in a TextRange object.

recordNumber
When a data bound repeating table is set up (i.e. one that shows only a certain amount of records from a Data Source at any one time), the recordNumber property reflects the current record number, from the data source that the referenced object is displaying. For more information on Data Binding, see the Data Binding topic.

sourceIndex
For each document, Internet Explorer creates an indexed array of all the opening HTML elements. The sourceIndex property reflects the referenced elements position in this array. Essentially, the value returned by the sourceIndex property is identical to the elements index in the All collection. For an example, consider the following document :

<HTML>
<HEAD><TITLE>Document Title</TITLE>
</HEAD>
<BODY>
<P>Here's some text, <A HREF="other_page.html">Here's a link</A>
</BODY>
</HTML>

The anchors sourceIndex property would be 5. The <HTML> element would be 0, the <HEAD> element 1, the <TITLE> element 2 etc.

NOTE : Internet Explorer 4.0 inserts <HTML>, <TITLE>, <HEAD> and <BODY> into the sourceIndex array and All collection regardless of whether they existed in the document or not. Also, <TBODY> elements are inserted after any <TABLE> elements (if no <TBODY> element is set). So, if the above document were modified to :

. . .
<P>
<TABLE>
<TR><TD>
Here's some text, <A HREF="other_page.html">Here's a link</A>
</TD></TR>
</TABLE>
. . .

then the anchors sourceIndex property would be 9 (instead of 8 as expected). The sourceIndex property is read-only.

style
The style property reflects any stylings that the referenced element may have. Internet Explorer 4.0 only reflects in-line stylings, included using the STYLE attribute in the opening element and not those attached to an element via a style sheet (within the document, or external).
The style property actually returns a reference to a Style object for the referenced element, whose properties and methods can then be manipulated or invoked. See the Style Object topic for more details.

tagName
The tagName property reflects the actual element name. For example, for anchors, their tagName property is A, <TABLE> returns TABLE etc. The tagName property is read-only and would prove useful for determining a particular element through its sourceIndex property, or its position in the All collection.

title
The title attribute reflects the referenced elements TITLE attribute setting (if set). TITLE attribute values are generally used (in Internet Explorer 4.0) as ToolTips, displayed when the mouse passes over the particular element. It is possible to dynamically change the title property through scripting.

© 1995-1998, Stephen Le Hunte


The All Collection

Note : The All collection is Internet Explorer 4.0 specific. As Netscape doesn't support scripting for every HTML element, it doesn't support the All collection.

The All collection is an ordered, indexed array, containing a reference to every opening HTML element in a document. For example, consider the following document:

<HTML>
<HEAD>
<TITLE>Test Document</TITLE>
</HEAD>
<BODY>
<P>This is a test
<HR>
</BODY>
</HTML>

The all collection would be indexed from 0 to 5, with the elements being positioned:

Element | All index
<HTML> | 0
<HEAD> | 1
<TITLE> | 2
<BODY> | 3
<P> | 4
<HR> | 5

Element Object would normally be retrieved by their index in the All collection (for example, above document.all(3) contains a reference to the <BODY> element), but a string value can be used, as long as that string is a valid identifier (ID attribute value) for an element in the document.

E.g., changing the above example to:

<HTML>
<HEAD>
<TITLE ID="Title1">Test Document</TITLE>
</HEAD>
<BODY>
<P>This is a test
<HR>
</BODY>
</HTML>

...would mean that document.all('Title1') would be a reference to the <TITLE> element (whose ID is 'Title1'). This would be the same as document.all(2). Note that it is also equivalent to using document.all.item('Title1') (see the item method below).

Note : The All collection always includes a reference to <HTML>, <HEAD> and <BODY> elements, whether they exist in the document or not.

Properties

length
The length property returns the number of elements in the collection. Note that the length count starts at 1, not 0 as the all collection index does. Therefore, the length property may return a value of 5, but to access the 3rd element, you'd need to use document.all(2).property

Methods

item
The item method retrieves single items, or sub-collections from the all collection. It accepts the following arguments:

all.item(index, sub-index)

If index is a number, then the method returns a reference to the element object at that position in the all collections index. I.e. (using the example above)

strTag=document.all.item(2).tagName

would make strTag be TITLE - the value of the <TITLE> elements tagName property. As you can see, this is effectively the long-hand version of using document.all(2).property.

If the index property is a string value, then the item method returns a sub-collection, containing a reference to every element in the document that has its ID or NAME attribute set to the string contained in the index argument. To retrieve certain element objects from this sub-collection, the sub-index argument must be used. For example, assume that 5 elements in a document all have the NAME attribute set as radColour (these imaginary elements are radio buttons). To interrogate the 3rd of these elements, you could use:

strThird=document.all('radColour',2).propertyName

tags
The tags method returns a collection of element objects whose tagName property is the same as the tag argument used for the method. This differs from the item property in that that interrogates ID and NAME values if necessary.

document.all.tags('EM')

would return a collection of all the <EM> objects in the document.

© 1995-1998, Stephen Le Hunte


The Anchors Collection

Note : Both Netscape and Internet Explorer support the Anchors collection (Netscape call it an array). For properties, methods and events that are supported by <A> elements, see the <A> topic.

The Anchors collection is an ordered, indexed array, containing a reference to every <A> element in a document, that has a valid NAME and/or ID attribute. (The Links collection contains <A HREF="..." ...> elements).

Anchor Objects would normally be retrieved by their index in the Anchors collection. I.e.:

document.anchors(1).title

returns the TITLE attribute of the second anchor in the document (which may not be the second <A> element in the document).

A string value can be used however, as long as that string is a valid identifier (ID attribute value) for an element in the document.

E.g.

document.anchors('Anchor1').title

would return the TITLE attribute of the anchor whose NAME property is 'Anchor1'.

Properties

length
The length property returns the number of anchors in the collection. Note that the length count starts at 1, not 0 as the anchors collection index does. Therefore, the length property may return a value of 5, but to access the 3rd anchor, you'd need to use document.anchors(2).property

Methods

item
The item method retrieves single items, or sub-collections from the anchors collection. It accepts the following arguments:

anchors.item(index, sub-index)

If index is a number, then the method returns a reference to the anchor at that position in the anchors collections index. I.e. (using the example above)

strTag=document.anchors.item(2).title

would make strTag be the value of the TITLE attribute of the documents third anchor. As you can see, this is effectively the long-hand version of using document.anchors(2).property.

If the index property is a string value, then the item method returns a sub-collection, containing a reference to every anchor in the document that has its NAME or ID attribute set to the string contained in the index argument. To retrieve certain element objects from this sub-collection, the sub-index argument must be used.

© 1995-1998, Stephen Le Hunte


The Applets Collection

Note : Both Netscape and Internet Explorer support the Applets collection (Netscape call it an array). For properties, methods and events that are supported by <APPLET> elements, see the <APPLET> topic.

The Applets collection is an ordered, indexed array, containing a reference to every <APPLET> element in a document.

Applet Objects would normally be retrieved by their index in the Applets collection. I.e.:

document.applets(1).code

returns the CODE attribute of the second applet in the document.

A string value can be used however, as long as that string is a valid identifier (ID attribute value) for an <APPLET> element in the document.

E.g.

document.applets('MyCoolApplet').code

would return the CODE attribute of the applet whose NAME (or ID) property is 'MyCoolApplet'.

Properties

length
The length property returns the number of applet objects in the collection. Note that the length count starts at 1, not 0 as the applets collection index does. Therefore, the length property may return a value of 5, but to access the 3rd anchor, you'd need to use document.applets(2).property

Methods

item
The item method retrieves single items, or sub-collections from the applets collection. It accepts the following arguments:

applets.item(index, sub-index)

If index is a number, then the method returns a reference to the applet at that position in the applets collections index. I.e.

strTag=document.applets.item(2).code

would make strTag be the value of the CODE attribute of the documents third applet. As you can see, this is effectively the long-hand version of using document.applets(2).property.

If the index property is a string value, then the item method returns a sub-collection, containing a reference to every anchor in the document that has its NAME or ID attribute set to the string contained in the index argument. To retrieve certain element objects from this sub-collection, the sub-index argument must be used.

© 1995-1998, Stephen Le Hunte


The Areas Collection

Note : The Areas collection is Internet Explorer specific. Netscape includes all <AREA> element objects in the Links collection. For properties, methods and events that are supported by <AREA> element, see the Client Side Image Maps topic.

The Areas collection is an ordered, indexed array, containing a reference to every <AREA> element in a given <MAP> element. A separate Areas collection is available for each different <MAP> element in the document and the Areas collection can only be referenced through a reference to a valid <MAP> element object.

Area Objects would normally be retrieved by their index in the Areas collection. I.e.:

document.<MAP>reference.areas(1).href

returns the HREF attribute of the second <AREA> element in the <MAP> element referenced by <MAP>reference. For example, consider the following:

<MAP NAME="Map1">
<AREA SHAPE="circle" COORDS="52,49,35" HREF="index.htm">
<AREA SHAPE="rect" COORDS="53,34, 131,82" HREF="start.htm">
</MAP>

Calling the following in a script function:

document.all('Map1').areas(1).href

would return start.htm. (Note that the <MAP> element doesn't have to be referenced through the All Collection)

A string value can be used however, as long as that string is a valid identifier (ID attribute value) for an <AREA> element in the referenced <MAP> element in the document.

E.g.

document.<MAP>reference.areas('Area1').title

would return the TITLE attribute of the <AREA> whose NAME, or ID property is 'Area1', in the <MAP> element referenced by <MAP>reference.

Properties

length
The length property returns the number of areas in the collection. Note that the length count starts at 1, not 0 as the areas collection index does. Therefore, the length property may return a value of 5, but to access the 3rd area in a <MAP>, you'd need to use document.<MAP>reference.areas(2).property

Methods

item
The item method retrieves single items, or sub-collections from an areas collection. It accepts the following arguments:

areas.item(index, sub-index)

If index is a number, then the method returns a reference to the <AREA> at that position in the areas collections index. I.e.

strTag=document.<MAP>reference.areas.item(2).title

would make strTag be the value of the TITLE attribute of the <MAP>'s third <AREA>. As you can see, this is effectively the long-hand version of using document.<MAP>reference.areas(2).property.

If the index property is a string value, then the item method returns a sub-collection, containing a reference to every area in the map that has its NAME or ID attribute set to the string contained in the index argument. To retrieve certain element objects from this sub-collection, the sub-index argument must be used.

© 1995-1998, Stephen Le Hunte


Attaching Scripts to documents

Attaching Scripts

There are various methods of invoking scripts in HTML pages. Basically, a script can be written in a discrete block in the document, can be written into the HTML element attributes (this is mainly what this section of the HTMLib describes), or can be given in the URL of a hypertext anchor. (Also, there is an Internet Explorer specific method, using the ID attribute)

1. Calling a discrete <SCRIPT> block
For example, if as part of a HTML document, you had a button in the page, that when pressed, displayed a 'Hello' message on the screen. Using the first method mentioned above, the HTML could be written as :

<INPUT TYPE="button" NAME="btnHello" VALUE="Click for greeting">
. . .
<SCRIPT LANGUAGE="VBScript">
<!--
Sub btnHello_OnClick
alert "Hello"
End Sub
-->
</SCRIPT>

When the button is pressed, the script is invoked. It knows that it refers to the button, by using the buttons NAME value in the name of the script routine, followed by the event that executes the script (in this case OnClick, i.e. when the button is clicked). This would appear thus :

NOTE : The above example uses Visual Basic Script, but JavaScript can also be used in this way.

2. Using a scripting attribute
As mentioned above, scripting can also be included as an attribute of the HTML element itself. Using this method for the same button as above would require the same general <INPUT> declaration, but include the OnClick event in the element thus :

<INPUT TYPE="button" NAME="btnHello2" VALUE="Click for greeting" OnClick="pressed">
. . .
<SCRIPT LANGUAGE="VBScript">
<!--
Sub pressed
alert "Hello again"
End Sub
-->
</SCRIPT>

This would appear (in much the same way as above) like

NOTE : As in the first example, this example uses Visual Basic Script, but JavaScript can also be used in this way.

2a. Including the script in the scripting attribute
The above example, uses the OnClick scripting event handler to execute the script defined in a separate <SCRIPT> block. It is also possible using this method with such a simple script, to include the script in the OnClick event in the <INPUT> definition, avoiding the overhead of writing a separate script block. This could be done by using :

<INPUT TYPE="button" NAME="btnHello3" VALUE="Click for greeting" OnClick="alert 'We have got to stop meeting like this'">

Which would appear in the document like :

NOTE : Take note of the use of the ' character surrounding the message to display, rather than double quotes characters (") previously used. This is because the script function is already enclosed in double quotes, as an attribute of the element. Using double quotes to surround the message would cause an error in the script.

2b. An Internet Explorer specific method of 2a.
The <SCRIPT> element can also be used, using FOR= and EVENT= syntax. For example, the first example given above, could also be written as :

<FORM>
<INPUT TYPE="button" NAME="btnHello4" VALUE="Click for greeting">
<SCRIPT FOR="btnHello4" EVENT="OnClick" LANGUAGE="VBScript">
<!--
alert "Enough examples, my head hurts!"
-->
</SCRIPT>
</FORM>

This would appear as :

NOTE : With the above example, it is necessary for the <INPUT> element to be enclosed in its parent <FORM> element for the scripting to work. Also, only Internet Explorer (at the time of writing) supports this scripting method.

3. Scripting as a URL
As mentioned in the first paragraph, script events can also be included as URL's. For example :

<A HREF="javascript:alert('You can never have enough examples')">This is the link text</A>

Would display as : This is the link text

NOTE : At the time of writing, only JavaScript was supported using this method. It works in both Netscape and Internet Explorer. Future versions of Internet Explorer will include support for a <A HREF="vbscript:...."> syntax.
However, Internet Explorer allows for cross-language referencing. You can use the above construct to call a scripting function, which can be a Visual Basic Script function. For example :

<A HREF="javascript:Exec_function()">This is the link text</A>
<SCRIPT LANGUAGE="VBScript">
<!--
Sub Exec_function
Alert "You executed a Visual Basic Script function called from a JavaScript reference"
End Sub
-->
</SCRIPT>

Give it a try : This is the link text

As you will see further in this scripting reference section, the anchor (<A>) element also supports various events using the above methods. This allows scripting to be combined with hypertext links, so that the link is not exclusively executing a script.

4. Using the ID attribute
Internet Explorer can support scripting functions using the ID attribute. For example, a standard <A> element, given an ID attribute can be scripted as :

<A ID="eglink" HREF="another_page.html">This is the link text</A>
<SCRIPT LANGUAGE="VBScript">
<!-- Sub eglink_OnClick()
alert "Are you bored of this yet?"
End Sub
-->
</SCRIPT>

which would work as : This is the link text

NOTE : Due to this method using the ID attribute, it is Internet Explorer specific. Also note the use of the double parenthesis ('()') characters after the scripting event in the script block. Without these, the script wouldn't work. Also note that navigation to the document specified in the HREF attribute will be attempted always. In this example, it points to a non-existent document which can cause an error.

Where to position Script functions in the document
There is much debate about where <SCRIPT> ... </SCRIPT> blocks should be positioned within the document. Generally, it is considered best to include script blocks in the <HEAD> ... </HEAD> section of the document. This is so that you can be sure that any script functions used by any of the scriptable elements will be available before the elements that use the scripts are displayed. For instance, if you have some <A> links that rely on a script function for their functionality (for example, changing documents in two frames at the same time) and the script function is below them in the document, the script function will not be evaluated by the browser until after the links have been displayed. If the user clicks one of the links as the document is downloading, then the browser will throw a scripting error.

On the next pages, the various standard HTML elements that support scripting event handlers as attributes will be described. Keep in mind the above method variations though, as different solutions will require different methods.

© 1995-1998, Stephen Le Hunte


The Cells Collection

Note : The Cells collection is Internet Explorer 4.0 specific. For properties, methods and events that are supported by <TD> and <TH> elements, see their respective topics.

The Cells collection is an ordered, indexed array, containing a reference to every cell in contained in a referenced <TR> element. This is a collection containing <TH> and <TD> elements.

Cell Objects would normally be retrieved by their index in the Cells collection (for example document.MyTR.cells(3) contains a reference to the 4th cell in the table row referenced by the MyTR reference (this could be the rows ID attribute), but a string value can be used, as long as that string is a valid identifier (ID attribute value) for an element in the document.

E.g.

document.MyTR.cells('MyGreyCell').width

...would return the value of the WIDTH attribute for the <TH> or <TD> element whose ID property is MyGreyCell, contained in the <TR> element referenced by MyTR

Properties

length
The length property returns the number of elements in the collection. Note that the length count starts at 1, not 0 as the cells collection index does. Therefore, the length property may return a value of 5, but to access the 3rd cell, you'd need to use document.MyTR.cells(2).property

Methods

item
The item method retrieves single items, or sub-collections from the cells collection. It accepts the following arguments:

<TR>reference.item(index, sub-index)

If index is a number, then the method returns a reference to the cell object at that position in the cell collections index.

If the index argument is a string value, then the item method returns a sub-collection, containing a reference to every cell in the row that has its ID or NAME attribute set to the string contained in the index argument. To retrieve certain element objects from this sub-collection, the sub-index argument must be used.

tags
The tags method returns a collection of cell objects whose tagName property is the same as the tag argument used for the method. This differs from the item property in that that interrogates ID and NAME values if necessary.

document.MyTR.cells.tags('TD')

would return a collection of just the <TD> cell objects in the row.

© 1995-1998, Stephen Le Hunte


The StyleSheets Collection

Note : The StyleSheets collection is Internet Explorer 4.0 specific. For properties of Style Sheets, see the StyleSheet Object topic.

The StyleSheets collection is an ordered, indexed (by order in the source) array, containing a reference to every Style Sheet object in the document. I.e. a collection of <LINK> and/or <STYLE> element.

StyleSheet Objects would normally be retrieved by their index in the StyleSheets collection (for example document.StyleSheets(1) contains a reference to the second stylesheet (which maybe from a <LINK> or <STYLE> element), but a string value can be used, as long as that string is a valid identifier (ID attribute value) for a stylesheet element in the document.

Properties

length
The length property returns the number of stylesheet objects in the collection. Note that the length count starts at 1, not 0 as the stylesheets collection index does. Therefore, the length property may return a value of 5, but to access the 3rd element, you'd need to use document.stylesheets(2).property

Methods

item
The item method retrieves single items, or sub-collections from the StyleSheets collection. It accepts the following arguments:

all.item(index, sub-index)

If index is a number, then the method returns a reference to the stylesheet object at that position in the stylesheets collections index.

If the index property is a string value, then the item method returns a sub-collection, containing a reference to every stylesheet in the document that has its ID or NAME attribute set to the string contained in the index argument. To retrieve certain stylesheet objects from this sub-collection, the sub-index argument must be used.

© 1995-1998, Stephen Le Hunte


The Document Object

The Document object represents the current document being viewed in the browser. As this is a HTML document, made up of various elements (links, forms, etc), then the Document object is the parent of the various document level elements below it in the hierarchy list, but below the Window object object in the object model hierarchy.

Document Properties
activeElement
The Internet Explorer 4.0 specific activeElement property returns the currently active element (i.e that which has the focus) in the document. Note that for most elements, the activeElement property will return a reference to the main document <BODY> element, except if the element with the focus is a control-like element (i.e. any of the Form elements) or is contained within a suitable container (such as the Table elements). The activeElement property is Internet Explorer 4.0 specific.

alinkColor
The alinkColor property reflects the active link colouring, as set by any <BODY ALINK="..."> settings for the current document. It is a writable property, that is, the document active link colour can be set dynamically. For example :

document.alinkColor="#FF0000"

would set the current documents active link colour to red. NOTE : Internet Explorer doesn't support the ALINK attribute, so while the property may be readable (the author may have set the ALINK attribute for Netscape users), attempting to dynamically change the active link colour would do nothing.

all
The all property is an indexed array of all the elements contained in a document. For more information, see the All collection. The all collection/property is Internet Explorer 4.0 specific.

anchors
The anchors property is an indexed array containing all the current document's anchors. For more information, see the Anchors collection/array topic.

applets
The applets property is an indexed array of all the Java applets contained in a document. For more information, see the Applets collection/array.

areas
The areas property is an indexed array of all the <AREA> elements contained in a document. For more information, see the Areas collection/array.

bgColor
The bgColor property reflects the document's background colour, as set by any <BODY BGCOLOR="..."> settings for the current document. It is a writable property, that is, the document background colour can be set dynamically. For example :

document.bgColor="#FFFFE0"

would set the current documents background colour to a light yellow (the colour of this current topic).NOTE : In Internet Explorer, trying to dynamically alter a documents background colour, if that colour has been set in a style sheet, would not do anything.

body
The body property is a reference to the documents <BODY> element and as such contains the entire text of the document. The body property is useful for creating Text Range objects from the documents text. For more information, see the TextRange object. The body property is Internet Explorer 4.0 specific.

cookie
The cookie property reflects the string value of a cookie accessed, or created by the current document. For more details about the use of cookies, visit http://home.netscape.com/newsref/std/cookie_spec.html

domain
The domain property can be used to set or returns the security domain for a document, which will allow documents originating from different servers to be able to communicate with each other. For example, if you have different servers for www.mysite.com and beta.mysite.com, documents loaded from each server (perhaps into a framed setup) would not initially be able to communicate and share properties etc., unless the document.domain=mysite.com property has been set in all the documents that require such resource sharing.

embeds
The embeds property is an indexed array of any data embedded into a document, to be used by any available plug-in modules. For more information, see the Embeds collection/array.

expando
The Internet Explorer 4.0 specific expando property accepts a boolean value (i.e. either true or false) that sets whether arbitrary properties can be declared for any element in the document. Internet Explorer 4.0 allows unknown properties (and attributes) to be set on element objects. This can be useful as a debugging aid when authoring JScript script functions. Internet Explorer 4.0's JScript implementation (based on the ECMA standard scripting language) is totally case-sensitive, so setting:

document.all['elExample'].style.fontsize="24"

would actually create a new property for the style of the element referenced by elExample if the expando property on the document object was set to true (the default). This may not hold the same value as the fontSize property of the elements Style Object. For example, the title topics in this HTMLib all use an extra XSIZE and YSIZE attribute in <A> elements, which is interpreted by the host application to size the popups. If the expando property was set to false, the HTMLib would crash when trying to use these attributes.

fgColor
The fgColor property reflects the document's foreground colour, as set by any <BODY TEXT="..."> settings for the current document. It is a writable property, that is, the document foreground colour can be set dynamically. For example :

document.fgColor="#0000FF"

would set the current documents foreground (i.e. text) colour to blue. NOTE : In Internet Explorer, trying to dynamically alter a documents text colour, if that colour has been set in a style sheet, would not do anything.

forms
The forms property is an indexed array of any forms contained in a document. It is itself an object and for more information, see the Forms Collection topic.

frames
The frames property is an indexed array of any <IFRAME>, floating frames contained in a document. For more information, see the Frames Collection topic. Note : The Frames collection, as a property of the Document object, is Internet Explorer specific. Netscape maintains the Frames collection as a property of the Window Object topic for more information.

images
The images property is an indexed array of a documents images. For more information, see the Images collection.

lastModified
This property stores the date that the document was last modified (as stored by the web server). It cannot be altered dynamically, but can be read. For example :

document.write ("Last modified : " & document.lastModified)

would insert the document's most recent modification date where the script portion is positioned in the document.

layers
The layers property contains a reference to each Layer Object in the document (as defined by <LAYER> and <ILAYER> elements). For more information, see the Layer Object topic. Note : The layers property is Netscape 4.0 specific.

linkColor
The linkColor property reflects the document's hypertext link colour, as set by any <BODY LINK="..."> settings for the current document. It is a writable property, that is, the document link colour can be set dynamically. For example :

document.linkColor="#008000"

would set the current documents link colour to a dark green. NOTE : In Internet Explorer, trying to dynamically alter a documents text colour, if that colour has been set in a style sheet, would not do anything.

links
The links property is an indexed array of all the document's links. For more information, see the Links collection.

location
The location property contains a reference to each documents Location Object. See the Location Object topic for more information.

parentWindow
The parentWindow property returns a reference to the referenced documents parent window. For example, if documents are loaded into new windows, the parentWindow property could be interrogated to obtain a reference to the documents window, to then be able to manipulate that window. The parentWindow property is Internet Explorer 4.0 specific.

plugins
The plugins property is an indexed array of any plug-in objects contained in a document. Note that the plug-ins collection is subtly different for Internet Explorer and Netscape. For more information, visit the PlugIns collection

readyState
The readyState property can be one of 4 values, depending on the current state of the document. The possible values of the readyState property are:

Value | Meaning
complete | The resource has completely loaded and is available to the document and therefore manipulation.
interactive | The resource hasn't completely downloaded, but is available to the document and scripting
loading | The resource is being downloaded
uninitialized | The resource is not available - normally, this value indicates that the resource is downloading

Note that the readystate property is read-only and is Internet Explorer 4.0 specific

referrer
This property is a read-only property that contains the URL of the source document that the user navigated from to get to the current document. NOTE : Netscape rightly reports the URL of the source document used to navigate to the current document, but Internet Explorer appears to always return the URL of the current document only.

scripts
The scripts property is a reference to the Scripts collection (an indexed array, referencing every <SCRIPT> element in the document. For more information, see the Scripts collection topic. The scripts property is Internet Explorer 4.0 specific.

selection
The selection property is a reference to any current document content that the user may have selected. It's a reference to a Selection object, see that topic for more information. The selection property is Internet Explorer 4.0 specific, although Netscape supports the getSelection method of the document object (see below).

styleSheet
The styleSheets property is a reference to any Style Sheets attached to the current document. It is an indexed array (see the StyleSheets collection) of StyleSheet Objects. The styleSheets property is Internet Explorer 4.0 specific.

tags
The tags collection is used for Netscape specific Javascript Style Sheets. See the Javascript Style Sheets topic for more information.

title
The title property reflects the document's title, as set in the <TITLE> element.

URL
The URL property contains the fully qualified URL of a document and is typically identical to the location.href property of the Location and Window objects.

vlinkColor
The vlinkColor property reflects the document's visited link colour, as set by any <BODY VLINK="..."> settings for the current document. It is a writable property, that is, the document visited link colour can be set dynamically. For example :

document.vlinkColor="#400040"

would set the current documents visited link colour to a dark purple (the default colour for visited links). NOTE : In Internet Explorer, trying to dynamically alter a documents text colour, if that colour has been set in a style sheet, would not do anything.

Document Methods
clear
This Internet Explorer specific method closes the data stream and updates display of any text/HTML written to the document by write or writeLn methods. It is essentially identical to the close method.

close
The close method is used to close the data stream after a series of document write or writeLn method operations. It forces the display of the text/images (any standard HTML) sent during the write or writeLn methods.

createElement
The createElement method can be used to create a new instance of either an <IMG> or <OPTION> element, which can then be added to the Images collection or Options collection respectively. For example:

newOption = document.createElement("OPTION")

creates a new <OPTION> element and:

document.forms(index).elements("<SELECT>reference").options.add newOption, 0

would add the newly created <OPTION> object to the Options collection of the <SELECT> element referenced by <SELECT>reference on the form referenced by forms(index), where index is the index of the referenced form in the documents Forms collection.

For example, enter some text in the text box below, then click the button to add that text to the <SELECT> options collection:

Note that the size of the <SELECT> drop-down box will increase to accommodate the new option text.

Note : At the time of writing, Internet Explorer 4.0 was not supporting the creation of new <IMG> elements using the createElement method. Also note that this method is Internet Explorer 4.0 specific.

createStyleSheet
The createStyleSheet method can be used to create and add a StyleSheet Object to the referenced document. It accepts two optional arguments of URL and index. If URL is specified the new StyleSheet Object will be added to the StyleSheets Collection as if it were <LINK>d into the document. If no URL is given, then the new Style Sheet object will be added to the StyleSheets collection as if it were an embedded style sheet using the <STYLE> element.

elementFromPoint
The elementFromPoint method can be used to determine the element at any given position in the document, according to its x and y co-ordinates (relative to the top-left corner of the current viewing window). For example:

set whichElement=document.elementFromPoint(100,50)

would set the whichElement object reference to the element whose content covers the point 100 pixels in and 50 pixels down from the top-left corner of the current viewing window. Enter some co-ordinates in the following two text boxes, then click the button to retrieve the tagName property of the element at those co-ordinates (which will also be highlighted).

x :
y :

Note : This method is Internet Explorer 4.0 specific.

execCommand
The Internet Explorer 4.0 specific execCommand method can be used to execute a number of commands over an entire document, or a Text Range. The syntax is:

Boolean = object.execCommand(command [, bool [, value]])

where:

command
is one of the possible Command Identifier (see below)
bool
A boolean value setting whether to show any possible interface that the particular command may have
value
A possible value, the contents/data type of which are determined by the specific command used

The possible Command Identifiers are:

Command | Description | Value
BackColor | sets the background colour of the referenced text | #rrggbb|Colour name
Bold | Wraps a <B> element around the referenced object | -
Copy | Copies the referenced object to the clipboard | -
CreateBookmark | Wraps a <A NAME="..."> element around the referenced object | String - bookmark to use
Create Link | Wraps a <A HREF="..."> element around the referenced object | String - URL for link
Cut | Copies the referenced object to the clipboard, then removes it from the document | -
Delete | Deletes the referenced object | -
FontName | Sets the typeface for the referenced object | String - Font Name
FontSize | Sets the font size for the referenced object | String - size
ForeColor | Sets the foreground (i.e. text) colour for the referenced object | #rrggbb | Colour Name
FormatBlock | Wraps a specified block-level element around the referenced object | String - block level element to use
Indent | Indents the referenced object | -
InsertButton | Inserts a <BUTTON> element at the current insertion point | String - ID value
InsertFieldSet | Inserts a <FIELDSET> element at the current insertion point | String - ID value
InsertHorizontalRule | Inserts a <HR> element at the current insertion point | String - ID value
InsertIFrame | Inserts a <IFRAME> element at the current insertion point | String - SRC value
InsertInputButton | Inserts a <INPUT TYPE="button"> element at the current insertion point | String - ID value
InsertInputCheckbox | Inserts a <INPUT TYPE="checkbox"> element at the current insertion point | String - ID value
InsertInputFileUpload | Inserts a <INPUT TYPE="FileUpload"> element at the current insertion point | String - ID value
InsertInputHidden | Inserts a <INPUT TYPE="hidden"> element at the current insertion point | String - ID value
InsertInputPassword | Inserts a <INPUT TYPE="password"> element at the current insertion point | String - ID value
InsertInputRadio | Inserts a <INPUT TYPE="radio"> element at the current insertion point | String - ID value
InsertInputReset | Inserts a <INPUT TYPE="reset"> element at the current insertion point | String - ID value
InsertInputSubmit | Inserts a <INPUT TYPE="submit"> element at the current insertion point | String - ID value
InsertInputText | Inserts a <INPUT TYPE="text"> element at the current insertion point | String - ID value
InsertMarquee | Inserts a <MARQUEE> element at the current insertion point | String - ID value
InsertOrderedList | Inserts a <OL> element at the current insertion point | String - ID value
InsertParagraph | Inserts a <P> element at the current insertion point | String - ID value
InsertSelectDropdown | Inserts a <SELECT TYPE="dropdown"> element at the current insertion point | String - ID value
InsertSelectListbox | Inserts a <SELECT TYPE="Listbox"> element at the current insertion point | String - ID value
InsertTextArea | Inserts a <TEXTAREA> element at the current insertion point | String - ID value
InsertUnorderedList | Inserts a <IL> element at the current insertion point | String - ID value
Italic | Wraps a <I> element around the referenced object | -
JustifyCenter | Centers the referenced object | -
JustifyFull | Full justifies the referenced object | -
JustifyLeft | Left justifies the referenced object | -
JustifyRight | Right justifies the referenced object | -
Outdent | Outdents the referenced object | -
OverWrite | Sets the typing mode - insert or over-write | Boolean - true=over-write, false=insert
Paste | Places clipboard contents at the current insertion point (can only paste text copied by the copy command in script | -
PlayImage | Starts playing any dynamic (i.e. video, animated GIF's etc) images with the referenced object | -
Refresh | Reloads the source of the current document | -
RemoveFormat | Removes formatting for the referenced object | -
RemoveParaFormat | Removes any paragraph formatting for the referenced object | -
SelectAll | Selects the whole document text | -
StopImage | Stops playing of all dynamic images | -
Underline | Wraps a <U> around the referenced object | -
Unlink | Removes a link | -
Unselect | Empties any selections from the document | -

Note : Different Command Identifiers are supported 4.0 for the Document Object (or the Text Range object). However, it's clear to see the intention behind the execCommand method. Total content manipulation capabilities will for example, allow people to build totally customisable WYSIWYG HTML editors, based on Internet Explorer 4.0, which will put the Internet Explorer 4.0 HTML rendering engine in a very strong position.

getSelection
This Netscape 4.0 specific method returns a string which contains the text of the current users selection.

open
The open method is used to open a data stream, typically followed by write or writeLn methods. It can accept a MIME type as a parameter, but by default uses 'text/html', so that standard HTML can be written to the document using the aforementioned write and writeLn methods.

queryCommandEnabled
The Internet Explorer 4.0 specific queryCommandEnabled method allows you to determine whether a specific command (as defined by its command identifier is available for the referenced object. As mentioned before, certain commands aren't available for the respective Document Object or Text Range objects, so the queryCommandEnabled method should be used to determine whether the command is enabled for the referenced object before attempting to use the command. The queryCommandEnabled method takes one argument, which should be a string containing one of the Command Identifiers.

queryCommandIndeterm
The Internet Explorer 4.0 specific queryCommandIndeterm method can be used to determine whether a specific command is in the indeterminate state or not. It accepts one argument - a string value containing the Command Identifier in question.

queryCommandState
The Internet Explorer 4.0 specific queryCommandState method is used to determine the state of any command issued with the execCommand method (see above). It returns true if the command was successfully carried out on the referenced object, false if the command failed.

queryCommandSupported
The Internet Explorer 4.0 specific queryCommandSupported method can be used to determine whether the command is currently on or off. It accepts a single argument of a string value defining the Command Identifier to be queried and returns a boolean value of true is the command is on for the referenced object, or false if it isn't.

queryCommandText
The Internet Explorer 4.0 specific queryCommandText method can be used to determine the the string associated with a command. It accepts the standard string argument of the Command Identifier together with a string value which can be either Name or StatusText which specified whether to return the short name of the command in question, or the status bar text which may appear with the specific command.

queryCommandValue
The Internet Explorer 4.0 specific queryCommandValue method can be used to determine the value argument used in the execCommand method. See the Command Identifiers for details of the values used with certain commands.

write
This method can be used to write data (text, or any standard HTML) to a document. For example :

document.write "Hello, I've been scripted into the document"

would write the text string given into the document. It would appear wherever the script that contains the write method is placed in the document, unless the string to write to the document contains certain formatting data. For example :

document.write "<P ALIGN='right'>Hello, I've been scripted into the document"

would write the same text to the document, but it would be a separate, right-aligned paragraph.

writeLn
The writeLn method is essentially identical to the write method, except that it implies a line break after the string to write to the document. As line breaks are ignored by browsers though, the two methods tend to act identically.

Document Events
Internet Explorer 4.0 supports the following standard Dynamic HTML Events: onclick, ondblclick, ondragstart, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart. See the standard Dynamic HTML Events topic for details of these. Netscape supports some of these events for the Document Object. See the standard Dynamic HTML events for details. Additionally, it supports the following events:

onerror
The onerror event fires whenever there is an error when attempting to display a document. Note : The onerror event for the Document Object is Internet Explorer 4.0 specific.

onload
The onload event fires whenever the document finishes loading. For entire documents, the onload event is more commonly handled in the Window Object.

© 1995-1998, Stephen Le Hunte


The Elements Collection

Note : Both Netscape and Internet Explorer support the Elements collection (Netscape call it an array).

The Elements collection is an ordered, indexed array, containing a reference to every element on a <FORM> object. The collection is ordered by source order i.e. the order that the elements appear in the document. The Elements collection consists of <INPUT>, <SELECT> and <TEXTAREA> elements. (See those topics for details of the elements properties, methods and events.

Elements Objects would normally be retrieved by their index in the Elements collection (for example document.<FORM>reference.elements(3) contains a reference to the 4th element object on the referenced <FORM>), but a string value can be used, as long as that string is a valid identifier (ID attribute value) for an element in the referenced <FORM>.

Properties

length
The length property returns the number of elements in the collection. Note that the length count starts at 1, not 0 as the elements collection index does. Therefore, the length property may return a value of 5, but to access the 3rd element, you'd need to use document.<FORM>reference.elements(2).property

Methods

item
The item method retrieves single items, or sub-collections from the elements collection. It accepts the following arguments:

elements.item(index, sub-index)

If index is a number, then the method returns a reference to the element object at that position in the elements collections index. I.e.

strTag=document.<FORM>reference.elements.item(2).tagName

would make strTag be the tagName property ('INPUT' for <INPUT>, 'SELECT' for <SELECT> etc.) for the third element contained on the <FORM> referenced by <FORM>reference.

If the index property is a string value, then the item method returns a sub-collection, containing a reference to every element in the referenced <FORM> that has its ID or NAME attribute set to the string contained in the index argument. To retrieve certain element objects from this sub-collection, the sub-index argument must be used.

tags
The tags method returns a collection of element objects whose tagName property is the same as the tag argument used for the method. This differs from the item property in that that interrogates ID and NAME values if necessary.

document.<FORM>reference.elements.tags('INPUT')

would return a collection of all the <INPUT> objects in the referenced <FORM>.

© 1995-1998, Stephen Le Hunte


The Embeds Collection

Note : Both Netscape and Internet Explorer support the Embeds collection (Netscape call it an array). For properties, methods and events accessible through the Embeds array, see the <EMBED> topic.

The Embeds collection is an ordered, indexed array, containing a reference to every <EMBED> element in the document.

Embed Objects would normally be retrieved by their index in the Embeds collection (for example document.embeds(3) contains a reference to the 4th embedded object in the document), but a string value can be used, as long as that string is a valid identifier (ID attribute value) for an <EMBED> element.

Properties

length
The length property returns the number of elements in the collection. Note that the length count starts at 1, not 0 as the embeds collection index does. Therefore, the length property may return a value of 5, but to access the 3rd element, you'd need to use document.embeds(2).property

Methods

item
The item method retrieves single items, or sub-collections from the embeds collection. It accepts the following arguments:

embeds.item(index, sub-index)

If index is a number, then the method returns a reference to the embed object at that position in the embeds collections index. I.e.

strTag=document.embeds.item(2).pluginSpace

would make the value of strTag be the pluginSpace property (which reflects the PLUGINSPACE attribute) for the third <EMBED> element in the embeds collection.

If the index property is a string value, then the item method returns a sub-collection, containing a reference to every <EMBED> in the document that has its ID or NAME attribute set to the string contained in the index argument. To retrieve certain element objects from this sub-collection, the sub-index argument must be used.

© 1995-1998, Stephen Le Hunte


The Event Object

The Event Object is supported by both Internet Explorer 4.0 and Netscape (from 3.0). Properties of the event object are available for every event that occurs on every scriptable object within a document. However, while both browsers support it, the property names supported by each are different, which complicates things slightly. Below is a description of the properties, with a section for each browser.

Internet Explorer 4.0 event object properties.
altKey
The altKey property has a boolean value, which is true if the Alt key was pressed at the time of the event occuring, false if it wasn't.

button
The button property contains an integer value which represents which of the mouse buttons were used when the event occurred. The possible values are:

Value | Button pressed
0 | No mouse button pressed
1 | Left mouse button pressed
2 | Right mouse button pressed
4 | Middle button pressed

cancelBubble
For events that 'bubble', the cancelBubble property can be used to allow the event to bubble, or to prevent the event from bubbling. It takes boolean values of true or false.

Hold on, what's 'Event Bubbling'?
Within a document, when certain events occur on elements, if that element doesn't have an event handler set for the event that occurred, then the event will rise successive levels in the document hierarchy, until it finds an event handler for the particular event. When it finds an event handler, it will perform whatever scripting is set for the event. If it rises ('bubbles') to the top of the document hierarchy (i.e. reaches the <BODY> element without finding an event handler, then nothing happens for the event. For example, consider the following document:

. . .
<P OnClick="alert ('P clicked')">Here's a paragraph, containing <STRONG OnClick="alert ('STRONG clicked')">some bold and <EM OnClick="alert ('EM clicked')">italic</EM> text</STRONG>
</BODY>

which displays as:

Here's a paragraph, containing some bold and italic text

Whichever section of the document you click on, a variety of Onclick event will occur. Play around, clicking different parts to see what happens. To prevent an event from bubbling, the cancelBubble property of the event needs to be set to true. For example, if we add:

. . .
<EM OnClick="alert ('EM clicked');self.event.cancelBubble=true">
...

Then we get:

Here's a paragraph, containing some bold and italic text

Now, clicking on the italicised text will prevent the event from 'bubbling' and so only one alert will be presented. Clicking on the contents of the <STRONG> element will still allow the event to bubble though.

Knowledge of event bubbling only really becomes a serious requirement if you have nested event handlers of the same type (as above). If you don't consider what happens when events bubble, then things may not happen as you wish them to.

clientX
The clientX property of the event object returns the horizontal position of the mouse when the event occurred, relative to the origin of the current viewing area. Note that this is subtly different to the offsetX and X properties. See the X-positioning example below.

clientY
The clientY property of the event object returns the vertical position of the mouse when the event occurred, relative to the origin of the current viewing area. Note that this is subtly different to the offsetY and Y properties. The X-positioning example below also applies to the *y position properties of the event object.

ctrlKey
The ctrlKey property has a boolean value, which is true if the Ctrl key was pressed at the time of the event occuring, false if it wasn't.

fromElement
The fromElement property of the event object is of use for onmouseover and onmouseout events. It contains a reference to the element object that the mouse cursor has moved from in order for the respective onmouseover or onmouseout event to occur.

keyCode
The keyCode property contains the UNICODE key character associated with the key that was pressed to cause the onkeypress, onkeydown or onkeyup event to occur. Note that setting this property in any event handler code causes the new code to be sent with the event object should the event 'bubble' up the document hierarchy.

offsetX
The offsetX property contains a value which represents the mouse position relative to the srcElement's containing element in the object hierarchy. See the X-positioning example below.

offsetY
The offsetY property contains a value which represents the mouse position relative to the srcElement's containing element in the object hierarchy. The X-positioning example below also applies to the *y position properties of the event object.

reason
When data bound element objects submit data back to the data source, the reason property of the event object contains an integer value representing the reason for the data-transfer completion. Its values can be:

Value | Reason
0 | Data transfer was successful
1 | Data transfer aborted
2 | A data transfer error occurred

For more information on data binding, see the Data binding.

returnValue
The returnValue property of the event object represents the return value for the event object. It accepts a boolean value and setting the returnValue property to false will cancel the default action of the event on the element that received it. For example, the default action on clicking a link is to navigate to the URL in the HREF attribute of the link. If self.event.returnValue=false is set for the onclick event handler in an <A> element, then the new document navigation will no occur.

screenX
The screenX property represents the mouse position at the time of the event occuring, relative to the left-most edge of the users screen. See the X-positioning example below.

screenY
The screenY property represents the mouse position at the time of the event occuring, relative to the top of the users screen. The X-positioning example below also applies to the *y position properties of the event object.

shiftKey
The shiftKey property has a boolean value, which is true if the Shift key was pressed at the time of the event occuring, false if it wasn't.

srcElement
The srcElement property contains a reference to the element object that originally received the event. It's useful when handling events at a top-level. For example, within a document, all onclick events could be handled by the Document Object and the srcElement property could be use to determine what object was clicked and act accordingly.

srcFilter
The srcFilter property contains a reference to the Filter caused the onfilterchange event to occur.

toElement
The toElement property of the event object is of use for onmouseover and onmouseout events. It contains a reference to the element object that the mouse cursor is moving to in order for the respective onmouseover or onmouseout event to occur.

type
The type property contains a string value, which defines the event that has occurred (i.e. 'click' for an onclick event etc.)

x
The x property represents the mouse cursors horizontal position, relative to the next style sheet positioned element up the element hierarchy. (For information about the Style Sheet positioning attributes, see the Positioning attributes topic.) If no element above the source element has been positioned using Style Sheet positioning, then the x property reflects the horizontal mouse position relative to the documents <BODY> element.

y
The y property represents the mouse cursors vertical position, relative to the next style sheet positioned element up the element hierarchy. (For information about the Style Sheet positioning attributes, see the Positioning attributes topic.) If no element above the source element has been positioned using Style Sheet positioning, then the y property reflects the vertical mouse position relative to the documents <BODY> element.

Example for the *x properties
Consider the following document fragment:

<TABLE ID="TABLE1">
<TR ID="TR1">
<TD="TD1">
Here's some <STRONG OnClick="showPos()">strong text</STRONG>
</TD>
</TR>
</TABLE>

which displays as:

Here's some strong text

clicking on the 'strong text' section will display the offsetX, clientX, screenX and x properties of the event object when the onclick event is fired. The offsetX value represents the horizontal position of the mouse relative to the event source elements containing element (i.e the <TD> element). The clientX property represents the horizontal position of the mouse relative to the current viewing area (i.e. the left-most edge of the 'content' frame. The screenX property returns the x-position relative to the screen and the x position returns the same as clientX, as the <TD> element has not been positioned using CSS positioning attributes.

Netscape 4.0 event object properties.
data
If a DragDrop event occurs (firing an ondragdrop event for the Window Object, then the data property contains an array of string values, representing the URL's of all the objects that were dropped on the navigator window.

layerX
The layerX property represents the mouse cursors horizontal position relative to the left-most edge of the layer object in which the event occurred.

layerY
The layerY property represents the mouse cursors vertical position relative to the left-most edge of the layer object in which the event occurred.

modifiers
The modifiers property covers the various special keyboard keys that can be pressed when an event occurs. The modifiers property returns a string value of either ALT_MASK, CONTROL_MASK, SHIFT_MASK or META_MASK depending on which of the keys were pressed when the event occurred. (c.f. altKey, ctrlKey and shiftKey for Internet Explorer 4.0)

pageX
The pageX property reflects the mouse cursors horizontal position at the time of the event occuring, relative to the current viewing window. (c.f. clientX for Internet Explorer 4.0)

pageY
The pageY property reflects the mouse cursors vertical position at the time of the event occuring, relative to the current viewing window. (c.f. clientY for Internet Explorer 4.0)

screenX
The screenX property reflects the mouse cursors horizontal position at the time of the event occuring, relative to the users screen. (c.f. screenY for Internet Explorer 4.0)

screenY
The screenY property reflects the mouse cursors vertical position at the time of the event occuring, relative to the users screen. (c.f. screenX for Internet Explorer 4.0)

target
The target property contains a string value representing the object to which the event was originally sent (e.g. for an <A> anchor object, the target property will return a string, corresponding to the HREF attribute value setting for the <A> element clicked.)

type
The type property returns a string representing the event type that occurred (i.e. 'click' for an onclick event etc.)

which
The which property returns a number specifying which mouse button was pressed at the time of the event occuring, or the ASCII code of the key that was pressed. (c.f. button, keyCode for Internet Explorer 4.0)

© 1995-1998, Stephen Le Hunte


The Filters Collection

Note : The Filters collection is only supported by Internet Explorer 4.0.

The Filters collection is an ordered, indexed array, containing a reference to all filter objects for a particular element. For information about the Visual Filters supported in Internet Explorer 4.0, see the Visual Filters topic.

Filter Objects can be retrieved by their index in the filters collection, or by the names by which they are applied to an element.

E.g.

MyImg.filters.transition.status

would return the current status of the 'transition' filter that has been applied to the element object referenced by 'MyImg'.

Properties

length
The length property returns the number of elements in the collection. Note that the length count starts at 1, not 0 as the filters collection index does. Therefore, the length property may return a value of 5, but to access the 3rd element, you'd need to use element.filters(2).property

Methods

item
The item method retrieves single items, or sub-collections from the filters collection. It accepts the following arguments:

all.item(index, sub-index)

If index is a number, then the method returns a reference to the filter object at that position in the filter collections index, for the referenced element. I.e.

strTag=MyImg.filters.item(2).duration

would make strTag equal the value of the duration property of the 3rd filter applied to the element.

If the index property is a string value, then the item method returns a sub-collection, containing a reference to every filter attached to the element that has the same name as the value of the string that is the index argument. To retrieve certain element objects from this sub-collection, the sub-index argument must be used.

© 1995-1998, Stephen Le Hunte


The Forms Collection

Note : Both Netscape and Internet Explorer support the Forms collection (Netscape call it an array). For properties, methods and events that are supported by <FORM> elements, see the <FORM> topic.

The Forms collection is an ordered, indexed (in document source order) array, containing a reference to every <FORM> element in a document.

Discrete form objects would normally be retrieved by their index in the Forms collection (for example document.forms(0) contains a reference to the first <FORM> element in the document), but a string value can be used, as long as that string is a valid identifier (ID or NAME attribute value) for a <FORM> in the document.

E.g.

document.forms('frmFeedback')

or

document.frmFeedback

both identify the same <FORM> in the document. The first method makes scripts easier to read and understand though.

Properties

length
The length property returns the number of forms in the collection (and therefore the document). Note that the length count starts at 1, not 0 as the forms collection index does. Therefore, the length property may return a value of 5, but to access the 4th form, you'd need to use document.forms(3).property

Methods

item
The item method retrieves single items, or sub-collections from the all collection. It accepts the following arguments:

documentforms.item(index, sub-index)

If index is a number, then the method returns a reference to the form object at that position in the forms collections index. I.e.

strTag=document.forms.item(2).action

would make strTag equal to the ACTION attribute of the documents 3rd <FORM> element. As you can see, this is effectively the long-hand version of using document.forms(3).property.

If the index property is a string value, then the item method returns a sub-collection, containing a reference to every element in the document that has its ID or NAME attribute set to the string contained in the index argument. To retrieve certain element objects from this sub-collection, the sub-index argument must be used.

© 1995-1998, Stephen Le Hunte


The Frames Collection

Note : Both Netscape and Internet Explorer support the Frames collection (Netscape call it an array). For properties, methods and events that are supported by frame elements, see the <FRAME> and <IFRAME> topics.

The Frames collection is an ordered, indexed (by source order) array, containing a reference to Window Objects. If the document contains a <BODY> element, then the frames collection contains references to the <IFRAME> elements in the document. If the document contains a <FRAMESET> element, then the frame collection is populated with references to <FRAME> elements. (Note : Netscape doesn't support <IFRAME> and so will only populate the frames collection with references to valid <FRAME> elements. Also, <IFRAME> elements that are referenced across frames/windows can only be accessed through the Document Object).

Properties

length
The length property returns the number of frames in the collection. Note that the length count starts at 1, not 0 as the frames collection index does.

Methods

item
The item method retrieves single items, or sub-collections from the all collection. It accepts the following arguments:

all.item(index)

If index is a number, then the method returns a reference to the frame object at that position in the frames collections index. I.e.

bIsScrolling=document.frames.item(2).scrolling

would make bIsScrolling be a boolean value, depending on the value of the SCROLLING attribute of the referenced frame object.

If the index property is a string value, then the item method returns the first valid frame object that has the NAME or ID used as the string contained in the index argument.

© 1995-1998, Stephen Le Hunte


The History Object

The History object represents the browsers history list, which can allow script functions to access the browsers history list.

The History object contains a list of URLs recently visited by the user. It can be accessed to manipulate specific navigation methods.

History Properties
Length
The length property returns the number of current entries in the current history object (i.e. the browser's history list).

History Methods
Back
The back method can be used to load the URL of the document that the browser previously visited. Essentially, it is the same as if the user pressed the 'Back' button on their browser toolbar. I.e.

history.back()

Forward
The Forward method is used to load the URL that is next in the document list (NOTE : This assumes that the user has already navigated 'back' through their history list).

history.forward()

Go
The Go method acts different when used in Netscape or Internet Explorer. In Netscape, the Go method can be used, together with a negative or positive integer value to navigate to any URL present in the history list (assuming that the history object contains enough entries to navigate the required integer value). For example :

history.go(3)

would navigate to the URL three entries ahead of the current document, while :

history.go(-2)

would navigate to the URL 2 entries previous to the current document in the history object.

In Internet Explorer, the Go method is used with a single integer value which represents the absolute position in the history list of the URL to navigate to. For example :

history.go(3)

would navigate to the URL third in the history list.

History Events
The History object has no events.

© 1995-1998, Stephen Le Hunte


The Images Collection

Note : Both Netscape and Internet Explorer support the Images collection (Netscape call it an array). For properties, methods and events that are supported by <IMG> element, see the <IMG> topic.

The Images collection is an ordered, indexed (by document source order) array, containing a reference to every <IMG> element in a document. For example, consider the following document:

Image Objects would normally be retrieved by their index in the Images collection (for example, above document.images(3) contains a reference to the 4th image in the document element), but a string value can be used, as long as that string is a valid identifier (ID or NAME attribute value) for an image element in the document.

Properties

length
The length property returns the number of elements in the collection. Note that the length count starts at 1, not 0 as the images collection index does. Therefore, the length property may return a value of 5, but to access the 3rd element, you'd need to use document.images(2).property

Methods

item
The item method retrieves single items, or sub-collections from the all collection. It accepts the following arguments:

images.item(index, sub-index)

If index is a number, then the method returns a reference to the image object at that position in the images collection index. I.e.

bIsComplete=document.images.item(2).complete

would make bIsComplete be a boolean value dependant on the 3rd <IMG> elements complete property.

If the index property is a string value, then the item method returns a sub-collection, containing a reference to every image in the document that has its ID or NAME attribute set to the string contained in the index argument. To retrieve certain element objects from this sub-collection, the sub-index argument must be used.

© 1995-1998, Stephen Le Hunte


The Imports Collection

The Imports collection is Internet Explorer 4.0 specific.

The Imports collection is a collection of all the imported style sheets, defined for the StyleSheet Object. (An imported style sheet is one that has been included in the document using the @import Style Sheet attribute in a <STYLE>. Note that the imports collection can only be accessed through the StyleSheet Object.

<STYLE TYPE="text/css" ID="CSS1">
@import: url (http://www.mysite.com/Style Sheets/newstyle.css)
@import: url (http://www.mysite.com/Style Sheets/bigred.css)
@import: url (http://www.mysite.com/Style Sheets/bigblue.css)
@import: url (http://www.mysite..com/Style Sheets/crazy.css)
H1 {font-size : 24pt; color : red}
</STYLE>

Referencing:

document.StyleSheets(0).imports(2).href

would return http://www.mysite.com/Style Sheets/bigblue.css - the location of the third imported stylesheet for the document. (Note the use of the StyleSheets collection to interrogate the imports collection.

Properties

length
The length property returns the number of elements in the collection. Note that the length count starts at 1, not 0 as the imports collection index does.

Methods

item
The item method retrieves single items, or sub-collections from the all collection. It accepts the following arguments:

all.item(index)

For the imports collection, the index argument can only be a number, representing the index of the imported stylesheet of interest.

© 1995-1998, Stephen Le Hunte


Javascript

NOTE : JavaScript is currently supported by the Netscape Navigator (version 2 and above) and Internet Explorer (version 3.0 and above). Recently, Netscape presented Javascript 1.1 to the ECMA, where it has evolved into ECMAScript (or rather ECMA-262), "A general purpose, cross-platform programming language". Netscape then proceeded to make extensions to Javascript, which became Javascript 1.2 as supported in the Navigator component of Netscape Communicator. Microsoft's JScript (v3.0 of which ships with Internet Explorer 4.0) is currently the only full implementation of ECMAScript. All Javascript 1.2 extensions are also supported by Internet Explorer 4.0 through its enhanced scripting object model.

For more information on JavaScript, visit http://home.netscape.com/ for Netscape's JavaScript information, or http://www.microsoft.com/jscript/ for Microsoft's 'JScript' JavaScript implementation, or the ECMA site for the official ECMAScript specification. The information provided here only details how to include JavaScript scripts within HTML documents, not how to author actual scripts. Such information is well beyond the scope of this reference.

NOTE : A Scripting Reference is now included in the HTMLib. This details various methods of invoking scripts, and a description of the object models of both browsers. Note that the Internet Explorer object model available through scripting languages covers every element, whereas the Netscape one doesn't.

A script is embedded in HTML within a <SCRIPT> element.

<SCRIPT>...</SCRIPT>

The text of a script is inserted between <SCRIPT> and its end element.

Attributes within the <SCRIPT> element can be specified as follows:

<SCRIPT LANGUAGE="JavaScript">
. . .
</SCRIPT>

The LANGUAGE attribute is mandatory unless the SRC attribute is present and specifies the scripting language. NOTE : Use of the LANGUAGE attribute is important now that Internet Explorer supports JavaScript. In order for the Internet Explorer to know it is to process the script as JavaScript, it needs to be told that it is JavaScript. See below for JavaScript versioning information.

The SRC attribute is optional and, if given, specifies a URL that loads the text of a script.

<SCRIPT LANGUAGE="language" SRC="url">

Both attributes may be present.

NOTE : For Netscape to be able to properly use external JavaScript files, the server on which the files are to reside must have the MIME type application/x-javascript mapped into its list of MIME types (with a suitable extension mapped to it - Netscape recommend ".js") for Netscape to properly respond to the script when it is loaded. Internet Explorer is more relaxed about the extension of the external script document, though it will still need to be registered with the MIME types on the web server, to ensure proper functioning.

Scripts should be placed inside comment fields to ensure that the script is not displayed when the page's HTML is viewed with a browser unaware of the <SCRIPT> element. The entire script is encased by HTML comment elements:

<SCRIPT LANGUAGE="language" SRC="url">
<!-- Begin to hide script contents from old browsers.
. . . Script functions/routines go here
End the hiding here.-->
</SCRIPT>

Note that in Netscape, the final HTML comment must be 'commented' out using a JavaScript comment '//' otherwise an error occurs. For more information about scripts, the JavaScript language and some examples, see http://home.netscape.com/. Also visit http://www.microsoft.com/, especially http://www.microsoft.com/jscript - the Microsoft JScript (Microsoft's JavaScript implementation) Web site.

JavaScript version control
There are various versions of JavaScript supported by both Netscape and Internet Explorer. Because the various versions of JavaScript support subtly different object models and function capabilities, you can version out various browsers that do not support the scripting capabilities you've authored. The support breaks down as follows :

Version | LANGUAGE value | Internet Explorer | Netscape
1.0 | Javascript | From version 3.0 | From version 2.0 onwards
1.1 | Javascript1.1 | IEx 3.0x doesn't support all functionality. IEx 4.0+ does. | From version 3.0 onwards
1.2 | JavaScript1.2 | IEx 3.0x throws ''function' not defined' error. Is supported by IEx 4.0+ | Version 4.0 only

So, if you're authoring using JavaScript v1.1 (as supported by Netscape 3.0 and above, for example, if you're manipulating the image object), then use LANGUAGE="Javascript1.1" in the <SCRIPT> element. The code functions will then be ignored by Netscape browsers older than version 3.0. Note that Internet Explorer understands both 'Javascript' and 'Javascript1.1' as values of the LANGUAGE attribute, but doesn't currently support certain functionality in Javascript 1.1.
By using versioning in the LANGUAGE attribute, you can author alternative scripting functions for the various different versions of Netscape within the same document, allowing great flexibility.

Example
Here is a quick (and very simple) example, where pressing the button provides a greeting according to the present time of day on your system.

© 1995-1998, Stephen Le Hunte


The Layer Object

A Layer Object entry (and corresponding layers array entry) is created for every layer (specified by either <LAYER> or <ILAYER> elements, or for any element using the position:absolute or position:relative style sheet positioning attributes). These objects expose various methods, properties and events.

Referencing Layers
All layers defined in a document (the Layer object and layers array are properties of the Document object) can be referenced by their name (given in their NAME attribute) or by their index in the layers array. It's generally easier to reference layers by their name though, as their index in the layers array is determined by their z-order, from back (i.e. the furthest away) to front (the front-most layer). This isn't always the same as their zIndex property (or Z-INDEX attribute in the <ILAYER> or <LAYER> element) as these don't take account of the z-order of the layer with respect to any parent/sibling layers that the particular layer you are trying to reference may have. To reference a particular layer, use :

document.layerName...

or

document.layers.['layerName']...

Each layer object in the layers array has a document property, through which any child layers can be referenced through its parent layer, thus :

document.layers.['parentlayerName'].document.layers['layerName']..

To reference a layer in a different window, a valid window reference will need to be used to access the document object (a property of the Window Object), to access the layer object, or layers array.

Layer Properties
above
The above property returns a reference to the layer object that is above the referenced layer in the z-order, of all the layers in the document. For example, if you authored two layers, one NAMEd 'Red' and one NAMEd 'Blue', with the 'Blue' layer having a higher z-order than the 'Red' layer, then :

document.layers['Red'].above

would return a reference to the 'Blue' layer. (You'd need to append another property, such as name - see below - to be able to make sense of that layer object reference). If the referenced layer is the top-most layer (or the only layer), then the above property would return 'null'. The above property is read-only.

background
This property returns a reference to the referenced layers background image (if any - it returns 'null' if the referenced layer has no background image). Each background image is an Image Object (see the Images collection), whose properties can be interrogated, or methods manipulated. The background property can be dynamically changed.

below
The below property is the opposite of the above property (see above), in that it returns a reference to the layer that is immediately below (in terms of z-order) the currently referenced layer, or 'null' if the current layer is the bottom, or only layer. The below property is read-only.

bgColor
This property reflects the referenced layers background colour (as set in the BGCOLOR attribute of either the <ILAYER> or <LAYER> elements). It can be dynamically changed, by setting the property to a new colour, using any valid colour referencing technique (i.e. a #rrggbb hex triplet, or colour name).

clip
The clip property has 6 sub-properties, namely clip.top, clip.left, clip.right, clip.bottom, clip.width and clip.height, which can be used to determine, or dynamically set the clipping area (the area of the layer that is actually displayed) for the current layer.

left
This property reflects the referenced layers left-most point in pixels, relative to either its parent layer, or the left-most edge of the browser window if it has no parent layer. It can be manipulated to move the layer.

name
The name property reflects the referenced layers name, as set in the NAME attribute of either the <ILAYER> or <LAYER> element that defines the layer.

pageX
The pageX property represents the horizontal position of the referenced layer object, in pixels, relative to the main document page.

pageY
The pageY property represents the vertical position of the referenced layer object, in pixels, relative to the main document page.

parentLayer
The parentLayer property references the immediate parent layer of the currently referenced layer. If the currently referenced layer has no parent, then parentLayer returns 'null'.

siblingAbove
siblingAbove references the layer that is above the currently referenced layer (in terms of z-order), of all the layers that share the same parent layer. If the currently referenced layer is has no parent, or is a top-most layer, the siblingAbove property returns 'null'.

siblingBelow
siblingBelow references the layer that is below the currently referenced layer (in terms of z-order), of all the layers that share the same parent layer. If the currently referenced layer is has no parent, or is a bottom-most layer, the siblingBelow property returns 'null'.

src
The src property reflects the document that contains the content for the currently referenced layer (i.e. set by the SRC attribute of the <ILAYER> or <LAYER> element that defines the layer. It is read-only, that is, layer content can not be dynamically changed.

top
This property reflects the referenced layers top-most point in pixels, relative to either its parent layer, or the top-most edge of the browser window if it has no parent layer. It can be manipulated to move the layer.

visibility
The visibility property reflects the value of the VISIBILITY attribute (as set in the <ILAYER> or <LAYER> element). It can be manipulated to hide the currently referenced layer or force it to inherit its parent layers (if any) visibility (by setting the visibility property to inherit or hide within a script function.

zIndex
The zIndex property can be used to determine, or dynamically set the z-order (only with respect to parent or sibling layers) of the currently referenced layers. This can be useful for dynamically changing the overlap of any layers within the document.

Layer Methods
load (URL,width)
The load method can be used to replace the contents of the referenced layer object with a new source document, referenced by the URL argument of the method, the newly loaded source document also resizing the referenced layer object according to the width argument, which is specified in pixels.

moveAbove (LayerName)
The moveAbove method accepts one argument which must be a valid layer name. The layer referenced for the method is then placed above (in terms of z-order) the layer named in the argument, without physically altering its position on the screen. After the z-order change, both layers then share the same parent (if one of the layers was a child layer to start with).

moveBelow (LayerName)
The moveBelow method accepts one argument which must be a valid layer name. The layer referenced for the method is then placed below (in terms of z-order) the layer named in the argument, without physically altering its position on the screen. After the z-order change, both layers then share the same parent (if one of the layers was a child layer to start with).

moveBy (x,y)
The moveBy method moves the referenced layer horizontally (by the pixel amount given in the x argument) and vertically (by the pixel amount given in the y argument) relative to its current horizontal and vertical position.

moveTo (x,y)
The moveTo layer accepts two arguments which are screen positions in pixel values. For example :

document.layers['RedLayer'].moveTo (50,200)

would move the layer whose NAME is RedLayer to the position x=50, y=200 on the screen. The position can be anywhere on, or even off, the current browser viewing area.

moveToAbsolute (x,y)
The moveToAbsolute method moves the referenced layer to the position specified by the x and y arguments in the page, regardless of the position of the containing layer object.

resizeBy(x,y)
The resizeBy method resizes the referenced layer according to the pixel measurements given in the x and y arguments, relative to the referenced layers current size.

resizeTo(x,y)
The resizeTo method resizes the referenced layer absolutely, according to the x and y pixel measurements, regardless of its original size.

Layer Events
Each layer object in the Layers array/collection, fires the following events:

onblur
The onblur event fires whenever the referenced layer loses the users current focus.

onfocus
Whenever the user focuses (by clicking on) the referenced layer, the onfocus event fires.

onload
The onload event is fired when the document containing the referenced layer is fully loaded, regardless of the referenced layers visibility.

onmouseout
When the users mouse leaves the referenced layer, the onmouseout event is fired.

onmouseover
The onmouseover event is fired whenever the users mouse moves over the referenced layer.

© 1995-1998, Stephen Le Hunte


The Links Collection

Note : Both Internet Explorer and Netscape support the links collection.

The links collection is an ordered, indexed (by source order) array, containing a reference to every <A> and <AREA> elements in a document. Note that <A> elements that contain a NAME attribute (and are therefore Anchors) will be included in the links collection if they also have a HREF attribute (and are therefore both links and anchors). For properties, methods and events supported by <A> and <AREA> elements, see their respective topics.

LInk Objects would normally be retrieved by their index in the links collection (for example, above document.links(3).href would return the HREF property of the 4th link in the document (that may be an <A> or <AREA> element), but a string value can be used, as long as that string is a valid identifier (ID attribute value) for an element in the document.

E.g.

document.links('BigExternalLink').title

returns the value of the TITLE attribute of the link whose ID property is 'BigExternalLink. This would be the same as document.BigExternalLink.title.

Properties

length
The length property returns the number of elements in the collection. Note that the length count starts at 1, not 0 as the links collection index does. Therefore, the length property may return a value of 5, but to access the 3rd element, you'd need to use document.links(2).property

Methods

item
The item method retrieves single items, or sub-collections from the links collection. It accepts the following arguments:

all.item(index, sub-index)

If index is a number, then the method returns a reference to the link object at that position in the link collections index. I.e.

strTag=document.links.item(7).innerHTML

would make strTag equal to the innerHTML property of the documents 8th link.

If the index property is a string value, then the item method returns a sub-collection, containing a reference to every link in the document that has its ID or NAME attribute set to the string contained in the index argument. To retrieve certain element objects from this sub-collection, the sub-index argument must be used.

tags
The tags method returns a collection of link objects whose tagName property is the same as the tag argument used for the method. This differs from the item property in that that interrogates ID and NAME values if necessary.

document.all.tags('AREA')

would return a collection of all the <AREA> element objects in the document and none of the <A> element objects.

© 1995-1998, Stephen Le Hunte


The Location Object

The Location object contains information about the current documents location and can be used to manipulate browser navigation.

For a general example for the location object, consider your browser is currently visiting the rather over-complete URL :

http://www.htmlib.com:80/example_files/file.html#findme?Stephen

all will become clear.

Location Properties
hash
The hash property returns, or sets the URL fragment part of the current location. For example, from the URL above :

vFrag=self.location.hash

would set the variable vFrag to 'findme'.

host
The host property sets or returns the host section of the current URL. The host section of a URL is basically the hostname property (see below), together with the port property (see below). So, using the above example :

vHost=self.location.host

would set vHost to www.htmlib.com:80. Note the subtle difference between this and the hostname property. (If the current URL does not contain a port setting, then host and hostname are effectively the same).

hostname
The hostname property (as mentioned above) is the name of the host computer (either a name, or IP address). For example :

vHostName=self.location.hostname

sets the vHostNane variable to www.htmlib.com

href
The href property can be regarded as a concatenation of all the other location properties. That is, if the current URL was the one given above for the example, then :

vHref=self.location.href

would make vHref be http://www.htmlib.com:80/example_files/file.html#findme?Stephen

pathname
The pathname property provides the current path for the URL. This is the section in between the hostname (including protocol) if any and the hash, or search (see below) sections (if either exists). For example :

vPathName=self.location.pathname

would return example_files/file.html as the contents of the vPathName variable.

port
As you may suspect, the port property represents any port settings for the current URL. Given the above example,

vPort=self.location.port

sets vPort to 80 (the common port for Web servers).

protocol
This property represents the protocol currently in use for the displayed document. For example :

vProtocol=self.location.protocol

sets vProtocol to 'http:'. For commonly used protocols, see the <A HREF="..."> element.

search
The search property contains information about any search strings in the current URL. For example :

vSearch=self.location.search

returns 'Stephen' as the contents of the vSearch variable.

Location Methods
assign
The Internet Explorer 4.0 specific method takes one argument (URL). It then loads the document referenced at the URL (if it exists) in place of the currently displayed document. Basically, it performs the same as changing the href property.

reload
The reload method forces a re-loading of the current URL. It should be noted that Netscape decides how to interact with the server for re-loading according to the Network Preference settings (i.e whether the user has set documents to be verified once, all the time, or never). Saying that however, this decision can be over-ruled by specifying a true parameter. This forces the browser to re-load the current document from the server, despite the current users preference settings. For example :

self.location.reload()

may re-load the document, depending on user preferences, while :

self.location.reload(true)

forces Netscape to re-visit the server to retrieve a new copy of the document.
This can be especially useful if your document changes rapidly, avoiding users seeing old copies of the document due to disk/memory caches, or if they are browsing through a proxy/cache server.

replace
This is much like the reload method, except that it loads another document and replaces the history object entry for the previous URL with the new URL loaded. Essentially, this prevents the user from returning to the previous URL, by using the browsers back button. For example, suppose you are at the URL given above for the examples and the following code gets executed :

self.location.replace('http://www.microsoft.com/')

The browser would navigate to the Microsoft web site and replace the www.htmlib.com entry in the history object with http://www.microsoft.com Unless you'd remembered the previous URL, there would be no navigating back to it.

Location Events
The Location object has no events.

© 1995-1998, Stephen Le Hunte


The Navigator Object

The Navigator object represents the particular browser and allows script functions to access information about the browser being used to access the document.

The Navigator object provides information about the browser that the user is currently using. All the properties are read-only and can not be dynamically changed. Typically the Navigator object properties are used to determine the users browser and navigate to sections of the site containing browser-specific content.

Note : The examples below are targeted at the Window range of platforms (3.1(1), Windows 95 and Windows NT) - this reference does not support possible cross-platform differences for browsers.

Navigator Properties
appCodeName
The appCodeName property returns the code name of the current browser. For example :

vCodeName=navigator.appCodeName

would store the current browsers appCodeName property in the variable vCodeName. The navigator.appCodeName value for both Netscape and Internet Explorer is 'Mozilla'.

appMinorVersion
The Internet Explorer 4.0 specific appMinorVersion property returns the minor version of the navigator object (the users browser). For example, Internet Explorer 4.0 would return 0, a version of Internet Explorer 4.1 would return 1. This will prove useful for browser-determination scripting for future browser versions.

appName
The appName property returns the name of the current browser. For example :

vName=navigator.appName

would store the current browsers appName property in the variable vName. The navigator.appName values for Netscape and Internet Explorer are 'Netscape' and 'Microsoft Internet Explorer' respectively.

appVersion
The appVersion property returns the version of the current browser. For example :

vVersion=navigator.appVersion

would store the current browsers appVersion property in the variable vVersion.
The Netscape navigator.appVersion string contains information of the following format :

<version> (<Operating_System>; I)

where <Operating_System> is 'Win16', 'Win95', or 'WinNT'. For example, for Netscape 3.0 on the Windows 95 platform, the navigator.appVersion string would be :

3.0 (Win95; I)

The Internet Explorer navigator.appVersion string contains information of the following format :

<compatible_Netscape_version> (compatible; <version>; <Operating_System>)

Where <compatible_Netscape_version> is 2.0 for Internet Explorer 3.01 (and 3.02) and <Operating_System> is either 'Windows 3.1(1)', 'Windows 95' or 'Windows NT'. For example, for Internet Explorer 3.02 on the Windows 95 platform, the navigator.appVersion string would be :

2.0 (compatible; MSIE 3.02; Windows 95)

browserLanguage
The Internet Explorer 4.0 specific browserLanguage returns the ISO code representing the localised language of the users browser. For example, a german Internet Explorer would return 'DE' for the browserLanguage property. (see language property for Netscape determination of the users browser language.)

connectionSpeed
The Internet Explorer 4.0 specific connectionSpeed property returns a value representing the speed of the users current connection. This proves useful for possible re-direction of users to less multimedia-heavy versions of sites, if their connections aren't enough for the site content.

cookieEnabled
The Internet Explorer 4.0 specific cookieEnabled property returns a boolean value representing whether or not the user has cookies enabled in the browser.

cpuClass
The Internet Explorer 4.0 specific cpuClass property returns a value representing the class of processor on the users machine. For example 'x86' for 486/Pentium etc. machines, 'Alpha' for Digital machines etc.

language
The Netscape 4.0 specific language property reflects the current language translation of the Navigator client being used. It returns ISO standard country codes, depending on the version; for example en for English versions, fr for French versions etc. (see browserLanguage property for Internet Explorer determination of the users browser language.)

mimeTypes
The mimeTypes property is supported by Internet Explorer 4.0, although it returns no values. It has been added to the Internet Explorer 4.0 object model, to retain compatibility with Netscape browsers. Netscape supports the mimeTypes property of the navigator object as containing an array detailing all the mimeTypes that the users browser can handle, either natively, by helper applications, or by plug-in modules. As an object, it has its own properties, which are :

type
Details the particular MIME type that is handled by the particular plug-in. For example, the LiveAudio plug-in (as standard with Netscape), handles (amongst others), the MIME-type : audio/x-wav
description
A description of the particular MIME type. For example, the description of the above LiveAudio handled MIME type is : WAV
enabledPlugin
This gives a reference to whether the particular MIME type is to be handled by a Plug-in. It details whether the particular plug-in is enabled or not.
suffixes
This gives the suffixes (file extensions) of the file types of the particular MIME types. For example, the suffix for the above MIME type is wav
length
This returns the total number of MIME types that Netscape can handle, internally, or via installed plug-ins.

As an example, the following code section checks to see whether the user has a suitable VRML plug-in available and if so, displays a VRML world, giving a notice if the plug-in isn't available :

var vVRMLallowed = navigator.mimeTypes["x-world/x-vrml"]
if (vVRMLallowed)
document.writeln("Click <A HREF='htmlib.wrl'>here</A> to see a " + vVRMLallowed.description)
else
document.writeln("Too bad, can't show you any virtual worlds.")

NOTE : See how it's possible to reference MIME types in the mimeTypes object by its actual type property. The type and description properties can be used in this way.

onLine
The Internet Explorer 4.0 specific onLine property returns a boolean (i.e true or false) value depending on whether the user has chosen to 'Work Offline' - a feature of Internet Explorer 4.0 whereby pages can still be viewed directly from the cache. A value of true shows that the user is currently 'on-line' (or has not chosen the 'Work Offline' option - but may still be disconnected); a value of false indicates that the browser is 'Offline'.

platform
The platform property reflects the machine type that the browser is currently running on. For example, on the WindowsNT platform, navigator.platform returns Win32.

plugins
The plugins property is different for both browsers. For more details, see the PlugIns collection.

systemLanguage
The Internet Explorer 4.0 specific systemLanguage property returns a value indicating the language of the users system (as opposed to browserLanguage which returns the localised language of the browser). If you're site is authored in multiple languages, interrogating the systemLanguage property would allow re-direction to the appropriate content.

userAgent
The userAgent property returns a property which is the combination of appCodeName and appVersion properties for the the current browser. For example :

vuAgent=navigator.userAgent

would store the current browsers userAgent property in the variable vuAgent.
Both Netscapes and Internet Explorers navigator.userAgent string is of the format :

appCodeName/appVersion

So, using the above examples, Netscape 3.0 on the Windows 95 platform returns :

Mozilla/3.0 (Win95; I)

while Internet Explorer 3.02 on the Windows 95 platform returns :

Mozilla/2.0 (compatible; MSIE 3.02; Windows95)

for the navigator.userAgent value.

userLanguage
The Internet Explorer 4.0 specific userLanguage property is synonymous with the browserLanguage property and returns a value representative of the users current language settings.

userProfile
The Internet Explorer 4.0 specific userProfile property provides a way for determining any of the 'Profile' properties that the user has set in Internet Explorer (View|Internet Options|Content|Personal Information). Specifically, it allows the following methods:

addReadRequest
sets an entry in the 'Read Request' queue
clearRequest
clears the current request queue, ready for more addReadRequests to be set
doReadRequest
performs the read requests as queued by the addReadRequest method
getAttribute
get values from the users 'Personal Information' store, ready for use later

The syntax for these methods is as follows:

navigator.addReadRequest (attribute [,isRequired], success)
The attribute argument specifies the personal information that the script wishes to obtain from the user. isRequired is reserved for future versions of Internet Explorer 4.0 and is currently ignored and success returns a boolean value - true if the request has been added to the queue, false if it hasn't. See the getAttribute method (below) for details of the possible attributes that can be retrieved from the personal information store.

navigator.clearRequest
Clears any requests queued by the addReadRequest method.

navigator.doReadRequest (usageCode [, friendlyName [, domain [, path [, expiration]]]])
The doReadRequest method performs the request for the information asked for in the request queue. For obvious security reasons, no script can access any users personal information settings without them knowing and when the doReadRequest method is used, the user is presented with a dialog, telling them that their information has been requested, also giving them the chance to deny the information to the requesting script. usageCode is any of the following codes, as defined by the Internet Privacy Working group:

Code | Meaning
0 | Used for system admin.
1 | Used for research/development
2 | Used for completion/support of a current transaction
3 | Used for site customisation
4 | Used to improve (i.e. target) advertising on site
5 | Used to notify visitors about updates to the site
6 | Used for marketing departments to contact site visitors
7 | Used for linking other collected information
8 | Used by the site for other purposes
9 | Disclosed to others for customisation of sites
10 | Disclosed to others for marketing purposes
11 | Disclosed to others who may contact you for marketing, but will request your permission first
12 | Disclosed to others for any purpose

This information is passed to the user in the 'Privacy' section of the request dialog box, giving them an idea of the intended use of the personal information by the script/script author.

var = navigator.getAttribute (attributeName, attributeValue)
The getAttribute method is used after the Request queue has been set up and the doReadRequest method has been called to alert the user that the script function is attempting to retrieve personal information. If the attributeName argument is left blank, then nothing is returned. Setting anything for the attributeValue argument currently causes a scripting error. The various attribute properties that can be requested are of the form vCard.property and can be any of the following:

vCard.Email | vCard.DisplayName
vCard.FirstName | vCard.LastName
vCard.MiddleName | vCard.Cellular
vCard.Gender | vCard.JobTitle
vCard.Pager | vCard.Company
vCard.Department | vCard.Notes
vCard.Office | vCard.Homepage
vCard.Home.StreetAddress | vCard.Home.City
vCard.Home.State | vCard.Home.Zipcode
vCard.Home.Country | vCard.Home.Phone
vCard.Home.Fax | vCard.Business.StreetAddress
vCard.Business.City | vCard.Business.Phone
vCard.Business.Fax | vCard.Business.URL
vCard.Business.State | vCard.Business.Country
vCard.Business.Zipcode |

which all correspond to information contained in the personal information store of Internet Explorer

userProfile example
Clicking the button above the following text fields requests various information from you, which you can allow, or deny, for the usage code (see above) chosen from the code box. If you allow the information, it will the be filled in in the text fields.

Your Name
Your e-mail
Your homepage

To do this, it runs the following script functions:

navigator.userprofile.addreadrequest("vcard.displayname")
navigator.userprofile.addreadrequest("vcard.email")
navigator.userprofile.addreadrequest("vcard.homepage")
navigator.userprofile.doreadrequest <usageCode>,"The HTML Reference Library"
name = navigator.userprofile.getattribute("vcard.displayname")
email = navigator.userprofile.getattribute("vcard.email")
URL=navigator.userprofile.getattribute("vcard.homepage")

where <usageCode> is the number provided by the list box

Navigator Methods
javaEnabled
The javaEnabled method can be used to determine whether the user has Java capabilities enabled in their browser. For example :

if (navigator.javaEnabled()) {
doSomeJavathing()
}
else doSomethingElse()

would execute the doSomeJavathing() code if the user has Java enabled, or do the doSomethingElse() code if Java is disabled.

taintEnabled
Note that the taintEnabled method is understood by Internet Explorer, but it always returns a value of 'false' as data tainting isn't supported by Internet Explorer. Data Tainting is the Javascript process of protecting data for sending over networks. It prevents supposedly secure and private information from being sent without the users permission. The taintEnabled method takes a boolean value which can be used to set, or remove Data tainting. For more information on Data Tainting, visit the Javascript documentation at http://www.netscape.com/.

preference
The Netscape 4.0 specific preference method can be used to set various browser preferences (that would normally be set by the user in the 'Preferences' dialog) through scripting. Obviously, this will require a signed script. For information on signed scripts, see Netscape DevEdge Online

Navigator Events
The Navigator object has no events.

© 1995-1998, Stephen Le Hunte


Scripting Object Models

NOTE : The following topics are a very condensed paraphrasing of various documentation provided by Microsoft and Netscape. Highly detailed and complete documentation of JavaScript (version 1.0 as supported by Navigator v2.0 and version 1.1 as supported by Navigator v3.0) can be found at the Netscape Web site at http://www.netscape.com and documentation of Visual Basic Script (and JScript, Microsoft's JavaScript implementation) can be found in Microsoft's Internet Client SDK and at their Visual Basic Script web site http://www.microsoft.com/vbscript/ and their JScript web site at http://www.microsoft.com/jscript/.
The following topics are basically an object quick reference and should not be treated as any kind of replacement for the documentation provided by either Microsoft or Netscape. Indeed, readers interested in scripting HTML documents are encouraged to seek out the 'official' documentation from both companies.

For scripting purposes, practically every part of the browser and HTML document can be treated as a discrete object that has several properties and methods that can be accessed and invoked respectively. The hierarchy is as follows :

Window
Location
History
Navigator
Event
Screen
Layer
Document
 Selection
Style
TextRange
All
Anchors
Applets
Areas
Cells
Embeds
Filters
Forms
 Elements
Options
 Frames
Images
Imports
Layers
Links
Plugins
Rows
Scripts
StyleSheets / StyleSheet Object

© 1995-1998, Stephen Le Hunte


The Options Collection

Note : The Options Collection is supported by both Netscape and Internet Explorer.

The Options collection is an ordered, indexed array, containing a reference to every <OPTION> element in a given <SELECT> element. A separate options collection is available for each different <SELECT> element in the document and the options collection can only be referenced through a reference to a valid <SELECT> element object.

Option Objects would normally be retrieved by their index in the options collection. I.e.:

document.<SELECT>reference.options(1).value

returns the VALUE attribute of the second <OPTION> element in the <SELECT> element referenced by <SELECT>reference. For example, consider the following:

<SELECT NAME="Songs">
<OPTION VALUE="BuryLove" ID="BLove">Bury Your Love Like Treasure
<OPTION VALUE="JacketHangs" ID="JHangs">Jacket Hangs
<OPTION VALUE="LoverAndConfidante" ID="Lover">Lover And Confidante
<SELECT>

Calling the following in a script function:

document.Songs.options(1).value

would return JacketHangs.

A string value can be used however, as long as that string is a valid identifier (ID attribute value) for an <OPTION> element in the referenced <SELECT> element in the document.

E.g.

document.Songs.options('Lover').text

would return the Lover And Confidante - the displayed text for the <OPTION> element whose ID attribute is 'Lover'.

Properties

length
The length property returns the number of options in the collection. Note that the length count starts at 1, not 0 as the options collection index does. Therefore, the length property may return a value of 5, but to access the 3rd option in a <SELECT>, you'd need to use document.<SELECT>reference.options(2).property

Methods

add
The add method can be used to add option objects to the collection. Note that the new <OPTION> element must first be created by using the createElement method of the Document Object.

The add method takes the single argument of index which specifies where in the options collection the new element is to be placed. If no index argument is specified, the new option object is appended to the end of the collection.

item
The item method retrieves single items, or sub-collections from an areas collection. It accepts the following arguments:

options.item(index, sub-index)

If index is a number, then the method returns a reference to the <OPTION> at that position in the options collections index. I.e.

strTag=document.<SELECT>reference.options.item(2).value

would make strTag be the value of the VALUE attribute of the <SELECT>'s third <OPTION>. As you can see, this is effectively the long-hand version of using document.<SELECT>reference.options(2).property.

If the index property is a string value, then the item method returns a sub-collection, containing a reference to every option object in the select object that has its NAME or ID attribute set to the string contained in the index argument. To retrieve certain element objects from this sub-collection, the sub-index argument must be used.

remove
The remove method can be used to remove an option object from a select object. For example, using the <SELECT>/<OPTION> set from above, using:

document.Songs.options.remove(1)

would remove the second <OPTION> choice, compressing the options collection. Note that removal of option objects can also be achieved by setting their value property to "" (i.e. null).

© 1995-1998, Stephen Le Hunte


Scripting overview

Scripting Reference

Scripting within HTML documents has come a long way since Netscape first introduced Javascript in Netscape 2.0. SO much so that in Netscape, recent Javascript enhancements make a large proportion of the document content available through scripting, which allows significant display manipulation on the client side, saving slower trips back to servers to update pages. Microsoft have fully embraced and indeed extended scripting in HTML, including JScript and Visual Basic Script in Internet Explorer, also adopting various W3C specifications to the point where everything that is included in a document is available to be manipulated in various ways through either of their supported scripting languages.

The scripting reference of the HTMLib starts off with an overview of methods of attaching scripts to document elements, followed by an overview of Javascript and Visual Basic Script. There are details of all of the standard Dynamic HTML properties, methods and events, followed by a detailed look at the various element objects exposed in the browsers Scripting Object models.

Scripting for Internet Explorer 4.0 exposes every element in a document for scripting manipulation - changing its position, colour, style, adding or removing elements etc, while Netscape has rather more limited scripting support, although the most important parts of a document are available for scripting.

© 1995-1998, Stephen Le Hunte


The Plugins Collection

Note : The PlugIns collection is supported by both Netscape and Internet Explorer, although their respective support is somewhat different.

For Internet Explorer, the PlugIns collection is essentially an alias for the Embeds collection, while for Netscape, the PlugIns collection represents all the plug-ins currently installed on the client machine.

The properties of the plugins object are :

name
This property details the actual name of the plug-in. For example, on a standard Netscape installation, the plug-in installed to handle files of the audio/wav MIME type is named LiveAudio
filename
This returns the exact file name of the particular referenced plug-in module.
description
Contains a description of the plug-in module referenced. For example, the description of the LiveAudio plug-in is "LiveAudio - Netscape Navigator sound playing component".
length
This returns the total length of the plug-ins array. I.e. the number of plug-ins the user has installed and available for use.

As an example, the following code section checks to see whether the user has the Live3D plug-in available and if so, displays a VRML world, giving a notice if the plug-in isn't available :

var vVRMLallowed = navigator.plugins["Live3D Plugin DLL"]
if (vVRMLallowed)
document.writeln("Click <A HREF='htmlib.wrl'>here</A> to see a Virtual world"
else
document.writeln("Too bad, can't show you any virtual worlds.")

Note : It is possible to reference plugins by their name property.

© 1995-1998, Stephen Le Hunte


The Rows Collection

Note : The Rows collection is Internet Explorer 4.0 specific. For properties, methods and events that are supported by <TR> element, see its topic.

The Rows collection is an ordered, indexed array, containing a reference to every row in contained in the <THEAD>, <TBODY> and <TFOOT> sections of a referenced <TABLE> element. This is a collection containing <TR> elements. Note that the Rows Collection for each <THEAD>, <TBODY>, <TFOOT> and the main <TABLE> element are subtly different. Each <TR> element that specifies a Row in the Rows Collection will have a reference in one of the Rows Collections for either the <THEAD>, <TBODY>, or <TFOOT> elements and a reference in the Rows Collection of the main <TABLE> element.

Rows Objects would normally be retrieved by their index in the Rows collection (for example document.MyTable.rows(3) contains a reference to the 4th row in the table referenced by the MyTable reference (this could be the <TABLE>'s ID attribute), but a string value can be used, as long as that string is a valid identifier (ID attribute value) for a <TABLE> element in the document.

E.g.

document.MyTable.rows('MySecondRow').bgColor

...would return the value of the BGCOLOR attribute for the <TR> element whose ID property is MySecondRow, contained in the <TABLE> element referenced by MyTable

Properties

length
The length property returns the number of <TR> elements in the collection. Note that the length count starts at 1, not 0 as the rows collection index does. Therefore, the length property may return a value of 5, but to access the 3rd row, you'd need to use document.MyTable.rows(2).property

Methods

item
The item method retrieves single items, or sub-collections from the rows collection. It accepts the following arguments:

<TABLE>reference.item(index, sub-index)

If index is a number, then the method returns a reference to the row object at that position in the row collections index.

If the index argument is a string value, then the item method returns a sub-collection, containing a reference to every row in the table that has its ID or NAME attribute set to the string contained in the index argument. To retrieve certain element objects from this sub-collection, the sub-index argument must be used.

© 1995-1998, Stephen Le Hunte


The Rules Collection

Note : The Rules collection is Internet Explorer 4.0 specific. As Netscape doesn't support dynamic style sheets, it doesn't support the Rules collection.

The Rules collection returns an indexed array of all the style rules in a referenced StyleSheet object. These are the style declarations for elements, classes, ids etc., set in the style sheet. The Rules collection is populated with references to style sheet rules regardless of whether or not the referenced style sheet is disabled, although any scripting changes to the rules will only become visible if the referenced style sheet is enabled. Any style sheets linked via the @import method will have their rules expanded in-place inside the rules collection.

Note that individual rules can only be added to a rules collection, by using the addRule method of the StyleSheet object.

Properties

length
The length property returns the number of rules in the collection. Note that the length count starts at 1, not 0 as the rules collection index does. Therefore, the length property may return a value of 5, but to access the 3rd rule, you'd need to use object.rules(2).property

© 1995-1998, Stephen Le Hunte


The Scripts Collection

Note : The Scripts collection is Internet Explorer 4.0 specific. The <SCRIPT> element supports the standard Internet Explorer 4.0 attributes of CLASS, ID, TITLE, as well as its own SRC, LANGUAGE, FOR and EVENT attributes (and Dynamic HTML properties of the same names and other standard Dynamic HTML properties and methods.

The Scripts collection is an ordered, indexed (by order in the source) array, containing a reference to every <SCRIPT> element in a document.

Script Objects would normally be retrieved by their index in the All collection (for example, above document.scripts(3) contains a reference to the third <SCRIPT> element in the document), but a string value can be used, as long as that string is a valid identifier (ID attribute value) for a <SCRIPT> element in the document.

E.g., consider the following to be the second <SCRIPT> element in the document

<SCRIPT LANGUAGE="VBScript" ID="HelloScript">
msgbox "Hello"
</SCRIPT>

both:

document.scripts(1).language

and

document.scripts("HelloScript").language

would return "VBScript" as they both reference the same script.

Properties

length
The length property returns the number of <SCRIPT> elements in the collection. Note that the length count starts at 1, not 0 as the scripts collection index does. Therefore, the length property may return a value of 5, but to access the 3rd element, you'd need to use document.scripts(2).property

Methods

item
The item method retrieves single items, or sub-collections from the scripts collection. It accepts the following arguments:

scripts.item(index, sub-index)

If index is a number, then the method returns a reference to the <SCRIPT> element object at that position in the scripts collections index.

If the index property is a string value, then the item method returns a sub-collection, containing a reference to every element in the document that has its ID or NAME attribute set to the string contained in the index argument (Note that if you are using ID attributes only to uniquely identify scripts, then the sub-collection will only contain the one item). To retrieve certain element objects from this sub-collection, the sub-index argument must be used.

© 1995-1998, Stephen Le Hunte


The Screen Object

The Screen object is Internet Explorer 4.0 specific and can be used to determine details about the users screen size and colour depths etc. This can prove useful if content positioning relies on the size of the users screen.

Properties
availHeight
The availHeight property returns a value representing the available height of the users screen. This is the height property, minus that taken by any toolbars (i.e. the taskbar)

availWidth
The availWidth property returns a value representing the available width of the users screen. This is the width property, minus that taken by any toolbars (e.g. the Office toolbar)

bufferDepth
The bufferDepth property can be used to set an off screen buffering value. Setting the bufferDepth to "0", no explicit buffering is set and the colorDepth property is set to the screen depth. If bufferDepth is set to "-1" (the default), then off screen buffering is performed at the current screen depth and the colorDepth property matches the screen depth.

The bufferDepth property can be set to 1, 4, 8, 15, 16, 24 or 32, which then causes off screen buffering to occur at the set bit-per-pixel depth. i.e. bufferDepth=8 performs buffering at 8 bits per pixel, which is 256 colours. Setting the bufferDepth to any other value causes it to be set to "-1".

Note that when bufferDepth is "-1", if the user changes their system settings, the bufferDepth is automatically changed to the new screen depth.

colorDepth
The colorDepth property is read-only and reflects the users current system color depth settings, in bits-per-pixel. I.e. 256 colours, colorDepth=8, 16.7million colours, colorDepth=16.

Note that the colorDepth property is dependent on the bufferDepth property. If bufferDepth is set to 0 or -1, then colorDepth is equal to the bits-per-pixel value of the users system settings. However, if the bufferDepth has been explicitly set to a different value, then the colorDepth property is equal to the bufferDepth property.

fontSmoothingEnabled
The fontSmoothingEnabled property returns a boolean value indicating whether the user has font smoothing enabled on their system or not.

height
The height property reflects the users current screen height, in pixels.

updateInterval
The updateInterval property can be used to set (in mSec), the time between updates for the current viewing window. This is only really a problem when large (size or amount) moving, or continually refreshing images are present in a page.

setting updateInterval=0 resets the screen update Interval to its default setting, chosen by Internet Explorer.

width
The width property reflects the users current screen width, in pixels.

Methods
The Screen Object has no methods.

Events
The Screen Object has no events.

© 1995-1998, Stephen Le Hunte


The Selection Object

The Selection object is Internet Explorer 4.0 specific and is an object that represents any currently selected section of a document. Sections of a document are typically selected by the user holding down a mouse button and dragging the mouse, but can also be created by scripts using the select method on a Text Range Object.

Properties
type
The type property is read-only and can be one of two values ("None" or "Text"). If the user has selected some text and/or other elements in a document, then the type property will return "Text", otherwise if no selection has been made, the type property will return "None".

Methods
clear
The clear method can be used to remove the current text selection from the document. This is going to prove useful for people wanting to build WYSIWYG HTML editors based on Internet Explorer 4.0. Coupled with methods like the execCommand method (see the Document Object) to insert HTML elements, a new breed of editors will start to appear based entirely on the Internet Explorer 4.0 HTML rendering engine.

createRange
The createRange method creates a Text Range object from the current active selection. This can then be manipulated through the properties, methods and events of the TextRange object.

empty
The empty method deselects the current selection, sets the selection type to "none", and sets the item property to null. The visual effect of the empty method is deselection of the text (i.e. its highlight is removed) Note : The two methods will only work in the text section below and at the time of writing, using the empty method caused the document to scroll to the top.

For example:

Select your method choice from the radio buttons below, then select any of this text (left-mouse button and drag) and press the right-mouse button to clear or empty the selection.

Events
The Selection Object has no events.

© 1995-1998, Stephen Le Hunte


The StyleSheet Object

Note : The StyleSheet object is Internet Explorer 4.0 specific.

Each Style Sheet applied to a document (with a <LINK> or <STYLE>, or by using the @import method (see the Style Sheets overview)) is a style sheet and is available through the StyleSheets or Imports collections.

Each StyleSheet object has the following properties:

Properties
disabled
The disabled property directly reflects the value of the DISABLED attribute in either the <LINK> or <STYLE> element that declares the StyleSheet object. The disabled property will also be "false" if the referenced StyleSheet object has no TITLE attribute.

href
The href property will return (or can set) the URL for the referenced style sheet, if the referenced style sheet was included with a <LINK> element, returning "null" if it was set with a <STYLE>. For <LINK>ed Style Sheet objects, the href property can be changed, causing a different style sheet to be loaded for the document.

id
The id property directly reflects the referenced Style Sheet objects ID attribute (if set). The id property is read-only.

owningElement
The owningElement property returns the <LINK> or <STYLE> element that defined the referenced Style Sheet object in the document.

parentStyleSheet
For Style Sheets attached to a document by the @import method, the parentStyleSheet property will return a reference to the <LINK> or <STYLE> element that 'imported' them into the document.

readOnly
The readOnly property determines whether or not the addRule method (see below) can be used on the referenced Style Sheet. Style Sheets that aren't read-only, can have style rules added to them, using the addRule method described below.

type
The type property reflects the value of the TYPE attribute used in the <LINK> or <STYLE> element that defines the Style Sheet. Note that Style Sheets with type property/TYPE attribute values of anything other than 'text/css' aren't supported in Internet Explorer 4.0.

Methods
addImport
The addImport method can be used to include a new @imported Style Sheet object into the referenced Style Sheet object. The syntax is:

integer = stylesheet.addImport(url, [index])

where integer (the return value) specifies the index of the new @imported stylesheet in the Imports collection, url is the URL of the new Style Sheet to import and index (if specified) specifies the position of the new Style Sheet object in the StyleSheets collection. If no index is given, then the new Style Sheet object is appended to the end of the StyleSheets collection.

addRule
The addRule method can be used to add a new Style Sheet rule to the referenced Style Sheet object. For example:

intNewRule = <StyleSheet>reference.addRule "H1", "font-size:36pt"

would add a new Style for <H1> element to the Style Sheet object referenced by <StyleSheet>reference. The addRule method can also take a third argument of index which specifies where in the Rules collection the new style rule should go. By default, new rules will be appended to the end of the referenced style sheet, but by using the index property, a rule can be inserted anywhere, which can affect the use of the new rule. For example consider the case where the font-size and color of an element are changed by adding a new rule and an existing rule specifies a colour for that particular element. If the new rule is appended to the end of the Rules collection, then its colour setting will over-ride that of the existing rule. If it's included before the existing rule, then the new font-size will be used, but not the colour - that will be used from the existing style sheet rule.

© 1995-1998, Stephen Le Hunte


The Style Object

The Style object is Internet Explorer 4.0 specific and can be used to retrieve any in-line styles applied to an element object by using the STYLE attribute. Note that it doesn't retrieve stylings set in embedded, or externally linked stylesheets. To obtain information about these, use the StyleSheets collection.

Properties
The Style object has a property for every possible style setting for element objects. Basically any style sheet attribute is a property of the Style object. The only difference is grammatical, in terms of hyphenation. Below is a complete list of Style object properties and their corresponding Style Sheet attributes. For more information about the values of the attributes/properties, see the respective Style Sheets topic.

Style Object Property | Style Sheet attribute
background | background
backgroundAttachment | background-attachment
backgroundColor | background-color
backgroundImage | background-image
backgroundPostion | background-position
backgroundRepeat | background-repeat
border | border
borderBottom | border-bottom
borderBottomColor | border-bottom-color
borderBottomStyle | border-bottom-style
borderBottomWidth | border-bottom-width
borderColor | border-color
borderLeft | border-left
borderLeftColor | border-left-color
borderLeftStyle | border-left-style
borderLeftWidth | border-left-width
borderRight | border-right
borderRightColor | border-right-color
borderRightStyle | border-right-style
borderRightWidth | border-right-width
borderStyle | border-style
borderTop | border-top
borderTopColor | border-top-color
borderTopStyle | border-top-style
borderTopWidth | border-top-width
borderWidth | border-width
clear | clear
clip | clip
color | color
cursor | cursor
display | display
filter | filter
font | font
fontFamily | font-family
fontSize | font-size
fontStyle | font-style
fontVariant | font-variant
fontWeight | font-weight
height | height
left | left
letterSpacing | letter-spacing
lineHeight | line-height
listStyle | list-style
listStyleImage | list-style-image
listStylePosition | list-style-position
listStyleType | list-style-type
margin | margin
marginBottom | margin-bottom
marginLeft | margin-left
marginRight | margin-right
marginTop | margin-top
overflow | overflow
paddingBottom | padding-bottom
paddingLeft | padding-left
paddingRight | padding-right
paddingTop | padding-top
pageBreakAfter | page-break-after
pageBreakBefore | page-break-before
position | position
styleFloat | float
textAlign | text-align
textDecoration | text-decoration
textDecorationBlink | text-decoration
textDecorationLineThrough | text-decoration
textDecorationNone | text-decoration
textDecorationOverline | text-decoration
textDecorationUnderline | text-decoration
textIndent | text-indent
textTransform | text-transform
top | top
verticalAlign | vertical-align
visibility | visibility
width | width
zIndex | z-index

The Style object also supports the following properties:

cssText
The cssText property returns a string containing the contents of the referenced elements STYLE attribute.

Note : The contents of the cssText property returns an alphabetically sorted and expanded list of the style sheet attributes set in the referenced elements <STYLE> attribute. For example, if an element contains STYLE="border-color:red", then the cssText property of the elements style object will return:

BORDER-BOTTOM-COLOR: red;BORDER-LEFT-COLOR: red;BORDER-RIGHT-COLOR: red;BORDER-TOP-COLOR: red

expanding the single shorthand border-color property into its constituent parts.

backgroundPositionX
The backgroundPositionX property returns only the x-coordinate of the background property (see above), which reflects a STYLE="background:..." settings within the referenced element.

backgroundPositionY
The backgroundPositionY property returns only the y-coordinate of the background property (see above), which reflects a STYLE="background:..." settings within the referenced element.

pixelHeight
The pixelHeight property returns or sets the height of the referenced element in pixels, regardless of its height unit setting in its stylings.

pixelLeft
The pixelLeft position sets, or reflects the horizontal offset (relative to the current viewing window) of the left-most edge of the referenced element. The value returned is always in pixels.

pixelTop
pixelTop is much the same as pixelLeft except that it returns, or sets the vertical offset of the referenced element, in pixels.

pixelWidth
Like pixelHeight, pixelWidth returns, or sets the width of the referenced element in pixels, regardless of its length unit settings in the styling.

posHeight
The posHeight property sets or retrieves the height of the referenced element in the same units as the elements height is defined in, in the styling. Dynamically setting this property will alter the displayed height of the element, but not alter the height units it uses for display purposes.

posLeft
The posLeft property sets or returns the referenced elements left-most position, relative to the current viewing window, in the units specified in the style sheet height attribute. Again, dynamically setting the posLeft property will move the referenced element, but not affect the length units it uses to position itself.

posTop
posTop is the same as posLeft, the only difference being that it deals with vertical offsets, not horizontal ones.

posWidth
posWidth returns or sets the width of the current, in the units specified in the stylings width attribute. Again, changing it alters the elements display, but leaves its width units unaffected.

Methods
The Style object accepts the standard Dynamic HTML Methods getAttribute, removeAttribute and setAttribute. See that topic for details.

© 1995-1998, Stephen Le Hunte


The TextRange Object

Note : The TextRange object is Internet Explorer 4.0 specific.

The TextRange object can be used to manipulate any of the document content. It represents one of the major additions to Dynamic HTML, especially considered against the W3C's 'Document Object Model' (http://www.w3.org/pub/WWW/MarkUp/DOM/). One of the more distinctive points of that specification is the ability to be able to manipulate document content through scripting, which the TextRange object more than adequately covers.

A TextRange object can be created by calling the createTextRange() method from the <BODY>, <BUTTON>, <TEXTAREA> or <INPUT TYPE="text"...> elements, or by using the createRange() method on the users current selection through the Selection Object. The text in the resulting TextRange object can then be manipulate in various ways.

Properties
htmlText
The htmlText property returns the contents of the referenced TextRange object, with its HTML intact.

text
The text property returns the contents of the referenced TextRange object as plain text, regardless of any HTML formatting of the content.

For example, consider the following HTML fragment:

this is the <STRONG>contents</STRONG> of a TextRange object

The htmlText property of the TextRange would be:

this is the <STRONG>contents</STRONG> of a TextRange object

whereas the text property would be:

this is the contents of a TextRange object

Methods
collapse
The collapse method sets an insertion point at either the beginning (collapse(true)), or end (collapse(false)) of the referenced TextRange object. Insertion points are useful, as then various execCommand commands (see below) can be executed on the text range to insert new element into the HTML. For example, select some of the text below (the white paragraph) and then press the right mouse button. When this happens the following script function is executed:

. . .
set selectedRange = document.selection.createRange()
selectedRange.collapse(false)
selectedRange.execCommand "InsertHorizontalRule","HR1"

This creates a TextRange object from the current Selection Object, then forces the insertion point to the end of the resulting TextRange object and inserts a <HR> element with an ID attribute/property setting of HR1

Select some of the text, then press the right mouse button to insert a <HR> element anywhere in this text.

compareEndPoints
The compareEndPoints method can be used to compare the ends (either starting, or finishing ends) of two TextRange objects and returns a value of "-1", "0" or "1" depending on whether the compared TextRange object's end point is greater than, equal to, or less than the referenced

duplicate
The duplicate method can be used to create a temporary copy of a referenced TextRange object. For example:

set TR2 = TR1.duplicate()

would create a TextRange object TR2 that is a copy of the TextRange object TR1

ExecCommand
The Internet Explorer 4.0 specific execCommand method can be used to execute a number of commands over a TextRange object. The syntax is:

Boolean = object.execCommand(command [, bool [, value]])

where:

command
is one of the possible Command Identifier (see below)
bool
A boolean value setting whether to show any possible interface that the particular command may have
value
A possible value, the contents/data type of which are determined by the specific command used

The possible Command Identifiers are:

Command | Description | Value
BackColor | sets the background colour of the referenced text | #rrggbb|Colour name
Bold | Wraps a <B> element around the referenced object | -
Copy | Copies the referenced object to the clipboard | -
CreateBookmark | Wraps a <A NAME="..."> element around the referenced object | String - bookmark to use
Create Link | Wraps a <A HREF="..."> element around the referenced object | String - URL for link
Cut | Copies the referenced object to the clipboard, then removes it from the document | -
Delete | Deletes the referenced object | -
FontName | Sets the typeface for the referenced object | String - Font Name
FontSize | Sets the font size for the referenced object | String - size
ForeColor | Sets the foreground (i.e. text) colour for the referenced object | #rrggbb | Colour Name
FormatBlock | Wraps a specified block-level element around the referenced object | String - block level element to use
Indent | Indents the referenced object | -
InsertButton | Inserts a <BUTTON> element at the current insertion point | String - ID value
InsertFieldSet | Inserts a <FIELDSET> element at the current insertion point | String - ID value
InsertHorizontalRule | Inserts a <HR> element at the current insertion point | String - ID value
InsertIFrame | Inserts a <IFRAME> element at the current insertion point | String - SRC value
InsertInputButton | Inserts a <INPUT TYPE="button"> element at the current insertion point | String - ID value
InsertInputCheckbox | Inserts a <INPUT TYPE="checkbox"> element at the current insertion point | String - ID value
InsertInputFileUpload | Inserts a <INPUT TYPE="FileUpload"> element at the current insertion point | String - ID value
InsertInputHidden | Inserts a <INPUT TYPE="hidden"> element at the current insertion point | String - ID value
InsertInputPassword | Inserts a <INPUT TYPE="password"> element at the current insertion point | String - ID value
InsertInputRadio | Inserts a <INPUT TYPE="radio"> element at the current insertion point | String - ID value
InsertInputReset | Inserts a <INPUT TYPE="reset"> element at the current insertion point | String - ID value
InsertInputSubmit | Inserts a <INPUT TYPE="submit"> element at the current insertion point | String - ID value
InsertInputText | Inserts a <INPUT TYPE="text"> element at the current insertion point | String - ID value
InsertMarquee | Inserts a <MARQUEE> element at the current insertion point | String - ID value
InsertOrderedList | Inserts a <OL> element at the current insertion point | String - ID value
InsertParagraph | Inserts a <P> element at the current insertion point | String - ID value
InsertSelectDropdown | Inserts a <SELECT TYPE="dropdown"> element at the current insertion point | String - ID value
InsertSelectListbox | Inserts a <SELECT TYPE="Listbox"> element at the current insertion point | String - ID value
InsertTextArea | Inserts a <TEXTAREA> element at the current insertion point | String - ID value
InsertUnorderedList | Inserts a <IL> element at the current insertion point | String - ID value
Italic | Wraps a <I> element around the referenced object | -
JustifyCenter | Centers the referenced object | -
JustifyFull | Full justifies the referenced object | -
JustifyLeft | Left justifies the referenced object | -
JustifyRight | Right justifies the referenced object | -
Outdent | Outdents the referenced object | -
OverWrite | Sets the typing mode - insert or over-write | Boolean - true=over-write, false=insert
Paste | Places clipboard contents at the current insertion point (can only paste text copied by the copy command in script | -
PlayImage | Starts playing any dynamic (i.e. video, animated GIF's etc) images with the referenced object | -
Refresh | Reloads the source of the current document | -
RemoveFormat | Removes formatting for the referenced object | -
RemoveParaFormat | Removes any paragraph formatting for the referenced object | -
SelectAll | Selects the whole document text | -
StopImage | Stops playing of all dynamic images | -
Underline | Wraps a <U> around the referenced object | -
Unlink | Removes a link | -
Unselect | Empties any selections from the document | -

Note : Different Command Identifiers are supported 4.0 for the TextRange object (or the Document Object object).

expand
The expand method expands a TextRange object to totally cover any partial units. By using differing arguments, it can expand to cover characters, words, sentences, or an entire editable text range. For example, suppose the following is a users current text selection:

I'm only partly selected

Using:

bIsExpanded=TextRangereference.expand("word")

would return true (i.e. bIsExpanded=true) if the TextRange object was successfully expanded to cover the whole of the word 'partly'. Note that the expand method expands the TextRange at both ends to cover the amount specified in the method argument (this can be character, word, sentence or textedit)

findText
The findText method searches for text in the given TextRange object and if it finds the text, positions the TextRange object around the text. For example:

set TRange=document.body.createTextRange()
TRange.findText("HTMLib")
. . .

would search the whole document for the text "HTMLib".

getBookmark
The getBookmark method can be used to create a 'bookmark' for the referenced TextRange object, which can then be moved to later, using the moveToBookmark method (see below). This is useful when managing an entire document as a TextRange object, because it allows script functions to navigate back to certain points of the TextRange object.

inRange
The inRange method allows a script function to determine where a referenced TextRange object is contained within another TextRange object. For example:

bIsIn=TR1.inRange(TR2)

would return true (bIsIn=true) is the TextRange TR1 was contained in the TextRange TR2.

isEqual
Two separate TextRange objects are deemed to be equal if they're start and end points are the same position within the document content. The isEqual method can be used to determine whether or not two TextRange objects are considered equal.

bIsEqual=TR1.isEqual(TR2)

would return true is the TextRange object TR1 is equal to the TextRange object TR2.

move
The move method can be used to move a TextRange object by a set number of units. Possible units are character, word, sentence or textedit. The optional argument count can be used to move the TextRange a set number of units. For example, click the button below. It'll create a TextRange (with the button text), then move the text range 3 words, expand it by a word and highlight the resulting TextRange object.

The script code is:

set Range=document.all("btn1").createTextRange()
Range.move "word",3
Range.expand "word"
Range.select()

Note : Moving the collapsed TextRange by three words positions its start point between the third and fourth words, so it's the fourth word that is selected and highlighted.

moveEnd
The moveEnd method alters the size (and content) of the referenced TextRange object by moving its end point by a set number of units (again, these are character, word, sentence and textedit). For example, if we added:

Range.moveEnd "word",1

to the above example, it would highlight "very long" as the TextRange, instead of just "long".

moveStart
Like the moveEnd method, the moveStart method changes the start point of the referenced TextRange object (again in character, word, sentence, or textedit units.

moveToBookmark
The moveToBookmark moves the referenced TextRange object to a bookmark, previously defined using the getBookmark method (described above).

moveToElementText
The moveToElementText method moves the referenced TextRange's start and end points to encompass the text of any element contained in the original TextRange object. For example, the button below contained some <STRING> text that contains some <EM> emphasised text. Clicking it once will move the TextRange (created from the whole button) to the contents of the <STRong> element, clicking it twice will move the TextRange object to the text in the <EM> element.

It's clear how useful the moveToElementText method could be given TextRange objects that encompass an entire document. Any element in the document could be made into a TextRange object, event though most elements don't support direct TextRange object creation.

moveToPoint
The moveToPoint method can be used to create an initially empty TextRange object whose start and end points are specified in the x and y arguments of the method. The resulting TextRange object can then be expanded (using the expand method (described above) or the moveEnd and moveStart methods to encompass a certain amount of text.

parentElement
Every TextRange object has a parentElement property that contains a reference to the element that totally encloses the contents of the TextRange element. The element object reference returned represents the lowest element object (in the document hierarchy) that totally encloses the referenced TextRange. For example, the parentElement reference for any selected TextRange objects in the collapse method, is the <P> element.

pasteHTML
The pasteHTML method pastes the given HTML string into the contents of the referenced TextRange, over-writing the existing TextRange contents. The pasteHTML method will never fail, although to ensure the best results, you should take care to only use correct HTML in the pasteHTML method. For example <BUTTON> elements cannot be nested, so TextRange objects created from <BUTTON> elements should not have any <BUTTON> HTML inserted into them with the pasteHTML method.

queryCommandEnabled
The Internet Explorer 4.0 specific queryCommandEnabled method allows you to determine whether a specific command (as defined by its command identifier is available for the referenced object. As mentioned before, certain commands aren't available for the respective Document Object or Text Range objects, so the queryCommandEnabled method should be used to determine whether the command is enabled for the referenced object before attempting to use the command. The queryCommandEnabled method takes one argument, which should be a string containing one of the Command Identifiers.

queryComandIndeterm
The Internet Explorer 4.0 specific queryCommandIndeterm method can be used to determine whether a specific command is in the indeterminate state or not. It accepts one argument - a string value containing the Command Identifier in question.

queryCommandState
The queryCommandState method is used to determine the state of any command issued with the execCommand method (see above). It returns true if the command was successfully carried out on the referenced object, false if the command failed.

queryCommandSupported
queryCommandSupported method can be used to determine whether the command is currently on or off. It accepts a single argument of a string value defining the Command Identifier to be queried and returns a boolean value of true is the command is on for the referenced object, or false if it isn't.

queryCommandText
The Internet Explorer 4.0 specific queryCommandText method can be used to determine the the string associated with a command. It accepts the standard string argument of the Command Identifier together with a string value which can be either Name or StatusText which specified whether to return the short name of the command in question, or the status bar text which may appear with the specific command.

queryCommandValue
The Internet Explorer 4.0 specific queryCommandValue method can be used to determine the value argument used in the execCommand method. See the Command Identifiers for details of the values used with certain commands.

scrollIntoView
The scrollIntoView method is one of the standard Dynamic HTML methods and can be used to force the current viewing window to scroll to a referenced TextRange object. It accepts a boolean argument (true or false) which determines whether the window should be scrolled so that the referenced TextRange object is at the top (true) or bottom (false) of the window. For example, the button below will select the contents of the <BUTTON> element in the move method and scroll it into view, so that it's at the top of the viewing window.

select
The select method highlights the referenced TextRange object in whatever highlighting styles are set by the users system for highlighted text (for example, text selected in a document).

setEndPoint
The setEndPoint method sets the end point of one TextRange object, based on the contents of another TextRange object. It accepts two arguments - one specifying which end points should be matched (this can be either StartToEnd, StartToStart, EndToStart or EndToEnd) and a reference to the TextRange object whose end point is being matched.

© 1995-1998, Stephen Le Hunte


Visual Basic Script

NOTE : A Scripting Reference is now included in this HTMLib. This details various methods of invoking scripts, event handlers that can be included in various standard HTML elements and an Object Model Comparison between Internet Explorer and Netscape. For some more Visual Basic Script information, see the Scripting Reference topics.

Visual Basic Script recently introduced by Microsoft represents a step further towards active web pages. Like JavaScript, Visual Basic Script provides scripting, automation and customisation capabilities for Internet Explorer. It is a subset of the Visual Basic programming language that is fully compatible with Visual Basic and Visual Basic for Applications.

To use Visual Basic Script within a HTML document, the code needs to be wrapped in <SCRIPT> ... </SCRIPT> elements, just like JavaScript (or contained in a separate text file and referenced using the SRC="URL" attribute). As with JavaScript, the LANGUAGE attribute is required, in this case needing the value "VBScript". Visual Basic Script comes into its own when used in conjunction with ActiveX OLE controls, which allow for full automation with any OLE compliant application, but can be used for almost any purpose on a page, allowing for truly interactive web sites to be created relatively easily.

NOTE : Internet Explorer only supports external Visual Basic Script files from 3.02 onwards. The script file is just a text file, containing the functions etc., of the script required by the document and can have any extension (proper MIME type mapping will be required to ensure correct functionality)

The following code section, assigns the action described in the script (namely that a message box pops up when the button is pushed) to the button, named 'btnHello' which has been embedded within the page.

<SCRIPT LANGUAGE="VBScript">
<!-- These comment delimiters ensure the code is hidden from those browsers that do not support Visual Basic Script
Sub btnHello_OnClick
MsgBox "Hello, It's a fine day"
End Sub
-->
</SCRIPT>

NOTE : Netscape will not activate the script on pressing the button. It can be made to act similarly using JavaScript.

The button, called 'btnHello' responds to being clicked by displaying a message box with the text "Hello, It's a fine day". For information on how to embed ActiveX controls, see the <OBJECT> element. (The button in the above example was embedded into the page using a standard <INPUT TYPE=BUTTON> element. For more details, see the Forms section.)

As with JavaScript, a complete description of Visual Basic Script is well outside the scope of this reference and you are encouraged to visit http://www.microsoft.com/vbscript/ for more information and a complete copy of the language documentation.

Examples
NOTE : Netscape will not display or work the following scripted examples properly.

This is the Visual Basic Script version of the example given on the JavaScript page. It gives a greeting according to the time of day.

Here is another, more involved example. There isn't really room to put all the example code in here, so use the View Source option (via a right mouse click in Internet Explorer) to see how this is done. It's a version of the ever popular Scissors, Paper, Stone game, done entirely in Visual Basic Script. It keeps a running score and even offers some criticism on how the game went if the scores are refreshed. Ever so simple to do, see for yourself (view the source and watch out for the comments)

Scissors, Paper, Stone, using Visual Basic Script
Drawn : | I've won : | You've won :

The 'Activated Colour Wizard' (an ActiveX/Visual Basic Script based Web application) should also be viewed as an example of ActiveX/Visual Basic Script interaction. To see the example, go to the ActiveX/VBScript examples topic.

© 1995-1998, Stephen Le Hunte


The Window Object

The Window object is the top level object and represents the window of the browser. It is the parent of the objects below it in the hierarchy list.

Window objects are either the current window (if the browser is displaying only a single document), or those created with a window.open() method (where the name is specified in the code), or separate frames, if the document is laid out using a <FRAMESET> definition (where the windows are named in the <FRAME> element). As the Window object is the top level object in the object hierarchy and the existance of the current window is assumed, most Window properties need not be prefixed by Window. For example, the following two references are identical :

window.defaultStatus
defaultStatus

and would both return the default text of the status bar for the current window. NOTE : The only exception to this is the open() and close() methods, which require an explicit window. prefix (i.e. window.open() and window.close()). Windows can also be referenced by using the properties top, parent or name, where the name property is replaced with the actual window name (as specified in the window.open() code, or <FRAMESET>. The parent and top properties are exactly as those used in <A HREF="..." TARGET="..."> constructs if the windows are part of a frameset.

Window Properties
client
The client property reflects the Navigator Object and can be used to retrieve information about the browser client.

closed
The Internet Explorer 4.0 specific closed property has a read-only boolean value, which represents whether the referenced window is closed (closed=true) or not (closed=false).

defaultStatus
The defaultStatus property can be accessed to return or set the text to be shown in the status bar of the browser while the current document. The defaultStatus property is different to the status property in that the text is always shown in the status bar. As seen below, the status property can be used to temporarily alter the status bar text. Internet Explorer currently set this property as the default status text and so works as the status property.

dialogArguments
The dialogArguments property returns any arguments that were used when the referenced modal dialog window was created. Note that this property only applies to windows created with the showModalDialog method. For example, if the following is used to open a modal dialog window:

self.showModalDialog "dialog.htm", "Enter search string"

and dialog.htm contains a text box (with an ID attribute of txtSearch), then running:

txtSearch.value=window.dialogArguments

would put the text "Enter search string" into the text box.

dialogHeight
The Internet Explorer 4.0 specific dialogHeight property reflects the height of the referenced modal dialog window. It is set as one of the features in the showModalDialog method.

dialogLeft
The Internet Explorer 4.0 specific dialogLeft property reflects the horizontal offset of the referenced modal dialog window, relative to the left hand edge of the desktop. It is set as one of the features in the showModalDialog method.

dialogTop
The Internet Explorer 4.0 specific dialogTop property reflects the vertical offset of the referenced modal dialog window, relative to the top edge of the desktop. It is set as one of the features in the showModalDialog method.

dialogWidth
The Internet Explorer 4.0 specific dialogWidth property reflects the width of the referenced modal dialog window. It is set as one of the features in the showModalDialog method.

document
The document property references the The Document Object for the referenced window. The document object has properties that contain information about the current document being viewed in the browser window object. For example :

vColour=parent.document.bgColor

stores the background colour of the document in the current window's parent in the variable vColour.

event
The event property references the Event Object, through which key and mouse states/positions can be determined for any event that occurs. Note that the Event Objects supported by both Internet Explorer and Netscape are different. Details are given in the Event Object topic.

external
The Internet Explorer 4.0 specific external property can be used to reference the object model of applications that host Internet Explorer. Various properties, methods and events exposed by the host application would then be available to scripting in HTML documents being displayed in the Internet Explorer application inside the host. Two methods are inherent to the external property though:

addChannel
Presents a user with a dialog box allowing them to add a channel to their system, or modify its properties if the channel is already installed. The addChannel method takes the single argument of a URL which should be the complete URL of the CDF file that defines the channel. Note that Microsoft intend this function only for publishers pre-installing channels when re-distributing Internet Explorer 4.0. As with the Internet Client SDK, it's included here for completeness.
isSubscribed
Returns a boolean (i.e. true or false) value representing whether the user is currently subscribed to the channel referenced in the URL argument of the method. A scripting error will occur if the referenced channel is not in the same secondary domain (i.e. http://beta.htmlib.com/ and http://www.htmlib.com/ both have the same secondary domain) as the document calling the method.

For further information on channels and information on creating channels, download the Internet Client SDK from Microsoft.

frames
The frames property references the The Frames collection. When a document is a framed document, the individual frames are indexed, starting at 0. So, for example, to access the location object of the frame defined third in the <FRAME> definitions, the following could be used :

vLocation=window.frames(2).location

NOTE : The above example uses Visual Basic Script notation (i.e. '(' and ')') to denote the index. JavaScript functions require the use of square bracket ('[' and ']').

history
The history property is also an object in its own right, with properties and methods. For more information, see The History Object. It represents the browsers current history list (a list of recently visited sites).

innerHeight
The Netscape 4.0 specific innerHeight property returns a value representing the referenced windows viewing area height (i.e. not including toolbars, scrollbars etc), in pixels.

innerWidth
Like the innerHeight property, the The Netscape 4.0 specific innerWidth property returns a value representing the referenced windows viewing area width (i.e. not including toolbars, scrollbars etc.), in pixels.

length
The length property returns the number of frames in a window object (when used under the window object. The length property is common to many scriptable objects). For example :

vFrames=HelpWin.length

would store the number of frames in the window named HelpWin (which is either a single frame, or a window created using the window.open() method) in the variable vFrames.

location
The location property returns the URL of the window objects current document (because href is its default property). This is actually an object in its own right, with various properties. For more details, see the Location Object.

locationbar
In Netscape 4.0, the Window Object supports the locationbar property, which has a boolean property of visible. Setting:

window.locationbar.visible=false

would remove the referenced windows location bar. Note : This can only be done via a 'signed script'. For information on signed scripts, see Netscape DevEdge Online.

menubar
As with the locationbar property, the menubar property is Netscape 4.0 specific and can be used (by setting the visible property to false) to remove the menu bar of the navigator window. This too requires a signed script.

name
The name property represents the name of a window object. It is read-only (that is, script functions can interrogate window names, but can not define them dynamically)

navigator
The navigator property references the Navigator Object property. See that topic for information about the navigator object.

offscreenBuffering
When Internet Explorer 4.0 is downloading a page, it initially sets the offscreenBuffering property to a string value of "auto" and it decides whether offscreen buffering is necessary. This can be over-ridden in a script function, by explicitly setting the offscreenBuffering property to "true" or "false". Once it has been set (either way), it returns a boolean value, representing whether offscreen buffering if enabled or not.

opener
The opener property returns the name of the window that created the current window (via a window.open() event). It can be used with further object properties (such as location etc.) to access properties of the window/document that opened the current window, or methods such as close() to automatically close the window that created the current window. For example :

self.opener.close()

would automatically close the window that created the new window. Note that recent enhancements to Javascript means that the first window used (i.e. the first browser window) cannot be closed in a script without the user confirming this (a confirm? dialog box appears)

outerHeight
The Netscape 4.0 specific outerHeight property returns a value representing the referenced windows total height (i.e. including toolbars, scrollbars etc), in pixels.

outerWidth
The Netscape 4.0 specific outerWidth property returns a value representing the referenced windows total width (i.e. including toolbars, scrollbars etc), in pixels.

pageXOffset
The Netscape specific pageXOffset property reflects the difference between the current horizontal position in the page and the pages left-most edge. That is, as a page is scrolled horizontally, the pageXOffset will increase, or decrease, being 0 if the current viewing area is the left-most edge of the page. (Note : This is similar to Internet Explorers scrollLeft property, but the two are incompatible)

pageYOffset
Similar to the pageXOffset property, the pageYOffset property reflects the same difference (of current vertical positions) between the current viewing area and the top-most edge of the window. (Note : This is similar to Internet Explorers scrollTop property, but the two are incompatible)

parent
The parent object returns the current windows parent object if the current window is part of a frame set (if it isn't, then accessing the parent property returns the current window object, acting as the self property). For example :

vStrParentName=parent.name

would store the name property of the parent window of the current window in the variable vStrParentName.

personalbar
In Netscape 4.0, the Window Object supports the personalbar property, which has a boolean property of visible. Setting:

window.personalbar.visible=false

would remove the referenced windows 'personal bar'. Note : This can only be done via a 'signed script'. For information on signed scripts, see Netscape DevEdge Online.

returnValue
This Internet Explorer 4.0 specific property reflects the return value of a modal dialog window, created with the showModalDialog method.

screen
The Internet Explorer 4.0 specific screen property provides a reference to the Screen Object, for obtaining properties of the users current resolution etc.

scrollbars
Like the other Netscape 4.0 specific *bars properties, the scrollbars property has the boolean visible property, which can be used to remove the scroll bars from a window. Note that this can only be performed by a signed script.

self
The self property returns the window object of the current window. For example :

vStrStatus=self.status

stores the text in the current window's status bar in the variable vStrStatus.

status
As said above, the status property can be used to temporarily change the text displayed in the status bar of a browser window. It is commonly used to set the status bar text when the mouse is moved over links in a document, so that more explanatory text, instead of a URL is displayed. For example :

self.status="This goes to the HTMLib web site"

would set the text in the status bar to "This goes to the HTMLib web site". Note that when documents are presented in a frame based layout, windows don't share common access to the browsers status bar, so using self.status in any frame based document, may not have any effect, but accessing top.status would change the status bar text.

statusbar
Like the other Netscape 4.0 specific *bars properties, the statusbar property has the boolean visible property, which can be used to remove the status bars from a window. Note that this can only be performed by a signed script.

toolbar
Again, the Netscape 4.0 specific toolbar has the boolean visible property, which can remove the tool bar from the navigator window. As with the other *bar properties, this can only be performed by a signed script.

top
The top property returns the window object of the top-most browser window. For example :

vLocation=top.location

sets the vLocation variable to the complete URL of the document in the top-most browser window.

window
The window property is a synonym for the current window. Like self, it references the current window.

Window Methods
alert
The alert method can be used to display a message to the user. (Internet Explorer Visual Basic Script also allows the use of the MsgBox function to do the same, with more interaction options). For example :

alert "Hi there, welcome to my page"

would display the message "Hi there, welcome to my page" over the current window. (NOTE : As alert is a method of the window object (the top level object), it does not require the window. prefix.) Also note that the message string can be a text string, or a property of any existing object.

back
The Netscape 4.0 specific back method causes the referenced window to navigate back one URL in its history list. It's the same as if the user had pressed the 'Back' button, or the history object had been scripted to cause a jump back.

blur
This Netscape specific method can be used to forceably remove focus from a given window object. For example, suppose you have created a window (via window.open() code, called 'HelpWin'), the following :

HelpWin.blur()

would remove focus from the newly created window.

captureEvents
This Netscape 4.0 specific event can be used to set the a window (or Document) object to handle single, or various events that would otherwise be handled by different document elements. For example:

window.captureEvents( Event.Click | Event.DblClick)

sets up the window to capture all click and double-click events (onclick and ondblclick). Once a window has captured events, you then need to decide what happens with them. The various options are:

  1. Return true
    Whatever element received the event that was captured by the window event will perform its default action (i.e. an <A> element's default action is to navigate to the URL provided in its HREF attribute).
  2. Return false
    The default action of the element receiving the event will not occur (e.g. the link will not navigate to the URL)
  3. Call routeEvent method
    This causes JavaScript to search for other event handlers for the event. For example, the Document Object may have been trying to capture the event. Failing another object trying to capture the event, Javascript will look to the original intended target of the event, in order to decide what to do.
  4. Call the handleEvent method
    This will force another element/object (that can handle such an event) to handle it, normally by performing its default action.

clearInterval
The clearInterval method cancels a corresponding setInterval method (described below. The syntax is :

clearInterval (MyInterval)

clearTimeout
The clearTimeout method is used to clear a specified setTimeout method, by referencing it by the ID of the setTimeout method. For example, to clear the setTimeout given in the previous example, use the following code :

clearTimeout MyTimeOut

NOTE : both the setTimeout and clearTimeout do not need the window. prefix, as they are methods of the top level Window object.

close
The window.close() method closes the window specified in the window. prefix, which is required. Any window can be closed using this method, providing it is referenced either by its name property, or by parent, self or top. NOTE : From JavaScript 1.1 (as supported by Navigator 3.0 and above), the window.close() method only allows automatic closing of windows generated by a corresponding window.open() event. Attempting to close any other window will display a confirm dialog, prompting the user to choose whether the window is closed or not.

confirm
Similar to the alert method, the confirm method displays a message to the user, but offers basic "OK" and "Cancel" buttons. For example, the following code displays a confirmation message and if the user chooses OK, the browser goes to the HTMLib web site. If they choose Cancel, then nothing happens.

function leave()
{
if (confirm("Are you sure you want to visit the HTMLib web site?"))
{location.href= "http://subnet.virtual-pc.com/~le387818"}
}

disableExternalCapture
The Netscape 4.0 specific disableExternalCapture method allows a signed script to capture events in pages that have been loaded from different servers. For example, in a framed set-up, 'foreign' (i.e. not on the same server as the current document) pages can be loaded into a frame and a signed script can capture events on these pages. The disableExternalCapture method would be used to stop the capture of events from the 'foreign' pages. For more information on signed scripts, visit Netscape DevEdge Online

enableExternalCapture
As with the disableExternalCapture method described above, the enableExternalCapture method can be used to capture events on pages from different servers. It too requires a signed script. Visit the URL above for more details on script signing.

execScript
The Internet Explorer 4.0 specific execScript method can be used to execute script functions in a certain language.

find
This Netscape 4.0 specific method invokes the 'Find' window of the browser, allowing the user to search for any text in the current document. Its effect is as if the user had chosen the 'Find' command from the Edit menu.

focus
This Netscape specific method can be used to force the focus to any window object. For example, given that there is a window named 'HelpWin', the following function snippet :

HelpWin.focus()

would pass the focus to the newly created window named HelpWin.

forward
This Netscape 4.0 specific method forces the browser to navigate forwards one URL in the history list - it's equivalent to the user pressing the 'Forward' button, or history manipulation through the History Object.

handleEvent
The Netscape 4.0 specific handleEvent method can be used to force a different object in the document to handle an event. Note that the object in question must be able to handle the event normally for the handleEvent method to succeed. The handleEvent works with the captureEvents, releaseEvents and routeEvent methods.

home
This Netscape 4.0 specific method forces the browser to navigate to the URL designated as 'Home' in the browser settings. It's identical to the user pressing the browsers 'Home' button.

moveBy
The moveBy method can be used to re-position the Navigator window, relative to its current position. For example :

self.moveBy (50,200)

would move the current window 50 pixels to the right and 200 pixels down from its current position. ('self' is used above, but any valid reference to a window object is useable). Note that it is only possible to move a Netscape browser window off-screen in a signed script. See Netscape DevEdge Online for information on script signing.

moveTo
The moveTo can be used to move the Navigator window to a specific point on the screen, by moving the top-left corner of the Navigator to the position specified :

self.moveTo (50,200)

would move the window to the position 50,200 on the users screen. Again, note that it is only possible to move a Netscape browser window off-screen in a signed script. See Netscape DevEdge Online for information on script signing.

navigate
The Internet Explorer 4.0 specific navigate method is equivalent to setting the location.href property to a different value, in that it causes the browser to navigate to the URL specified. For example:

sel.navigate ("http://subnet.virtual-pc.com/~le387818")

Note : For Internet Explorer 4.0, this method is only available to Visual Basic Script.

open
The open method allows script functions to create new browser windows and load documents into them. It also allows control over the window's appearance and size. The basic syntax is :

Variable=window.open("URL", windowname, "window_appearance")

where URL is the URL of the document to be loaded into the new window, windowname is the name given to the new window (subsequently its name property (see above)) and window_appearance is a comma-delimited list setting the window features. The window features are boolean values (i.e. either '0' or '1', or 'no' or 'yes'). The features controllable are :

toolbar
Specifies whether the browser's toolbar is displayed or not.
location
Specifies whether the location bar (showing the current URL) of the browser is displayed or not.
directories
Specifies whether the Netscape directory buttons are displayed or not.
status
Specifies whether the browser status bar is displayed or not.
menubar
Specifies whether the browser's menu bar is displayed or not.
scrollbars
Specifies whether the window will allow scrollbars or not.
resizable
Specifies whether the new window is resiz(e)able or not.
width="pixels"
Specifies the width of the new window.
height="pixels"
Specifies the height of the new window.
top="pixels"
Specifies the top co-ordinate to display the new window. (Internet Explorer and Navigator 4.0 and above only)
left="pixels"
Specifies the left co-ordinate to display the window. (Internet Explorer and Navigator 4.0 and above only)
*outerWidth*="pixels"
(Navigator 4.0 specific) Specifies the outer width of the Navigator window, instead of the viewable area contained within.
*outerHeight*="pixels"
(Navigator 4.0 specific) Specifies the outer height of the Navigator window, instead of the viewable area contained within.
*innerHeight*="pixels"
(Navigator 4.0 specific) Specifies the inner height of the Navigator window - the viewable area contained within. (Note that this replaces the height window feature, which is maintained for backwards compatibility). To produce a new shorter narrower than 100 pixels requires a signed script.
*innerWidth*="pixels"
(Navigator 4.0 specific) Specifies the inner width of the Navigator window - the viewable area contained within. (Note that this replaces the width window feature, which is maintained for backwards compatibility) To produce a new window narrower than 100 pixels requires a signed script.
*alwaysRaised*="yes|no||1|0"
(Navigator 4.0 specific) Forces the new window to always remain above other windows, whether it has the focus or not (as certain Windows Help files are displayed - hence, it would be useful for a 'help' window helping users with web-based applications.) Note : This is a secure feature that can only be set in a signed script.
*alwaysLowered*="yes|no||1|0"
(Navigator 4.0 specific) Forces the new window to always remain below other windows, whether it has the focus or not. Note : This is a secure feature that can only be set in a signed script.
*dependent*="yes|no||1|0"
(Navigator 4.0 specific) Creates the new window as a child of the opening window, which will close when the parent window closes. Note that a dependent window does not show in the taskbar.
*hotkeys*="yes|no||1|0"
(Navigator 4.0 specific) If set to true, then most of the hotkeys in the new window (if it doesn't have a menu bar are disabled, apart from the security and quit keys. (HotKeys are key combinations to perform menu operations - e.g. Ctrl+F for the File menu etc.)
*screenX*="yes|no||1|0"
(Navigator 4.0 specific) screenX replaces left as the setting for the horizontal placement (in pixels) of the new window (relative to the left hand side of the screen). Note that to create a new window off screen requires a signed script.
*screenY*="yes|no||1|0"
(Navigator 4.0 specific) screenY replaces top as the setting for the vertical placement (in pixels) of the new window (relative to the top of the screen). Note that to create a new window off screen requires a signed script.
*z-lock*="yes|no||1|0"
(Navigator 4.0 specific) Creates a new window that never rises above other windows, even when activated. This is a secure feature that can only be set using a signed script.
**fullscreen**="yes|no||1|0"
(Internet Explorer specific) This window feature forces the newly opened window into whats known as 'kiosk mode', where the window takes the entire screen and displays with no toolbar or menubar. Care should be taken using this setting, as most users will not appreciate a new window being created that blocks their entire screen. Note : At the time of writing, Internet Explorer only responded to fullscreen=1|0.
**channelmode**="yes|no||1|0"
(Internet Explorer 4.0 specific) Creates a new window in 'channel' mode, displaying the window in theater mode, with the channel bar. Note : At the time of writing, Internet Explorer only responded to channelmode=1|0.

NOTE : The window features labelled above, with '*' characters are only supported in Javascript 1.2, as supported by Navigator 4.0 and above. To be sure that any Javascript functions using these extended features don't throw a scripting error (or produce unwanted results), make sure to version the LANGUAGE attribute of the <SCRIPT> appropriately and provide version specific scripts if necessary. For more information, see Versioning Javascript..

NOTE : When using Visual Basic Script, the parenthesis characters must not be used surrounding the various window.open methods. I.e., the method should be used as follows under Visual Basic Script :

window.open URL,"window_name","window_options"

Internet Explorer now fully supports (from 3.02) the previously Netscape specific format of the window.open method. For example :

WindowName=window.open (URL,"WindowName","window_options")

where WindowName can then be used to control the newly created window.

Note : Internet Explorer 4.0 supports an extra argument to the window.open method - the replace argument. For example:

WindowName=window.open("http://www.mysite.com/", "NewWin", "toolbar=no;...", "replace=true"

would cause the URL of the newly created window to over-write the URL of the creating window in the history list. Essentially, it's the same as the replace method of the Location Object, but for multiple windows.

The HTMLib Window Builder
Use the 'Window Builder' below to create a new window with whatever options you like (only the options supported by Internet Explorer 4.0 are included):

Note : Currently, Internet Explorer will allow you to create ludicrously small windows (1 x 1 pixel is even possible). So that you'll be able to actually do something with it, the Window Builder sets a minimum height and width for the new window. Also, pressing Alt&C will close the window while it has the focus.

Window Feature | Yes | No
Toolbar : |  |
Location : |  |
Directories : |  |
Status : |  |
Menubar : |  |
Scrollbars : |  |
Resizable : |  |
Fullscreen : |  |
ChannelMode : |  |
Width : |
Height : |

A note about the top and left window options
top and left should be used with care when positioning new windows exactly (i.e. by pixel measurements) because you can not be sure of the users screen resolution (although Navigator 4.0 now provides screen resizing and moving methods (see below)). Also, be aware of a current limitation in the Internet Explorer 3.01 support of these window settings. If the document calling the window.open method is displayed singularly (i.e. not part of a frameset), then top and left behave as expected and can be used to set the position of the new window, (in pixel units) on the screen.
If the document calling the window.open method is a framed document (i.e. displayed in a frame), however, then it starts to get a little complicated. For some as yet unknown reason the top and left co-ordinates should be reversed, to display the newly created window in the right position. For example if the following code is executed in a non-framed document,

NewWin=window.open(URL,name,"left=640,top=480");

then the new window would be created at a position x=640 pixels and y=480 pixels. However, if the same code was executed from a framed document, then the new window would be created and displayed at x=480 y=640 pixels. For the same code to work, displaying the window in the same position, called from a framed document, the code would need to be :

NewWin=window.open(URL,name,"left=480,top=640");

Just to add to the confusion, Internet Explorer 3.02 seems to have permanently reversed the top and left settings (so that calling ...left=x1, top=y1 actually places the new window at a position x=y1, y=x1 pixels), regardless of whether the document utilising the window.open method is framed or single. Support of these two method attributes is basically a legacy of the previously supported 'Explorer' object, which was supported in the Windows 95/NT4 v3.01 of Internet Explorer, but removed from v3.02 for security reasons.

NOTE : The top and left attributes are not officially documented as being supported by Internet Explorer, so should be used with care as their support may possibly change without notice.

print
This Netscape 4.0 specific method prints the document in the referenced window or frame, using the default printing properties for the browser. Its effect is as if the user had pressed the 'Print' button on the browser. It would be courteous to give users an option to print documents, rather than automatically printing them from a script function.

prompt
Again, like the above two methods, the prompt method allows you to present the user with a dialog allowing them to enter values (like Visual Basic Script's InputBox method). The method is called, defining a default value in the input box. For example, the following code asks the user to enter a year, giving 1996 as the default value.

prompt("Enter a year", 1996)

releaseEvents
The Netscape 4.0 specific releaseEvents method can be used to release events that had previously been captured using the captureEvents method. The syntax for releasing single, or multiple events is the same as for the captureEvents method.

resizeBy
As you'll probably have guessed, the resizeBy method resizes the window from its current size by the amounts specified. For example :

self.resizeBy (50,200)

would move the bottom right hand corner of the navigator window 50 pixels to the right and 200 pixels down, creating a larger window. Note that to resize a window to less than 100x100 pixels requires a signed script.

resizeTo
Like the moveTo method above, the resizeTo method can be used to resize the window to a specific size. For example :

self.resizeTo (640,480)

would resize the window to 640 by 480 pixels. Again, to resize a window to less than 100x100 pixels requires a signed script.

Be aware that you can not guarantee the viewers screen resolution, so regardless of the imposed restrictions, use these methods with caution. The sensible option would be to always use a moveTo method to set the window at the top-left corner of the users screen before performing any resizing methods, to ensure the entire viewing area is visible. Also limiting the maximum size of sites requiring this functionality to 640x480 pixels would also be sensible.

routeEvent
The Netscape 4.0 specific routeEvent method can be used to route an event that has been previously captured using the captureEvents method. It uses the following syntax:

objectReference.routeEvent(eventType)

for example:

document.BigLink.routeEvent(event.click)

would pass click events to the element whose ID property is BigLink

scroll
This specific method can be used to automatically move the user to any point in the current window. It is similar to mid page links, using <A HREF="#..."> constructs, except it moves the user to a position of pixel values, rather than links. For example :

HelpWin.scroll(200,300)

would scroll the user to the position 200,300 (in pixels). The number sequence is x-coordinate, y-coordinate.

scrollBy
As with the other *By methods, the scrollBy scrolls the viewing area of the window by the amounts specified in the values. For example :

self.scrollBy (50,100)

would scroll the viewing window 50 pixels to the left and 100 pixels down. Scrolling to the right would only be effective is there is content currently off the screen (for example, you may have layers currently off-screen, or very wide images).

scrollTo
This method scrolls the viewing window to an exact pixel position, given by the values. For example :

self.scrollTo (100,300)

scrolls to the point 100 pixels to the right and 300 pixels down.

Note : scrollTo extends the scroll method (see above), which is still supported in Navigator 4.0 and above for backwards compatibility.

setInterval
The setInterval method can be used to either call a Javascript function, or evaluate an expression, after a specified time interval (in millisecond) has expired. For example :

setInterval=MyInterval (startanim(),1000,20,100)

would execute the function startanim(), after 1 second has elapsed (1000 milliseconds), passing it 20 and 100 as arguments to the function. Any number of arguments can be passed in the setInterval method (i.e. as many as are required by the function). The setInterval method will repeatedly call the referenced function, or expression, until the user leaves the document that contains the script. This is essentially the only difference between it and the setTimeout method, which is only executed once, after the specified time interval.

setTimeout
The setTimeout method can be used to execute a script function, or access any existing object property or method, after a specified time interval. For example, the following code section would execute the script function TooMuchTime() after 5 seconds :

MyTimeOut=setTimeout ("TooMuchTime()", 5000)

The time interval is always specified in milliseconds.
In Javascript 1.2 (as supported by Navigator 4.0 and above), the setTimeout method can be used to evaluate an expression, as well as calling functions. Note that this will require using LANGUAGE="Javascript1.2" in the <SCRIPT> element, so as to prevent older browsers throwing a scripting error, or not functioning as expected.

showHelp
The Internet Explorer 4.0 specific showHelp method creates an instance of the HtmlHelp window, passing it the URL given as an argument to the method. For example:

self.showHelp "help.htm"

would load help.htm into a newly created HtmlHelp window. Note that HtmlHelp windows are children of the window that creates them, so the HtmlHelp window will close down when the window that created it is closed

Pressing this button demonstrates the showHelp method :

showModalDialog
The Internet Explorer 4.0 specific showModalDialog method can be used to create a modal dialog window. This is a special window that does not release the focus back to the window that created it until it is closed, preventing the user from switching back to the main document until they have satisfied the requirements of the modal dialog window (or closed it).

The showModalDialog method is:

Variant = object.showModalDialog(URL [, arguments [, features]])

where:

URL
represents the location of the file to open in the dialog.
arguments
can be a string value specifying some arguments for the opening window. I.e. initialisation values etc.
features
allows setting of the decoration for the dialog, covering the following:
feature name | Description
dialogWidth | Initial dialog width, in pixels
dialogHeight | Initial dialog height, in pixels
dialogTop | Initial vertical offset, in pixels
dialogLeft | Initial horizontal offset, in pixels
center | A boolean (yes|no|0|1) value describing whether to automatically centre the dialog in the screen
font | Specifies font settings, according to the font Style Sheet property (see Font properties for more information.
font-family | Specifies font family, according to the font-family Style Sheet property (see Font properties for more information.
font-size | Specifies font size, according to the font-size Style Sheet property (see Font properties for more information.
font-weight | Specifies font weight (boldness), according to the font-weight Style Sheet property (see Font properties for more information.
font-style | Specifies font style settings, according to the font-style Style Sheet property (see Font properties for more information.
font-variant | Specifies font variant, according to the font-variant Style Sheet property (see Font properties for more information.
border | Specifies the border width (thick|think)
help | A boolean value setting whether to show the '?' button to the title bar
minimize | A boolean value setting whether to show the minimise button to the title bar
maximize | A boolean value setting whether to show the maximise button to the title bar

Note : At the time of writing, Internet Explorer 4.0 modal dialogs would lose their 'modality' if the file loaded caused a scripting error.

stop
This Netscape 4.0 specific method causes downloading of the page to stop, as if the user had pressed the 'Stop' button on the browser.

A note about window references for the positioning/moving methods
For the moveBy, moveTo, resizeBy and resizeTo methods, the whole navigator window is moved or resized. This means that if the methods are invoked in a framed document, then the entire Navigator window is altered, regardless of the window reference (providing that it is valid). I.e. using 'top', 'self' and 'parent', or referencing any framed document currently in the same Navigator display window all have the same effect. Single documents, or separate windows (created from links, or the open method) can be referenced by their name.
For the scrollBy and scrollTo methods, all windows (framed or otherwise) can be manipulated by using a valid reference. However, if the window referenced doesn't contain sufficient content for scrollbars to be necessary, then both these methods will do nothing.

Window Events
Internet Explorer 4.0 only supports the onHelp Standard Dynamic HTML events. Netscape supports some of these events for the Window Object. See the standard Dynamic HTML events for details. Additionally, the following events are supported:

OnBeforeUnload
This Internet Explorer 4.0 specific event fired before the onunload event (see below). It has been added with Data Binding, to allow data to be updated prior to the page being unloaded.

OnBlur
This event handler can be used in <BODY> and <FRAMESET> elements, as well as for the Window object. It is fired whenever the user removes focus from the referenced window object. For extra details, see the <BODY> and <FRAMESET> topics.

OnDragDrop
The Netscape 4.0 specific OnDragDrop event for the window object occurs when the user attempts to drag and drop an object (typically an HTML document) onto the current window. Using various Event Object for Netscape, it's possible to perform script functions whenever the user drops an object on the navigator window.

OnError
This event handler can be used in <BODY> and <FRAMESET> elements, as well as the more general Window object and is fired when an error occurs for the window, for example, the document doesn't load, or a script error occurs.

OnFocus
This event handler can be used in <BODY> and <FRAMESET> elements as well as the general window object and is fired whenever the user focuses on the referenced window. For exact details, see those topics. OnLoad
The OnLoad event can be used in window objects. It is generally used in the <BODY> element, or <FRAMESET> elements (Netscape only) and executes functions when the document (framed or normal) has finished loading. For information about this event, see the relevant element topics.

OnMove
This Netscape 4.0 specific event is fired whenever a MoveBy or MoveTo method (see above) is used on any valid Window Object, or the user moves the referenced window.

OnResize
This Internet Explorer 4.0 specific event is fired whenever the user resizes the referenced window. Content that is sized according to the users viewing window could be resized when this event fires for example.

OnScroll
The Internet Explorer 4.0 specific onScroll event is fired whenever the user scrolls in the referenced window.

OnUnLoad
The opposite of the above event, the OnUnLoad event is used to execute script functions when the user exits a window object (a frame window, or a normal window). It is also used only in the <BODY> and <FRAMESET> elements (supported in both elements, by both browsers). For details, see those topics.

© 1995-1998, Stephen Le Hunte


Server Side Includes

NOTE : Server Side Includes are HTTP server specific. At present SSI+ has been implemented in the WebQuest and WebQuest95 Web servers from Questar Microsystems, Netscape and Spry Web servers and the Microsoft Internet Information Server. You should check with your server maintainer to be sure that implementing SSI+ tokens in your HTML documents will have the desired effect.

The SSI specification document is written by Mark West of Questar Microsystems. For complete and up to date versions of the specification, visit the Questar Web site at http://www.questar.com/

Server side includes (SSI) applied to an HTML document, provide for interactive real-time features such as echoing current time, conditional execution based on logical comparisons, querying or updating a database, sending an e-mail etc., with no programming or CGI scripts.

As the SSI specification is continually updated, what is presented here is just a taster of SSI+ usage. For the complete and most recent documentation visit the Questar web site (see the link above)

The possible SSI+ tags that are currently useable are :

'echo' | Allows the insertion of certain variables into a HTML document
'include' | Allows the insertion of files into HTML documents
'fsize' | Allows for the insertion of a file's size in a HTML document
'flastmod' | Allows for the insertion of a file's last modification date into a HTML document
'exec' | Executes an external executable file
'config' | Allows setting of various options for other SSI+ tags
'odbc' | Allows the querying and updating of external ODBC databases
'email' | Sends an e-mail whenever a page is accessed or a form is submitted
'if' | Allows conditional execution of other SSI tags and conditional printing of documents based on logical comparisons
'goto' | Makes a jump to a pre-defined SSI 'label'
'label' | Provides a target for 'goto' jumps
'break' | Terminates the HTML document at any point

Some brief examples
'echo'
The 'echo' tag is used for inserting certain variable data into a HTML document. For example :

You are using a <!--#echo var="HTTP_USER_AGENT" --> browser

would translate in the document as being (for the sake of this example, the browser is Internet Explorer 3.0 for Windows 95) :

You are using a Mozilla/2.0 (compatible; MSIE 3.0A; Windows 95) browser.

The various different var values that this tag accepts are described fully in the SSI specification.

'include'
The 'include' tag provides the answer to one of the most common questions within HTML discussions. Namely, ‘How can I insert a file into an HTML page?’

By using the following in an HTML document :

<!--#include virtual="/includes/page.htm"-->

would insert the contents of the file /includes/page.htm into the current HTML document at the insertion point.

'email'
The 'email' tag can be used to send an e-mail message whenever (for example) a page is accessed, or some form data sent to a remote site.

Using the following in a document :

<!--#email tohost="htmlib.com" message="Thanks for the HTMLib" toaddress="response@htmlib.com" subject="The HTMLib" -->

would cause the mail message (specified in the message attribute) to the address specified in the toaddress attribute (if they actually existed.)

As can be seen, the possibilities of SSI+ tags are extensive and it provides a mechanism for performing many common actions that would normally require CGI scripting. As said above, SSI+ use is server specific. If you wish to employ SSI+ tags in your HTML, consult your server maintainer to see if it is possible and also consult the Questar Web site (URL above) for the most recent specification.

© 1995-1998, Stephen Le Hunte


Box Properties

margin-left, margin-right, margin-top, margin-bottom, margin
Value: [ <length> | <percentage> | auto ]{1,4} (for 'margin' property)
Initial: 0
Applies to: all elements
Inherited: no
Percentage values: refer to parent's width

These properties set the margin of an element, while the 'margin' property can be used to set the border for all four sides. The other four properties only set their respective side.

For the 'margin' property, the four lengths apply to top, right, bottom and left respectively. If there is only one value, it applies to all sides, if there are two or three, the missing values are taken from the opposite side.

For example :

BODY { margin: 1em 2em 3em }

and

BODY {
margin-top: 1em;
margin-right: 2em;
margin-bottom: 3em;
margin-left: 2em
}

would produce the same result.

padding-top, padding-right, padding-bottom, padding-left, padding
Value: [ <length> | <percentage> | auto ]{1,4}
Initial: 0
Applies to: all elements
Inherited: no
Percentage values: refer to parent's width

These properties describe how much space is inserted between the border and the content of the element. The order is top, right, bottom, left. A single value applies to all sides, while using two or three values set the respective sides, with the missing values being copied from the opposite side.

The 'padding' property is a shorthand property for setting 'padding-top', 'padding-right' 'padding-bottom' and 'padding-left' at the same place in the style sheet.

If four values are specified they apply to top, right, bottom and left respectively. If there is only one value, it applies to all sides, if there are two or three, the missing values are taken from the opposite side.

The surface of the padding area is set with the 'background' property.

Note that 'padding' properties cannot be negative values.

border-top-width, border-right-width, border-bottom-width, border-left-width, border-width
Value: [thin | medium | thick | <length>] {1,4}
Initial: medium
Applies to: all elements
Inherited: no
Percentage values: N/A

The 'border-width' property is a shorthand property for setting 'border-top-width', 'border-right-width', 'border-bottom-width' and 'border-left-width' at the same place in the style sheet.

There can be from one to four values, with the following interpretation:

  • one value: all four border widths are set to that value
    i.e.
    H1 { border-width: thin }

    all 4 'border-*-width' properties are set to 'thin'

  • two values: top and bottom border widths are set to the first value, right and left are set to the second
    i.e.
    H1 { border-width: thin thick }

    border-top-width and border-bottom-width are set to 'thin', while border-right-width and border-left-width are set to 'thick'

  • three values: top is set to the first, right and left are set to the second, bottom is set to the third
    i.e.
    H1 { border-width: thin thick medium }

    border-top-width is set to 'thin', while border-right-width and border-left-width are set to 'thick' and border-bottom-width is set to 'medium'

  • four values: top, right, bottom and left, respectively
    i.e.
    H1 { border-width: thin thick medium none }

    border-top-width is set to 'thin', border-right-width is set to 'thick', border-bottom-width is set to 'medium' and border-left-width is set to 'none'

In the examples below, the comments indicate the resulting widths of the top, right, bottom and left borders:

border-top-color, border-right-color, border-bottom-color, border-left-color, border-color
Value: <color> | {1,4}
Initial: medium
Applies to: all elements
Inherited: no
Percentage values: N/A

These properties set the border colour properties for all four borders of the element, with border-color being short hand for the other four properties. The reasoning for setting individual border colours is as for border widths, namely that 1 to 4 values can be used in the border-color property, with missing declarations using that declared for the opposite side.

border-top-style, border-right-style, border-bottom-style, border-left-style, border-style
Value: none | dotted | dashed | solid | double | groove | ridge | inset | outset | {1,4}
Initial: medium
Applies to: all elements
Inherited: no
Percentage values: N/A

These properties set the border style properties for all four borders of the element, with border-style being short hand for the other four properties. The reasoning for setting individual border styles is as for border widths, namely that 1 to 4 values can be used in the border-style property, with missing declarations using that declared for the opposite side.

The various styles are as follows:

none
no border is drawn (regardless of the 'border-width' value)
dotted
the border is a dotted line drawn on top of the background of the element
dashed
the border is a dashed line drawn on top of the background of the element
solid
the border is a solid line
double
the border is a double line drawn on top of the background of the element. The sum of the two single lines and the space between equals the <border-width> value.
groove
a 3D groove is drawn in colors based on the <color> value.
ridge
a 3D ridge is drawn in colors based on the <color> value.
inset
a 3D inset is drawn in colors based on the <color> value.
outset
a 3D outset is drawn in colors based on the <color> value.

border-top, border-right, border-bottom, border-left, border
Value: <border-*-width> | <border-*-style> | <border-*-color> | {1,4}
Initial: medium
Applies to: all elements
Inherited: no
Percentage values: N/A

The border properties can be used to globally set the border widths, styles and colours for all four borders of an element. For example, the first rule below is equivalent to the set of four rules shown after it:

P { border: solid red }
P {
border-top: solid red;
border-right: solid red;
border-bottom: solid red;
border-left: solid red
}

Unlike the shorthand 'margin' and 'padding' properties, the 'border' property cannot set different values on the four borders. To do so, one or more of the other border properties must be used.

Since the properties to some extent have overlapping functionality, the order in which the rules are specified becomes important. Consider this example:

BLOCKQUOTE {
border-color: red;
border-left: double
color: black;
}

In the above example, the color of the left border will be black, while the other borders are red. This is due to 'border-left' setting the width, style and color. Since the color value is not specified on the 'border-left' property, it will be taken from the 'color' property. The fact that the 'color' property is set after the 'border-left' property is not relevant.

Note that while the 'border-width' property accepts up to four length values, this property only accepts one.

width
Value: <length> | <percentage> | auto
Initial: auto
Applies to: all elements
Inherited: no
Percentage values: refer to parent's width

This property can be applied to text elements, but it is most useful with inline images and similar insertions. The width is to be enforced by scaling the image if necessary, preserving the aspect ratio of the image if the 'height' property is 'auto'.

height
Value: <length> | auto
Initial: auto
Applies to: block-level and replaced elements
Inherited: no
Percentage values: N/A

As above, this property can be applied to text, but it is most useful with inline images and similar insertions. The height is to be enforced by scaling the image if necessary, preserving the aspect if the 'width' property is 'auto'.

float
Value: left | right | none
Initial: none
Applies to: all elements
Inherited: no
Percentage values: N/A

This property is most often used with inline images, to allow floating images (c.f. <IMG ALIGN ...>

clear
Value: none | left | right | both
Initial: none
Applies to: all elements
Inherited: no
Percentage values: N/A

This property specifies if elements allow floating elements (normally images) to the left or right. With 'clear' set to 'left', an element will be moved below any floating element on the left side. (c.f. <BR CLEAR= ...>)

© 1995-1998, Stephen Le Hunte


Classification Properties

These properties classify elements into categories rather than setting visual display styles

display
Value: block | inline | list-item | none
Initial: block
Applies to: all elements
Inherited: no
Percentage values: N/A

This property describes how/if an element is displayed on the canvas (which may be on a printed page, a computer display etc.).

An element with a 'display' value of 'block' opens a new box. The box is positioned relative to adjacent boxes according to the CSS formatting model. Typically, elements like <H1> and <P> are of type 'block'. A value of 'list-item' is similar to 'block' except that a list-item marker is added. In HTML, <LI> will typically have this value.

An element with a 'display' value of 'inline' results in a new inline box on the same line as the previous content. The box is dimensioned according to the formatted size of the content. If the content is text, it may span several lines, and there will be a box on each line. The margin, border and padding properties apply to 'inline' elements, but will not have any effect at the line breaks.

A value of 'none' turns off the display of the element, including children elements and the surrounding box.

P { display: block }
EM { display: inline }
LI { display: list-item }
IMG { display: none }

The last rule turns off the display of images.

The initial value of 'display' is 'block', but a browser will typically have default values for all HTML elements according to the suggested rendering of elements in the HTML specification.

white-space
Value: normal | pre | nowrap
Initial: normal
Applies to: block-level elements
Inherited: yes
Percentage values: N/A

Declares how white space inside the element should be handled: the 'normal' way (where white space is collapsed) or as the <PRE> element in HTML, or as 'nowrap' (the same as using the <NOBR> element, forcing line breaks with <BR>).

list-style-type
Value: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
Initial: disc
Applies to: elements with 'display' value 'list-item'
Inherited: yes
Percentage values: N/A

This property is used to determine the appearance of the list-item marker if 'list-style-image' is 'none' or if the image pointed to by the URL cannot be displayed.

OL { list-style-type: decimal } /* 1 2 3 4 5 etc. */
OL { list-style-type: lower-alpha } /* a b c d e etc. */
OL { list-style-type: lower-roman } /* i ii iii iv v etc. */5.6.4

list-style-image
Value: <url> | none
Initial: none
Applies to: elements with 'display' value 'list-item'
Inherited: yes
Percentage values: N/A

This property sets the image that will be used as the list-item marker. When the image is available it will replace the marker set with the 'list-style-type' marker.

UL { list-style-image: url(http://png.com/ellipse.png) }

list-style-position
Value: inside | outside
Initial: outside
Applies to: elements with 'display' value 'list-item'
Inherited: yes
Percentage values: N/A

The value of 'list-style-position' determines how the list-item marker is drawn with regard to the content. Using a list-style of 'inside' causes the same effect as using <UL COMPACT> for a compact list.

list-style
Value: <keyword> || <position> || <url>
Initial: not defined for shorthand properties
Applies to: elements with 'display' value 'list-item'
Inherited: yes
Percentage values: N/A

The 'list-style' property is a shorthand notation for setting the three properties 'list-style-type', 'list-style-image' and 'list-style-position' at the same place in the style sheet.

UL { list-style: upper-roman inside }
UL UL { list-style: circle outside }
LI.square { list-style: square }

Setting 'list-style' directly on <LI> elements can have unexpected results. Consider:

<STYLE TYPE="text/css">
OL.alpha LI { list-style: lower-alpha }
UL LI { list-style: disc }
</STYLE>
<BODY>
<OL CLASS=alpha>
<LI>level 1
<UL>
<LI>level 2
</UL>
</OL>
</BODY>

Since the specificity (as defined in the cascading order) is higher for the first rule in the style sheet in the example above, it will override the second rule on all <LI> elements and only 'lower-alpha' list styles will be used. It is therefore recommended to set 'list-style' only on the list type elements:

OL.alpha { list-style: lower-alpha }
UL { list-style: disc }

In the above example, inheritance will transfer the 'list-style' values from <OL> and <UL> elements to <LI> elements.

A URL value can be combined with any other value:

UL { list-style: url(http://png.com/ellipse.png) disc }

In the example above, the 'disc' will be used when the image is unavailable.

© 1995-1998, Stephen Le Hunte


Colour Properties

color
Value: <color>
Initial: UA specific
Applies to: all elements
Inherited: yes
Percentage values: N/A

This property describes the text color of an element (often referred to as the foreground color). There are different ways to specify red:

EM { color: red } /* natural language */ EM { color: rgb(255,0,0) } /* RGB range 0-255 */

See the Colour Units topic for more details about colour units.

background-color
Value: <color> | transparent
Initial: transparent
Applies to: all elements
Inherited: no
Percentage values: N/A

This property sets the background color of an element.

H1 { background-color: #F00 }

background-image
Value: <url> | none
Initial: none
Applies to: all elements
Inherited: no
Percentage values: N/A

This property sets the background image of an element. When setting a background image, one should also set a background color that will be used when the image is unavailable. When the image is available, it is overlaid on top of the background color.

BODY { background-image: url(marble.gif) }
P { background-image: none }

background-repeat
Value: repeat | repeat-x | repeat-y | no-repeat
Initial: repeat
Applies to: all elements
Inherited: no
Percentage values: N/A

If a background image is specified, the value of 'background-repeat' determines how/if the image is repeated.

A value of 'repeat' means that the image is repeated both horizontally and vertically. The 'repeat-x' ('repeat-y') value makes the image repeat horizontally (vertically), to create a single band of images from one side to the other. With a value of 'no-repeat', the image is not repeated.

BODY {
background: red url(pendant.gif);
background-repeat: repeat-y;
}

In the example above, the image will only be repeated vertically.

background-attachment
Value: scroll | fixed
Initial: scroll
Applies to: all elements
Inherited: no
Percentage values: N/A

If a background image is specified, the value of 'background-attachment' determines if it is fixed with regard to the canvas or if it scrolls along with the content.

BODY {
background: red url(pendant.gif);
background-repeat: repeat-y;
background-attachment: fixed;
}

Note : Browsers may treat 'fixed' as 'scroll'. However, it is recommended they interpret 'fixed' correctly, at least on the <HTML> and BODY elements, since there is no way for an author to provide an image only for those browsers that support 'fixed'.

background-position
Value: [<percentage> | <length>]{1,2} | [top | center | bottom] || [left | center | right]
Initial: 0% 0%
Applies to: block-level and replaced elements
Inherited: no
Percentage values: refer to the size of the element itself

If a background image has been specified, the value of 'background-position' specifies its initial position.

With a value pair of '0% 0%', the upper left corner of the image is placed in the upper left corner of the box that surrounds the content of the element (i.e., not the box that surrounds the padding, border or margin). A value pair of '100% 100%' places the lower right corner of the image in the lower right corner of the element. With a value pair of '14% 84%', the point 14% across and 84% down the image is to be placed at the point 14% across and 84% down the element.

With a value pair of '2cm 2cm', the upper left corner of the image is placed 2cm to the right and 2cm below the upper left corner of the element.

If only one percentage or length value is given, it sets the horizontal position only, the vertical position will be 50%. If two values are given, the horizontal position comes first. Combinations of length and percentage values are allowed, e.g. '50% 2cm'. Negative positions are allowed.

One can also use keyword values to indicate the position of the background image. Keywords cannot be combined with percentage values, or length values. The possible combinations of keywords and their interpretations are as follows:

'top left' and 'left top' both mean the same as '0% 0%'. 'top', 'top center' and 'center top' mean the same as '50% 0%'. 'right top' and 'top right' mean the same as '100% 0%'. 'left', 'left center' and 'center left' mean the same as '0% 50%'. 'center' and 'center center' mean the same as '50% 50%'. 'right', 'right center' and 'center right' mean the same as '100% 50%'. 'bottom left' and 'left bottom' mean the same as '0% 100%'. 'bottom', 'bottom center' and 'center bottom' mean the same as '50% 100%'. 'bottom right' and 'right bottom' mean the same as '100% 100%'. examples:

BODY { background: url(banner.jpeg) right top }
BODY { background: url(banner.jpeg) top center }
BODY { background: url(banner.jpeg) center }
BODY { background: url(banner.jpeg) bottom }

If the background image is fixed with regard to the canvas (see the 'background-attachment' property above), the image is placed relative to the canvas instead of the element. E.g.:

BODY {
background-image: url(logo.png);
background-attachment: fixed;
background-position: 100% 100%;
}

In the example above, the image is placed in the lower right corner of the canvas.

background
Value: <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>
Initial: not defined for shorthand properties
Applies to: all elements
Inherited: no
Percentage values: allowed on <background-position>

The 'background' property is a shorthand property for setting the individual background properties (i.e., 'background-color', 'background-image', 'background-repeat', 'background-attachment' and 'background-position') at the same place in the style sheet.

Possible values on the 'background' properties are the set of all possible values on the individual properties.

BODY { background: red }
P { background: url(chess.png) gray 50% repeat fixed }

The 'background' property always sets all the individual background properties. In the first rule of the above example, only a value for 'background-color' has been given and the other individual properties are set to their initial value. In the second rule, all individual properties have been specified.

© 1995-1998, Stephen Le Hunte


Colour Units

A colour is a either a colour name or a numerical RGB specification. The Style Sheet specification (and style sheets as implemented by Microsoft in the Internet Explorer) supports all of the Netscape colour names.

The following all specify a red colour
EM { color: #F00 } | #RGB
EM { color: #FF0000 } | #RRGGBB
EM { color: rgb(255,0,0) | integer range 0 - 255
EM { color: rgb(100%, 0%, 0%) | float range 0.0% - 100.0%

Note that a three-digit RGB notation (#RGB) is converted into six-digit form (#RRGGBB) by replicating digits, not by adding zeros. For example, #fb0 expands to #ffbb00.

Values outside the numerical ranges will be rounded off. The three rules below are therefore equivalent:
EM { color: rgb(255,0,0) | integer range 0 - 255
EM { color: rgb(300,0,0) | rounded off to 255
EM { color: rgb(110%, 0%, 0%) | rounded off to 100%

© 1995-1998, Stephen Le Hunte


Filter Properties

The properties presented here are valid for any Visual Filter applied to an element. See that topic for more information about visual filters.

filter
Value: filtername (param1, param2...)
Applies to: all elements
Inherited: no
Percentage values: N/A

The filter property can be used to set which filter, or collection of filters are applied to the element. For more details, see Visual Filter topic.

blendTrans
Value: blendTrans (duration=time)
Applies to: all elements
Inherited: no
Percentage values: N/A

The Blend Transition filter performs a fade (in or out) of the selected visual object.

duration
Length of time the transition should take to complete. Value, double, float. Value is expressed in seconds.milliseconds (0.000).

For more details, see Visual Filter topic.

revealTrans
Value: revealTrans (duration=time, transition=transition)
Applies to: all elements
Inherited: no
Percentage values: N/A

The Reveal Transition Filter allows you to show or hide visual objects, using any of the 23 predefined types of patterns.

duration
Length of time the transition should take to complete. Value, double, float. Value is expressed in seconds.milliseconds (0.000).
transitionshape
Shape of the transition (Reveal transition only). Integer. A value from 0 to 23. The transition shape is determined by one of the values shown in the following table.

Transition type | Value
Box in | 0
Box out | 1
Circle in | 2
Circle out | 3
Wipe up | 4
Wipe down | 5
Wipe right | 6
Wipe left | 7
Vertical blinds | 8
Horizontal blinds | 9
Checkerboard across | 10
Checkerboard down | 11
Random dissolve | 12
Split vertical in | 13
Split vertical out | 14
Split horizontal in | 15
Split horizontal out | 16
Strips left down | 17
Strips left up | 18
Strips right down | 19
Strips right up | 20
Random bars horizontal | 21
Random bars vertical | 22
Random | 23

© 1995-1998, Stephen Le Hunte


Font Properties

font-size
Value: <absolute-size> | <relative-size> | <length> | <percentage>
Initial: medium
Applies to: all elements
Inherited: yes
Percentage values: relative to parent element's font size

<absolute-size>
An <absolute-size> keyword is an index to a table of font sizes computed and kept by the browser. Possible values are: [ xx-small | x-small | small | medium | large | x-large | xx-large ]. On a computer screen a scaling factor of 1.5 is suggested between adjacent indexes; if the 'medium' font is 10pt, the 'large' font could be 15pt. Different media may need different scaling factors. Also, the UA should take the quality and availability of fonts into account when computing the table. The table may be different from one font family to another.

<relative-size>
A <relative-size> keyword is interpreted relative to the table of font sizes and the font size of the parent element. Possible values are: [ larger | smaller ]. For example, if the parent element has a font size of 'medium', a value of 'larger' will make the font size of the current element be 'large'. If the parent element's size is not close to a table entry, the browser is free to interpolate between table entries or round off to the closest one. The browser may have to extrapolate table values if the numerical value goes beyond the keywords. Length and percentage values should not take the font size table into account when calculating the font size of the element.

Negative values are not allowed.

On all other properties, 'em' and 'ex' length values refer to the font size of the current element. On the 'font-size' property, these length units refer to the font size of the parent element.

Note that an application may reinterpret an explicit size, depending on the context. E.g., inside a VR scene a font may get a different size because of perspective distortion.

P { font-size: 12pt; }
BLOCKQUOTE { font-size: larger }
EM { font-size: 150% }
EM { font-size: 1.5em }

If the suggested scaling factor of 1.5 is used, the last three declarations are identical.

font-family
Value: [[<family-name> | <generic-family>],]* [<family-name> | <generic-family>]
Initial: UA specific
Applies to: all elements
Inherited: yes
Percentage values: N/A

The value is a prioritized list of font family names and/or generic family names. Values are separated by a comma to indicate that they are alternatives:

BODY { font-family: gill, helvetica, sans-serif }

There are two types of list values:

<font-family>
The name of a font family of choice. In the last example, "gill" and "helvetica" are font families.

<generic-family>
In the example above, the last value is a generic family name. The following generic families are defined:

'serif' (e.g. Times)
'sans-serif' (e.g. Helvetica)
'cursive' (e.g. Zapf-Chancery)
'fantasy' (e.g. Western)
'monospace' (e.g. Courier)

It is useful to offer a generic font family as a last alternative, in case the specified font is not available on the viewers system.

Font names containing white space should be quoted:

BODY { font-family: "new century schoolbook", serif }
<BODY STYLE="font-family: 'My own font', fantasy">

font-weight
Value: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Initial: normal
Applies to: all elements
Inherited: yes
Percentage values: N/A

The 'font-weight' property selects the weight of the font. The values '100' to '900' form an ordered sequence, where each number indicates a weight that is at least as dark as its predecessor. The keyword 'normal' is synonymous with '400', and 'bold' is synonymous with '700'. Keywords other than 'normal' and 'bold' have been shown to be often confused with font names and a numerical scale was therefore chosen for the 9-value list.

P { font-weight: normal }
H1 { font-weight: 700 }

The 'bolder' and 'lighter' values select font weights that are relative to the weight inherited from the parent:

STRONG { font-weight: bolder }

Child elements inherit the resultant weight, not the keyword value.

font-style
Value: normal | italic | oblique
Initial: normal
Applies to: all elements
Inherited: yes
Percentage values: N/A

The 'font-style' property selects between normal (sometimes referred to as "roman" or "upright"), italic and oblique faces within a font family.

A value of 'normal' selects a font that is classified as 'normal' in the browsers (typically, the systems) font database, while 'oblique' selects a font that is labeled 'oblique'. A value of 'italic' selects a font that is labeled 'italic', or, if that is not available, one labeled 'oblique'.

The font that is labeled 'oblique' in the UA's font database may actually have been generated by electronically slanting a normal font.

Fonts with Oblique, Slanted or Incline in their names will typically be labeled 'oblique' in the UA's font database. Fonts with Italic, Cursive or Kursiv in their names will typically be labeled 'italic'.

H1, H2, H3 { font-style: italic }
H1 EM { font-style: normal }

In the example above, emphasized text within 'H1' will appear in a normal face.

font-variant
Value: normal | small-caps
Initial: normal
Applies to: all elements
Inherited: yes
Percentage values: N/A

Another type of variation within a font family is the small-caps. In a small-caps font the lower case letters look similar to the uppercase ones, but in a smaller size and with slightly different proportions. The 'font-variant' property selects that font.

A value of 'normal' selects a font that is not a small-caps font, 'small-caps' selects a small-caps font. It is acceptable (but not required) in CSS1 if the small-caps font is a created by taking a normal font and replacing the lower case letters by scaled uppercase characters. As a last resort, uppercase letters will be used as replacement for a small-caps font.

The following example results in an 'H3' element in small-caps, with emphasized words in oblique small-caps:

H3 { font-variant: small-caps } EM { font-style: oblique }

There may be other variants in the font family as well, such as fonts with old-style numerals, small-caps numerals, condensed or expanded letters, etc. CSS1 has no properties that select those.

font
Value: [<font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family>
Initial: not defined for shorthand properties
Applies to: all elements
Inherited: yes
Percentage values: allowed on <font-size> and <line-height> only

The 'font' property is a shorthand property for setting 'font-style' 'font-variant' 'font-weight' 'font-size', 'line-height' and 'font-family' at the same place in the style sheet. The syntax of this property is based on a traditional typographical shorthand notation to set multiple properties related to fonts.

For a definition of allowed and initial values, see the previously defined properties. Properties for which no values are given are set to their initial value.

P { font: 12pt/14pt sans-serif }
P { font: 80% sans-serif }
P { font: x-large/110% "new century schoolbook", serif }
P { font: bold italic large Palatino, serif }
P { font: normal small-caps 120%/120% fantasy }

In the second rule, the font size percentage value ('80%') refers to the font size of the parent element. In the third rule, the line height percentage refers to the font size of the element itself.

In the first three rules above, the 'font-style', 'font-variant' and 'font-weight' are not explicitly mentioned, which means they are all three set to their initial value ('normal'). The fourth rule sets the 'font-weight' to 'bold', the 'font-style' to 'italic' and implicitly sets 'font-variant' to 'normal'.

The fifth rule sets the 'font-variant' ('small-caps'), the 'font-size' (120% of the parent's font), the 'line-height' (120% times the font size) and the 'font-family' ('fantasy'). It follows that the keyword 'normal' applies to the two remaining properties: 'font-style' and 'font-weight'.

@font-face
Value: {font-family : <font-family>; url(<url>;)
Initial: not defined
Applies to: all elements
Inherited: yes
Percentage values: n/a

The @font-face property specifies a font to embed into your HTML document. This feature allows you to use specific fonts that might not be available on your local system. The URL should point to an embedded OpenType file (.eot or .ote format). The file contains compressed, subsetted font data that is converted to a TrueType font and installed by T2embed.dll.

© 1995-1998, Stephen Le Hunte


Javascript Style Sheets

Note : Javascript Style Sheets are only supported by the Navigator component of Netscape Communicator.

As well as fully supporting the Cascading Style Sheets specification (see Style Sheets overview), Netscape introduced Javascript Style Sheets. Even though all CSS style sheet declarations can be re-written in JSS, the results would only be visible in Netscape v4.0 and above and the style sheet declarations can not be manipulated through scripting without re-loading the document.

The most basic method of declaring a style using Javascript Style Sheets is to reference the particular element through Netscape's tags array (a property of the Document Object). For example:

<STYLE TYPE="text/javascript">
tags.P.color = "#FF0000"
</STYLE>

Note the different TYPE attribute for the <STYLE> element. The above declaration sets all <P> elements to use a red colour in the document. For specifying multiple declarations for the same element, the width keyword can be used. For example:

<STYLE TYPE="text/javascript">
with (tags.P) {
color = "#FF0000";
fontSize = "20pt";
margin = "0.5in";
}
</STYLE>

Note the subtle difference between the JSS syntax (e.g. fontSize) and that of standard CSS (e.g. font-size). A more complete listing of the changes is given below.

To specify classes of style sheet declaration (i.e. as you would with .className {declaration} in CSS), the classes property must be used. For example:

<STYLE TYPE="text/javascript">
classes.yellow.all.color="#FF0000"
</STYLE>

The style could then be used as :

<P CLASS="yellow"> some yellow text

To specify classes for just one element, change the all keyword for the element name (i.e classes.red.P.color="#FF0000" / <P CLASS="red">.

Javascript style sheets also have a similar mechanism for using the ids property, to set styles for elements that use their ID property to reference a style sheet. This can allow multiple styles to be attached to a single element. For example, setting:

<STYLE TYPE="text/javascript">
classes.BigText.all.fontSize = "20pt"
ids.BlueText.color = "#0000FF"
</STYLE>

and then using:

<P CLASS="BigText" ID="BlueText">Some big blue text

would give the paragraph text a blue colouring, as well as it being big text.

For contextual selection of style declarations, simply use:

<STYLE TYPE="text/javascript">
contextual(tags.H1, tags.EM).color = "green";
</STYLE>

this is the same as using H1 EM {color:green} as one would when using standard Style Sheets.

CSS vs. JSS property names
As with the Internet Explorer specific Style Object, Netscape renamed some of the style sheet properties for use with Javascript Style Sheets. Basically, where the style sheet name has a hyphen, the Javascript style sheet name uses an unhyphenated, mixed case name. I.e. border-color would be borderColor, text-align is textAlign. That aside, the property values that can be attributed to the various Javascript style sheets properties are the same as those that can be set for the various standard CSS properties. Take a look through the Properties and Values topics for more information on style sheet attribute values.

© 1995-1998, Stephen Le Hunte


Length Units

The format of length values is an optional sign character ('+' or '-', with '+' being the default) immediately followed by a number (with or without a decimal point) immediately followed by a unit identifier (a two-letter abbreviation).

There are two types of length units: relative and absolute. Relative units specify a length relative to another length property. Style sheets that use relative units will more easily scale from one medium to another (e.g. from a computer display to a laser printer). Percentage units (described below) and keyword values (e.g. 'x-large') offer similar advantages.

The following relative units are supported (NOTE : The elements shown are used as an example, the settings can be applied to any element)

H1 { margin: 0.5em } | ems, the height of the element's font
H1 { margin: 1ex } | x-height, ~ the height of the letter 'x'

The relative units 'em' and 'ex' are relative to the font size of the element itself. The only exception to this rule in CSS1 is the 'font-size' property where 'em' and 'ex' values refer to the font size of the parent element.

Pixel units, as used in the last rule, are relative to the resolution of the canvas, i.e. most often a computer display. If the pixel density of the output device is very different from that of a typical computer display, the UA should rescale pixel values. The suggested reference pixel is the visual angle of one pixel on a device with a pixel density of 90dpi and a distance from the reader of an arm's length. For a nominal arm's length of 28 inches, the visual angle is about 0.0227 degrees.

Child elements inherit the computed value, not the relative value:

BODY {
font-size: 12pt;
text-indent: 3em; /* i.e. 36pt */
}
H1 { font-size: 15pt }

In the example above, the 'text-indent' value of 'H1' elements will be 36pt, not 45pt.

Absolute length units are only useful when the physical properties of the output medium are known. These absolute units are supported (NOTE : The elements shown are used as an example, the settings can be applied to any element)

H1 { margin: 0.5in } | inches, 1in = 2.54cm
H2 { line-height: 3cm } | centimeters
H3 { word-spacing: 4mm } | millimeters
H4 { font-size: 12pt } | points, 1pt = 1/72 in
H4 { font-size: 1pc } | picas, 1pc = 12pt

In cases where the specified length cannot be supported, UAs should try to approximate. For all CSS1 properties, further computations and inheritance should be based on the approximated value.

© 1995-1998, Stephen Le Hunte


Miscellaneous Properties

@import
Value: <url>
Initial: N/A
Applies to: style sheet.
Inherited: no
Percentage values: N/A

The @import style sheet property specifies a style sheet to import. The statement must occur at the start of a style sheet, before any declarations.

Rules in the style sheet override rules in the imported style sheet. For example, if the imported style sheet and the embedded one contained declarations for a level1 heading element, level 1 heading would be styled according to the declarations contained in the embedded style sheet.

cursor
Value: auto | crosshair | default | hand | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help
Initial: auto
Applies to: all elements.
Inherited: yes
Percentage values: N/A

The cursor property specifies the type of cursor to be displayed for the mouse pointer.

Move the mouse over the boxes below to see the different cursor types

crosshair | default | hand
move | e-resize | ne-resize
n-resize | nw-resize | w-resize
sw-resize | s-resize | se-resize
text | wait | help

© 1995-1998, Stephen Le Hunte


Style sheets - overview

Style Sheets

NOTE : Presented here is a brief overview of the Style Sheet specification. For a more complete reference, visit the Style Sheet resource page at the W3C (at http://www.w3.org/pub/WWW/Style Sheets/). Also, Microsoft have produced an excellent "Users guide to stylesheets" document available from the Microsoft Web Development Workshop web site at http://www.microsoft.com/workshop/

Style Sheets allow the HTML author to separate presentation definitions from content in HTML documents. HTML was designed primarily as a content based mark up language and the introduction of various text level formatting elements and attributes only served to confuse the issue. Microsoft led the way by implementing style sheet support in Internet Explorer 3.0, support which was greatly improved in Internet Explorer 4.0. Netscape also implemented Style Sheet support with the release of Communicator and Navigator 4.0.

Anyone who does a lot of work using a word processor should be familiar with the concept of style sheets. Basically, styles are defined and then applied to blocks of text (or even single characters) by referring to the definition in the available style range.

The simplest form of style sheet could be:

P {color : #800000}

This would cause any text that is classified as a paragraph (i.e. uses a <P> element) to be rendered using a dark red colour. For a breakdown of the possible properties for use in style sheets, see the Properties and Values topic.

Applying a style sheet to a document
Style definitions can be applied to documents and their elements in on of four ways.

  • Using the <LINK> attribute to point to an external style sheet. (See <LINK> for details)
  • Using the <STYLE> element within the <HEAD> of a document. (See <STYLE> for details)
  • Using the @import mechanism (similar to the <LINK> method above, this allows the importing of external style sheets.)
  • Using the STYLE attribute in an element. This is allowed for any elements allowed within the <BODY> of a HTML document.

The fourth option above, while allowed, is not recommended as it mixes style definitions with content, which goes against the style sheet concept. An example would be :

<H1 STYLE="color : #FF0000">Heading 1</H1>

Note : If multiple style sheet declaration methods are used (i.e. a stylesheet is <LINK>ed in and a <STYLE> block is also used, then multiple element style settings will be used in the order they are read. For example, if both the <LINK>ed style sheet and the <STYLE> block have settings for the <Hx> element, then that in the <STYLE> block will take precedence. Settings using different properties on the same element will all be applied together for the element. For example, if the <LINK>ed style sheet contains A { color:red } and the <STYLE> block contains A:link { color:blue } then all <A> elements will be red, with links (i.e. <A HREF="...">) being blue. Likewise, style settings set in the STYLE attribute of an element will override any settings in a <STYLE> block, or a linked style sheet.

There are various methods for denoting the style declaration and all use separate methods within the HTML to determine the style to be used :

CLASS as selector
The CLASS attribute was first proposed in the now expired HTML 3 specification. All elements that can reside within the <BODY> of a HTML document can be addressed using a CLASS attribute.

Within the style sheet definition, the style class is set thus:

P.redtext { color : #FF0000}

So, any paragraphs denoted by a <P CLASS="redtext">text</P> HTML sequence would be rendered using a red coloured text. If the style class is defined with no major element, i.e. :

.redtext { color : #FF0000}

then all elements that use CLASS="redtext" would be coloured red.

ID as selector
Like the CLASS attribute above, the ID attribute was first introduced in the HTML 3 specification. The difference between it and the CLASS attribute is that the ID attribute must be guaranteed a unique identifier within the document. It must also be addressed within the style sheet preceded with a # character. I.e.:

#redtext { color : #FF0000}

<P ID="redtext">some text</P> would be coloured red.

Context sensitive selectors
Suppose that you wanted to make all text that was defined as strong within a paragraph be rendered using a lime green colour. You could use :

STRONG { color : #00FF00}

in the style sheet definition. However, this would cause all text that was enclosed in <STRONG> ... </STRONG> elements to be rendered lime green. This is where context sensitive selectors are useful. If you use :

P STRONG { color : #00FF00}

in the style sheet definition, then only text enclosed in <STRONG> ... </STRONG> elements enclosed in <P> ... </P> elements would be lime green. For instance :

<P><STRONG>This will be lime green</STRONG></P> This <STRONG>other bit</STRONG> won’t be.

As with the two methods of style definition above, this can be used for all elements normally contained within the body of a document.

Hopefully, this has provided enough starter information about style sheets. Users interested in employing style sheet presentation to their documents should obtain the Cascading Style Sheet specification from the W3C Style Sheet Resource page for more detailed information.

© 1995-1998, Stephen Le Hunte


Percentage Units

The format of a percentage value is an optional sign character ('+' or '-', with '+' being the default) immediately followed by a number (with or without a decimal point) immediately followed by '%'.

Percentage values are always relative to another value, for example a length unit. Each property that allows percentage units also defines what value the percentage value refer to. Most often this is the font size of the element itself:

For example :
P { line-height: 120% } 120% of the element's 'font-size'

In all inherited CSS1 properties, if the value is specified as a percentage, child elements inherit the resultant value, not the percentage value.

© 1995-1998, Stephen Le Hunte


Positioning Properties

clip
Value: <shape> | auto
<shape>: rect (<top> <right> <bottom> <left>)
<top> <right> <bottom> <left>: auto | <length>
Initial: auto
Applies to: elements with the 'position' property of type 'absolute'.
Inherited: no
Percentage values: N/A

Clipping alters the display of HTML, though it does not affect how it is laid out. The clipping region defines what portion of the element's physical representation is visible. It is computed by the intersection of the parent's clipping region with the value of the element's 'clip' property.

Lengths are specified with respect to the element's top-left corner. Negative values are permitted. When converted to pixel coordinates, the bottom-right corner is excluded from the clipping rectangle. This rule is necessary to permit the definition of zero-width or zero-height rectangles.

Any length can be replaced by the value 'auto', which causes the respective extent of the clipping rectangle to match the element's extent in the given direction, including padding, borders and child elements. The default value for the 'clip' property causes the clip rectangle to encompass the entire element. In effect, 'auto' provides for an infinite clipping region.

For now, all clipping regions are rectangular. We anticipate future extensions to permit non-rectangular clipping.

Note: If the clipping region exceeds the bounds of the browsers document window, contents may be clipped to that window by the native operating environment.

width, height
Value: <length> | <percentage> | auto
Initial: auto
Applies to: block-level and replaced elements, elements with 'position' property value of 'absolute'
Inherited: no
Percentage values: refer to parent element's width and height. If parent's height is 'auto', percentage of height is undefined.

For elements with 'position' of type 'relative' and 'static', the behavior of 'width' and 'height' is unchanged from that defined by the CSS1 formatting model.

For 'absolute' positioned elements:

  • The 'auto' value of the width property is such that the right edge of the positioned element is placed immediately inside the right inner edge of its enclosing element. If this places the right edge of the element to the left of its left edge, the width is set to zero.
  • Percentage values can be specified for both 'height' and 'width', and are computed with respect to the height and width of the parent element. However, specifying a percentage value for 'height' if the parent element's height is set to 'auto' has undefined behavior.

left, top
Value: <length> | <percentage> | auto
Initial: auto
Applies to: elements with the 'position' property of type 'absolute' or 'relative'.
Inherited: no
Percentage values: refer to parent element's width and height. If parent's height is set to 'auto', percentage is undefined.

For elements with 'absolute' positioning, 'left' and 'top' are based on the current positioning context.

For elements with 'relative' positioning:

  • 'Left' and 'top' are offsets to the normally rendered position of the element. For 'left', positive offsets are toward the right side of the document. For 'top', positive offsets are toward the bottom of the document. The space reserved for the normally rendered element does not move with the element. When the contents of these elements are moved, they may obscure any content below them depending upon the corresponding z-index attribute. These elements maintain their original shape, including line breaks, if any.
  • If the element is moved, its positioning context moves with it. Similarly, elements that are positioned 'relative' within another 'relative' element will move when the parent 'relative' element is moved.

overflow
Value: visible | hidden | scroll | auto
Initial: visible
Applies to: elements with the 'position' property of type 'absolute'.
Inherited: no
Percentage values: N/A

'Overflow' determines what happens when an element's rendered contents exceed its height or width.

A value of 'visible' indicates that the element's bounding box should be enlarged enough to contain all of its rendered contents. In other words, its height or width can be made bigger than the declared value. Any padding or border will remain outside the rendered content. Any additional width will be added in the direction of primary text flow, e.g. to the right side in left-to-right languages, while additional height will be added to the bottom.

A value of 'hidden' indicates that the element's contents should be clipped to its height and width, and that no scrolling mechanism should be provided. Padding and border will be applied to the regular height and width of the element, as if its contents did not exceed its bounds. Any contents that exceed the element's bounds will be unavailable to the user.

The behavior of the 'auto' value is browser-dependent, but should cause a scrolling mechanism to be invoked when the element's rendered contents exceed its bounds.

Finally, the 'scroll' value indicates that if the UA supports a visible scrolling mechanism, that mechanism should be displayed whether or not the element's rendered contents exceed its bounds. This avoids any problem with scrollbars appearing and disappearing in a dynamic environment.

Note: Even if 'overflow' is set to 'visible', contents may be clipped to a UA's document window by the native operating environment. In addition, the 'clip' property can cause otherwise visible "overflowed" contents to be clipped.

The default value ('auto') represents the current position in the document at the time the element is rendered. This value is calculated by the UA for 'absolute' positioned elements, and is 0 (no offset) for 'relative' positioned elements.

position
Value: absolute | relative | static
Initial: static
Applies to: all elements
Inherited: no
Percentage values: N/A

Each variety of 'position' establishes one or more of the following:

  • A new rectangular overlay, outside of the document flow, into which the element's contents are flowed (absolute)
  • A box positioning context (absolute) or a Cartesian positioning context (relative) for absolutely positioned child elements
  • A new clipping region for child elements (absolute)
  • A position either within the current positioning context (absolute) or relative to the normally rendered position (relative)
  • A z-order relative to the current positioning context (absolute, relative)

'Absolute' Positioned elements act like block-level elements from a CSS1 formatting perspective. However, since they fall completely outside of the normal document flow, the following CSS1 properties do not apply: 'float', 'clear', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left', 'margin'.

visibility
Value: inherit | visible | hidden
Initial: inherit
Applies to: all elements
Inherited: if value is 'inherit'

Visibility determines the initial display state of an element, but does not affect its layout. Elements that are hidden still take up the same physical space as they would were they visible, they are just rendered transparently. This differs from the behavior of 'display: none', in which the element is ignored, as if it were not present in the document at all. Visibility can be used in a scripting environment to dynamically display only one of several elements which overlap one another.

z-index
Value: auto | <integer>
Initial: auto
Applies to: positionable elements
Inherited: no
Percentage values: N/A

The 'z-index' property is used to specify the stacking order of positionable elements. The default ('auto') behavior is to stack them bottom-to-top in the order they appear in the HTML source within the current positioning context. The 'z-index' property allows an element's z-order to be given as an integer that specifies stacking order relative to its positionable sibling and parent elements:

  • Sibling elements are stacked bottom-to-top in order of increasing 'z-index' value. Sibling elements with identical 'z-index' values have unspecified relative stacking order.
  • Elements that have negative 'z-index' values are stacked below their parent element and elements with positive 'z-index' values are stacked above their parent element. In other words, each positionable element defines a positioning context for z-order in which their own 'z-index' is 0.

The relative z-order of two elements that are neither siblings nor parent/child can be determined by evaluation of the above rules for both elements' ancestors.

© 1995-1998, Stephen Le Hunte


Printing Properties

These Style Sheet printing extensions are aimed at documents that will use the <STYLE MEDIA="print"...> style sheet setting, specifying the style sheet as being suitable for printed documents. Note that the printing extensions are only a recent addition to Style Sheets and are claimed to be supported by Internet Explorer 4.0.

page-break-after
Value: auto | always | left | right
Initial: auto
Applies to: block-level elements outside of tables
Inherited: no
Percentage values: N/A

The values are:

auto
do a page break after the element only if necessary (e.g. if there is no remaining space on the current page)
always
always do a page break after the element
left
do one or two page breaks after the element until a blank left page is reached
right
do one or two page breaks after the element until a blank right page is reached

As an example, a hard page break may be inserted in the document with the BR tag as follows:

<STYLE>
BR.page { page-break-after: always }
</STYLE>
...
<BR CLASS=page>
...

If there are conflicts between this property and the 'page-break-before' value on the previous element (as formatted on the canvas), the value that results in the largest number of page breaks will be used.

Note: a way to suppress page breaks after an element is currently under discussion by the W3C, but the syntax is not yet defined.

page-break-before
Value: auto | always | left | right
Initial: auto
Applies to: block-level elements outside of tables
Inherited: no
Percentage values: N/A

The values are:

auto
do a page break before the element only if necessary (e.g. if there is no remaining space on the current page)
always
always do a page break before the element
left
do one or two page breaks before the element until a blank left page is reached
right
do one or two page breaks before the element until a blank right page is reached

As an example, a page break may be inserted in the document before all H1 elements:

<STYLE>
H1 { page-break-before: always }
</STYLE>
...
<H1 CLASS=chapter>
...

If there are conflicts between this property and the 'page-break-after' value on the next element (as formatted on the canvas), the value that results in the largest number of page breaks will be used.

Note: a way to suppress page breaks before an element is currently under discussion by the W3C, but the syntax is not yet defined.

© 1995-1998, Stephen Le Hunte


Style Sheet Properties and Values

Style Sheet Properties & Values

NOTE : The information presented here is abridged from the style sheet specification (along the lines of the properties quick reference guide at the W3C web site (http://www.w3.org/pub/WWW/Style Sheets/) For more detailed information, consult the Style Sheet specification.

The Style Sheet properties can be split into the following groups:

Colour and background properties
Font properties
Text properties
Box properties
Classification properties
Positioning properties
Printing properties
Filter properties
Miscellaneous properties
Also, some information about units
Length units
Percentage units
Colour units
URL

© 1995-1998, Stephen Le Hunte


Pseudo Classes & Elements

Pseudo-Classes and Elements

Several pseudo-classes and pseudo-elements exist in CSS. Pseudo-classes refer to dynamically linked groups of class definitions (i.e. all links etc.) while pseudo-elements refer to a sub-section of a larger elements content (i.e. the first line of a paragraph etc.).

The various pseudo-classes are:

A:link
This pseudo-class can be used to set the style definitions for all links in the document (it's the same as using <BODY LINK="...">. Note that this is different to setting a style definition for a single A element, as it only sets style definitions for links. Any anchors in the document (i.e. <A NAME="...">) will not be affected by this pseudo-class. It's used as:

A:link { color:#FF0000}

which would set all the documents links to a bright red colour.

A:active
This pseudo-class can be used to set the style definitions for all active links in the document, the style settings being visible for the moment that the user activates a link (it's the same as using <BODY ALINK="...">. It's used as:

A:active { color:#0000FF}

which would set all the documents links to a bright blue colour when they're activated.

A:visited
This pseudo-class can be used to set the style definitions for all visited links in the document, the style settings being applied for links that navigate to documents that the user has already seen (it's the same as using <BODY VLINK="...">. It's used as:

A:visited { color:#800000}

which would set all the documents links to a dark blue colour after they've been activated.

A:hover
Using the A:hover pseudo-class is essentially the same as using an OnMouseOver/OnMouseOut pair of script event handlers for links in the document. Whatever style settings are applied to the :hover pseudo-class will be applied to links when the users mouse 'hovers' over them, with the links reverting back to any default settings when the users mouse moves away from the link. For example:

A:hover { font-weight : bold }

causes the documents links to bolden when the user passes the mouse over them. Try it with with this link.

Note : As with the above link, it's possible to mix standard class settings with pseudo-classes. The above link boldens when the mouse hovers over it, but none of the other links in the document do. That's because it mixes a class definition, with the :hover pseudo-class. For example:

A.external:hover { font-weight:bold}

So, any links that use the CLASS="external" class descriptor, will bolden upon mouse hovering, but links that use different CLASS="..." descriptors, or none at all, will stay the same font weight as normal (assuming no other style sheet definitions have been applied to the <A> element).

Note : At the time of writing, A:hover was only supported by Internet Explorer 4.0 and above.

The various pseudo-classes are:

:first-letter
The :first-letter pseudo-element (commonly referred to as 'Initial Caps' in typography circles) should apply the defined stylings to the first letter only of the block-level element that it's defined for. For example:

P:first-letter {font-size : 20pt}

would cause the first letter of all <P> element content to be rendered as 20pt. At the time of writing, the :first-letter pseudo-class wasn't supported by any of the major browsers.

:first-line
The :first-line pseudo-element should apply the defined styles to the first line of the block-level element to which it is attached. For example:

BODY:first-line {font-variant : small-caps}

should cause the first line of the document text to be rendered in small capital letters. At the time of writing, the :first-line pseudo-class wasn't supported by any of the major browsers.

© 1995-1998, Stephen Le Hunte


Text Properties

word-spacing
Value: normal | <length>
Initial: normal
Applies to: all elements
Inherited: yes
Percentage values: N/A

The length unit indicates an addition to the default space between words. Values can be negative, but there may be implementation-specific limits. The UA is free to select the exact spacing algorithm. The word spacing may also be influenced by justification (which is a value of the 'align' property).

H1 { word-spacing: 0.4em }

Here, the word-spacing between each word in 'H1' elements would be increased by '1em'.

Note : Internet Explorer 4.0 does not support the word-spacing style sheet property.

letter-spacing
Value: normal | <length>
Initial: normal
Applies to: all elements
Inherited: yes
Percentage values: N/A

The length unit indicates an addition to the default space between characters. Values can be negative, but there may be implementation-specific limits. The UA is free to select the exact spacing algorithm. The letter spacing may also be influenced by justification (which is a value of the 'align' property).

BLOCKQUOTE { letter-spacing: 0.1em }

Here, the letter-spacing between each character in <BLOCKQUOTE> elements would be increased by '0.1em'.

With a value of 'normal', the browsers may change the space between letters to justify text. This will not happen if 'letter-spacing' is explicitly set to a <length> value:

BLOCKQUOTE { letter-spacing: 0 }
BLOCKQUOTE { letter-spacing: 0cm }

When the resultant space between two letters is not the same as the default space, UAs should not use ligatures.

text-decoration
Value: none | [ underline || overline || line-through || blink ]
Initial: none
Applies to: all elements
Inherited: no, but see clarification below
Percentage values: N/A

This property describes decorations that are added to the text of an element. If the element has no text (e.g. the <IMG> element in HTML) or is an empty element (e.g. '<EM></EM>'), this property has no effect. A value of 'blink' causes the text to blink.

The color(s) required for the text decoration should be derived from the 'color' property value.

This property is not inherited, but elements should match their parent. E.g., if an element is underlined, the line should span the child elements. The color of the underlining will remain the same even if descendant elements have different 'color' values.

A:link, A:visited, A:active { text-decoration: underline }

The example above would underline the text of all links (i.e., all <A> elements with a HREF attribute), using various pseudo-classes.

Browsers must recognize the keyword 'blink', but are not required to support the blink effect.

vertical-align
Value: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage>
Initial: baseline
Applies to: inline elements
Inherited: no
Percentage values: refer to the 'line-height' of the element itself

The property affects the vertical positioning of the element. One set of keywords is relative to the parent element:

baseline
align the baseline of the element (or the bottom, if the element doesn't have a baseline) with the baseline of the parent
middle
align the vertical midpoint of the element (typically an image) with the baseline plus half the x-height of the parent
sub
subscript the element
super
superscript the element
text-top
align the top of the element with the top of the parent element's font
text-bottom
align the bottom of the element with the bottom of the parent element's font

Another set of properties are relative to the formatted line that the element is a part of:

top
align the top of the element with the tallest element on the line
bottom
align the bottom of the element with the lowest element on the line

Using the 'top' and 'bottom' alignment, unsolvable situations can occur where element dependencies form a loop.

Percentage values refer to the value of the 'line-height' property of the element itself. They raise the baseline of the element (or the bottom, if it has no baseline) the specified amount above the baseline of the parent. Negative values are possible. E.g., a value of '-100%' will lower the element so that the baseline of the element ends up where the baseline of the next line should have been. This allows precise control over the vertical position of elements (such as images that are used in place of letters) that don't have a baseline.

It is expected that a future version of CSS will allow <length> as a value on this property.

text-transform
Value: capitalize | uppercase | lowercase | none
Initial: none
Applies to: all elements
Inherited: yes
Percentage values: N/A

capitalize
uppercases the first character of each word
uppercase
uppercases all letters of the element
lowercase
lowercases all letters of the element
none
neutralizes inherited value.

The actual transformation in each case is human language dependent.

H1 { text-transform: uppercase }

The example above would put <H1> elements in uppercase text.

text-align
Value: left | right | center | justify
Initial: UA specific
Applies to: block-level elements
Inherited: yes
Percentage values: N/A

This property describes how text is aligned within the element. The actual justification algorithm used is UA and human language dependent.

Example:

DIV.center { text-align: center }

Since 'text-align' inherits, all block-level elements inside the <DIV> element with CLASS=center will be centered. Note that alignments are relative to the width of the element, not the canvas. If 'justify' is not supported, the UA will supply a replacement. Typically, this will be 'left' for western languages.

text-indent
Value: <length> | <percentage>
Initial: 0
Applies to: block-level elements
Inherited: yes
Percentage values: refer to parent element's width

The property specifies the indentation that appears before the first formatted line. The value of 'text-indent' may be negative, but there may be implementation-specific limits. An indentation is not inserted in the middle of an element that was broken by another (such as 'BR' in HTML).

Example:

P { text-indent: 3em }

line-height
Value: normal | <number> | <length> | <percentage>
Initial: normal
Applies to: all elements
Inherited: yes
Percentage values: relative to the font size of the element itself

The property sets the distance between two adjacent lines' baselines.

When a numerical value is specified, the line height is given by the font size of the current element multiplied with the numerical value. This differs from a percentage value in the way it inherits: when a numerical value is specified, child elements will inherit the factor itself, not the resultant value (as is the case with percentage and other units).

Negative values are not allowed.

The three rules in the example below have the same resultant line height:

DIV { line-height: 1.2; font-size: 10pt } /* number */
DIV { line-height: 1.2em; font-size: 10pt } /* length */
DIV { line-height: 120%; font-size: 10pt } /* percentage */

A value of 'normal' sets the 'line-height' to a reasonable value for the element's font. It is suggested that UAs set the 'normal' value to be a number in the range of 1.0 to 1.2.

© 1995-1998, Stephen Le Hunte


URL Units

A Uniform Resource Locator (URL) is identified with a functional notation. For example :

BODY { background: url(http://www.bg.com/pinkish.gif) }

Partial URLs are interpreted relative to the source of the style sheet, not relative to the document.

© 1995-1998, Stephen Le Hunte


DHTML Objects

The following is a list of the objects defined by Dynamic HTML. The links take you to the object definitions, which contain the set of members for the object.

!DOCTYPE | A | ACRONYM | ADDRESS
APPLET | AREA | Attribute | B
BASE | BASEFONT | BDO | BGSOUND
BIG | BLOCKQUOTE | BODY | BR
BUTTON | CAPTION | CENTER | CITE
clientInformation | clipboardData | CODE | COL
COLGROUP | COMMENT | currentStyle | custom
dataTransfer | DD | DEL | DFN
DIR | DIV | DL | document
DT | EM | EMBED | event
external | FIELDSET | FONT | FORM
FRAME | FRAMESET | HEAD | history
Hn | HR | HTML | I
IFRAME | IMG | INPUT | INS
ISINDEX | KBD | LABEL | LEGEND
LI | LINK | LISTING | location
MAP | MARQUEE | MENU | META
navigator | NEXTID | NOBR | NOFRAMES
NOSCRIPT | OBJECT | OL | OPTION
P | PARAM | PLAINTEXT | PRE
Q | RT | RUBY | rule
runtimeStyle | S | SAMP | screen
SCRIPT | SELECT | selection | SMALL
SPAN | STRIKE | STRONG | style
STYLE | styleSheet | SUB | SUP
TABLE | TBODY | TD | TEXTAREA
TextNode | TextRange | TextRectangle | TFOOT
TH | THEAD | TITLE | TR
TT | U | UL | userProfile
VAR | WBR | window | XML
XMP |  |  |

Reconfigartion By J2M


Object DHTM

DHTML Objects

A Element | A Object

Designates the start or destination of a hypertext link.

HTML Syntax

<A
    ACCESSKEY=key
    CLASS=classname
    DATAFLD=colname
    DATASRC=#ID
    HREF=url
    ID=value
    LANG=language
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    METHODS=http-method
    NAME=name
    REL="stylesheet"
    REV="stylesheet"
    STYLE=css1-properties
    TABINDEX=n
    TARGET=window_name | _blank | _parent | _search | _self | _top
    TITLE=text
    URN=urn
    event = script
>

Remarks

The A (anchor) element requires the href or the name property to be specified.

Both text and images can be included within an anchor. An image that is an anchor has a border whose color indicates whether the link has been visited.

The A element is an inline element and requires a closing tag.

This element is available in HTML and script as of Microsoft® Internet Explorer 3.0.

Members

A Members

Styles

A Styles

Example

The following examples use the A element to link files, open a file, include an image as part of a link, define an anchor, and invoke a function.

<-- Link to a server. -->
<A HREF="http://www.microsoft.com">Microsoft home page.</A>

<-- Link to a file in the same directory. -->
<A HREF="home.htm">home.htm</A>

<-- Open a file in the window specified by TARGET. -->
<A TARGET="viewer" HREF="sample.htm">Open in window</A>

<-- Include an IMG element as a part of the link. -->
<A HREF="http://www.microsoft.com"><IMG SRC="images/bullet.gif">link</A>

<-- Link to an anchor. -->
<A HREF="#anchor">anchor</A>

<-- Define an anchor. -->
<A NAME="anchor">

<-- Invoke a JScript function -->
<A HREF="javascript:window.open()">link</A>

Reconfiguration By J2M


Object DHTM

DHTML Objects

ACRONYM Element | ACRONYM Object

Indicates an acronym abbreviation.

HTML Syntax

<ACRONYM
    CLASS=classname
    ID=value
    LANG=language
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    STYLE=css1-properties
    TITLE=text
    event = script
>

Remarks

The ACRONYM element is an inline element and requires a closing tag.

This element is available in HTML and script as of Microsoft® Internet Explorer 4.0.

Members

ACRONYM Members

Styles

ACRONYM Styles

Example

<ACRONYM>MSN</ACRONYM>

See Also

ADDRESS, CITE, DFN, EM, I

Configartion By J2M


Object DHTM

DHTML Objects

ADDRESS Element | ADDRESS Object

Specifies information, such as address, signature, and authorship, of the current document.

HTML Syntax

<ADDRESS
    CLASS=classname
    ID=value
    LANG=language
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    STYLE=css1-properties
    TITLE=text
    event = script
>

Remarks

Microsoft® Internet Explorer displays the content of an ADDRESS element in italics.

The ADDRESS element is a block element and requires a closing tag.

This element is available in HTML as of Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

ADDRESS Members

Styles

ADDRESS Styles

Example

This example uses the ADDRESS element to italicize text.

<ADDRESS>This text will be italic.</ADDRESS>

See Also

ACRONYM, CITE, DFN, EM, I

Reconfigartion By J2M


Object DHTM

DHTML Objects

APPLET Element | APPLET Object

Places executable content on the page.

HTML Syntax

<APPLET
    ALIGN=ABSBOTTOM | ABSMIDDLE | BASELINE | BOTTOM | LEFT |
        MIDDLE | RIGHT | TEXTTOP | TOP
    ALT=text
    CLASS=classname
    CODE=filename
    CODEBASE=url
    DATAFLD=colname
    DATASRC=#ID
    HEIGHT=n
    HSPACE=n
    ID=value
    NAME=name
    SRC=url
    STYLE=css1-properties
    TITLE=text
    VSPACE=n
    WIDTH=n
    event = script
>

Remarks

The APPLET element is a block element and requires a closing tag.

To use executable content specified by the APPLET element, a user's computer must have the Microsoft virtual machine installed.

This element is available in HTML as of Microsoft® Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

APPLET Members

Styles

APPLET Styles

Reconfigartion By J2M


Object DHTM

DHTML Objects

AREA Element | AREA Object

Defines the shape, coordinates, and associated URL of one hyperlink region within a client-side image MAP.

HTML Syntax

<AREA
    ALT=text
    CLASS=classname
    COORDS=coordinates
    HREF=url
    ID=value
    LANG=language
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    NOHREF
    SHAPE=CIRC | CIRCLE | POLY | POLYGON | RECT | RECTANGLE
    STYLE=css1-properties
    TABINDEX=n
    TARGET=window_name | _blank | _parent  | _search | _self | _top
    TITLE=text
    event = script
>

Remarks

Any number of AREA elements can be contained within the same MAP element.

The format of the COORDS value depends on the value of the SHAPE attribute.

The AREA element is not rendered and requires a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

AREA Members

Styles

AREA Styles

Example

This example provides the code for an image map of the solar system. It creates links from the image map to individual images of the planets using the AREA element with the MAP element, COORDS value, and SHAPE attribute. The user clicks the sun or any planet to link to an individual image. To return to the solar system image map, the user clicks the Back button.

Sample Code

<P><IMG SRC="solarsys.gif" WIDTH=504 HEIGHT=126 BORDER=0
    ALT="Solar System" USEMAP="#SystemMap">

<MAP NAME="SystemMap">
    <AREA SHAPE="rect" COORDS="0,0,82,126"
        HREF="/workshop/graphics/sun.gif">
    <AREA SHAPE="circle" COORDS="90,58,3"
        HREF="/workshop/graphics/merglobe.gif">
    <AREA SHAPE="circle" COORDS="124,58,8"
        HREF="/workshop/graphics/venglobe.gif">
    <AREA SHAPE="circle" COORDS="162,58,10"
        HREF="/workshop/graphics/earglobe.gif">
    <AREA SHAPE="circle" COORDS="203,58,8"
        HREF="/workshop/graphics/marglobe.gif">
    <AREA SHAPE="poly" COORDS="221,34,238,37,257,32,278,44,284,        60,
        281,75,288,91,267,87,253,89,237,81,229,64,228,54"
        HREF="/workshop/graphics/jupglobe.gif">
    <AREA SHAPE="poly" COORDS="288,19,316,39,330,37,348,47,351,66,
        349,74,367,105,337,85,324,85,307,77,303,60,307,50"
        HREF="/workshop/graphics/satglobe.gif">
    <AREA SHAPE="poly" COORDS="405,39,408,50,411,57,410,71,404,78,
        393,80,383,86,381,75,376,69,376,56,380,48,393,44"
        HREF="/workshop/graphics/uraglobe.gif">
    <AREA SHAPE="poly" COORDS="445,38,434,49,431,53,427,62,430,72,
        435,77,445,92,456,77,463,72,463,62,462,53,455,47"
        HREF="/workshop/graphics/nepglobe.gif">
    <AREA SHAPE="circle" COORDS="479,66,3"
        HREF="/workshop/graphics/pluglobe.gif">
</MAP>

This feature requires Internet Explorer 4.0 or later. Click the icon below to install the latest version. Then reload this page to view the sample.
Microsoft Internet Explorer

Configartion By J2M


Object DHTM

DHTML Objects

Attribute Object

Represents an attribute or property of an HTML element as an object.

Remarks

The Attribute object is accessible through the attributes collection.

A valid attribute or property can be any Dynamic HTML (DHTML) property or event that applies to the object, or an expando.

This object is available in script as of Microsoft® Internet Explorer 5.

Members

Attribute Members

Example

This example uses the Attribute object to create a list of attributes that are specified.

<SCRIPT>
function fnFind(){
   for(var i=0;i<oList.attributes.length;i++){
      if(oList.attributes[i].specified){
         alert(oList.attributes[i].nodeName + " = "
          + oList.attributes[i].nodeValue);
      }
   }
}
</SCRIPT>

<UL onclick="fnFind()">
<LI ID = "oItem1" ACCESSKEY = "L">List Item 1
</UL>

Reconfigartion By J2M


Object DHTM

DHTML Objects

B Element | B Object

Specifies that the text should be rendered in bold.

HTML Syntax

<B
    CLASS=classname
    ID=value
    LANG=language
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    STYLE=css1-properties
    TITLE=text
    event = script
>

Remarks

The B element is an inline element and requires a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

B Members

Styles

B Styles

Example

This example uses the B element to boldface the text.

<B>This text displays boldface.</B>

See Also

STRONG

Reconfigartion By J2M


Object DHTM

DHTML Objects

BASE Element | BASE Object

Specifies an explicit URL used to resolve links and references to external sources such as images and style sheets.

HTML Syntax

<BASE
    HREF=url
    TARGET=window_name | _blank | _parent | _search | _self | _top
>

Remarks

When used, the BASE element must appear within the HEAD of the document, before any elements that refer to an external source.

The BASE element does not require a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

BASE Members

Example

This example sets the base URL of the document to a reference folder. Internet Explorer uses the BASE element to resolve the link to http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/href_2.asp.

<HEAD>
<BASE HREF="http://msdn.microsoft.com/workshop/author/dhtml/reference">
</HEAD>

<BODY>
Click <A HREF="properties/href_2.asp">here< to learn about the
href property.
</BODY>

This example retrieves the base URL from the document if a valid BASE element is specified in the document. Otherwise, the function returns null.

<SCRIPT>
function GetBase()
{
    var oBaseColl = document.all.tags('BASE');
    return ( (oBaseColl && oBaseColl.length) ? oBaseColl[0].href :
        null );
}
</SCRIPT>

Reconfigartion By J2M


Object DHTM

DHTML Objects

BASEFONT Element | BASEFONT Object

Sets a base font value to be used as the default font when rendering text.

HTML Syntax

<BASEFONT
    CLASS=classname
    COLOR=color
    FACE=font
    ID=value
    LANG=language
    SIZE=n
>

Remarks

This element can be used only within the BODY element or the HEAD element. BASEFONT should appear before any displayed text in the BODY of the document.

The BASEFONT element does not require a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

BASEFONT Members

Example

This example uses the BASEFONT element to set the base font size, and the FONT element to temporarily override it.

No BASEFONT size specified yet.
<BASEFONT SIZE=4> Set the BASEFONT size.
<FONT SIZE=2> Temporarily override the BASEFONT size.</FONT>
Resume the BASEFONT size.

Reconfigartion By J2M


Object DHTM

DHTML Objects

BDO Element | BDO Object

Allows authors to disable the bidirectional algorithm for selected fragments of text.

HTML Syntax

<BDO
    DIR=ltr|rtl
    ID=value
    LANG=language
    TITLE=text
    event=script
>

Remarks

The BDO element can be used to control the reading order of a block of text.

The Unicode bidirectional algorithm automatically reverses embedded character sequences according to their inherent direction. For example, the base direction of an English document is left-to-right (ltr). If portions of a paragraph within this document contain a language with the right-to-left (rtl) reading order, you can reverse the direction of that language by applying the bidirectional algorithm.

The bidirectional algorithm and the DIR attribute generally suffice for embedded direction changes. However, incorrect presentations can occur when you expose formatted text to the bidirectional algorithm. For example, a paragraph containing English and Hebrew that is formatted for e-mail could be incorrectly inverted by the bidirectional algorithm. Because the reading order of the Hebrew text was inverted once for the e-mail, exposing it to the bidirectional algorithm would invert the words a second time.

The BDO element turns off the algorithm and controls the reading order. The DIR attribute is required when you use the BDO element.

The BDO element is an inline element and requires a closing tag.

This element is available in HTML and script as of Microsoft® Internet Explorer 5.

Members

BDO Members

Example

Sample Code

This example uses the BDO element to correct the reading order of a block of text.

The following string includes text written in the left-to-right order of the English language and the right-to-left order of Hebrew: This fragment is in English, WERBEH NI SI TNEMGARF SIHT.

Assume that the right-to-left text (WERBEH NI SI TNEMGARF SIHT.) already has been inverted, so that it displays in the correct direction. If you subsequently apply the Unicode bidirectional to the text, the text inverts a second time and incorrectly displays as left-to-right instead of right-to-left.

The solution is to override the bidirectional algorithm and put the block of text in the correct reading order inside a BDO element whose DIR attribute is set to ltr.

<BDO DIR="ltr">This fragment is in English,
    WERBEH NI SI TNEMGARF SIHT.</BDO>

See Also

direction

Reconfigartion By J2M


Object DHTM

DHTML Objects

BGSOUND Element | BGSOUND Object

Enables pages with background sounds or soundtracks to be created. Sound files Wav and files Midi.

HTML Syntax

<BGSOUND
    BALANCE=n
    CLASS=classname
    ID=value
    LANG=language
    LOOP=n
    SRC=url
    TITLE=text
    VOLUME=n
>

Remarks

The BGSOUND element can be used only within the HEAD element.

The BGSOUND element does not require a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

BGSOUND Members

Styles

BGSOUND Styles

Reconfigartion By J2M


Object DHTM

DHTML Objects

BIG Element | BIG Object

Specifies that the enclosed text should be displayed in a larger font than the current font.

HTML Syntax

<BIG
    CLASS=classname
    ID=value
    LANG=language
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    STYLE=css1-properties
    TITLE=text
    event = script
>

Remarks

The BIG element is an inline element and requires a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

BIG Members

Styles

BIG Styles

Example

This example uses the BIG element to enlarge text.

<BIG>This text is larger</BIG> than this text.

Reconfigartion By J2M


Object DHTM

DHTML Objects

BLOCKQUOTE Element | BLOCKQUOTE Object

Sets apart a quotation in text.

HTML Syntax

<BLOCKQUOTE
    CLASS=classname
    ID=value
    LANG=language
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    STYLE=css1-properties
    TITLE=text
    event = script
>

Remarks

The BLOCKQUOTE element is a block element and requires a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

BLOCKQUOTE Members

Styles

BLOCKQUOTE Styles

Example

This example uses the BLOCKQUOTE element to set off a quotation that renders as indented text.

<P>He said,
<BLOCKQUOTE>"Hi there!"</BLOCKQUOTE>

See Also

Q

Reconfigartion By J2M


Object DHTM

DHTML Objects

BODY Element | body Object

Specifies the beginning and end of the document body.

HTML Syntax

<BODY
    ALINK=color
    BACKGROUND=url
    BGCOLOR=color
    BGPROPERTIES=FIXED
    BOTTOMMARGIN=pixels
    CLASS=classname
    ID=value
    LANG=language
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    LEFTMARGIN=pixels
    LINK=color
    RIGHTMARGIN=pixels
    SCROLL=YES|NO
    STYLE=css1-properties
    TEXT=color
    TITLE=string
    TOPMARGIN=n
    VLINK=color
    event = script
>

Remarks

You can access the BODY element from script through the document object.

The window object for the BODY element can host event handlers for the onblur, onfocus, onload, or onunload events.

The BODY element is a block element and requires a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

BODY Members

Styles

BODY Styles

Example

This example exposes the BODY element in script.

var oBody = document.body;

Applies To

[ Object Name ]
Platform Version
Win16:
Win32:
Mac:
Unix:
WinCE:
Version data is listed when the mouse hovers over a link, or the link has focus.
document

Reconfigartion By J2M


Object DHTM

DHTML Objects

BR Element | BR Object

Inserts a line break.

HTML Syntax

<BR
    CLASS=classname
    CLEAR=ALL |LEFT | RIGHT
    ID=value
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    STYLE=css1-properties
    TITLE=text
>

Remarks

The BR element does not require a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

BR Members

Styles

BR Styles

Reconfigartion By J2M


Object DHTM

DHTML Objects

BUTTON Element | BUTTON Object

Specifies a container for rich HTML that is rendered as a button.

HTML Syntax

<BUTTON
    ACCESSKEY=string
    CLASS=classname
    DATAFLD=colname
    DATAFORMATAS=HTML | TEXT
    DATASRC=#ID
    DISABLED=true | false
    ID=value
    LANG=language
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    NAME=name
    STYLE=css1-properties
    TITLE=text
    TYPE=BUTTON | RESET | SUBMIT
    VALUE=value
    event = script
>

Remarks

When the BUTTON element is submitted in a form, Microsoft® Internet Explorer 5 and later submits the VALUE attribute, if it exists. Otherwise, the innerText property is submitted. In Internet Explorer 4.0, only the innerText value is submitted.

The BUTTON element is an inline element and requires a closing tag.

This element is available in HTML and script as of Internet Explorer 4.0.

Members

BUTTON Members

Styles

BUTTON Styles

Reconfigartion By J2M


CAPTION Element | CAPTION Object

Specifies a brief description for a TABLE.

HTML Syntax

<CAPTION
    ALIGN=BOTTOM | CENTER | LEFT | RIGHT | TOP
    CLASS=classname
    ID=value
    LANG=language
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    STYLE=css1-properties
    TITLE=text
    VALIGN=BOTTOM | TOP
    event = script
>

Remarks

The CAPTION element should be a child of the TABLE element.

The CAPTION element is a block element and requires a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

CAPTION Members

Styles

CAPTION Styles

Example

This example uses the CAPTION element to provide a brief description for a table.

<TABLE>
<CAPTION VALIGN=BOTTOM>
This caption will appear below the table.
</CAPTION>
<TBODY>
<TR>
<TD>
This text is inside the table.
</TD>
</TR>
</TBODY>
</TABLE>

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


CENTER Element | CENTER Object

Centers subsequent text and images.

HTML Syntax

<CENTER
    CLASS=classname
    ID=value
    LANG=language
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    STYLE=css1-properties
    TITLE=text
    event = script
>

Remarks

The CENTER element is a block element and requires a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

CENTER Members

Styles

CENTER Styles

Example

This example uses the CENTER element to center text on a page.

<CENTER>This text appears centered on the page.</CENTER>

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


CITE Element | CITE Object

Indicates a citation by rendering text in italic.

HTML Syntax

<CITE
    CLASS=classname
    ID=value
    LANG=language
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    STYLE=css1-properties
    TITLE=text
    event = script
>

Remarks

A citation is a reference to a book, paper, or other published source material.

The CITE element is an inline element and requires a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

CITE Members

Styles

CITE Styles

Example

This examples uses the CITE element to render a citation in italic.

<CITE>Book Title.</CITE>

See Also

ACRONYM, ADDRESS, DFN, EM, I

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


clipboardData Object

Provides access to predefined clipboard formats for use in editing operations.

Remarks

The clipboardData object is reserved for editing actions performed through the Edit menu, shortcut menu, and shortcut keys. It transfers information using the system clipboard and retains it until data from the next editing operation supplants it. This form of data transfer is particularly suited to multiple pastes of the same data.

This object is available in script as of Microsoft® Internet Explorer 5.

Members

clipboardData Members

Example

This example uses the setData and getData methods with the clipboardData object to perform a cut-and-paste operation through the shortcut menu.

Sample Code

<SCRIPT>
// Selects the text that is to be cut. Trailing spaces in a text
// selection in cut events causes the cut shortcut menu item to
// remain disabled.
function fnLoad() {
    var r = document.body.createTextRange();
    r.findText(oSource.innerText);
    r.select();
}

// Enables the Cut shortcut menu item, which is disabled by default over a DIV
function fnBeforeCut() {
    event.returnValue = false;
}

// Enables the Paste shortcut menu item, which is also disabled by default over a DIV
function fnBeforePaste() {
    event.returnValue = false;
}

</SCRIPT>
</HEAD>
<BODY>

<DIV ID="oSource" onbeforecut="fnBeforeCut()" >
    Cut this Text
</DIV>

<DIV ID="oTarget" TYPE="text" VALUE="Paste the Text Here"
       onbeforepaste="fnBeforePaste()"><DIV>
</BODY>
This feature requires Internet Explorer 5 or later. Click the icon below to install the latest version. Then reload this page to view the sample.
Microsoft Internet Explorer

Applies To

[ Object Name ]
Platform Version
Win16:
Win32:
Mac:
Unix:
WinCE:
Version data is listed when the mouse hovers over a link, or the link has focus.
window

See Also

data transfer overview Internet Link

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


CODE Element | CODE Object

Specifies a code sample.

HTML Syntax

<CODE
    CLASS=classname
    ID=value
    LANG=language
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    STYLE=css1-properties
    TITLE=text
    event = script
>

Remarks

The CODE element is an inline element and requires a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

CODE Members

Styles

CODE Styles

Example

This example uses the CODE element to display text in a font used to represent computer code, such as values or variable names.

<CODE>Here is some text in a small, fixed-width font.</CODE>

See Also

SAMP

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


COL Element | COL Object

Specifies column-based defaults for the table properties.

HTML Syntax

<COL
    ALIGN=CENTER | LEFT | RIGHT
    CLASS=classname
    ID=value
    SPAN=n
    STYLE=css1-properties
    TITLE=text
    VALIGN=BASELINE | BOTTOM | MIDDLE | TOP
    WIDTH=n
>

Remarks

The COL element is a block element and does not require a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

COL Members

Styles

COL Styles

Example

This examples uses the COL element to specify characteristics for default columns in a table.

<TABLE>
<COLGROUP><COL ALIGN=RIGHT><COL ALIGN=LEFT></COLGROUP>
<COLGROUP><COL ALIGN=CENTER></COLGROUP>
<TBODY>
<TR>
<TD>This is the first column in the group and it is right-aligned.</TD>
<TD>This is the second column in the group and it is left-aligned.</TD>
<TD>This column is in a new group and it is centered.</TD>
</TR>
</TABLE>

See Also

COLGROUP

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


COLGROUP Element | COLGROUP Object

Contains a group of columns.

HTML Syntax

<COLGROUP
    ALIGN=CENTER | LEFT | RIGHT
    CLASS=classname
    ID=value
    SPAN=n
    STYLE=css1-properties
    TITLE=text
    VALIGN=BASELINE | BOTTOM | MIDDLE | TOP
    WIDTH=n
>

Remarks

The COLGROUP element is a block element and requires a closing tag if the COLGROUP has COL elements nested within it; otherwise it does not require a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

COLGROUP Members

Styles

COLGROUP Styles

Example

This example uses the COLGROUP element to assign specific characteristics to columns in a table.

<TABLE>
<COLGROUP ALIGN="RIGHT"></COLGROUP>
<COLGROUP SPAN="2" ALIGN="LEFT"></COLGROUP>
<TBODY>
<TR>
<TD>This column is in the first group and is right-aligned.</TD>
<TD>This column is in the second group and is left-aligned.</TD>
<TD>This column is in the second group and is left-aligned.</TD>
</TR>
</TABLE>

See Also

COL

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


COMMENT Element | COMMENT Object

Indicates a comment that is not displayed.

HTML Syntax

<COMMENT
    ID=value
    LANG=language
>

Remarks

The COMMENT element is treated as a no-scope element and does not expose any children.

The COMMENT element requires a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

COMMENT Members

See Also

HTML Comment Element

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


currentStyle Object

Represents the cascaded format and style of the object as specified by global style sheets, inline styles, and HTML attributes.

Remarks

The currentStyle object returns the cascaded styles on an element, but the style object returns only the styles that have been applied inline on an element through the STYLE attribute. Thus, the style values retrieved through the currentStyle object might differ from the style values retrieved through the style object. For example, if the color property is set on a paragraph only through a linked or embedded style sheet, and not inline, then object.currentStyle.color returns the color, whereas object.style.color does not return a value. If, however, the author specifies <P STYLE="color:'red'">, the currentStyle and style objects return the value red.

The currentStyle object reflects the order of style precedence in cascading style sheets (CSS). The CSS order of precedence for the presentation of HTML is:

  1. Inline styles
  2. Style sheet rules
  3. Attributes on HTML tags
  4. Intrinsic definition of the HTML tag

Accordingly, the currentStyle object returns the fontWeight value normal on a bold tag if normal is specified in a style sheet.

The currentStyle object returns values that reflect the applied style settings for the page and might not reflect what is rendering at the time a value is retrieved. For example, an object that has "color:red; display:none" returns currentStyle.color as red even though the object is not rendered on the page. The currentStyle object, then, is not affected by the rendering constraints. The third example in the Example section demonstrates this behavior. Disabled style sheets also do not affect currentStyle values.

The returned value is in the same units as those used to set the object. For example, if the color of an object is set inline using STYLE="color:'green'", then object.currentStyle.color returns green and not #00FF00 (the red-green-blue hexadecimal equivalent to green). However, capitalization and redundant white space that appear in the object values set by the author are lost when the currentStyle object returns the object values.

The currentStyle object supports user-defined properties in style rules. See the second example in the Example section.

The currentStyle object is asynchronous. This means a style cannot be set and then immediately queried—instead, the old value is returned. Thus, for a script to obtain the expected behavior of currentStyle with methods such as addImport, the script needs to include a function that calls the method and a function that checks currentStyle. For a script to check the current style while a page is loading, the script must wait until the BODY element is loaded and the page has rendered, or the value of currentStyle might not reflect what is being displayed.

This object is available in script as of Microsoft® Internet Explorer 5.

Members

currentStyle Members

Example

This example uses the currentStyle object to set the text color to brown. If you click a colored area and the background color is the same as the text color, the checkColor function changes the background color, so the text can be read. Otherwise, the function takes no action.

Sample Code

<SCRIPT>
function checkColor(oObj)
{
  if (oObj.currentStyle.backgroundColor == 'brown')
    {
        oObj.style.backgroundColor = 'white';
    }
  else
    :
}
</SCRIPT>
</HEAD>
:
<P STYLE="background-color: 'brown'"
    onclick="checkColor(this)">

This feature requires Internet Explorer 5 or later. Click the icon below to install the latest version. Then reload this page to view the sample.
Microsoft Internet Explorer

Note This example works only if the body and text colors are set using either color names or red-green-blue hexadecimal values, but not a mix of the two.

This example uses the currentStyle object to retrieve values of the user-defined property created in the style rule. The alert returns the value myvalue.

Sample Code

<STYLE>
    P { myproperty:myvalue }
</STYLE>
<BODY>
<P ID=oPrgrph>
:
<SCRIPT>
alert(oPrgrph.currentStyle.myproperty)
</SCRIPT>
This feature requires Internet Explorer 5 or later. Click the icon below to install the latest version. Then reload this page to view the sample.
Microsoft Internet Explorer

This example shows that the TD object width returned by the currentStyle object is its cascaded width value rather than the width rendered on the screen.

Sample Code

<BODY ID=oBdy>
:
<TABLE BORDER>
<TR><TD WIDTH=1100 ID=oTblD>text</TD></TR>
</TABLE>
:
<SCRIPT>
alert("The TD object currentStyle.width is " + oTblD.currentStyle.width +
    ".\nThe width of the window is " + oBdy.clientWidth +
    "px.\nThe width of the screen is " + screen.width + "px." )
</SCRIPT>
This feature requires Internet Explorer 5 or later. Click the icon below to install the latest version. Then reload this page to view the sample.
Microsoft Internet Explorer

Applies To

[ Object Name ]
Platform Version
Win16:
Win32:
Mac:
Unix:
WinCE:
Version data is listed when the mouse hovers over a link, or the link has focus.
A, ACRONYM, ADDRESS, APPLET, AREA, B, BASE, BASEFONT, BDO, BGSOUND, BIG, BLOCKQUOTE, BODY, BR, BUTTON, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, COMMENT, custom, DD, DEL, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FONT, FORM, HEAD, Hn, HTML, I, IMG, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=image, INPUT type=password, INPUT type=radio, INPUT type=reset, INPUT type=submit, INPUT type=text, INS, ISINDEX, KBD, LABEL, LEGEND, LI, LINK, LISTING, MAP, MARQUEE, MENU, META, NEXTID, NOBR, OBJECT, OL, OPTION, P, PLAINTEXT, PRE, Q, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, STYLE, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TITLE, TR, TT, U, UL, VAR, WBR, XMP

See Also

STYLE

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


custom Element | custom Object

Represents a user-defined element.

HTML Syntax

<HTML XMLNS:namespace>
<HEAD>
<STYLE>
@media all {
    namespace\:elementname { css-attribute1:value1; [  css-attribute2:value2; ... ] }
}
</STYLE>
</HEAD>

<BODY>
<namespace:elementname>
</namespace:elementname>
</BODY>
</HTML>

Remarks

Microsoft® Internet Explorer's support for custom tags on an HTML page requires that a namespace be defined for the tag. Otherwise, the custom tag is treated as an unknown tag when the document is parsed. Although navigating to a page with an unknown tag in Internet Explorer does not result in an error, unknown tags have the disadvantage of not being able to contain other tags, nor can they have behaviors applied to them.

To declare a namespace, use the XMLNS attribute of the HTML element.

When defining custom tags, you must enclose custom tag definitions within an @media wrapper.

Custom tags become much more interesting when applied with a DHTML behavior. dhtml behaviors Internet Link (or behaviors) and styles are applied to elements on a page the same way—using cascading style sheets (CSS) attributes. More specifically, the proposed CSS behavior attribute allows a Web author to specify the location of the behavior and apply that behavior to an element on a page.

The custom element is an inline element and requires a closing tag.

This element is available in HTML and script as of Internet Explorer 5.

Members

custom Members

Styles

Custom Styles

Example

This example uses the custom element to create custom RED, GREEN, and BLUE elements. These elements change the color of the text to red, green, or blue, depending on whether it is surrounded by RED, GREEN, or BLUE tags. In this example, the RED, GREEN, and BLUE tags are defined within a namespace called CUSTOMTAG.

Sample Code

<HTML XMLNS:CUSTOMTAG>
<HEAD>
<STYLE>
@media all {
    CUSTOMTAG\:RED { color: red; }
    CUSTOMTAG\:GREEN { color: green; }
    CUSTOMTAG\:BLUE { color: blue; }
}
</STYLE>
</HEAD>

<BODY>
<CUSTOMTAG:RED>
This text is red because it is enclosed within opening
and closing CUSTOMTAG:RED tags.
</CUSTOMTAG:RED>
<CUSTOMTAG:GREEN>
This text is green because it is enclosed within opening
and closing CUSTOMTAG:GREEN tags.
</CUSTOMTAG:GREEN>
<CUSTOMTAG:BLUE>
This text is blue because it is enclosed within opening
and closing CUSTOMTAG:BLUE tags.
</CUSTOMTAG:BLUE>
</BODY>
</HTML>
This feature requires Internet Explorer 5 or later. Click the icon below to install the latest version. Then reload this page to view the sample.
Microsoft Internet Explorer

See Also

using custom tags in internet explorer Internet Link

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


DD Element | DD Object

Indicates the definition in a definition list. The definition is usually indented in the definition list.

HTML Syntax

<DD
   CLASS=classname
   ID=value
   LANG=language
   LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
   NOWRAP
   STYLE=css1-properties
   TITLE=text
   event = script
>

Remarks

The DD element is a block element and does not require a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

DD Members

Styles

DD Styles

Example

This example uses the DD element with the DL and DT elements to create a definition list.

<DL>
<DT>Cat
<DD>A small domesticated mammal.
<DT>Lizard
<DD>A reptile generally found in dry areas.
</DL>

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


DEL Element | DEL Object

Indicates text that has been deleted from the document.

HTML Syntax

<DEL
    CLASS=classname
    ID=value
    LANG=language
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    STYLE=css1-properties
    TITLE=text
    event = script
>

Remarks

The DEL element is an inline element and requires a closing tag.

This element is available in HTML and script as of Microsoft® Internet Explorer 4.0.

Members

DEL Members

Styles

DEL Styles

Example

This example uses the DEL element to mark deleted text.

<DEL>This text has been revised.</DEL>

See Also

INS

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


DFN Element | DFN Object

Indicates the defining instance of a term.

HTML Syntax

<DFN
    CLASS=classname
    ID=value
    LANG=language
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    STYLE=css1-properties
    TITLE=text
    event = script
>

Remarks

The DFN element is an inline element and requires a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

DFN Members

Styles

DFN Styles

Example

This example uses the DFN element to indicate a term definition.

<DFN>HTML stands for hypertext markup language.</DFN>

See Also

ACRONYM, ADDRESS, CITE, I

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


DIR Element | DIR Object

Denotes a directory list.

HTML Syntax

<DIR
    CLASS=classname
    ID=value
    LANG=language
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    STYLE=css1-properties
    TITLE=text
    TYPE=DISC | CIRCLE | SQUARE
    event = script
>

Remarks

The DIR element is a block element and requires a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

DIR Members

Styles

DIR Styles

Example

This example uses the DIR element to create a directory list.

<DIR>
<LI>Art
<LI>History
<LI>Literature
<LI>Sports
<LI>Entertainment
<LI>Science
</DIR>

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


DIV Element | DIV Object

Specifies a container that renders HTML.

HTML Syntax

<DIV
    ALIGN=CENTER | LEFT | RIGHT | JUSTIFY
    CLASS=classname
    DATAFLD=colname
    DATAFORMATAS=HTML | TEXT
    DATASRC=#ID
    ID=value
    LANG=language
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    STYLE=css1-properties
    TITLE=text
    event = script
>

Remarks

The DIV element is a block element and requires a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

DIV Members

Styles

DIV Styles

Example

This example uses two DIV elements to align two sections of text differently.

<DIV>
This text represents a section.
</DIV>

<DIV ALIGN=CENTER>
This text represents another section, and its text is centered.
</DIV>

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


DL Element | DL Object

Denotes a definition list.

HTML Syntax

<DL
    CLASS=classname
    COMPACT
    ID=value
    LANG=language
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    STYLE=css1-properties
    TITLE=text
    event = script
>

Remarks

The DL element is a block element and requires a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

DL Members

Styles

DL Styles

Example

This example uses the DL element with the DD and DT elements to create a definition list.

<DL>
<DT>Cat
<DD>A small domesticated mammal.
<DT>Lizard
<DD>A reptile generally found in dry areas.
</DL>

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


!DOCTYPE Element

Specifies the HTML document type definition (DTD) to which the document corresponds.

Remarks

Different versions of the DTD can be used depending on the level of compatibility the author wants to indicate.

The !DOCTYPE element does not require a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0.

Example

The first example uses the !DOCTYPE element to indicate compatibility with the HTML 3.2 DTD, while the second uses it to indicate a strict adherence to the HTML 4.0 DTD.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


DT Element | DT Object

Indicates a definition term within a definition list.

HTML Syntax

<DT
    CLASS=classname
    ID=value
    LANG=language
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    STYLE=css1-properties
    TITLE=text
    event = script
>

Remarks

The DT element is a block element and does not require a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

DT Members

Styles

DT Styles

Example

This example uses the DT element with the DD and DL elements to create a definition list.

<DL>
<DT>Cat
<DD>A small domesticated mammal.
<DT>Lizard
<DD>A reptile generally found in dry areas.
</DL>

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


EM Element | EM Object

Emphasizes text, usually by rendering it in italic.

HTML Syntax

<EM
    CLASS=classname
    ID=value
    LANG=language
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    STYLE=css1-properties
    TITLE=text
    event = script
>

Remarks

The EM element is an inline element and requires a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

EM Members

Styles

EM Styles

Example

This example uses the EM element to emphasize text.

<EM>This text will be emphasized in some way (most likely in italic).</EM>

See Also

ACRONYM, ADDRESS, CITE, I

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


EMBED Element | EMBED Object

Allows documents of any type to be embedded.

HTML Syntax

<EMBED
    ALIGN=ABSBOTTOM | ABSMIDDLE | BASELINE | BOTTOM | LEFT |
        MIDDLE | RIGHT | TEXTTOP | TOP
    ALT=text
    CLASS=classname
    CODE=filename
    HEIGHT=n
    HSPACE=n
    ID=value
    NAME=name
    SRC=url
    STYLE=css1-properties
    TITLE=text
    UNITS=value
    VSPACE=n
    WIDTH=n
>

Remarks

The EMBED element must appear inside the BODY element of the document.

Users need to have an application that can view the data installed on their computer.

The EMBED element is a block element and does not require a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

EMBED Members

Styles

EMBED Styles

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


external Object

Allows access to an additional object model provided by host applications of the Microsoft® Internet Explorer browser components.

Remarks

In a hosting scenario, the object model is defined by the application hosting the Internet Explorer components (refer to the hosting application for documentation). For more information about how to implement extensions to the DHTML object model, see extending the dynamic html object model Internet Link.

This object is not supported in html applications Internet Link.

This object is available in script as of Internet Explorer 4.0.

Members

external Members

Applies To

[ Object Name ]
Platform Version
Win16:
Win32:
Mac:
Unix:
WinCE:
Version data is listed when the mouse hovers over a link, or the link has focus.

window

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


FIELDSET Element | FIELDSET Object

Draws a box around the text and other elements that the field set contains.

HTML Syntax

<FIELDSET
    ALIGN= LEFT | CENTER | RIGHT
    CLASS=classname
    ID=value
    LANG=language
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    STYLE=css1-properties
    TITLE=text
    event = script
>

Remarks

This element is useful for grouping elements in a form and for distinctively marking text in a document.

The FIELDSET element has the same behavior as a window frame. Since window frames do not have scroll bars, assigning the overflow property a value of scroll will render it as if the value were hidden.

The FIELDSET element is a block element and requires a closing tag.

This element is available in HTML and script as of Microsoft® Internet Explorer 4.0.

Members

FIELDSET Members

Styles

FIELDSET Styles

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


FONT Element | FONT Object

Specifies a new font, size, and color to be used for rendering the enclosed text.

HTML Syntax

<FONT
    CLASS=classname
    COLOR=color
    FACE=font
    ID=value
    LANG=language
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    SIZE=n
    STYLE=css1-properties
    TITLE=text
    event = script
>

Remarks

The FONT element requires a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

FONT Members

Styles

FONT Styles

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


FORM Element | FORM Object

Specifies that the contained controls take part in a form.

HTML Syntax

<FORM
    ACTION=url
    CLASS=classname
    ENCTYPE=encoding
    ID=value
    LANG=language
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    METHOD=GET | POST
    NAME=name
    STYLE=css1-properties
    TARGET=window_name | _blank | _parent | _search | _self | _top
    TITLE=text
    event = script
>

Remarks

Forms enable client-side users to submit data to a server in a standardized format. The creator of a form designs the form to collect the required data using a variety of controls, such as INPUT or SELECT. Users viewing the form fill in the data and then click the Submit button to send the data to the server. A script on the server then processes the data.

Each control element's NAME attribute must be defined if the data is to be submitted with the form. An element in a form can be referenced by the NAME property or the ID property, or through the elements collection.

When the focus is on a control in a form and the user presses ESC, the value of the control reverts to the last value. The form resets if the user presses ESC again. If the focus is on the form but not on a particular control and the user presses ESC once, the form resets.

If the form includes only one text box and the user presses ENTER, the onsubmit event fires. If the form has a Submit button, the button has a dark border, which indicates the user can press ENTER to submit the form.

The FORM element is a block element and requires a closing tag.

This element is available in HTML and script as of Microsoft® Internet Explorer 3.0.

Members

FORM Members

Styles

FORM Styles

Example

This example uses the FORM element to create a basic form containing a text entry box for the user's name and a select control for choosing a favorite ice cream flavor. When the user clicks the Submit button, the form sends the data to the URL listed in the ACTION property. The value of the METHOD property determines how to send the data to the server.

<HTML>
    <FORM ACTION="http://example.microsoft.com/sample.asp" METHOD="POST">
        Enter your name: <INPUT NAME="FName"><BR>
        Favorite Ice Cream Flavor:
        <SELECT NAME="Flavor">
            <OPTION VALUE="Chocolate">Chocolate
            <OPTION VALUE="Strawberry">Strawberry
            <OPTION VALUE="Vanilla" SELECTED>Vanilla
        </SELECT>
        <P><INPUT TYPE=SUBMIT>
    </FORM>
</HTML>

See Also

1,001 ways to get input from web users Internet Link

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


FRAME Element | FRAME Object

Specifies an individual frame within a FRAMESET element.

HTML Syntax

<FRAME
    BORDERCOLOR=color
    CLASS=classname
    DATAFLD=colname
    DATASRC=#ID
    FRAMEBORDER=NO | YES | 0 | 1
    HEIGHT=n
    ID=value
    LANG=language
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    MARGINHEIGHT=pixels
    MARGINWIDTH=pixels
    NAME=window_name | _blank | _parent | _self | _top
    NORESIZE=NORESIZE | RESIZE
    SCROLLING=AUTO | NO | YES
    SRC=url
    TITLE=text
    WIDTH=n
    event = script
>

Remarks

If a user opens a web folder Internet Link inside a frame and then clicks something in the Web folder, the file or folder that the user clicks takes over the entire window. For example, suppose that a page contains two frames, one frame pointing to http://www.microsoft.com and the second frame pointing to a network drive. If the user clicks a file or folder in the second frame, that frame takes control of the entire window, including the first frame. For file types that the browser cannot host, such as .txt files, a separate window in the appropriate host application is opened.

A Web folder is a part of the file system hierarchy, but it does not necessarily represent anything in the file system. An example is Network Neighborhood.

The FRAME element is a block element and does not require a closing tag.

This element is available in HTML and script as of Microsoft® Internet Explorer 3.0.

Members

FRAME Members

Styles

FRAME Styles

Example

This example uses the FRAME element to define properties of the frame, including the location of the page loaded by the frame.

<FRAME FRAMEBORDER=0 SCROLLING=NO SRC="sample.htm">

This example shows how to reference an object with ID=sID in FRAME2, from another frame of the same frameset.

parent.frames.FRAME2.sID.innertext

See Also

FRAMESET

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


FRAMESET Element | FRAMESET Object

Specifies a frameset, which is used to organize multiple frames and nested framesets.

HTML Syntax

<FRAMESET
    BORDER=pixels
    BORDERCOLOR=color
    CLASS=classname
    COLS=col-widths
    FRAMEBORDER=NO | YES | 0 | 1
    FRAMESPACING=spacing
    ID=value
    LANG=language
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    ROWS=row-heights
    TITLE=text
>

Remarks

If a user opens a Web folder inside a frame and then clicks something in the Web folder, the file or folder that the user clicks takes over the entire window. For example, suppose that a page contains two frames, one frame pointing to http://www.microsoft.com and the second frame pointing to a network drive. If the user clicks a file or folder in the second frame, that frame takes control of the entire window, including the first frame. For file types that the browser cannot host, such as .txt files, a separate window in the appropriate host application is opened.

A Web folder is a part of the file system hierarchy, but it does not necessarily represent anything in the file system. An example is Network Neighborhood.

The FRAMESET element is a block element and requires a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

FRAMESET Members

Styles

FRAMESET Styles

Example

This example uses the FRAMESET element to define three columns of rectangular frames on a page.

<FRAMESET COLS="25%, 50%, *">
<FRAME SRC="contents.htm">
<FRAME SRC="info.htm">
<FRAME SCROLLING="NO" SRC="graphic.htm">
</FRAMESET>

See Also

FRAME

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


HEAD Element | HEAD Object

Provides an unordered collection of information about the document.

HTML Syntax

<HEAD
    CLASS=classname
    ID=value
    TITLE=text
>

Remarks

The HEAD element provides information that does not affect the rendering of the document but could be of use to the browser. The following tags are valid in this element:

  • BASE
  • BASEFONT
  • BGSOUND
  • LINK
  • META
  • NEXTID
  • SCRIPT
  • STYLE
  • TITLE

The HEAD element requires a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

HEAD Members

Example

This example uses the HEAD element to create a document title.

<HEAD>
<TITLE>A Simple Document</TITLE>
</HEAD>

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


Hn Object

Click to return to the DHTML, HTML & CSS home page

Hn Element | Hn Object

Renders text in heading style.

HTML Syntax

<Hn
    ALIGN=CENTER | LEFT | RIGHT | JUSTIFY
    CLASS = classname
    ID = value
    LANG = language
    LANGUAGE = JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    STYLE = css1-properties
    TITLE = text
    event  = script
></Hn>

Remarks

Use H1 through H6 to specify different sizes and styles of headings.

The Hn element is a block element and requires a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

Hn Members

Styles

Hn Styles

Example

This example uses the H1 element to apply a level-1 heading style to the contained text.

<H1>Welcome to Internet Explorer!</H1>

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


HR Object

Click to return to the DHTML, HTML & CSS home page

HR Element | HR Object

Draws a horizontal rule.

HTML Syntax

<HR
    ALIGN=CENTER | LEFT | RIGHT
    CLASS=classname
    COLOR=color
    ID=value
    LANG=language
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    NOSHADE
    SIZE=n
    STYLE=css1-properties
    TITLE=text
    WIDTH=n
    event = script
>

Remarks

The HR element is a block element and does not require a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

HR Members

Styles

HR Styles

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


HTML Element | HTML Object

Identifies the document as containing HTML elements.

HTML Syntax

<HTML
    TITLE=text
>

Remarks

By default, the document object is the parent of the HTML element.

The HTML element requires a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

HTML Members

Styles

HTML Styles

Example

This example uses the HTML element to identify the document as an HTML document.

<HTML>
<BODY>
<P>This is an HTML document.</P>
</BODY>
</HTML>

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


HTML Comment Element

Prevents any enclosed text or HTML source code from being parsed and displayed in the browser window.

Remarks

Comments can contain other HTML elements. Comments do not nest.

Start and end tags are required.

Example

This example uses HTML COMMENT tags, "<!-- -->", to insert a comment in an HTML document.

<!-- This text will not appear in the browser window. -->

See Also

COMMENT

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


I Element | I Object

Specifies that the text should be rendered in italic, where available.

HTML Syntax

<I
    CLASS=classname
    ID=value
    LANG=language
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    STYLE=css1-properties
    TITLE=text
    event = script
>

Remarks

The I element is an inline element and requires a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

I Members

Styles

I Styles

Example

This example uses the I element to italicize the text.

<I>This text is italic.</I>

See Also

ADDRESS, CITE, DFN, EM

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


IFRAME Element | IFRAME Object

Creates inline floating frames.

HTML Syntax

<IFRAME
    ALIGN=ABSBOTTOM | ABSMIDDLE | BASELINE | BOTTOM | LEFT |
         MIDDLE | RIGHT | TEXTTOP | TOP
    BORDER=pixels
    CLASS=classname
    DATAFLD=colname
    DATASRC=#ID
    FRAMEBORDER=NO | YES | 0 | 1
    FRAMESPACING=pixels
    HEIGHT=n
    HSPACE=pixels
    ID=value
    LANG=language
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    MARGINHEIGHT=pixels
    MARGINWIDTH=pixels
    NAME=window_name | _blank | _parent | _self | _top
    NORESIZE=NORESIZE | RESIZE
    SCROLLING=AUTO | NO | YES
    SRC=url
    STYLE=css1-properties
    TITLE=text
    VSPACE=pixels
    WIDTH=n
    >

Remarks

The IFRAME element functions as a document within a document, or like a floating FRAME. The frames collection provides access to the contents of an IFRAME. Use the frames collection to read or write to elements contained in an IFRAME. For example, the syntax for accessing the backgroundColor style of the BODY object in an IFRAME is:

sColor = document.frames("sFrameName").document.body.style.backgroundColor;

You can access the IFRAME object's properties, but not its contents, through the object model of the page where the IFRAME object resides. For example, the syntax for accessing the border style of the IFRAME object is:

sBorderValue = document.all.oFrame.style.border;

The IFRAME element is a block element and requires a closing tag.

This element is available in HTML and script as of Microsoft® Internet Explorer 4.0.

Members

IFRAME Members

Styles

IFRAME Styles

Example

This example uses the IFRAME element and an HTML fragment to create a frame containing the page sample.htm.

<IFRAME ID=IFrame1 FRAMEBORDER=0 SCROLLING=NO SRC="sample.htm"></IFRAME>

This example returns a reference to the all collection of the document contained by the IFRAME.

var collAll = document.frames("IFrame1").document.all

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


IMG Element | IMG Object

Embeds an image or a video clip in the document.

HTML Syntax

<IMG
    ALIGN=ABSBOTTOM | ABSMIDDLE | BASELINE | BOTTOM | LEFT |
        MIDDLE | RIGHT | TEXTTOP | TOP
    ALT=text
    BORDER=n
    CLASS=classname
    DATAFLD=colname
    DATASRC=#ID
    DYNSRC=url
    HEIGHT=n
    HSPACE=n
    ID=value
    ISMAP
    LANG=language
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    LOOP=n
    LOWSRC=url
    NAME=name
    SRC=url
    STYLE=css1-properties
    TITLE=text
    USEMAP=url
    VSPACE=n
    WIDTH=n
    event = script
>

Remarks

This element does not fire the onfocus event when it receives the input focus, unless it has been associated with a MAP element.

The IMG element is an inline element and does not require a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

IMG Members

Styles

IMG Styles

Example

This example uses the IMG element to embed a bitmap image (.bmp file) on a page.

<IMG SRC=mygraphic.bmp>

See Also

INPUT

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


INPUT Element | INPUT Object

Creates a variety of form input controls.

HTML Syntax

<INPUT
    ACCESSKEY=key
    ALIGN=LEFT | CENTER | RIGHT
    ALT=text
    CLASS=classname
    DISABLED
    DYNSRC=url
    ID=value
    LANG=language
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    LOWSRC=url
    MAXLENGTH=n
    NAME=name
    READONLY
    SIZE=n
    SRC=url
    STYLE=css1-properties
    TABINDEX=n
    TITLE=text
    TYPE=BUTTON | CHECKBOX | FILE | HIDDEN | IMAGE | PASSWORD |
        RADIO | RESET | SUBMIT | TEXT
    VALUE=value
    event = script
>

Remarks

The TYPE attribute for the INPUT element is used to specify one of the following form input controls:

button checkbox file
hidden image password
radio reset submit text

The INPUT element controls are inline elements and do not require a closing tag.

Example

This example uses the INPUT element to create different types of input controls.

<FORM ACTION="http://intranet/survey" METHOD=POST>
<P>Name</P>
<BR><INPUT NAME="CONTROL1" TYPE=TEXT VALUE="Your Name">
<P>Password</P>
<BR><INPUT TYPE="PASSWORD" NAME="CONTROL2">
<P>Color</P>
<BR><INPUT TYPE="RADIO" NAME="CONTROL3" VALUE="0" CHECKED>Red
<INPUT TYPE="RADIO" NAME="CONTROL3" VALUE="1">Green
<INPUT TYPE="RADIO" NAME="CONTROL3" VALUE="2">Blue
<P>Comments</P>
<BR><INPUT TYPE="TEXT" NAME="CONTROL4" SIZE="20,5" MAXLENGTH="250">
<P><INPUT NAME="CONTROL5" TYPE=CHECKBOX CHECKED>Send receipt</P>
<P><INPUT TYPE="SUBMIT" VALUE="OK"><INPUT TYPE="RESET" VALUE="Reset"></P>
</FORM>

See Also

BUTTON, SELECT, TEXTAREA

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


INPUT type=button Element | INPUT type=button Object

Creates a button control.

HTML Syntax

<INPUT
    ACCESSKEY = key
    ALIGN = LEFT | CENTER | RIGHT
    ALT = text
    CLASS = classname
    DISABLED
    ID = value
    LANG = language
    LANGUAGE = JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    LOWSRC = url
    MAXLENGTH = n
    NAME = name
    READONLY
    SIZE = n
    STYLE = css1-properties
    TABINDEX =n
    TITLE =text
    TYPE = BUTTON
    VALUE = value
    event  = script
>

Remarks

The button element is an inline element and does not require a closing tag.

This element is available in HTML and script as of Microsoft® Internet Explorer 3.0.

Members

INPUT Members

Styles

INPUT Styles

Example

This example uses the button element to define a button that responds appropriately when clicked.

Sample Code

<INPUT TYPE=button ID=btnEmergency VALUE="In case of emergency,
push this button!"
    onClick="alert('Aaaaaaaggggghh!!!!')">

The preceding HTML code creates this button:

See Also

BUTTON, INPUT

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


INPUT type=checkbox Element | INPUT type=checkbox Object

Creates a check box control.

HTML Syntax

<INPUT
    ACCESSKEY = key
    ALIGN = LEFT | CENTER | RIGHT
    ALT = text
    CHECKED
    CLASS = classname
    DISABLED
    ID = value
    LANG = language
    LANGUAGE = JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    LOWSRC = url
    MAXLENGTH = n
    NAME = name
    READONLY
    SIZE = n
    STYLE = css1-properties
    TABINDEX =n
    TITLE =text
    TYPE = CHECKBOX
    VALUE = value
    event  = script
>

Remarks

When a checkbox element is selected, a name/value pair is submitted with the FORM. The default value of checkbox is on.

The height and width styles are exposed to the checkbox element as of Microsoft® Internet Explorer 5. The size of the element is set based on the values provided by the author, except when a given size is below a particular minimum. The size is calculated as follows:

  • If the height or width is greater than 20 pixels, the padding around the check box is set to 4 pixels, and the inner height or width is set to 8 pixels.
  • If the height or width is less than 20 pixels but greater than 13 pixels, the padding around the check box is equal to one half the specified height or width minus 13. For example, if the specified width of the check box is 17, the equation would be: (17-13)/2.
  • If the height or width is less than 12 pixels, the padding around the check box is set to 0 and the inner width is set to the value specified by the author.

The checkbox element is an inline element and does not require a closing tag.

This element is available in HTML and script as of Internet Explorer 3.0.

Members

INPUT Members

Styles

INPUT Styles

Example

This example uses the checkbox element to create two check boxes with explanatory text. The onclick events call two script functions. The first check box is checked.

Sample Code

<INPUT TYPE=checkbox CHECKED ID=chk1 onclick="choosebox1()">Uncheck
    this check box for some free advice.
<P><INPUT TYPE=checkbox ID=chk2 onclick="choosebox2()">Or check
    this check box for a message from our sponsors.
<P ID=SampText>

This example implements the script when the user clicks either check box.

<SCRIPT>
function choosebox1(){
        alert("Never play leapfrog with a unicorn!")
}
function choosebox2(){
    SampText.insertAdjacentHTML("AfterBegin","Buy WonderWidgets! ");
}
</SCRIPT>

The preceding HTML code and script examples create and implement the following check boxes:

Uncheck this check box for some free advice.

Or check this check box for a message from our sponsors.

See Also

INPUT

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


INPUT type=file Element | INPUT type=file Object

Creates a file upload object with a text box and Browse button.

HTML Syntax

<INPUT
    ACCESSKEY = key
    ALIGN = LEFT | CENTER | RIGHT
    ALT = text
    CLASS = classname
    DISABLED
    ID = value
    LANG = language
    LANGUAGE = JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    LOWSRC = url
    MAXLENGTH = n
    NAME = name
    SIZE = n
    STYLE = css1-properties
    TABINDEX =n
    TITLE =text
    TYPE = FILE
    VALUE = value
    event  = script
>

Remarks

For a file upload to take place:

  • The file element must be enclosed within a FORM element.
  • A value must be specified for the NAME attribute of the file element.
  • The METHOD attribute of the FORM element must be set to post.
  • The ENCTYPE attribute of the FORM element must be set to multipart/form-data.

To handle a file upload to the server, a server-side process must be running that can handle multipart/form-data submissions. For example, the microsoft posting acceptor Internet Link Non-MSDN link allows Microsoft® Internet Information Server to accept file uploads. Additional Common Gateway Interface (CGI) scripts that can handle multipart/form-data submissions are available on the Web.

The file element is an inline element and does not require a closing tag.

This element is available in HTML and script as of Microsoft® Internet Explorer 4.0. The file upload add-on is required to use the file element in Internet Explorer 3.02. Users can enter a file path in the text box or click the Browse button to browse the file system.

Members

INPUT Members

Styles

INPUT Styles

Example

The following examples use the file element to upload a file to a server. The first example requires Microsoft® Posting Acceptor, which can be used with Internet Information Server (IIS) or Personal Web Server.

Sample Code

This example uses HTML code to submit a file selected by the user to Cpshost.dll, which is installed with Posting Acceptor.

<FORM NAME="oForm"
   ACTION="/scripts/cpshost.dll?PUBLISH?/scripts/repost.asp"
   ENCTYPE="multipart/form-data"
   METHOD="post">
<INPUT TYPE="file" NAME="oFile1">
<INPUT TYPE="text"
   NAME="TargetURL"
   VALUE="/users/">
<INPUT TYPE="submit" VALUE="Upload File">
</FORM>

This example shows the Active Server Page (ASP) content of Repost.asp. Notice that the properties of the uploaded file are accessible from the submitted form.

<%@ LANGUAGE = JScript %>
<%
   Response.buffer=true;
%>
<HTML>
<TITLE>Repost Example</TITLE>
<BODY>
<H1>Upload Status</H1>
<P>
Destination: <B><% Response.Write(Request.Form("TargetURL")) %></B>
</P>
<%
   Response.write("<P>Name: " + Request.Form("FileName") + "</P>");
   Response.write("<P>Size: " + Request.Form("FileSize") + "</P>");
   Response.write("<P>Path: " + Request.Form("FilePath") + "</P>");
%>
</BODY>
</HTML>

See Also

INPUT, upload files to the internet information server Internet Link Non-MSDN link, uploading a file to iis using a browser Internet Link Non-MSDN link

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


INPUT type=hidden Element | INPUT type=hidden Object

Transmits state information about client/server interaction.

HTML Syntax

<INPUT
    ACCESSKEY = key
    ALIGN = LEFT | CENTER | RIGHT
    ALT = text
    CLASS = classname
    DISABLED
    ID = value
    LANG = language
    LANGUAGE = JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    LOWSRC = url
    MAXLENGTH = n
    NAME = name
    READONLY
    SIZE = n
    STYLE = css1-properties
    TABINDEX =n
    TITLE =text
    TYPE = HIDDEN
    VALUE = value
    event  = script
>

Remarks

This input type presents no control to the user, but sends the value of the value property with the submitted form.

The hidden element does not require a closing tag.

This element is available in HTML and script as of Microsoft® Internet Explorer 3.0.

Members

INPUT Members

Styles

INPUT Styles

See Also

INPUT, INPUT type=submit

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


INPUT type=image Element | INPUT type=image Object

Creates an image control that, when clicked, causes the form to be immediately submitted.

HTML Syntax

<INPUT
    ACCESSKEY = key
    ALIGN = LEFT | CENTER | RIGHT
    ALT = text
    CLASS = classname
    DISABLED
    ID = value
    LANG = language
    LANGUAGE = JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    LOWSRC = url
    MAXLENGTH = n
    NAME = name
    READONLY
    SIZE = n
    SRC = url
    STYLE = css1-properties
    TABINDEX =n
    TITLE =text
    TYPE = IMAGE
    VALUE = value
    event  = script
>

Remarks

The x-coordinate is submitted under the name of the control with .x appended, and the y-coordinate is submitted under the name of the control with .y appended. Any value property is ignored. The src property specifies the image element the same way it specifies the IMG element.

The image element is an inline element and does not require a closing tag.

This element is available in HTML and script as of Microsoft® Internet Explorer 3.0.

Members

INPUT Members

Styles

INPUT Styles

See Also

IMG, INPUT

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


INPUT type=password Element | INPUT type=password Object

Creates a single-line text entry control similar to the text control, except that text is not displayed as the user enters it.

HTML Syntax

<INPUT
    ACCESSKEY = key
    ALIGN = LEFT | CENTER | RIGHT
    ALT = text
    CLASS = classname
    DISABLED
    ID = value
    LANG = language
    LANGUAGE = JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    LOWSRC = url
    MAXLENGTH = n
    NAME = name
    READONLY
    SIZE = n
    STYLE = css1-properties
    TABINDEX =n
    TITLE =text
    TYPE = PASSWORD
    VALUE = value
    event  = script
>

Remarks

The password element is an inline element and does not require a closing tag.

This element is available in HTML and script as of Microsoft® Internet Explorer 3.0.

Members

INPUT Members

Styles

INPUT Styles

Example

This example uses the password element to define a password field.

Sample Code

Username <INPUT TYPE=button ID=txtUser>
Password <INPUT TYPE=password ID=txtPassword>

This example uses script to determine whether the password is valid for the specified user.

<SCRIPT>
if (txtUser.value == "Paul")
   if (txtPassword.value == "2ifbysea")
   {
      alert("Password accepted.  Enjoy your ride.");
      return true;
   }
</SCRIPT>

See Also

INPUT

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


INPUT type=radio Element | INPUT type=radio Object

Creates a radio button control.

HTML Syntax

<INPUT
    ACCESSKEY = key
    ALIGN = LEFT | CENTER | RIGHT
    ALT = text
    CHECKED
    CLASS = classname
    DISABLED
    ID = value
    LANG = language
    LANGUAGE = JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    LOWSRC = url
    MAXLENGTH = n
    NAME = name
    READONLY
    SIZE = n
    STYLE = css1-properties
    TABINDEX =n
    TITLE =text
    TYPE = RADIO
    VALUE = value
    event  = script
>

Remarks

Use a radio button control to limit a user's selection to a single value within a set of values. To do this, you must link together each button in a set of radio buttons by assigning each button the same name.

When a user submits a form, a selected radio button only generates a name/value pair in the form data if the button has a value.

To select a radio button as the default button in a set, set the checked property of the button to true.

A user can select a radio button only if the button has a name. To clear a selected radio button, a user must select another button in the set.

The radio element is an inline element and does not require a closing tag.

This element is available in HTML and script as of Microsoft® Internet Explorer 3.0.

Members

INPUT Members

Styles

INPUT Styles

Example

This example uses the radio element to create three radio buttons.

Sample Code

<INPUT type=radio name="radio" CHECKED>1-10 years old
<INPUT type=radio name="radio">11 years old
<INPUT type=radio name="radio">12-120 years old

This example uses script to detect which radio button the user selects.

<SCRIPT>
function detect()
{
    if (radio[0].checked)
        alert("You're between 1 and 10 years old.")
    else if (radio[1].checked)
        alert("You're 11 years old.")
    else
        alert("You're between 12 and 120 years old.")
}
</SCRIPT>

The preceding HTML code and script examples create and implement the following radio buttons.

1-10 years old

11 years old

12-120 years old

See Also

INPUT, forms overview Internet Link

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


INPUT type=reset Element | INPUT type=reset Object

Creates a button that, when clicked, resets the form's controls to their initial values.

HTML Syntax

<INPUT
    ACCESSKEY = key
    ALIGN = LEFT | CENTER | RIGHT
    ALT = text
    CLASS = classname
    DISABLED
    ID = value
    LANG = language
    LANGUAGE = JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    LOWSRC = url
    MAXLENGTH = n
    NAME = name
    READONLY
    SIZE = n
    STYLE = css1-properties
    TABINDEX =n
    TITLE =text
    TYPE = RESET
    VALUE = value
    event  = script
>

Remarks

The value property specifies the label displayed on the Reset button the same way it specifies it on the Submit button.

The reset element is an inline element and does not require a closing tag.

This element is available in HTML and script as of Microsoft® Internet Explorer 3.0.

Members

INPUT Members

Styles

INPUT Styles

See Also

BUTTON, INPUT

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


INPUT type=submit Element | INPUT type=submit Object

Creates a button that, when clicked, submits the form.

HTML Syntax

<INPUT
    ACCESSKEY = key
    ALIGN = LEFT | CENTER | RIGHT
    ALT = text
    CLASS = classname
    DISABLED
    ID = value
    LANG = language
    LANGUAGE = JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    LOWSRC = url
    MAXLENGTH = n
    NAME = name
    READONLY
    SIZE = n
    STYLE = css1-properties
    TABINDEX =n
    TITLE =text
    TYPE = SUBMIT
    VALUE = value
    event  = script
>

Remarks

Use the value attribute to create a button with a display label that cannot be edited by the user. The default label is application-specific. If the user clicks the Submit button to submit the form, and that button has a name attribute specified, that button contributes a name/value pair to the submitted data.

The submit element is an inline element and does not require a closing tag.

This element is available in HTML and script as of Microsoft® Internet Explorer 3.0.

Members

INPUT Members

Styles

INPUT Styles

See Also

BUTTON, INPUT

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


INPUT type=text Element | INPUT type=text Object

Creates a single-line text entry control.

HTML Syntax

<INPUT
   ACCESSKEY = key
   ALIGN = LEFT | CENTER | RIGHT
   ALT = text
   CLASS = classname
   DISABLED
   ID = value
   LANG = language
   LANGUAGE = JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
   LOWSRC = url
   MAXLENGTH = n
   NAME = name
   READONLY
   SIZE = n
   STYLE = css1-properties
   TABINDEX =n
   TITLE =text
   TYPE = TEXT
   VALUE = value
   event  = script
>

Remarks

The SIZE attribute sets the number of visible characters in the text element. The MAXLENGTH attribute sets the maximum number of characters that can be entered.

The text element is an inline element and does not require a closing tag.

This element is available in HTML and script as of Microsoft® Internet Explorer 3.0.

Members

INPUT Members

Styles

INPUT Styles

Example

This example uses the text element to create an empty text control that can contain 15 characters without requiring the user to scroll to read all of the text.

Sample Code

<INPUT TYPE=text VALUE="" NAME="textbox" SIZE=15>

This example uses script to detect the content of the text box and display it in a dialog box.

<SCRIPT>
function detectEntry()
{
    alert("Your name is " + textbox.value)
}
</SCRIPT>

The preceding HTML code and script examples implement the following text box. Click the What Is Your Name? button to call the detectEntry() function.

Enter your name:

See Also

INPUT, TEXTAREA

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


INS Element | INS Object

Specifies text that has been inserted into the document.

HTML Syntax

<INS
    CLASS=classname
    ID=value
    LANG=language
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    STYLE=css1-properties
    TITLE=text
    event = script
>

Remarks

Text contained by the INS element is rendered underlined.

The INS element is an inline element and does not require a closing tag.

This element is available in HTML and script as of Microsoft® Internet Explorer 4.0.

Members

INS Members

Styles

INS Styles

Example

This example uses the INS element to specify text inserted into a document.

<INS datetime="1997-10-01T12:15:30-05:00">This text has been inserted.</INS>

See Also

DEL

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


ISINDEX Element | ISINDEX Object

Causes the browser to display a dialog window that prompts the user for a single line of input.

HTML Syntax

<ISINDEX
   CLASS = classname
   ID = value
   LANG = language
   LANGUAGE = JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
   PROMPT = text
   STYLE = css1-properties
   event  = script
></ISINDEX>

Remarks

In HTML 4, this element is deprecated, and INPUT recommended for use instead. The tagName property for ISINDEX returns INPUT.

The ISINDEX element belongs in the body of the document.

The ISINDEX element is an inline element and does not require a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

ISINDEX Members

Styles

ISINDEX Styles

Example

This example uses the ISINDEX element to replace the default prompt.

<ISINDEX PROMPT="Enter a keyword to search for in the index">

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


KBD Element | KBD Object

Renders text in a fixed-width font.

HTML Syntax

<KBD
    CLASS=classname
    ID=value
    LANG=language
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    STYLE=css1-properties
    TITLE=text
    event = script
>

Remarks

The KBD element is an inline element and requires a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

KBD Members

Styles

KBD Styles

Example

This example uses the KBD element to render text in a fixed-width font.

<KBD>This text renders in a fixed-width font.</KBD>

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


LABEL Element | LABEL Object

Specifies a label for another element on the page.

HTML Syntax

<LABEL
    ACCESSKEY=key
    CLASS=classname
    DATAFLD=colname
    DATAFORMATAS=HTML | TEXT
    DATASRC=#ID
    FOR=ID
    ID=value
    LANG=language
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    STYLE=css1-properties
    TITLE=text
    event = script
>

Remarks

To bind LABEL to another control, set the FOR attribute of the LABEL element equal to the ID of the control. Binding LABEL to the NAME attribute of the control has no effect. However, to submit a form, you must specify a NAME on the control to which the LABEL element is being bound.

There are two ways to underline the designated access key. The rich text support in the LABEL object makes it possible to wrap the U element around the character in the label text specified by the accessKey property. If you prefer to use cascading style sheets (CSS) to apply style formatting, enclose the designated character in a SPAN and set the style to "text-decoration: underline".

If the user clicks the label, the onclick event goes to the label and then bubbles to the control specified by the htmlFor property. Pressing the access key for the label is the same as clicking the label.

The LABEL element is an inline element and requires a closing tag. Labels cannot be nested.

This element is available in HTML and script as of Microsoft® Internet Explorer 4.0.

Members

LABEL Members

Styles

LABEL Styles

Example

This example uses the LABEL object and the accessKey property to set focus on a text box.

Sample Code

<LABEL FOR="oCtrlID" ACCESSKEY="1">
    #<U>1</U>: Press Alt+1 to set focus to textbox
</LABEL>
<INPUT TYPE="text" NAME="TXT1" VALUE="binding sample 1"
       SIZE="20" TABINDEX="1" ID="oCtrlID">

This feature requires Internet Explorer 4.0 or later. Click the icon below to install the latest version. Then reload this page to view the sample.
Microsoft Internet Explorer

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


LEGEND Element | LEGEND Object

Inserts a caption into the box drawn by the FIELDSET object.

HTML Syntax

<LEGEND
    ALIGN=BOTTOM | CENTER | LEFT | RIGHT | TOP
    CLASS=classname
    ID=value
    LANG=language
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    STYLE=css1-properties
    TITLE=text
    event = script
>

Remarks

This element must be the first element in FIELDSET.

The LEGEND element is a block element and requires a closing tag.

This element is available in HTML and script as of Microsoft® Internet Explorer 4.0.

Members

LEGEND Members

Styles

LEGEND Styles

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


LI Element | LI Object

Denotes one item in a list.

HTML Syntax

<LI
    CLASS=classname
    ID=value
    LANG=language
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    STYLE=css1-properties
    TITLE=text
    TYPE=1 | a | A | i | I | DISC | CIRCLE | SQUARE
    VALUE=value
    event = script
>

Remarks

The TYPE attribute values disc, circle, and square apply to unordered lists; the values 1, a, A, i, and I apply to ordered lists.

The LI element is an inline element and does not require a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

LI Members

Styles

LI Styles

Example

This example uses the LI element to create individual items in a directory list.

<DIR>
<LI>Art
<LI>History
<LI>Literature
<LI>Sports
<LI>Entertainment
<LI>Science
</DIR>

See Also

DIR, MENU, OL, UL

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


LINK Element | LINK Object

Enables the current document to establish links to external documents.

HTML Syntax

<LINK
    DISABLED
    HREF=url
    ID=value
    MEDIA=SCREEN | PRINT | ALL
    REL=STYLESHEET
    REV=STYLESHEET
    TITLE=text
>

Remarks

The LINK element can be used only within the HEAD tag.

The LINK element does not require a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

LINK Members

Example

This example uses the LINK element to apply an external style sheet, called styles.css, to the page.

<LINK REL=stylesheet HREF="styles.css">

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


LISTING Element | LISTING Object

Renders text in a fixed-width font.

HTML Syntax

<LISTING
    CLASS=classname
    ID=string
    LANG=language
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    STYLE=css1-properties
    TITLE=text
    event = script
>

Remarks

This tag is no longer recommended. Use the PRE or SAMP tag instead.

Members

LISTING Members

Styles

LISTING Styles

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


MAP Element | MAP Object

Contains coordinate data for client-side image maps.

HTML Syntax

<MAP
    CLASS=classname
    ID=value
    LANG=language
    NAME=name
    STYLE=css1-properties
    TITLE=text
    event = script
>

Remarks

An image map is a graphic image, with predefined regions, that contains links to other documents or anchors. For example, you could create an image of the solar system containing links that the user can click to navigate to pages for the individual planets.

The MAP object is referenced with the USEMAP attribute in an IMG element, as follows:

<IMG SRC="solarsys.gif" USEMAP="#SystemMap">

A MAP element contains a set of AREA elements defining the linking regions in the image.

The MAP element requires a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

MAP Members

Styles

MAP Styles

Example

This example provides the full code for an image map of the solar system. It creates links from the image map to individual images of the planets using the AREA element with the MAP element, COORDS value, and SHAPE attribute. The user clicks the sun or any planet to link to an individual image. To return to the solar system image map, the user clicks the Back button.

Sample Code

<P><IMG SRC="solarsys.gif" WIDTH=504 HEIGHT=126 BORDER=0
    ALT="Solar System" USEMAP="#SystemMap">

<MAP NAME="SystemMap">
    <AREA SHAPE="rect" COORDS="0,0,82,126"
        HREF="/workshop/graphics/sun.gif">
    <AREA SHAPE="circle" COORDS="90,58,3"
        HREF="/workshop/graphics/merglobe.gif">
    <AREA SHAPE="circle" COORDS="124,58,8"
        HREF="/workshop/graphics/venglobe.gif">
    <AREA SHAPE="circle" COORDS="162,58,10"
        HREF="/workshop/graphics/earglobe.gif">
    <AREA SHAPE="circle" COORDS="203,58,8"
        HREF="/workshop/graphics/marglobe.gif">
    <AREA SHAPE="poly" COORDS="221,34,238,37,257,32,278,44,284,60,
        281,75,288,91,267,87,253,89,237,81,229,64,228,54"
        HREF="/workshop/graphics/jupglobe.gif">
    <AREA SHAPE="poly" COORDS="288,19,316,39,330,37,348,47,351,66,
        349,74,367,105,337,85,324,85,307,77,303,60,307,50"
        HREF="/workshop/graphics/satglobe.gif">
    <AREA SHAPE="poly" COORDS="405,39,408,50,411,57,410,71,
        404,78,393,80,383,86,381,75,376,69,376,56,380,48,393,44"
        HREF="/workshop/graphics/uraglobe.gif">
    <AREA SHAPE="poly" COORDS="445,38,434,49,431,53,427,62,430,72,
        435,77,445,92,456,77,463,72,463,62,462,53,455,47"
        HREF="/workshop/graphics/nepglobe.gif">
    <AREA SHAPE="circle" COORDS="479,66,3"
        HREF="/workshop/graphics/pluglobe.gif">
</MAP>
This feature requires Internet Explorer 4.0 or later. Click the icon below to install the latest version. Then reload this page to view the sample.
Microsoft Internet Explorer

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


MARQUEE Element | MARQUEE Object

Creates a scrolling text marquee.

HTML Syntax

<MARQUEE
    BEHAVIOR=ALTERNATE | SCROLL | SLIDE
    BGCOLOR=color
    CLASS=classname
    DATAFLD=colname
    DATAFORMATAS=HTML | TEXT
    DATASRC=#ID
    DIRECTION=DOWN | LEFT | RIGHT | UP
    HEIGHT=n
    HSPACE=n
    ID=value
    LANG=language
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    LOOP=n
    SCROLLAMOUNT=n
    SCROLLDELAY=milliseconds
    STYLE=css1-properties
    TITLE=text
    TRUESPEED
    VSPACE=n
    WIDTH=n
    event = script
>

Remarks

The default width of the MARQUEE element is equal to the width of its parent element. When a MARQUEE is in a TD that does not specify a width, you should explicitly set the width of MARQUEE. If neither the MARQUEE nor the TD has a width specified, the marquee is collapsed to a 1-pixel width.

To create a vertically scrolling MARQUEE, set its scrollLeft property to 0. To create a horizontally scrolling marquee, set its scrollTop property to 0, overriding any script setting.

The MARQUEE element is a block element and requires a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

MARQUEE Members

Styles

MARQUEE Styles

Example

This example uses the MARQUEE element to scroll the marquee from left to right across the screen, moving it 10 pixels every 200 milliseconds.

<MARQUEE DIRECTION=RIGHT BEHAVIOR=SCROLL SCROLLAMOUNT=10 SCROLLDELAY=200>
This is a scrolling marquee.
</MARQUEE>

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


MENU Element | MENU Object

Creates an unordered list of items.

HTML Syntax

<MENU
    CLASS=classname
    ID=value
    LANG=language
    STYLE=css1-properties
    TITLE=text
    TYPE=DISC | CIRCLE | SQUARE
    event = script
>

Remarks

The MENU element is a block element and requires a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

MENU Members

Styles

MENU Styles

Example

This example uses the MENU element to create a menu with two items.

<MENU>
<LI>This is the first item in the menu.
<LI>And this is the second item in the menu.
</MENU>

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


META Element | META Object

Conveys hidden information about the document to the server and the client.

HTML Syntax

<META
    CONTENT=description
    HTTP-EQUIV=response
    NAME=text
    TITLE=text
>

Remarks

The META element also embeds document information that some search engines use to index and categorize documents on the World Wide Web.

This element can be used only within the HEAD element.

The META element does not require a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

META Members

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


NEXTID Object

Creates unique identifiers that text editing software can read.

Remarks

This element can be used only within the HEAD tag.

The NEXTID element does not require a closing tag.

This element is available in HTML and script as of Microsoft® Internet Explorer 4.0.

Members

NEXTID Members

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


NOBR Element | NOBR Object

Renders text without line breaks.

HTML Syntax

<NOBR
   ID = value
   STYLE = css1-properties
   TITLE=text
>

Remarks

The NOBR element requires a closing tag.

This element is available in HTML and script as of Microsoft® Internet Explorer 4.0.

Members

NOBR Members

Example

This example uses the NOBR element to prevent text lines from breaking.

<NOBR>Here's a line of text I don't want to be broken . . .
here's the end of the line.</NOBR>

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


NOFRAMES Element | NOFRAMES Object

Contains HTML for browsers that do not support FRAMESET elements.

HTML Syntax

<NOFRAMES
   ID = value
></NOFRAMES>

Remarks

The NOFRAMES element is a block element and requires a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

NOFRAMES Members

Styles

A Styles

Example

This example uses the NOFRAMES element to specify HTML that is rendered by browsers incapable of displaying frames.

<FRAMESET>
<NOFRAMES>You need Internet Explorer version 3.0 or later to view
frames!</NOFRAMES>
</FRAMESET>

See Also

FRAME

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


NOSCRIPT Element | NOSCRIPT Object

Specifies HTML to be displayed in browsers that do not support scripting.

HTML Syntax

<NOSCRIPT
></NOSCRIPT>

Remarks

The NOSCRIPT element is a block element and requires a closing tag.

This element is available in HTML and script as of Microsoft® Internet Explorer 4.0.

Members

NOSCRIPT Members

Styles

A Styles

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


clientInformation Object

Contains information about the Web browser.

Remarks

This object is available in script as of Microsoft® Internet Explorer 4.0.

Members

clientInformation Members

Example

This example shows how to determine whether the userAgent of the browser contains "MSIE". If it does, the browser is Internet Explorer.

Sample Code

<SCRIPT LANGUAGE="JScript">
if (window.clientInformation.userAgent.indexOf( "MSIE " ) > 0)
    // The browser is Microsoft Internet Explorer.
</SCRIPT>

This example shows how to determine whether the browser can run Java applets.

<SCRIPT LANGUAGE="JScript">
if (window.clientInformation.javaEnabled() == true )
    // Java is enabled; applets can run.
</SCRIPT>

Applies To

[ Object Name ]
Platform Version
Win16:
Win32:
Mac:
Unix:
WinCE:
Version data is listed when the mouse hovers over a link, or the link has focus.
window

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


dataTransfer Object

Provides access to predefined clipboard formats for use in drag-and-drop operations.

Remarks

The dataTransfer object makes it possible to customize the handling of drag-and-drop operations. It is available through the event object.

The dataTransfer object is used in source and target events. Typically, the setData method is used with source events to provide information about the data being transferred. In contrast, the getData method is used with target events to stipulate which data and data formats to retrieve.

This object is available in script as of Microsoft® Internet Explorer 5.

Members

dataTransfer Members

Example

This example uses the setData and getData methods of the dataTransfer object to perform a drag-and-drop operation.

Sample Code

<HEAD>
<SCRIPT>
var sAnchorURL;

function InitiateDrag()
/*  The setData parameters tell the source object
    to transfer data as a URL and provide the path.  */
{
    event.dataTransfer.setData("URL", oSource.href);
}

function FinishDrag()
/*  The parameter passed to getData tells the target
    object what data format to expect.  */
{
    sAnchorURL = event.dataTransfer.getData("URL")
    oTarget.innerText = sAnchorURL;
}
</SCRIPT>
</HEAD>
<BODY>
<A ID=oSource HREF="about:Example_Complete" onclick="return(false)"
   ondragstart="InitiateDrag()">Test Anchor</A>
<SPAN ID=oTarget ondragenter="FinishDrag()">Drop the Link Here</SPAN>
</BODY>
This feature requires Internet Explorer 5 or later. Click the icon below to install the latest version. Then reload this page to view the sample.
Microsoft Internet Explorer

Applies To

[ Object Name ]
Platform Version
Win16:
Win32:
Mac:
Unix:
WinCE:
Version data is listed when the mouse hovers over a link, or the link has focus.
event

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


document Object

Represents the HTML document in a given browser window.

Remarks

Use the document object to retrieve information about the document, to examine and modify the HTML elements and text within the document, and to process events.

The document object is available at all times. Retrieve the object by applying the document property to a window or an element object. When used by itself, the document object represents the document in the current window.

This object is available in script as of Microsoft® Internet Explorer 3.0.

Windows CE

In Microsoft® Windows® CE, the document object is not available through scripting for a window opened using the open method.

Members

document Members

Example

This example uses the document object to check for a document title, and displays the title (if not null) in a message box.

if (document.title!="")
    alert("The title is " + document.title)

This example shows an event handler function that displays the current position of the mouse, relative to the upper-left corner of the document, in the browser's status window.

<HTML>
<HEAD><TITLE>Report mouse moves</TITLE>
<SCRIPT LANGUAGE="JScript">
function reportMove() {
    window.status = "X=" + window.event.x + " Y=" + window.event.y;
}
</SCRIPT>
<BODY onmousemove="reportMove()">
<H1>Welcome!</H1>
</BODY>
</HTML>

Applies To

[ Object Name ]
Platform Version
Win16:
Win32:
Mac:
Unix:
WinCE:
Version data is listed when the mouse hovers over a link, or the link has focus.
custom, window

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


event Object

Represents the state of an event, such as the element in which the event occurred, the state of the keyboard keys, the location of the mouse, and the state of the mouse buttons.

Remarks

The event object is available only during an event—that is, you can use it in event handlers but not in other code.

Although all event properties are available to all event objects, some properties might not have meaningful values during some events. For example, the fromElement and toElement properties are meaningful only when processing the onmouseover and onmouseout events.

In Microsoft® Visual Basic® Scripting Edition (VBScript), you must access the event object through the window object.

This object is available in script as of Microsoft® Internet Explorer 4.0.

Members

event Members

Example

This example uses the event object to check whether the user clicked the mouse within a link, and to prevent the link from being navigated if the SHIFT key is down.

<HTML>
<HEAD><TITLE>Cancels Links</TITLE>
<SCRIPT LANGUAGE="JScript">
function cancelLink() {
    if (window.event.srcElement.tagName == "A" && window.event.shiftKey)
        window.event.returnValue = false;
}
</SCRIPT>
<BODY onclick="cancelLink()">

This example displays the current mouse position in the browser's status window.

<BODY onmousemove="window.status = 'X=' +  window.event.x + ' Y='
    + window.event.y">

Applies To

[ Object Name ]
Platform Version
Win16:
Win32:
Mac:
Unix:
WinCE:
Version data is listed when the mouse hovers over a link, or the link has focus.
window

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


history Object

Contains information about the URLs visited by the client.

Remarks

For security reasons, the history object does not expose the actual URLs in the browser history. It does allow navigation through the browser history by exposing the back, forward, and go methods. A particular document in the browser history can be identified as an index relative to the current page. For example, specifying -1 as a parameter for the go method is the equivalent of clicking the Back button.

This object is available in script as of Microsoft® Internet Explorer 3.0.

Members

history Members

Applies To

[ Object Name ]
Platform Version
Win16:
Win32:
Mac:
Unix:
WinCE:
Version data is listed when the mouse hovers over a link, or the link has focus.
window

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


location Object

Contains information about the current URL.

Remarks

The href property contains the entire URL, while the other properties contain portions of the URL. The default property for the location object is location.href. For example, setting location='http://microsoft.com' is equivalent to setting location.href='http://microsoft.com'.

The browser immediately navigates to the specified URL when any of the properties listed below are set.

This object is available in script as of Microsoft® Internet Explorer 3.0.

Members

location Members

Applies To

[ Object Name ]
Platform Version
Win16:
Win32:
Mac:
Unix:
WinCE:
Version data is listed when the mouse hovers over a link, or the link has focus.

document, window

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


navigator Object

Contains information about the Web browser.

Remarks

This object is available in script as of Microsoft® Internet Explorer 3.0.

Members

navigator Members

Applies To

[ Object Name ]
Platform Version
Win16:
Win32:
Mac:
Unix:
WinCE:
Version data is listed when the mouse hovers over a link, or the link has focus.
window

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


screen Object

Contains information about the client's screen and rendering capabilities.

Remarks

This object is available in script as of Microsoft® Internet Explorer 4.0.

Members

screen Members

Applies To

[ Object Name ]
Platform Version
Win16:
Win32:
Mac:
Unix:
WinCE:
Version data is listed when the mouse hovers over a link, or the link has focus.
window

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


selection Object

Represents the active selection, which is a highlighted block of text, and/or other elements in the document on which a user or a script can carry out some action.

Remarks

You typically use the selection object as input from the user to identify which portion of the document to act on, or as output to the user to show the results of an action.

Users and scripts can create selections. Users create selections by dragging the mouse over a portion of the document. Scripts create selections by calling the select method on a text range or similar object. To retrieve the active selection, apply the selection keyword to the document object. To carry out work on a selection, create a text range object from the selection using the createRange method.

A document can have only one selection at a time. The selection has a type that determines whether it is empty or contains a block of text and/or elements. Although an empty selection contains nothing, you can use it to mark a position in the document.

This object is available in script as of Microsoft® Internet Explorer 4.0.

Members

selection Members

Applies To

[ Object Name ]
Platform Version
Win16:
Win32:
Mac:
Unix:
WinCE:
Version data is listed when the mouse hovers over a link, or the link has focus.
document

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


style Object

Represents the current settings of all possible inline styles for a given element.

Remarks

Inline styles are cascading style sheets (CSS) style assignments that you apply directly to individual HTML elements using the STYLE= attribute. Use the style object to examine these assignments and to make new assignments or change existing ones.

To retrieve the style object, apply the style keyword to an element object. To retrieve the current setting for an inline style, apply the corresponding style property to the style object.

The style object does not provide access to the style assignments in style sheets. To obtain information about styles in style sheets, use the styleSheets collection to access to the individual style sheets defined in the document.

The following properties are not available when the rule object accesses the style object: posHeight, posWidth, posTop, posLeft, pixelHeight, pixelWidth, pixelTop, and pixelLeft.

This object is available in script in Internet Explorer 4.0.

Members

style Members

Example

This example uses the style object to set the document body text font to Verdana.

document.body.style.fontFamily = "Verdana"

This example positions all absolutely positioned images in the given document at the top of the document.

var oImages = document.all.tags("IMG");
if (oImages.length) {
    for (var iImg = 0; iImg < oImages.length; iImg++) {
        var oImg = oImages(iImg);
        if (oImg.style.position == "absolute") {
            oImg.style.top = 0;
        }
    }
}

This example copies the inline style of the second element (div2) to the first (div1) while preserving the styles of the second. The background color of div1 is overwritten during the assignment.

<DIV ID="div1" STYLE="background-color:blue;font-weight:bold">Item 1</DIV>
<DIV ID="div2" STYLE="background-color:red;font-size:18pt;
    font-family:Verdana;">Item 2</DIV>

<SCRIPT>
div1.style.cssText += (';' + div2.style.cssText);
</SCRIPT>

Applies To

[ Object Name ]
Platform Version
Win16:
Win32:
Mac:
Unix:
WinCE:
Version data is listed when the mouse hovers over a link, or the link has focus.
A, ACRONYM, ADDRESS, APPLET, AREA, B, BASE, BASEFONT, BGSOUND, BIG, BLOCKQUOTE, BODY, BR, BUTTON, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, COMMENT, custom, DD, DEL, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FONT, FORM, FRAME, FRAMESET, HEAD, Hn, HR, HTML, I, IFRAME, IMG, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=hidden, INPUT type=image, INPUT type=password, INPUT type=radio, INPUT type=reset, INPUT type=submit, INPUT type=text, INS, KBD, LABEL, LEGEND, LI, LINK, LISTING, MAP, MARQUEE, MENU, META, NEXTID, NOBR, OBJECT, OL, OPTION, P, PLAINTEXT, PRE, Q, rule, S, SAMP, SCRIPT, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TITLE, TR, TT, U, UL, VAR, XMP

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


styleSheet Object

Represents a single style sheet in the document.

Remarks

You can use this object to retrieve style sheet information, such as the URL of the source file for the style sheet and the element in the document that owns (defines) the style sheet. You also can use it to modify style sheets.

You can retrieve a styleSheet object from the styleSheets collection or from the imports collection. Each item in these collections is a style sheet. A styleSheet object is available for a style sheet only if it is included in a document with a STYLE or LINK element, or with an @import statement in a STYLE element.

This object is available in script as of Microsoft® Internet Explorer 4.0.

Members

styleSheet Members

Example

This example uses the styleSheet object to change the cascading style sheets (CSS) values of inline and imported styles.

<STYLE>
BODY {background-color: #CFCFCF;}
@import url("otherStyleSheet.css");
</STYLE>
<SCRIPT>
window.onload=fnInit;
function fnInit(){
   // Access a rule in the styleSheet, change backgroundColor to blue.
   var oStyleSheet=document.styleSheets[0];
   var oRule=oStyleSheet.rules[0];
   oRule.backgroundColor="#0000FF";
   // Add a rule for P elements to have yellow backgrounds.
   oStyleSheet.addRule("P","background-color: #FFFF00;");
   // Change and imported rule:
   oStyleSheet.imports[0].color="#000000";
}
</SCRIPT>

Applies To

[ Object Name ]
Platform Version
Win16:
Win32:
Mac:
Unix:
WinCE:
Version data is listed when the mouse hovers over a link, or the link has focus.

styleSheets

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


TextRange Object

Represents text in an HTML element.

Remarks

Use this object to retrieve and modify text in an element, to locate specific strings in the text, and to carry out commands that affect the appearance of the text.

To retrieve a text range object, apply the createTextRange method to a BODY, BUTTON, or TEXTAREA element or an INPUT element that has text type.

Modify the extent of the text range by moving its start and end positions with methods such as move, moveToElementText, and findText. Within the text range, you can retrieve and modify plain text or HTML text. These forms of text are identical except that HTML text includes HTML tags, and plain text does not.

This feature might not be available on non-Win32® platforms. See article q172976 Internet Link Non-MSDN link in the Microsoft® Knowledge Base for the latest information on Internet Explorer cross-platform compatibility.

This object is available in script as of Microsoft® Internet Explorer 4.0.

Members

TextRange Members

Example

This example changes the text of a BUTTON element to "Clicked" through the TextRange object.

<SCRIPT LANGUAGE="JScript">
var b = document.all.tags("BUTTON");
if (b!=null) {
    var r = b[0].createTextRange();
    if (r != null) {
        r.text = "Clicked";
    }
}
</SCRIPT>

See Also

createTextRange

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


window Object

Represents an open window in the browser.

Remarks

You can use the window object to retrieve information about the state of the window. You also can use this object to gain access to the document in the window, to the events that occur in the window, and to features of the browser that affect the window.

Typically, the browser creates one window object when it opens an HTML document. However, if a document defines one or more frames (that is, contains one or more FRAME or IFRAME tags), the browser creates one window object for the original document and one additional window object for each frame. These additional objects are child windows of the original window and can be affected by actions that occur in the original. For example, closing the original window causes all child windows to close. You can also create new windows (and corresponding window objects) using methods such as open, showModalDialog, and showModelessDialog.

You can apply any window property, method, or collection to any variable or expression that evaluates to a window object, regardless of how that window was created. Additionally, you can access all window properties, methods, and collections in the current window by using the property, method, or collection name directly—that is, without prefixing it with an expression that evaluates to the current window object. However, to help make more readable code and to avoid potential ambiguities, many authors use the window keyword when accessing window properties, methods, and collections for the current window. This keyword always refers to the current window.

Note Window property, method, and collection names are reserved keywords and cannot be used as the names of variables and routines.

The dialogArguments, dialogHeight, dialogLeft, dialogTop, dialogWidth, and returnValue properties are available only for windows created using the showModalDialog and showModelessDialog methods.

This object is available in script as of Microsoft® Internet Explorer 3.0.

Windows CE

In Microsoft® Windows® CE, the document object is not available through scripting for a window opened using the open method.

Members

window Members

Example

This example displays an alert for the current window.

alert("A simple message.")

This example checks whether the current window contains child windows and, if it does, displays the names of those child windows.

if ( window.frames != null ) {
    for ( i = 0; i< window.frames.length; i++ )
        window.alert ("Child window " +i+ " is named "+window.frames(i).name);
}

This example shows a simple event handler function for the window's onload event. In the absence of a "window" element, the BODY element hosts the following window object events: onblur, onbeforeunload, onfocus, onload, and onunload.

<BODY onload="window.status='Page is loaded!'">

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


OBJECT Element | OBJECT Object

Inserts an object into the HTML page.

HTML Syntax

<OBJECT
    ACCESSKEY=key
    ALIGN=ABSBOTTOM | ABSMIDDLE | BASELINE | BOTTOM | LEFT |
        MIDDLE | RIGHT | TEXTTOP | TOP
    CLASS=classname
    CLASSID=id
    CODE=filename
    CODEBASE=url[#version=a,b,c,d]
    CODETYPE=media-type
    DATA=url
    DATAFLD=colname
    DATASRC=#ID
    HEIGHT=n
    ID=value
    LANG=language
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    NAME=name
    STYLE=css1-properties
    TABINDEX=n
    TITLE=text
    TYPE=MIME-type
    WIDTH=n
    event = script
>

Remarks

An object can appear in the HEAD or the BODY of a document.

Possible return values (those generated by DHTML Object Model properties) on the OBJECT element depend on the implementation of the OBJECT. For example, the readyState property returns null or error if the OBJECT does not implement a readyState property. DHTML Object Model properties available for an OBJECT depend on the content of the OBJECT. For information about supported properties, see the documentation for the individual object.

Events are sent directly to the OBJECT element. If the event is returned by the embedded object, it bubbles accordingly. If the event is not returned, it does not bubble.

OBJECT event handlers also can be defined in script (see Example).

Note You can use the object property for the OBJECT element to reconcile DHTML Object Model members that are duplicated by the OBJECT element's implementation and by DHTML. For instance, if the OBJECT implements an item method, and DHTML implements an item method, use document.all.objectID.object.item() to access the one defined for the OBJECT.

The OBJECT element is a block element and requires a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

OBJECT Members

Styles

OBJECT Styles

Example

This example uses script to define event handlers on the OBJECT element.

<SCRIPT FOR=oObject EVENT=eEvent>
:
</SCRIPT>

<OBJECT ID=oObject CLASSID="xyz.abc">
</OBJECT>

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


OL Element | OL Object

Draws lines of text as a numbered list.

HTML Syntax

<OL
    CLASS=classname
    ID=value
    LANG=language
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    START=n
    STYLE=css1-properties
    TITLE=text
    TYPE=1 | a | A | i | I
    event = script
>

Remarks

The TYPE attribute sets the list type for all ensuing lists unless a different type value is set.

The OL element is a block element and requires a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

OL Members

Styles

OL Styles

Example

This example uses the OL element to create a numbered list.

<OL>
<LI>This is the first item in the list.
<LI>And this is the second item in the list.
</OL>

<OL START=3>
<LI>This is item number 3.
</OL>

<OL TYPE=A>
<LI>This is item A.
</OL>

See Also

LI

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


OPTION Element | OPTION Object

Denotes one choice in a SELECT element.

HTML Syntax

<OPTION
    CLASS=classname
    ID=value
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    SELECTED
    VALUE=value
    event = script
>

Remarks

Although OPTION elements do not appear in the all collection, you can gain access to these elements by applying the options collection to the SELECT element.

You can add OPTION elements only to a SELECT element located in the same window where the OPTION elements are created.

Except for background-color and color, style settings applied through the style object for the OPTION element are ignored. In addition, style settings applied directly to individual options override those applied to the containing SELECT element as a whole.

The OPTION element does not require a closing tag.

This element is available in HTML and script as of Microsoft® Internet Explorer 3.0.

Members

OPTION Members

Styles

OPTION Styles

Example

This example uses the OPTION element to create individual items in a drop-down list box.

<SELECT ID="oCars" SIZE="1" onchange="fnChange()">
<OPTION VALUE="1">BMW
<OPTION VALUE="2">PORSCHE
<OPTION VALUE="3" SELECTED>MERCEDES
</SELECT>
<TEXTAREA ID="oData"></TEXTAREA>

This example uses the options collection to append the selected item of the list box in a text area.

<SCRIPT LANGUAGE="JScript">
function fnChange(){
   oData.value+=oCars.options[oCars.selectedIndex].text + "\n";
}
</SCRIPT>

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


P Element | P Object

Denotes a paragraph.

HTML Syntax

<P
    ALIGN=CENTER | LEFT | RIGHT | JUSTIFY
    CLASS=classname
    ID=value
    LANG=language
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    STYLE=css1-properties
    TITLE=text
    event = script
>

Remarks

The P element is a block element and does not require a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

P Members

Styles

P Styles

Example

This example uses the P element to create a paragraph.

<P>This is a paragraph.</P>

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


PARAM Element | PARAM Object

Sets the property value for a given object.

HTML Syntax

<PARAM
    DATAFLD=colname
    DATAFORMATAS=HTML | TEXT
    DATASRC=#ID
    NAME=name
    VALUE=value
>

Remarks

The PARAM element is valid within the APPLET, EMBED, and OBJECT elements.

The PARAM element does not require a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0.

Members

PARAM Members

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


PLAINTEXT Element | PLAINTEXT Object

Renders text in a fixed-width font without processing tags.

HTML Syntax

<PLAINTEXT
    CLASS=classname
    ID=value
    LANG=language
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    STYLE=css1-properties
    TITLE=text
    event = script
>

Remarks

This element is no longer recommended.

Members

PLAINTEXT Members

Styles

PLAINTEXT Styles

See Also

XMP

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


PRE Element | PRE Object

Renders text in a fixed-width font.

HTML Syntax

<PRE
    CLASS=classname
    ID=value
    LANG=language
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    STYLE=css1-properties
    TITLE=text
    event = script
>

Remarks

Text within the PRE element is formatted. Spaces and carriage returns are preserved.

The PRE element is a block element and requires a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

PRE Members

Styles

PRE Styles

Example

This example uses the PRE element to format text so that it renders exactly as it's typed.

<PRE>
This text is formatted
   exactly
      as
         it
      is
   typed.
</PRE>

See Also

XMP

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


Q Element | Q Object

Sets apart a quotation in text.

HTML Syntax

<Q
    CLASS=classname
    ID=value
    LANG=language
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    STYLE=css1-properties
    TITLE=text
    event = script
>

Remarks

The Q element is an inline element and requires a closing tag.

This element is available in HTML and script as of Microsoft® Internet Explorer 4.0.

Members

Q Members

Styles

Q Styles

Example

This example uses the Q element to set apart a quotation in text.

<P>He said,
<Q>"Hi there!"</Q>

See Also

BLOCKQUOTE

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


RT Element | RT Object

Designates the ruby text for the RUBY element.

HTML Syntax

<RT
    CLASS=classname
    DIR=LTR | RTL
    ID=value
    LANG=language
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    NAME=name
    STYLE=css1-properties
    TITLE=text
    event = script
>

Remarks

A ruby is an annotation or pronunciation guide for a string of text. The string of text annotated with a ruby is referred to as the base.

The ruby text specified by the RT element is positioned above or inline with the rubyPosition property. Browsers that do not support the RT element render the ruby text inline with the base text.

The RT element is an inline element and does not require a closing tag.

This element is available in HTML and script as of Microsoft® Internet Explorer 5.

Members

RT Members

Styles

RT Styles

Example

This example uses the RT element to specify a string of text as an annotation or pronunciation guide to the base text.

<RUBY>
   Base Text
   <RT>Ruby Text
</RUBY>
This feature requires Internet Explorer 5 or later. Click the icon below to install the latest version. Then reload this page to view the sample.
Microsoft Internet Explorer

See Also

RUBY

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


RUBY Element | RUBY Object

Designates an annotation or pronunciation guide to be placed above or inline with a string of text.

HTML Syntax

<RUBY
    CLASS=classname
    DIR=LTR | RTL
    ID=value
    LANG=language
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    NAME=name
    STYLE=css1-properties
    TITLE=text
    event = script
>

Remarks

A ruby is an annotation or pronunciation guide for a string of text. The string of text annotated with a ruby is referred to as the base.

The only valid object within the RUBY element is the RT element. Text not contained within the ruby text object, RT, is assumed to be a part of the base.

The RUBY element is an inline element and requires a closing tag.

This element is available in HTML and script as of Microsoft® Internet Explorer 5.

Members

RUBY Members

Styles

RUBY Styles

Example

This example uses the RUBY element to specify the first string of text as the base, and the RT element to specify the second string of text as the ruby.

<RUBY>
   Base Text
   <RT>Ruby Text
</RUBY>
This feature requires Internet Explorer 5 or later. Click the icon below to install the latest version. Then reload this page to view the sample.
Microsoft Internet Explorer

See Also

RT

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


rule Object

Represents a style within a cascading style sheet (CSS) that consists of a selector and one or more declarations.

Remarks

The rule object defines a set of CSS attributes applied to a set of HTML elements. For example, a rule consisting of the selector H1 and the declaration font-family:Arial defines all H1 elements to render in the Arial font.

This object is available in script as of Microsoft® Internet Explorer 5.

Members

rule Members

Example

This example uses a rule object consisting of the selector H1 to define a single rule that changes the H1 heading(s) in a document to red.

Sample Code

<STYLE>
    H1 { color: red }
</STYLE>

If the style sheet containing the preceding rule is the first style sheet in the document, the following code returns the rule object associated with the rule.

oRule=document.styleSheets(0).rules(0)

See Also

rules

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


runtimeStyle Object

Represents the cascaded format and style of the object that overrides the format and style specified in global style sheets, inline styles, and HTML attributes.

Remarks

The runtimeStyle object sets and retrieves the format and style of an object, and overrides existing formats and styles in the process. Other than having precedence over the style object and not persisting, the runtimeStyle object is equivalent to the style object.

Members

runtimeStyle Members

Example

This example sets a value on the runtimeStyle object to affect the currentStyle object, but not the style object.

<SCRIPT>
function fnChangeValue(sValue){
   if(oDIV.runtimeStyle.backgroundColor == oDIV.style.backgroundColor){
      sValue="";
   }
   oDIV.runtimeStyle.backgroundColor = sValue;
   alert(oDIV.style.backgroundColor +
      "\n" + oDIV.currentStyle.backgroundColor +
      "\n" + oDIV.runtimeStyle.backgroundColor);
}
</SCRIPT>

<DIV ID = "oDIV">
This is a demonstration DIV.
</DIV>

<INPUT TYPE = "button" VALUE = "Change Color" onclick="fnChangeValue('blue')">
This feature requires Internet Explorer 5 or later. Click the icon below to install the latest version. Then reload this page to view the sample.
Microsoft Internet Explorer

Applies To

[ Object Name ]
Platform Version
Win16:
Win32:
Mac:
Unix:
WinCE:
Version data is listed when the mouse hovers over a link, or the link has focus.
A, ACRONYM, ADDRESS, APPLET, AREA, B, BASE, BASEFONT, BGSOUND, BIG, BLOCKQUOTE, BODY, BR, BUTTON, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, COMMENT, custom, DD, DEL, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FONT, FORM, FRAME, FRAMESET, HEAD, Hn, HR, HTML, I, IFRAME, IMG, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=hidden, INPUT type=image, INPUT type=password, INPUT type=radio, INPUT type=reset, INPUT type=submit, INPUT type=text, INS, KBD, LABEL, LEGEND, LI, LINK, LISTING, MAP, MARQUEE, MENU, META, NEXTID, NOBR, OBJECT, OL, OPTION, P, PLAINTEXT, PRE, Q, rule, S, SAMP, SCRIPT, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TITLE, TR, TT, U, UL, VAR, XMP

See Also

currentStyle

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


S Element | S Object

Renders text in strike-through type.

HTML Syntax

<S
    CLASS=classname
    ID=value
    LANG=language
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    STYLE=css1-properties
    TITLE=text
    event = script
>

Remarks

The S element is an inline element and requires a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

S Members

Styles

S Styles

Example

This example uses the S element to render the text with a line through it.

<S>This text has a line through it.</S>

See Also

STRIKE

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


SAMP Element | SAMP Object

Specifies a code sample.

HTML Syntax

<SAMP
    CLASS=classname
    ID=value
    LANG=language
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    STYLE=css1-properties
    TITLE=text
    event = script
>

Remarks

The SAMP element is an inline element and requires a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

SAMP Members

Styles

SAMP Styles

Example

This example uses the SAMP element to create a code sample.

<SAMP>Here is some text in a small fixed-width font.</SAMP>

See Also

CODE

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


SCRIPT Element | SCRIPT Object

Specifies a script for the page that is interpreted by a script engine.

HTML Syntax

<SCRIPT
    CLASS=classname
    DEFER
    EVENT=eventname
    FOR=element
    ID=value
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS | XML
    SRC=url
    TITLE=text
    TYPE=MIME-type
>

Remarks

Code within the SCRIPT block that is not contained within a function is executed immediately as the page is loaded. To keep scripts from being displayed on down-level browsers, nest the SCRIPT block within a COMMENT block.

Script appearing after a FRAMESET element is ignored.

The SCRIPT element is a block element and requires a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

SCRIPT Members

Styles

SCRIPT Styles

See Also

embedding an xml data island into an html page Internet Link

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


SELECT Element | SELECT Object

Denotes a list box or drop-down list.

HTML Syntax

<SELECT
    ACCESSKEY=key
    ALIGN=ABSBOTTOM | ABSMIDDLE | BASELINE | BOTTOM | LEFT |
        MIDDLE | RIGHT | TEXTTOP | TOP
    CLASS=classname
    DATAFLD=colname
    DATASRC=#ID
    DISABLED
    ID=value
    LANG=language
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    MULTIPLE
    NAME=name
    SIZE=n
    STYLE=css1-properties
    TABINDEX=n
    event = script
>

Remarks

The SELECT element is an inline element and requires a closing tag.

This element is available in HTML and script as of Microsoft® Internet Explorer 3.0.

Members

SELECT Members

Styles

SELECT Styles

Example

This example uses the SELECT element to create a drop-down list box.

<SELECT NAME="Cats" SIZE="1">
<OPTION VALUE="1">Calico
<OPTION VALUE="2">Tortie
<OPTION VALUE="3" SELECTED>Siamese
</SELECT>

This example uses the SELECT element to create a multi-select list box by setting the SIZE and MULTIPLE attributes. To retrieve the selected options for a multi-select list box, iterate through the options collection and check to see where SELECTED is set to true.

<SELECT NAME="Cars" SIZE="3" MULTIPLE>
<OPTION VALUE="1" SELECTED>BMW
<OPTION VALUE="2">PORSCHE
<OPTION VALUE="3" SELECTED>MERCEDES
</SELECT>

This example adds a new option to the end of an existing SELECT list. The new Option constructor can also be used in Microsoft® JScript® (compatible with ECMA 262 language specification).

<SCRIPT LANGUAGE="JScript">
var oOption = document.createElement("OPTION");
oOption.text="Apples";
oOption.value="5";
document.all.oMyList.add(oOption);
</SCRIPT>

See Also

OPTION

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


SMALL Element | SMALL Object

Specifies that the enclosed text should be displayed in a smaller font.

HTML Syntax

<SMALL
    CLASS=classname
    ID=value
    LANG=language
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    STYLE=css1-properties
    TITLE=text
    event = script
>

Remarks

The SMALL element is an inline element and requires a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

SMALL Members

Styles

SMALL Styles

Example

This example uses the SMALL element to display text in a smaller font.

<SMALL>This text is smaller</SMALL> than this text.

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


SPAN Element | SPAN Object

Specifies an inline text container.

HTML Syntax

<SPAN
   CLASS=classname
    DATAFLD=colname
    DATAFORMATAS=HTML | TEXT
    DATASRC=#ID
    ID=value
    LANG=language
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    STYLE=css1-properties
    TITLE=text
    event = script
>

Remarks

This element is especially useful for applying cascading style sheets (CSS) styles.

The SPAN element is an inline element and requires a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

SPAN Members

Styles

SPAN Styles

Example

This example uses the SPAN element to create an inline text container that changes the color of a word to blue.

<P>This paragraph contains a single <SPAN STYLE="color: blue">blue</SPAN> word.

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


STRIKE Element | STRIKE Object

Renders text in strike-through type.

HTML Syntax

<STRIKE
    CLASS=classname
    ID=value
    LANG=language
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    STYLE=css1-properties
    TITLE=text
    event = script
>

Remarks

The STRIKE element is an inline element and requires a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

STRIKE Members

Styles

STRIKE Styles

Example

This example uses the STRIKE element to create strike-through type.

<STRIKE>This text has a line through it.</STRIKE>

See Also

S

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


STRONG Element | STRONG Object

Renders text in bold.

HTML Syntax

<STRONG
    CLASS=classname
    ID=value
    LANG=language
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    STYLE=css1-properties
    TITLE=text
    event = script
>

Remarks

The STRONG element is an inline element and requires a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

STRONG Members

Styles

STRONG Styles

Example

This example uses the STRONG element to emphasize text in boldface type.

<STRONG>This text is strongly emphasized (shown as bold).</STRONG>

See Also

ACRONYM, ADDRESS, B, CITE

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


STYLE Element | style Object

Specifies a style sheet for the page.

HTML Syntax

<STYLE
    DISABLED
    MEDIA = SCREEN | PRINT | ALL
    TITLE = text
</STYLE>

Remarks

The STYLE element should appear in the HEAD section of an HTML document. Microsoft® Internet Explorer 4.0 and later permit multiple style blocks.

The STYLE element is a block element and requires a closing tag.

This element is available in HTML as of Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

style Members

Example

This example encloses style declarations in the STYLE tag and changes one of those settings using the style object.

<HEAD>
<STYLE>
   BODY {  background-color: white; color: black;  }
   H1 {  font: 8pt Arial bold;  }
   P  {  font: 10pt Arial; text-indent: 0.5in;  }
   A  {  text-decoration: none; color: blue;  }
</STYLE>
<SCRIPT>
    oParagraph.style.fontSize = 14;
</SCRIPT>
</HEAD>
<BODY>
<P>Sample Paragraph Text</P>
</BODY>

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


SUB Element | SUB Object

Specifies that the enclosed text should be displayed in subscript, using a smaller font than the current font.

HTML Syntax

<SUB
    CLASS=classname
    ID=value
    LANG=language
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    STYLE=css1-properties
    TITLE=text
    event = script
>

Remarks

The SUB element is an inline element and requires a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

SUB Members

Styles

SUB Styles

Example

This example uses the SUB element to change some of the text to a subscript font.

(X<SUB>1</SUB>,Y<SUB>1</SUB>)

The preceding code causes the text to render as follows:
(X1,Y1)

See Also

SUP

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


SUP Element | SUP Object

Specifies that the enclosed text should be displayed in superscript, using a smaller font than the current font.

HTML Syntax

<SUP
    CLASS=classname
    ID=value
    LANG=language
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    STYLE=css1-properties
    TITLE=text
    event = script
>

Remarks

The SUP element is an inline element and requires a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

SUP Members

Styles

SUP Styles

Example

This example uses the SUP element to change some of the text to a superscript font.

(X<SUP>2</SUP> + Y<SUP>2</SUP>)

The preceding code causes the text to render as follows:
(X2 + Y2)

See Also

SUB

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


TABLE Element | TABLE Object

Specifies that the contained content is organized into a table with rows and columns.

HTML Syntax

<TABLE
    ALIGN=CENTER | LEFT | RIGHT
    BACKGROUND=url
    BGCOLOR=color
    BORDER=n
    BORDERCOLOR=color
    BORDERCOLORDARK=color
    BORDERCOLORLIGHT=color
    CELLPADDING=n
    CELLSPACING=n
    CLASS=classname
    COLS=n
    DATAPAGESIZE=n
    DATASRC=#ID
    FRAME=ABOVE | BELOW | BORDER | BOX | INSIDES | LHS | RHS |
        VOID | VSIDES
    HEIGHT=n
    ID=value
    LANG=language
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    RULES=ALL | COLS | GROUPS | NONE | ROWS
    STYLE=css1-properties
    TITLE=text
    WIDTH=n
    event = script
>

Remarks

The following tags are valid within a table: CAPTION, COL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD, and TR.

While a document loads, modifications to a table are restricted until the window.onload event occurs. Read-only access is allowed at any time.

The TABLE object model is read-only for databound tables. For example, script used to remove a table row works correctly on an unbound table, but not on a databound table. The properties of a table object are still available, but changes to the bound data in a table must be made to the data source.

The properties of a table are distinct from the properties of cells contained within the table. For example, the offsetLeft property of a multicolumn table is not the same as the offsetLeft property of the left-most cell in the table. Refer to the appropriate object when writing scripts involving table and/or cell objects.

The TABLE element is a block element and requires a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

TABLE Members

Styles

TABLE Styles

Example

This example uses the TABLE element with THEAD, TR, and TH to create a table with three rows and two columns.

<TABLE BORDER=1 WIDTH=80%>
<THEAD>
<TR>
<TH>Heading 1</TH>
<TH>Heading 2</TH>
</TR>
</THEAD>
<TBODY>
<TR>
<TD>Row 1, Column 1 text.</TD>
<TD>Row 1, Column 2 text.</TD>
</TR>
<TR>
<TD>Row 2, Column 1 text.</TD>
<TD>Row 2, Column 2 text.</TD>
</TR>
</TBODY>
</TABLE>

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


TBODY Element | TBODY Object

Designates rows as the body of the table.

HTML Syntax

<TBODY
    ALIGN=CENTER | LEFT | RIGHT
    BGCOLOR=color
    CLASS=classname
    ID=value
    LANG=language
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    STYLE=css1-properties
    TITLE=text
    VALIGN=BASELINE | BOTTOM | CENTER | TOP
    event = script
>

Remarks

Valid tags within the TBODY element include:

  • TD
  • TH
  • TR

This element is exposed for all tables, even if the table does not explicitly define a TBODY element.

The TBODY element is a block element and requires a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

TBODY Members

Styles

TBODY Styles

Example

This example uses the TBODY element with the TABLE, TD, THEAD, and TR objects to create a table with the first row in the table head and the second row in the table body.

<TABLE>
<THEAD>
<TR>
<TD>
This text is in the THEAD.
</TD>
</TR>
</THEAD>
<TBODY>
<TR>
<TD>
This text is in the TBODY.
</TD>
</TR>
</TBODY>
</TABLE>

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


TD Element | TD Object

Specifies a cell in a table.

HTML Syntax

<TD
    ALIGN=CENTER | LEFT | RIGHT
    BACKGROUND=url
    BGCOLOR=color
    BORDERCOLOR=color
    BORDERCOLORDARK=color
    BORDERCOLORLIGHT=color
    CLASS=classname
    COLSPAN=n
    HEIGHT=height
    ID=value
    LANG=language
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    NOWRAP
    ROWSPAN=n
    STYLE=css1-properties
    TITLE=text
    VALIGN=BASELINE | BOTTOM | CENTER | TOP
    WIDTH=width
    event = script
>

Remarks

The TD element is a block element and requires a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

TD Members

Styles

TD Styles

See Also

TABLE, TH, TR, borderCollapse

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


TEXTAREA Element | TEXTAREA Object

Specifies a multiline text input control.

HTML Syntax

<TEXTAREA
    ACCESSKEY=key
    CLASS=classname
    COLS=n
    DATAFLD=colname
    DATASRC=#ID
    DISABLED
    ID=value
    LANG=language
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    NAME=name
    READONLY
    ROWS=n
    STYLE=css1-properties
    TABINDEX=n
    TITLE=text
    WRAP=OFF | HARD | SOFT
    event = script
>

Remarks

The default font is fixed pitch.

The TEXTAREA element is an inline element and requires a closing tag.

This element is available in HTML and script as of Microsoft® Internet Explorer 3.0.

Members

TEXTAREA Members

Styles

TEXTAREA Styles

Example

This example uses the TEXTAREA element to set the cascading style sheets (CSS) overflow attribute to "hidden" to remove the scroll bars from the TEXTAREA.

<TEXTAREA STYLE="overflow:hidden" ID=txtComments>
   The patient is in stable condition after suffering an attack of
   the insatiable munchies.
</TEXTAREA>

See Also

INPUT

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


TextNode Object

Represents a string of text as a node in the document hierarchy.

Remarks

Use the createTextNode method to create a TextNode object. Once you create the TextNode, you can add to it using the appendChild, replaceNode, or insertBefore methods.

This object is available in script as of Microsoft® Internet Explorer 5.

Members

TextNode Members

Example

This example uses the TextNode object to change the text of an LI object.

<SCRIPT>
function fnChangeText(){
   var oTextNode = document.createTextNode("New List Item 1");
   var oReplaceNode = oItem1.firstChild.replaceNode(oTextNode);
}
</SCRIPT>

<UL onclick = "fnChangeText()">
<LI ID = oItem1>List Item 1
</UL>

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


TextRectangle Object

Specifies a rectangle that contains a line of text in either an element or a TextRange object.

Remarks

Apply the getClientRects method to an element or text range object to retrieve a collection of TextRectangle objects. The getClientRects method returns a collection of rectangles, exposing for each rectangle the left, top, right, and bottom coordinates relative to the client.

In the following excerpt from the Gettysburg Address, four TextRectangle objects are contained in the B element (bold text).

Four score and seven years ago our fathers
brought forth . . . a new nation, conceived in liberty
and dedicated to the proposition that all men are
created equal. Now we are engaged in a great civil war . . .

The four TextRectangle objects are:

  1. "our fathers"
  2. "brought forth . . . a new nation, conceived in liberty"
  3. "and dedicated to the proposition that all men are"
  4. "created equal"

If you resize the window containing this text, the TextRectangle objects do not update. Since the objects are a snapshot of the layout, the objects should update following after an onresize event occurs.

This object is available in script as of Microsoft® Internet Explorer 5.

Members

TextRectangle Members

Example

This example uses the getClientRects and getBoundingClientRect methods to highlight text lines in an object.

Sample Code

<HEAD>
<SCRIPT>
var rcts;
var keyCount=0;

function Highlight(obj) {
    rcts = obj.getClientRects();
    rctLength= rcts.length;

    if (keyCount > rctLength-1) {
        idBeige.style.display="none";
        keyCount = 0
    }

    // set the rendering properties for the yellow DIV
    cdRight = rcts[keyCount].right + idBody.scrollLeft;
    cdLeft = rcts[keyCount].left + idBody.scrollLeft;
    cdTop = rcts[keyCount].top + idBody.scrollTop;
    cdBottom = rcts[keyCount].bottom + idBody.scrollTop;
    idYellow.style.top = cdTop;
    idYellow.style.width = (cdRight-cdLeft) - 5;
    idYellow.style.display = 'inline';

    // set the rendering properties for the beige DIV
    bndRight = obj.getBoundingClientRect().right +
        idBody.scrollLeft;
    bndLeft = obj.getBoundingClientRect().left +
        idBody.scrollLeft;
    bndTop = obj.getBoundingClientRect().top +
        idBody.scrollTop;
    idBeige.style.top = bndTop;
    idBeige.style.width = (bndRight-bndLeft) - 5;
    idBeige.style.height = cdTop - bndTop;
    if (keyCount>0){
        idBeige.style.display = 'inline';
    }
    keyCount++;
}
</SCRIPT>
</HEAD>

<BODY ID="idBody">
<DIV ID="oID_1" onclick="Highlight(this)"
    onkeydown="Highlight(this)">
A large block of text should go here. Click on this
block of text multiple times to see each line
highlight with every click of the mouse button.
Once each line has been highlighted, the process
will begin again starting with the first line.
</DIV>
<DIV STYLE="position:absolute; left:5; top:400;
z-index:-1; background-color:yellow; display:none"
ID="idYellow"></DIV>
<DIV STYLE="position:absolute; left:5; top:400;
z-index:-1; background-color:beige; display:none"
ID="idBeige"></DIV>
</BODY>

This feature requires Internet Explorer 5 or later. Click the icon below to install the latest version. Then reload this page to view the sample.
Microsoft Internet Explorer

This example uses the TextRectangle collection with the getClientRects and getBoundingClientRect methods to determine the position of the text rectangle within an element. In each line, the left-justified text does not extend to the right margin of the box that contains the text. Using this collection, you can determine the coordinates of the rectangle that surrounds only the content in each line. The example code reads these rectangle coordinates and instructs the ball to move over the text only, and not to the end of the line.

Sample Code

<HEAD>
<SCRIPT>
var timid = -1;
var timoID_2 = -1;
var nLine;
var nPosInLine;
var oRcts;
var nDivLen;
var nEraser;

function LoadDone() {
    oTextRange = document.body.createTextRange();
    // Get bounding rect of the range
    oRcts = oTextRange.getClientRects();
    nLine = 0;
    oBndRct = obj.getBoundingClientRect();
    nDivLen = oBndRct.right - oBndRct.left + 1;
    MoveTo();
}

function MoveTo() {
    if (nLine >= oRcts.length) {
        nLine = 0;
    }
    obj.style.top = oRcts[nLine].top;
    nPosInLine = oRcts[nLine].left;
    nEraser = 0;
    timoID_2 = setInterval("MoveToInLine()",60);
}

function MoveToInLine() {
    if (nPosInLine >= oRcts[nLine].right - nDivLen) {
        clearInterval(timoID_2);
        timoID_2 = -1;
        obj.style.left = oRcts[nLine].right - nDivLen;
        nLine++;
        timid = setTimeout("MoveTo()", 100);
        return;
    }
    if (nEraser == 0) {
        nEraser = 1;
    }
    else {
        nEraser = 0;
    }
    im.src = "/workshop/graphics/dot.gif";
    obj.style.left = nPosInLine;
    nPosInLine += 3;
}

function End() {
    if(timid != -1) {
        clearInterval(timid);
        timid = -1;
    }
    if(timoID_2 != -1) {
        clearInterval(timoID_2);
        timoID_2 = -1;
    }
}
</SCRIPT>
</HEAD>

<BODY ID="bodyid" onload="LoadDone()"
    onresize="End();LoadDone();" onunload="End()">
<P STYLE="text-align:center">
<B>The quick brown fox jumps over the lazy dog.</B>
</P>
<DIV ID="obj" STYLE="position:absolute">
<IMG ID="im" SRC="/workshop/graphics/dot.gif"
    BORDER=0 HEIGHT=16 WIDTH=16>
</DIV>
</BODY>
This feature requires Internet Explorer 5 or later. Click the icon below to install the latest version. Then reload this page to view the sample.
Microsoft Internet Explorer

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


TFOOT Element | TFOOT Object

Designates rows as the table's footer.

HTML Syntax

<TFOOT
    ALIGN=CENTER | LEFT | RIGHT
    BGCOLOR=color
    CLASS=classname
    ID=value
    LANG=language
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    STYLE=css1-properties
    TITLE=text
    VALIGN=BASELINE | BOTTOM | CENTER | TOP
    event = script
>

Remarks

Valid tags within the TFOOT element include:

  • TD
  • TH
  • TR

The TFOOT element is a block element and requires a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

TFOOT Members

Styles

TFOOT Styles

Example

This example uses the TFOOT element with the TABLE, TBODY, TD, and TR objects to create a table with the first row in the table body and the second row in the table footer.

<TABLE>
<TBODY>
<TR>
<TD>
This text is in the table body.
</TD>
</TR>
</TBODY>
<TFOOT>
<TR>
<TD>
This text is in the table footer.
</TD>
</TR>
</TFOOT>
</TABLE>

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


TH Element | TH Object

Specifies a header column. Header columns are centered within the cell and are bold.

HTML Syntax

<TH
    ALIGN=CENTER | LEFT | RIGHT
    BACKGROUND=url
    BGCOLOR=color
    BORDERCOLOR=color
    BORDERCOLORDARK=color
    BORDERCOLORLIGHT=color
    CLASS=classname
    COLSPAN=n
    HEIGHT=height
    ID=value
    LANG=language
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    NOWRAP
    ROWSPAN=n
    STYLE=css1-properties
    TITLE=text
    VALIGN=BASELINE | BOTTOM | CENTER | TOP
    WIDTH=width
    event = script
>

Remarks

The TH element is a block element and requires a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

TH Members

Styles

TH Styles

See Also

TD, TR

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


THEAD Element | THEAD Object

Designates rows as the table's header.

HTML Syntax

<THEAD
    ALIGN=CENTER | LEFT | RIGHT
    BGCOLOR=color
    CLASS=classname
    ID=value
    LANG=language
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    STYLE=css1-properties
    TITLE=text
    VALIGN=BASELINE | BOTTOM | CENTER | TOP
    event = script
>

Remarks

Valid tags within the THEAD element include:

  • TD
  • TH
  • TR

The THEAD element is a block element and requires a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

THEAD Members

Styles

THEAD Styles

Example

This example uses the TFOOT element with the TABLE, TBODY, TD, and TR objects to create a table with the first row in the table header and the second row in the table body.

<TABLE>
<THEAD>
<TR>
<TD>
This text is in the table header.
</TD>
</TR>
</THEAD>
<TBODY>
<TR>
<TD>
This text is in the table body.
</TD>
</TR>
</TBODY>
</TABLE>

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


TITLE Element | title Object

Contains the title of the document.

HTML Syntax

<TITLE
    ID=value
    TITLE=string
>

Remarks

This element can be used only within the HEAD element. Any text between the opening and closing TITLE tags displays in the browser title bar and in the Microsoft® Windows® taskbar. In Web pages, "Microsoft Internet Explorer" is appended to the title. In HTML Applications, by contrast, only the specified title appears.

The TITLE element is a block element and requires a closing tag.

This element is available in HTML as of Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

TITLE Members

Styles

TITLE Styles

Example

This example uses the TITLE element to specify a title for the document.

<HEAD>
<TITLE>"Welcome to Internet Explorer!"</TITLE>
</HEAD>

Applies To

[ Object Name ]
Platform Version
Win16:
Win32:
Mac:
Unix:
WinCE:
Version data is listed when the mouse hovers over a link, or the link has focus.
document

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


TR Element | TR Object

Specifies a row in a table.

HTML Syntax

<TR
    ALIGN=CENTER | LEFT | RIGHT
    BGCOLOR=color
    BORDERCOLOR=color
    BORDERCOLORDARK=color
    BORDERCOLORLIGHT=color
    CLASS=classname
    HEIGHT=height
    ID=value
    LANG=language
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    STYLE=css1-properties
    TITLE=text
    VALIGN=BASELINE | BOTTOM | CENTER | TOP
    WIDTH=width
    event = script
>

Remarks

The TD and TH tags are valid within a row.

The TR element does not explicitly support the HEIGHT attribute. To achieve the same effect, use the cascading style sheets (CSS) height attribute.

To change the HTML in the TR element, use the table object model. For example, use the rowIndex property or the rows collection to retrieve a reference to a specific table row. You can add or delete rows using the insertRow and deleteRow methods. To retrieve a reference to a specific cell, use the cellIndex property or the cells collection. You can add or delete rows using the insertCell and deleteCell methods. To change the content of a particular cell, use the innerHTML or innerText property.

The TR element is a block element and requires a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

TR Members

Styles

TR Styles

Example

The following examples show how to create a table row in HTML and script.

Sample Code

This example uses the TR element with the TABLE, TD, and TR objects to create a table with two rows.

<TABLE>
<TR>
<TD>This is the first row.</TD>
</TR>
<TR>
<TD>This is the second row.</TD>
</TR>
</TABLE>

This example uses the table object model to dynamically add two rows and two cells to a table when the user clicks a button.

<SCRIPT>
function createRows(){
   // insert two rows.
   var oRow1=oTable.insertRow(oTable.rows.length);
   var oRow2=oTable.insertRow(oTable.rows.length);

   // retrieve the rows collection for the table.
   var aRows=oTable.rows;

   // retrieve the cells collection for the first row.
   var aCells=oRow1.cells;

   // insert two cells into the first row.
   var oCell1_1=aRows(oRow1.rowIndex).insertCell(aCells.length);
   var oCell1_2=aRows(oRow1.rowIndex).insertCell(aCells.length);

   // retrieve the cells collection for the second row.
   aCells=oRow2.cells;

   // insert two cells into the second row.
   var oCell2_1=aRows(oRow2.rowIndex).insertCell(aCells.length);
   var oCell2_2=aRows(oRow2.rowIndex).insertCell(aCells.length);

   // Add regular HTML values to the 4 new cells.
   oCell1_1.innerHTML="<B>Cell 1.1!</B>";
   oCell1_2.innerHTML="<B>Cell 1.2!</B>";
   oCell2_1.innerHTML="<B>Cell 2.1!</B>";
   oCell2_2.innerHTML="<B>Cell 2.2!</B>";
}
</SCRIPT>
<INPUT TYPE="button" VALUE="Create Rows" onclick="createRows()">
<TABLE BORDER=1 ID="oTable">
</TABLE>

See Also

TABLE, borderCollapse

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


Object DHTM

DHTML Objects

TT Element | TT Object

Renders text in a fixed-width font.

HTML Syntax

<TT
    CLASS=classname
    ID=value
    LANG=language
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    STYLE=css1-properties
    TITLE=text
    event = script
>

Remarks

The TT element is an inline element and requires a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

TT Members

Styles

TT Styles

Example

This example uses the TT element to render text in a fix-width font.

<TT>Here's some plain text.</TT>

See Also

XMP


U Element | U Object

Renders text that is underlined.

HTML Syntax

<U
    CLASS=classname
    ID=value
    LANG=language
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    STYLE=css1-properties
    TITLE=text
    event = script
>

Remarks

The U element is an inline element and requires a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

U Members

Styles

U Styles

Example

This example uses the U element to underline text.

<U>This text is underlined.</U>

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


UL Element | UL Object

Draws lines of text as a bulleted list.

HTML Syntax

<UL
    CLASS=classname
    ID=value
    LANG=language
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    STYLE=css1-properties
    TITLE=text
    TYPE=DISC | CIRCLE | SQUARE
    event = script
>

Remarks

The TYPE attribute sets the list type for all ensuing lists unless a different type value is set.

The UL element inherits its line-height from the height of the font attribute for the BODY. For example, if the font-size attribute for the BODY is larger than the font-size attribute for the UL element, the list items in the UL are spaced according to the font-size of the BODY.

The UL element is a block element and requires a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

UL Members

Styles

UL Styles

Example

This example uses the UL element to create a bulleted list.

<UL>
<LI>This is the first bulleted item in the list.
<LI>And this is the second bulleted item in the list.
</UL>

See Also

LI

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


userProfile Object

Provides methods that allow a script to request read access to and perform read actions on a user's profile information.

Remarks

The script request is queued before reading or writing is performed. This simplifies user experience, because users are prompted only once for profile release permissions for a batch of requests.

This object is available in script as of Microsoft® Internet Explorer 4.0.

Members

userProfile Members

Example

This script example runs on the client and uses the userProfile object to read various values from the profile information.

// Queue a request for read access to multiple profile attributes.
navigator.userProfile.addReadRequest("vcard.displayname");
navigator.userProfile.addReadRequest("vcard.gender");

// Request access to the information.
navigator.userProfile.doReadRequest(usage-code, "Acme Corporation");

// Now perform read operations to access the information.
name = navigator.userProfile.getAttribute("vcard.displayname");
gender = navigator.userProfile.getAttribute("vcard.gender");

// The script can now use the 'name' and 'gender' variables
// to personalize content or to send information back to the server.

// Clear the request queue to prepare for future information requests.
navigator.userProfile.clearRequest();

Applies To

[ Object Name ]
Platform Version
Win16:
Win32:
Mac:
Unix:
WinCE:
Version data is listed when the mouse hovers over a link, or the link has focus.
clientInformation, navigator

See Also

profile assistant Internet Link

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


VAR Element | VAR Object

Renders text in a small fixed-width font.

HTML Syntax

<VAR
    CLASS=classname
    ID=value
    LANG=language
    LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    STYLE=css1-properties
    TITLE=text
    event = script
>

Remarks

The VAR element is an inline element and requires a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

VAR Members

Styles

VAR Styles

Example

This example uses the VAR element to render the word "filename" in a small fixed-width font.

Enter the <VAR>filename</VAR> in the dialog box.

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


WBR Element | WBR Object

Inserts a soft line break into a block of NOBR text.

HTML Syntax

<WBR
   ID=value
 >

Remarks

The WBR element does not require a closing tag.

This element is available in HTML as of Microsoft® Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

Members

WBR Members

Styles

WBR Styles

Example

This example uses the WBR element to create line breaks. In contrast, the NOBR element does not break lines.

<NOBR>This line of text will not break, no matter how narrow the window gets.</NOBR>
<NOBR>This one, however,<WBR> will break after the word "however,"
if the window gets small enough.</NOBR>

See Also

BR

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


XML Element | XML Object

Defines an xml data island Internet Link on an HTML page.

HTML Syntax

<XML
   ID = value
   NS = sNamespace
   PREFIX = sPrefix
   SRC = sUrl
   event  = script
></XML>

Remarks

The readyState property of the XML element, available as a string value, corresponds to the readystate Internet Link property of the xmldomdocument Internet Link object, which is available as a long value. The string values correspond to the long values of the XML document object's property as follows:

0 | uninitialized
1 | loading
2 | loaded
3 | interactive
4 | complete

Consider the following XML data island:

<XML ID=xmldoc SRC="123.xml"></XML>

Use the following two methods to check the value of the readyState property to determine whether the XML data island is completely downloaded.

  • This method uses the readyState property of the XML element:
    •   if (xmldoc.readyState == "complete")
      window.alert ("The XML document is ready.");
  • This method uses the readystate Internet Link property of the XMLDOMDocument object:
    •   if (xmldoc.XMLDocument.readyState == 4)
      window.alert ("The XML document is ready.");

The XML element requires a closing tag.

This element is available in HTML and script as of Microsoft® Internet Explorer 5.

Members

XML Members

Styles

A Styles

Example

This example uses the XML element to define a simple XML data island that can be embedded directly into an HTML page.

<XML ID="oMetaData">
  <METADATA>
     <AUTHOR>John Smith</AUTHOR>
     <GENERATOR>Visual Notepad</GENERATOR>
     <PAGETYPE>Reference</PAGETYPE>
     <ABSTRACT>Specifies a data island</ABSTRACT>
  </METADATA>
</XML>

This script example retrieves the text contained within the ABSTRACT field of the data island.

   var oNode = oMetaData.XMLDocument.selectSingleNode("METADATA/ABSTRACT");
   alert(oNode.text);

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


XMP Element | XMP Object

Renders text used for examples in a fixed-width font.

HTML Syntax

<XMP
    CLASS = classname
    ID = value
    LANG = language
    LANGUAGE = JAVASCRIPT | JSCRIPT | VBSCRIPT  | VBS
    STYLE = css1-properties
    TITLE = text
    event = script
>

Remarks

Use of this element is no longer recommended. Use the PRE or SAMP element instead.

Members

XMP Members

Styles

XMP Styles

See Also

TT

Back to top Back to top

Did you find this topic useful? Suggestions for other topics? write us! Internet Link

© 1999 microsoft corporation. all rights reserved. terms of use Internet Link.


Apprenez les bases du HTML

Table des matières Les bases du HTML

Vu dans href="http://www.w3.org/TR/html-markup

  • II. Le corps du document - body
    • II-A. Les niveaux de titres
    • II-B. Les paragraphes de texte
    • II-C. La mise en forme de texte
      • II-C-1. Le texte en gras
      • II-C-2. Le texte en italique
      • II-C-3. Le texte souligné
      • II-C-4. Le texte barré
      • II-C-5. Le texte en exposant
      • II-C-6. Le texte en indice
      • II-C-7. Modifier la couleur du texte
      • II-C-8. Modifier la police du texte
      • II-C-9. Modifier la taille du texte
    • II-D. Les images et zones réactives
      • II-D-1. Les images
      • II-D-2. Les zones réactives
        • II-D-2-a. Les zones rectangulaires
        • II-D-2-b. Les zones circulaires
        • II-D-2-c. Les zones polygonales
    • II-E. Les liens hypertextes
      • II-E-1. Les liens externes
      • II-E-2. Les liens internes
        • II-E-2-a. Les ancres
        • II-E-2-b. Les liens vers d'autres cadres
      • II-E-3. Les liens e-mails
      • II-E-4. Les protocoles
      • II-E-5. Informations complémentaires
    • II-F. Les cadres
      • II-F-1. À quoi servent-ils ?
      • II-F-2. Débuter avec les cadres
      • II-F-3. Les cadres locaux
      • II-F-4. Les cadres aujourd'hui
    • II-G. Les listes
      • II-G-1. Les différents types de listes
        • II-G-1-a. Les listes non ordonnées
          • II-G-1-a-i. Les différents types de puces
          • II-G-1-a-ii. Les puces en image
        • II-G-1-b. Les listes ordonnées
          • II-G-1-b-i. Les différents types de numérotation
          • II-G-1-b-ii. Modifier le début de la numérotation
        • II-G-1-c. Les listes de définitions
        • II-G-1-d. Les listes de répertoires
        • II-G-1-e. Les listes de menus
      • II-G-2. Les listes imbriquées
      • II-G-3. L'utilité des listes aujourd'hui
    • II-H. Les tableaux
      • II-H-1. À quoi servent-ils ?
      • II-H-2. Du tableau simple au tableau complexe
        • II-H-2-a. Les bases d'un tableau
        • II-H-2-b. Le titre d'un tableau
        • II-H-2-c. La ligne d'en-tête d'un tableau
        • II-H-2-d. Les différentes parties d'un tableau
        • II-H-2-e. La fusion de lignes et de colonnes d'un tableau
      • II-H-3. L'utilité des tableaux aujourd'hui
    • II-I. Les formulaires
      • II-I-1. À quoi servent-ils ?
      • II-I-2. La balise form
      • II-I-3. Les champs texte monolignes
      • II-I-4. Les champs texte multilignes
      • II-I-5. Les champs cachés
      • II-I-6. Les champs de fichiers
      • II-I-7. Les boutons radio
      • II-I-8. Les cases à cocher
      • II-I-9. Les boutons
        • II-I-9-a. Le bouton simple
        • II-I-9-b. Le bouton d'envoi
        • II-I-9-c. Le bouton image
        • II-I-9-d. Le bouton effacer
      • II-I-10. Les listes
      • II-I-11. Améliorez l'accessibilité de vos formulaires

II. Le corps du document - body

C'est dans la balise <body> que nous allons mettre tout le texte et toutes les images qui apparaîtront lorsqu'un visiteur viendra sur notre page.

II-A. Les niveaux de titres

Il existe différents niveaux de titres, ils vont de 1 à 6 et ont chacun leur importance. La balise représentant ces niveaux de titre est <hX> où X représente le niveau.

Exemple :

Exemple de titre

<
h1>Titre de ma page</
h1>

Il est important de respecter la hiérarchie des différents niveaux de titres, sachant que l'élément le plus haut est le <h1>. En effet, un titre <h2> ne se retrouvera jamais au-dessus d'un <h1> dans un document.
Le titre <h1> étant le plus important, il convient également de ne le faire apparaître qu'une seule fois dans un document.

Vous ne devez pas choisir un titre pour le rendu qu'il a dans le navigateur (différent selon les navigateurs et pouvant être modifié à l'aide de CSS), mais bien pour le niveau hiérarchique qu'il représente.

II-B. Les paragraphes de texte

Comme vous tapez du texte dans un traitement de texte, vous segmentez votre texte en paragraphes. En HTML c'est la même chose, sauf qu'il faut préciser nous-même où commence un paragraphe et où il se termine. C'est ce à quoi sert la balise <p>.

Les paragraphes de texte en HTML

<p>Voici un premier paragraphe.</p>

<p>Voici un deuxième paragraphe.</p>

II-C. La mise en forme de texte

Les différentes techniques citées ci-dessous pour mettre en forme du texte sont obsolètes. Si elles fonctionnent encore en HTML 4.01, il vaut mieux s'en séparer et les remplacer par un langage fait pour ça et beaucoup plus puissant : le CSS.

Voir :
- Les cours sur le CSS
- Un exemple d'une feuille de style de base

II-C-1. Le texte en gras

Pour mettre le texte en gras on l'encadre de la balise <b> :

Texte en gras

<b>Ce texte s'affichera en gras.</b>

II-C-2. Le texte en italique

Pour mettre le texte en italique on l'encadre de la balise <i> :

Texte en italique

<i>Ce texte s'affichera en italique.</i>

II-C-3. Le texte souligné

Pour souligner le texte on l'encadre de la balise <u> :

Texte souligné

<u>Ce texte sera souligné.</u>

II-C-4. Le texte barré

Pour barrer le texte on l'encadre de la balise <s> :

Texte barré

<s>Ce texte sera barré.</s>

II-C-5. Le texte en exposant

Pour placer le texte en exposant on l'encadre de la balise <sup> :

Texte en exposant

<sup>Ce texte sera en exposant.</sup>

II-C-6. Le texte en indice

Pour placer le texte en indice on l'encadre de la balise <sub> :

Texte en indice

<sub>Ce texte sera en indice.</sub>

II-C-7. Modifier la couleur du texte

Pour modifier la couleur du texte on utilise l'attribut color de la balise <font> :

Texte en rouge

<font color="#ff0000">Ce texte sera en rouge.</font>

Les couleurs peuvent être écrites de deux manières :

  • En hexadécimal de type RVB et précédées d'un dièse (#) ; Exemples : #ff0000 => rouge, #00ff00 => vert, #0000ff => bleu.
  • Textuelles en anglais US ; Exemples : red, yellow, pink.

II-C-8. Modifier la police du texte

Pour modifier la police du texte on utilise l'attribut face de la balise <font> :

Texte en verdana

<font face="verdana">Ce texte sera en verdana.</font>

On a tendance à écrire des familles de polices plutôt qu'une seule police. En effet, il se peut que sur un système différent du vôtre la police choisie ne soit pas installée et il faut qu'il puisse alors afficher le texte dans une police proche de celle que vous vouliez avoir.
On sépare alors les différentes polices par une virgule dans l'ordre de sélection le cas où la précédente ne peut pas être affichée.

Texte en verdana ou sans-serif

<font face="verdana,sans-serif">Ce texte sera en verdana ou en sans-serif si verdana n'est pas installée.</font>

II-C-9. Modifier la taille du texte

Pour modifier la taille du texte on utilise l'attribut size de la balise <font> :

Texte en taille 5

<font size="5">Ce texte sera en taille 5.</font>

Par défaut, la valeur de l'attribut size vaut "3".
Il y a deux manières de modifier la valeur de cet attribut : et les valeurs possibles sont les entiers de "1" à "7".

  • En absolu : Les valeurs possibles sont les entiers de "1" à "7".
  • En relatif : Les valeurs possibles les entiers de "-2" à "+4".

Et il est bien évidemment possible de renseigner ces trois attributs (color, face, size) à la fois dans la même balise <font>.

II-D. Les images et zones réactives

II-D-1. Les images

Pour afficher une image en HTML, on utilise la balise <img>. Elle admet différents attributs, dont les plus importants sont src et alt.
L'attribut src permet de renseigner le chemin de l'image, qui peut être absolu HTTP ou relatif, très utile pour pouvoir l'afficher.
L'attribut alt affiche un texte alternatif à la place de l'image dans le cas où, pour une raison ou autre, celle-ci ne peut pas être chargée. Il aide de plus les moteurs de recherche à référencer l'image et les déficients visuels à savoir ce que l'image représente.

Afficher une image

<img src="adresse/de/l/image" alt="Description de l'image">

L'attribut alt n'est pas censé créer une infobulle lors du survol de l'image, qui est le rôle de l'attribut title, cependant sur Internet Explorer le alt affiche cette infobulle.

Les différents formats d'image supportés par cette balise sont :

  • GIF
  • JPG
  • PNG
  • BMP (à éviter)

II-D-2. Les zones réactives

Le HTML permet de créer des zones réactives sur les images, afin de définir plusieurs liens différents sur une seule et même image, ou de ne rendre qu'une seule partie de l'image cliquable. On appelle l'ensemble de ces zones une carte, ou map.
Les balises qui permettent de faire ces zones réactives sont <map> et <area> étroitement liées avec la balise <img>. En effet, on doit forcément préciser sur quelle image ces zones vont être présentes.
L'attribut de la balise <img> qui va contenir le nom de la map dont elle fait référence est usemap. Le nom de cette map est précédé du signe dièse (#).

Image mappée

<img src="adresse/de/l/image" alt="Description de l'image" usemap="#nomDeLaMap">

La balise qui va contenir l'ensemble de nos zones réactives pour cette image est la balise <map>, qui doit obligatoirement avoir l'attribut name renseigné et qui aura pour valeur le nom de la map, le même renseigné dans l'attribut usemap de notre image.
Comme vous l'aurez sans doute deviné et comme son nom l'indique, la balise <area> sera une zone réactive dans notre map. Il y a une balise area par zone.

Structure d'une map

<map name="nomDeLaMap">
    <!-- Ici nous allons mettre nos différentes zones réactives -->
    <area ...>
    <area ...>
</map>

Les différents attributs de la balise <area> nécessaires à son bon fonctionnement sont :

  • coords, qui va contenir les différentes coordonnées de notre zone.
  • href, qui va définir l'adresse de destination du lien.
  • shape, qui va renseigner le type de zone que l'on souhaite afficher.

On distingue trois types de zones :

  • Les zones rectangulaires,
  • Les zones circulaires,
  • Les zones polygonales.

On peut bien évidemment avoir autant de zones que l'on veut sur une map, et on peut également combiner les différents types de zones sur une seule et même image.
Attention toutefois à ne pas faire se chevaucher les zones ! Le cas échéant, c'est la zone définie la première qui s'affichera au-dessus.

II-D-2-a. Les zones rectangulaires

Pour définir une zone rectangulaire, l'attribut shape doit prendre pour valeur "rectangle" ou "rect".
Les coordonnées définies dans l'attribut coords se réfèrent aux abscisses et ordonnées des coins supérieur gauche et inférieur droit du rectangle que l'on souhaite tracer par rapport au coin haut gauche de l'image. Ces valeurs sont séparées par une virgule et exprimées en pixels.

Syntaxe :

Zone rectangulaire

<area shape="rect" coords="x1,x2,y1,y2" href="adresse/de/destination">

Exemple :

Zone rectangulaire

<area shape="rect" coords="10,50,60,60" href="adresse/de/destination">

Voir le résultat

II-D-2-b. Les zones circulaires

Une zone circulaire est définie par la valeur "circle" ou "circ" de l'attribut shape.
Les valeurs de l'attribut coords se réfèrent aux abscisse et ordonnée du centre du cercle ainsi que le rayon de ce cercle par rapport au coin haut gauche de l'image. Ces valeurs sont séparées par une virgule et exprimées en pixels.

Syntaxe :

Zone circulaire

<area shape="circ" coords="x,y,rayon" href="adresse/de/destination">

Exemple :

Zone circulaire

<area shape="circ" coords="40,40,10" href="adresse/de/destination">

Voir le résultat

II-D-2-c. Les zones polygonales

C'est la valeur "polygon" ou "poly" de l'attribut shape qui permet de définir une zone polygonale.
Les valeurs de l'attribut coords se réfèrent aux abscisse et ordonnée de chacun des points par rapport au coin haut gauche de l'image. Ces valeurs sont séparées par une virgule et exprimées en pixels.

Syntaxe :

Zone polygonale

<area shape="poly" coords="x1,y1,x2,y2,x3,y3,..,xn,yn" href="adresse/de/destination">

Exemple :

Zone polygonale

<area shape="poly" coords="0,0,40,50,78,101,17,150" href="adresse/de/destination">

Voir le résultat

II-E. Les liens hypertextes

Un lien hypertexte est un élement HTML permettant d'envoyer le visiteur vers une nouvelle page. On peut insérer dans cet élément toute sorte de textes, images et autres balises dites "inline" (comme les balises <span>, <strong>, etc).

Un lien sera représenté dans le code par la balise <a>. Tout ce qui sera dans cette balise fera office de lien. L'adresse de destination doit se trouver dans l'attribut href.

L'attribut title, quant à lui, permet de renseigner un petit descriptif sur le contenu de la page cible, et est un atout non néligeable en matière de référencement et d'accessibilité.

Exemple texte :

Exemple d'un lien texte

<a href="adresse/de/destination.html">Texte du lien</a>

Exemple image :

Exemple d'un lien image

<a href="adresse/de/destination.html"><img src="adresse/de/l/image.gif"></a>

On distingue deux types de liens, les liens externes et les liens internes.

II-E-1. Les liens externes

Un lien externe est un lien hypertexte qui renvoie vers une autre page. Cette autre page peut être une page de votre site ou celle d'un site tiers.

II-E-2. Les liens internes

Un lien interne est un lien qui renvoie vers la même page, mais pas forcément au même endroit de la page.

Attention à ne pas confondre "liens internes" avec "lien interne au site" !
Un lien interne au site est en général un lien externe à la page.

II-E-2-a. Les ancres

Les ancres permettent de naviguer à l'intérieur d'une même page. Par exemple, ce tutoriel a en haut un sommaire avec des liens qui renvoient plus bas dans la page, ce sont des ancres.
Pour faire une ancre, il faut utiliser le signe dièse (#) suivi d'un mot-clef. Ce mot-clef sera repris dans l'attribut id d'une balise à laquelle on fait faire une ancre :

Exemple d'une ancre interne

<a href="#motClef">Texte de mon ancre</a>

[...]

<h2 id="motClef">Texte vers lequel l'ancre est renvoyée</h2>

Si vous voulez faire une ancre vers une page externe, il vous suffit de rajouter l'adresse de destination dans la balise de lien :

Exemple d'une ancre externe

<a href="adresse/de/destination.html#motClef">Texte de mon ancre</a>
II-E-2-b. Les liens vers d'autres cadres

Si vous utilisez des cadres pour votre navigations, vous aurez certainement envie que les liens de votre menu, dans le cadre nommé "cadreMenu" par exemple, pointent vers votre cadre principal que l'on appellera "cadrePrincipal".
Dans ce cas, il faut renseigner l'attribut target de la balise de lien :

Exemple d'un lien vers un autre cadre

<a href="adresse/de/destination.html" target="cadrePrincipal">Lien de mon menu</a>

Il existe plusieurs valeurs pour l'attribut target :

Valeur | Description
_self | Affichage dans le cadre courant (par défaut).
_blank | Ouvre le lien dans une nouvelle fenêtre.
_top | Affichage dans la totalité de la fenêtre courante.
_parent | Affichage dans le cadre qui enveloppe la structure courante.
NomDuCadre | Affichage dans le cadre spécifié.

Pour plus d'infos sur les cadres, reportez-vous à la section "Les cadres".

II-E-3. Les liens e-mails

Vous pouvez permettre à vos visiteurs d'écrire sur votre adresse e-mail avec la syntaxe "mailto:" :

Exemple d'un lien vers une adresse e-mail

<a href="mailto:jwillette@monsite.com">Ecrivez-moi</a>

Ce type de liens ouvre le logiciel de messagerie par défaut de vos visiteurs.

Vous pouvez aussi renseigner un sujet par défaut de l'e-mail, ainsi qu'un corps voire même les deux :

Exemple d'un lien vers une adresse e-mail avec un sujet par défaut

<a href="mailto:jwillette@monsite.com?subject=Sujet du mail">Ecrivez-moi</a>

Exemple d'un lien vers une adresse e-mail avec un corps par défaut

<a href="mailto:jwillette@monsite.com?body=Corps du mail">Ecrivez-moi</a>

Exemple d'un lien vers une adresse e-mail avec un sujet et un corps par défaut

<a href="mailto:jwillette@monsite.com?subject=Sujet du mail&body=Corps du mail">Ecrivez-moi</a>

Vous pouvez enfin mettre plusieurs destinataires ou mettre une personne en copie du mail :

Exemple d'un lien vers plusieurs adresses e-mail

<a href="mailto:destinataire1@monsite.com;destinataire2@monsite.com">Ecrivez-nous</a>

Exemple d'un lien vers une adresse e-mail et une autre en copie

<a href="mailto:destinataire1@monsite.com?cc=destinataire2@monsite.com">Ecrivez-nous</a>

II-E-4. Les protocoles

Un protocole est un moyen qu'ont deux ordinateurs de communiquer. Il diffère selon le type de données echangées.
Il existe de nombreux protocoles disponibles par lien hypertexte, en voici une liste non exhaustive :

Protocole | Signification de l'acronyme | Description | Syntaxe utilisée
HTTP | HyperText Transfer Protocol | Permet de transférer des données sur l'Internet. | <a href="http://...">...</a>
HTTPS | HyperText Transfer Protocol Secured | Permet de transférer des données sur l'Internet en permettant de vérifier l'identité du site grâce à un certificat d'authentification. | <a href="https://...">...</a>
SMTP | Simple Mail Transfer Protocol | Permet de transférer des e-mails. | <a href="mailto:...">...</a>
FTP | File Transfer Protocol | Permet de transférer des fichiers. | <a href="ftp://...">...</a>
NNTP | Networks News Transfer Protocol | Permet de lire, distribuer, ... les news de newsgroups. | <a href="news:...">...</a>
TELNET |  | Permet d'accéder à un ordinateur distant. | <a href="telnet://...">...</a>
IRC | Internet Relay Chat | Permet de se connecter à un serveur de Chat. | <a href="irc://...">...</a>

II-E-5. Informations complémentaires

  • Pour éviter d'avoir le cadre bleu autour d'une image lorsqu'elle est dans un lien, il vous suffit de renseigner l'attribut border à "0" :

Image sans bordure bleue

<a href="adresse/de/destination.html"><img src="adresse/de/l/image.gif" border="0"></a>
  • Si vous voulez avoir une infobulle qui s'affiche sur votre lien lors du passage de la souris, vous pouvez renseigner l'attribut title :

Infobulle sur le lien

<a href="adresse/de/destination.html" title="Description de la page cible">Texte du lien</a>
  • Vous pouvez remplacer l'adresse du lien par l'appel d'une fonction Javascript qui s'exécutera au clic du lien.

Fonction Javascript appelée dans un lien

<a href="javascript:maFonctionJavascript()">Texte du lien</a>

II-F. Les cadres

II-F-1. À quoi servent-ils ?

Les cadres servent à séparer la fenêtre en différents morceaux indépendants qui peuvent chacun contenir une page HTML différente, ces morceaux ayant la capacité de communiquer entre eux.
On utilise au minimum deux cadres dans une fenêtre, en général un cadre pour le menu à gauche et un autre pour le contenu du site. Parfois un rajoute un cadre en haut pour un bandeau fixe.

II-F-2. Débuter avec les cadres

Le document HTML qui va appeler les différents cadres ne pourra servir qu'à ça. Aucun texte ou aucune image inséré dans ce document ne sera affiché dans le navigateur du visiteur. Donc dans le cas où nous avons deux cadres, un pour le menu et un pour le contenu, nous aurons trois fichiers différents. Comme les deux pages du menu et du contenu sont des pages ordinaires, nous ferons l'impasse dessus. En revanche, la page qui appelle les cadres est tout à fait différente.
Ce sont les balises <frameset> et <frame> qui vont être utilisées pour la mise en oeuvre du jeu de cadres.

Document HTML de base pour un jeu de cadres

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
    <title>Titre de la page</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<frameset>

<!-- Ici le contenu de la frameset principale -->

</frameset>
</html>

On remarque la présence de la balise <frameset> qui remplace d'ordinaire la balise <body> et le DOCTYPE approprié pour l'usage des cadres.
La balise <frameset> va désigner le nombre de cadres et leur taille.
Si on renseigne l'attribut cols, la page sera coupée verticalement, alors que si on renseigne l'attribut rows, la page sera coupée horizontalement. Ces attributs prennent pour valeur les tailles des différents cadres séparées par une virgule. Si une des valeurs est une étoile, ça signifie que le cadre en question prendra toute la place disponible restante dans la fenêtre. On ne peut évidemment pas utiliser ces deux attributs conjointement sur une seule et même balise <frameset>.

Deux cadres verticaux

<frameset cols="20%, *">

Trois cadres verticaux

<frameset cols="20%, *, 20%">

Deux cadres horizontaux

<frameset rows="100, *">

Dans cette balise <framset> nous allons mettre l'ensemble de nos cadres. Le nombre de cadres correspond au nombre de valeurs renseignées dans les attributs cols et rows.

Exemple de cadres

<frameset cols="200, *">
    <frame>
    <frame>
</frameset>

C'est dans la balise <frame> que l'on va fixer la source de chacun des cadres, grâce à l'attribut src.
Un attribut important de cette balise est name. En effet, il va falloir dire à nos liens qui sont dans le menu, par exemple, d'aller changer la source d'un autre cadre. L'attribut target du lien prendra alors pour valeur le nom du cadre ciblé.
On peut aussi jouer sur les bordures avec l'attribut frameborder qui prend pour valeur "0" ou "1".
De plus, par défaut, les cadres peuvent être redimensionnés. Si on veut interdire cette fonctionnalité, on renseignera l'attribut noresize qui prend pour seule valeur "noresize".
Enfin, on peut éliminer les marges intérieures latérales avec les attributs marginwidth et marginheight renseignés à "0".

Exemple de cadres

<frameset cols="200, *">
    <frame name="menu" src="menu.html">
    <frame name="contenu" src="page1.html">
</frameset>

Exemple d'un lien sur la page menu.html

<a href="page2.html" target="contenu">Aller à la page 2</a>

On peut aller encore plus loin, en imbricant différents cadres. Par exemple, on veut un bandeau en haut qui prend toute la largeur de l'écran. En-dessous, on veut deux cadres verticaux, un pour le menu et l'autre pour le contenu. Le code HTML ressemblera alors à quelque chose comme :

Exemple de cadres

<frameset rows="100, *">
    <frame name="bandeau" src="bandeau.html">
    <frameset cols="200, *">
        <frame name="menu" src="menu.html">
        <frame name="contenu" src="page1.html">
    </frameset>
</frameset>

II-F-3. Les cadres locaux

Le cadre local ou "iframe" permet également d'insérer une page externe dans notre site, à la différence qu'il sera à la suite du contenu de notre propre document et non pas séparé par un troisième fichier qui fait la jointure.
L'attribut de la balise <iframe> qui va servir à afficher le contenu d'une autre page est src. On lui renseigne l'adresse complète si le site est différent du nôtre, ou le chemin relatif ou absolu dans le cas où l'on veut afficher une de nos propres pages.
On peut supprimer les bordures de l'iframe pour lui donner l'impression de mieux s'intégrer à notre document en renseignant l'attribut frameborder à "0" ("1" par défaut).
Aussi, les marges intérieures sont assez gênantes quand on a une page qui doit faire exactement les dimensions données à cette balise. On peut alors les supprimer avec les attributs marginwidth et marginheight renseignés à "0".
Dans le cas où un navigateur ne peut pas afficher ce cadre local, il est intéressant de laisser un texte alternatif. C'est le texte que l'on écrit à l'intérieur de la balise.

Exemple de cadre local

<iframe frameborder="0" marginwidth="0" marginheight="0" src="http://adresse/d/une/page.html">
    Désolé, votre navigateur ne supporte pas les cadres locaux
</iframe>

II-F-4. Les cadres aujourd'hui

De nos jours, il est fortement déconseillé d'utiliser ce genre de procédé. Voici une liste non-exhaustive des problèmes encourus de part l'utilisation des frames :

  • Impossibilité d'ajouter aux favoris la page désirée.
  • Mauvaise gestion de l'impression par les navigateurs.
  • Perte du sens véritable de la nature d'un document HTML censé être identifié par une URL précise et unique.
  • Référencement des pages du site impossible dans les moteurs de recherche.
  • Technologie obsolète qui est totalement abandonnée dans les futures versions du (X)HTML.

II-G. Les listes

Elles servent, comme leur nom l'indique, à créer une liste d'items, plus précisément à les énumérer, comme dans le cas d'un sommaire par exemple.

II-G-1. Les différents types de listes

On distingue cinq types de listes différents, chacun prévu pour un usage bien précis :

  • Les listes non ordonnées, ou à puces.
  • Les listes ordonnées.
  • Les listes de définitions.
  • Les listes de répertoires.
  • Les listes de menus.
II-G-1-a. Les listes non ordonnées

Elles sont démarquées par la balise <ul> et chacun des items est entouré de la balise <li> :

Exemple de liste non ordonnée

<p>Ma liste de courses :</p>
<ul>
    <li>Champignons</li>
    <li>Avocat</li>
    <li>Dentifrice</li>
    <li>Céréales</li>
</ul>

Résultat :

Liste non ordonnée

II-G-1-a-i. Les différents types de puces

On va pouvoir jouer sur le design des puces à l'aide de trois types différents. On renseigne le type des puces avec l'attribut type de la balise <ul>.
Les types sont :

  • disc (par défaut au niveau 1 d'imbrication)
  • circle (par défaut au niveau 2 d'imbrication)
  • square (par défaut au niveau 3 et suivants d'imbrication)

Dans l'exemple précédent, nous avons donc vu une liste non ordonnée avec une puce de type disc. Voici à quoi ressemblent les deux autres :

Exemple de liste non ordonnée

<p>Ma liste de courses :</p>
<ul type="circle">
    <li>Champignons</li>
    <li>Avocat</li>
    <li>Dentifrice</li>
    <li>Céréales</li>
</ul>

Résultat :

Liste non ordonnée

Exemple de liste non ordonnée

<p>Ma liste de courses :</p>
<ul type="square">
    <li>Champignons</li>
    <li>Avocat</li>
    <li>Dentifrice</li>
    <li>Céréales</li>
</ul>

Résultat :

Liste non ordonnée

II-G-1-a-ii. Les puces en image

Des disques, des cercles ou des carrés, c'est bien beau, mais si on veut une puce en forme de flèche et de couleur bleue ?
Pour cela, rien de plus simple, il suffit d'utiliser une image pour remplacer la puce originale. Cependant cette méthode n'est possible qu'à l'aide de CSS et de la propriété list-style-image :

Exemple de liste non ordonnée

<p>Ma liste de courses :</p>
<ul>
    <li>Champignons</li>
    <li>Avocat</li>
    <li>Dentifrice</li>
    <li>Céréales</li>
</ul>

CSS

li
{
    list-style-image : url(puce.gif);
}

Résultat :

Liste non ordonnée

Pour plus d'informations sur les puces imagées, je vous renvoie à l'article CSS plus complet :
CSS débutants : Puces en gifs avec les CSS

II-G-1-b. Les listes ordonnées

Elles sont introduites par la balise <ol> et chacun des items est encadré par la balise <li> :

Exemple de liste ordonnée

<p>Top 3 du tiercé :</p>
<ol>
    <li>Jolly</li>
    <li>Tonnerre</li>
    <li>Tornade</li>
</ol>

Résultat:

Liste ordonnée

II-G-1-b-i. Les différents types de numérotation

Il existe cinq manières différentes de numéroter les liste ordonnées. On renseigne le type de numérotation avec l'attribut type de la balise <ol>.
Les types sont :

  • 1 : Numérotation par les chiffres arabes (par défaut).
  • I : Numérotation par les chiffres romains.
  • i : Numérotation par les chiffres romains minuscules.
  • A : Numérotation par les lettres de l'alphabet.
  • a : Numérotation par les lettres de l'alphabet minuscules.

Dans l'exemple précédent, nous avons donc vu une liste ordonnée avec une numérotation par les chiffres arabes. Voici à quoi ressemblent les autres :

Exemple de liste ordonnée

<p>Top 3 du tiercé :</p>
<ol type="I">
    <li>Jolly</li>
    <li>Tonnerre</li>
    <li>Tornade</li>
</ol>

Résultat :

Liste ordonnée

Exemple de liste ordonnée

<p>Top 3 du tiercé :</p>
<ol type="i">
    <li>Jolly</li>
    <li>Tonnerre</li>
    <li>Tornade</li>
</ol>

Résultat :

Liste ordonnée

Exemple de liste ordonnée

<p>Top 3 du tiercé :</p>
<ol type="A">
    <li>Jolly</li>
    <li>Tonnerre</li>
    <li>Tornade</li>
</ol>

Résultat :

Liste ordonnée

Exemple de liste ordonnée

<p>Top 3 du tiercé :</p>
<ol type="a">
    <li>Jolly</li>
    <li>Tonnerre</li>
    <li>Tornade</li>
</ol>

Résultat :

Liste ordonnée

II-G-1-b-ii. Modifier le début de la numérotation

Il est tout à fait possible, pour une raison ou une autre, de modifier le numéro de départ par lequel va s'incrémenter la numérotation.
Pour cela, il suffit de préciser une valeur à l'attribut start de la balise <ol>. Cette valeur doit dans tous les cas être numérique :

Exemple de liste ordonnée

<p>Top 3 inversé du tiercé :</p>
<ol type="I" start="8">
    <li>Tortue</li>
    <li>Escargot</li>
    <li>Limace</li>
</ol>
II-G-1-c. Les listes de définitions

Elles sont délimitées par la balise <dl> qui comprend une liste de termes à définir représentés par la balise <dt> qui peuvent avoir une ou plusieurs définitions elles-mêmes encadrées par la balise <dd> (une pour chaque définition).

Exemple de liste de définitions

<dl>
    <dt>Oreiller</dt>
    <dd>Pièce de literie bourrée de plumes, de duvet, de crin... destinée à soutenir la tête pendant le repos.</dd>
    <dt>Puce</dt>
    <dd>Insecte de très petite taille se déplaçant par sauts.</dd>
    <dd>Marché où l'on vend des objets d'occasion.</dd>
</dl>

Résultat :

Liste de définitions

II-G-1-d. Les listes de répertoires

Elles sont encadrées par la balise <dir> et chacun des items est compris dans la balise <li>.

Exemple de liste de répertoires

<dir>
    <li>css</li>
    <li>fichiers</li>
    <li>images</li>
    <li>js</li>
</dir>

Résultat :

Liste de répertoires

II-G-1-e. Les listes de menus

Elles sont représentées par la balise <menu> et chacun des items est délimité par la balise <li>.

Exemple de liste de menus

<menu>
    <li>Accueil</li>
    <li>Page 1</li>
    <li>Page 2</li>
</menu>

Résultat :

Liste de menus

II-G-2. Les listes imbriquées

L'imbrication des listes permet une présentation claire et détaillée d'un menu ou d'un sommaire par exemple. On peut imbriquer les listes non ordonnées et ordonnées sans distinction et même les mélanger :

Exemple de listes imbriquées

<ol type="I">
    <li>La genèse</li>
    <li>La vie
        <ol type="A">
            <li>L'enfance</li>
            <li>L'adolescence</li>
            <li>Le passage à l'âge adulte
                <ul>
                    <li>Le jeune adulte</li>
                    <li>La crise de la quarantaine</li>
                </ul>
            </li>
            <li>La vieillesse</li>
        </ol>
    </li>
    <li>La mort</li>
</ol>

Résultat :

Listes imbriquées

II-G-3. L'utilité des listes aujourd'hui

La principale utilisation des listes de nos jours se fait par les listes non ordonnées pour la création de divers menus. L'imbrication de ces listes non ordonnées couplée avec un soupçon de CSS permet de faire des menus à multiples niveaux d'affichage, comme les menus déroulants.

D'autre part, on peut retrouver les listes ordonnées principalement pour la rédaction de sommaires, notamment destinés aux FAQ.

Voici quelques exemples de menus qui utilisent ces listes non ordonnées : Cours CSS : Menu et barre de navigation

II-H. Les tableaux

II-H-1. À quoi servent-ils ?

Un tableau qu'est-ce que c'est ? Tout simplement une suite de lignes et de colonnes qui forment un ensemble de cellules.
Les tableaux servent avant tout à présenter des données tabulaires dont voici un exemple :

Elèves | Français | Mathématiques | Histoire | Sport
Laure | 14 | 10 | 11 | 11
Philippe | 8.5 | 12 | 9 | 15
Jean | 15 | 14.5 | 10.5 | 12
Maurice | 7.5 | 18 | 12 | 14

Malgré cela, l'emploi le plus fréquent des tableaux reste la mise en page de documents. En effet, l'implémentation des tableaux étant assez intuitive, les débutants préfèreront en user ainsi. S'ajoute à cela les éditeurs WYSIWYG des logiciels de création de sites qui génèrent ce genre de code automatiquement.

Cependant, la mise en page par tableau devient dépréciée : Voir le paragraphe L'utilité des tableaux aujourd'hui.

II-H-2. Du tableau simple au tableau complexe

II-H-2-a. Les bases d'un tableau

Un tableau est délimité par la balise <table>. Le contenu d'un tableau HTML est généré horizontalement. C'est-à-dire qu'il n'est pas créé colonne par colonne mais ligne par ligne. Pour créer un tableau, nous commençons par créer des lignes grâces aux balises <tr>. Puis nous insérons dans ces lignes les cellules du tableau grâce aux balises <td>.
Le contenu (textes, images, autres balises) se trouve uniquement dans les balises <td> et ne doit se trouver en aucun cas en dehors.

Donc pour avoir un tableau d'une cellule, soit une ligne et une colonne, on obtient ce code :

Tableau d'une cellule

<table border="1">
    <tr>
        <td>Contenu de la cellule</td>
    </tr>
</table>

On obtient :

Contenu de la cellule

Et pour un tableau de deux lignes et deux colonnes :

Tableau de deux lignes et deux colonnes

<table border="1">
    <tr>
        <td>Cellule 1</td>
        <td>Cellule 2</td>
    </tr>
    <tr>
        <td>Cellule 3</td>
        <td>Cellule 4</td>
    </tr>
</table>

On obtient :

Cellule 1 | Cellule 2
Cellule 3 | Cellule 4

Par défaut, la bordure n'est pas visible, dans les codes précédents on a rajouté l'attribut border à la balise <table> pour la faire apparaître. On peut évidemment épaissir la bordure en augmentant la valeur.

On peut voir sur les tableaux affichés précédemment que le texte n'est pas directement collé à la bordure. Il s'agit là d'un espace interne par défaut des navigateurs. Pour le supprimer, on doit renseigner l'attribut cellpadding et lui mettre la valeur "0".

De la même manière, la bordure ne fait pas effectivement 1 pixel de large alors qu'on lui a renseigné la valeur 1. Il persiste un espace par défaut entre chaque cellule que l'on peut faire disparaître en affectant la valeur "0" à l'attribut cellspacing.

Un autre attribut nécessaire est l'attribut summary. Il contient du texte et fournit un résumé du tableau, utile pour les personnes malvoyantes.

Si on reprend tout ce dont on vient de parler, on aurait un code comme :

Récapitulatif des attributs de la balise table

<table border="1" cellpadding="0" cellspacing="0" summary="Résumé du tableau pour les personnes malvoyantes">
    <tr>
        <td>Cellule 1</td>
        <td>Cellule 2</td>
    </tr>
</table>

Attention à bien avoir le même nombre de <td> pour chaque ligne, sinon le navigateur risque de mal interpréter le tableau.

II-H-2-b. Le titre d'un tableau

Pour décrire le contenu d'un tableau, par exemple expliquer dans notre tout premier exemple de tableau qu'il s'agit des notes de la classe de 3èmeB, il faut utiliser la balise <caption>, à placer directement après l'ouverture du tableau.

Cette balise prend l'attribut align qui accepte comme valeurs "top" (par défaut), "bottom", "left" et "right", en fonction de l'endroit où l'on veut afficher cette légende.

Exemple d'un titre de tableau

<table border="1">
    <caption align="bottom">Notes de la classe de 3èmeB</caption>
    <tr>
        <td>Elèves</td>
        <td>Français</td>
        <td>Mathématiques</td>
        <td>Histoire</td>
        <td>Sport</td>
    </tr>
    <tr>
        <td>Laure</td>
        <td>14</td>
        <td>10</td>
        <td>11</td>
        <td>11</td>
    </tr>
    <tr>
       [...]
    </tr>
</table>
II-H-2-c. La ligne d'en-tête d'un tableau

Pour rependre l'exemple des notes de la classe de 3èmeB, on remarque que la première ligne peut faire office d'en-tête. En effet, elle renseigne le contenu de chacune des colonnes et n'a donc pas le même genre de contenu que tout le reste du tableau.
Pour préciser au navigateur qu'il s'agit donc de cellules spéciales, on va les modifier en remplaçant pour cette ligne seulement les balises <td> par des balises <th> :

Utilisation de la balise th

<table border="1">
    <caption align="bottom">Notes de la classe de 3èmeB</caption>
    <tr>
        <th>Elèves</th>
        <th>Français</th>
        <th>Mathématiques</th>
        <th>Histoire</th>
        <th>Sport</th>
    </tr>
    <tr>
        <td>Laure</td>
        <td>14</td>
        <td>10</td>
        <td>11</td>
        <td>11</td>
    </tr>
    <tr>
       [...]
    </tr>
</table>
II-H-2-d. Les différentes parties d'un tableau

Quand on arrive à avoir un tableau de grande taille, il devient moins évident à gérer. Pour cela, on peut regrouper les lignes par grandes parties : l'en-tête, le corps et le pied, respectivement représentées par les balises <thead>, <tbody> et <tfoot>.
Ces balises vont englober les lignes en fonction de l'endroit où les lignes doivent être placées. Elles sont évidemment facultatives mais aident à la maintenance du code.

Elles doivent apparaître dans l'ordre suivant : <thead>, <tfoot> et <tbody>.

Notre sempiternel exemple de la classe de 3èmeB contient clairement un en-tête, mais pas de pied. Qu'à cela ne tienne, on va en rajouter un, parce que la natalité ayant tant augmenté que les classes sont nombreuses et qu'arrivé en fin de tableau on ne sait plus à quoi correspondent les colonnes. Ce qui donne :

Exemple de groupage des lignes d'un tableau

<table border="1">
    <caption align="bottom">Notes de la classe de 3èmeB</caption>

    <thead>
        <tr>
            <th>Elèves</th>
            <th>Français</th>
            <th>Mathématiques</th>
            <th>Histoire</th>
            <th>Sport</th>
        </tr>
    </thead>

    <tfoot>
        <tr>
            <th>Elèves</th>
            <th>Français</th>
            <th>Mathématiques</th>
            <th>Histoire</th>
            <th>Sport</th>
        </tr>
    </tfoot>

    <tbody>
        <tr>
            <td>Laure</td>
            <td>14</td>
            <td>10</td>
            <td>11</td>
            <td>11</td>
        </tr>
        <tr>
           [...]
        </tr>
    </tbody>
</table>
II-H-2-e. La fusion de lignes et de colonnes d'un tableau

On distingue deux types de fusion : la fusion horizontale où sont en jeu deux (ou plus) colonnes, la fusion verticale où sont en jeu deux (ou plus) lignes. Dans les deux cas, elle s'opère sur les cellules, donc sur la balise <td>. Elle se traduit par l'utilisation de l'attribut colspan dans le cas d'une fusion horizontale et par l'attribut rowspan dans le cas d'une fusion verticale.
Ces attributs prennent pour valeurs le nombre de cellules à fusionner.

Exemple d'utilisation de colspan

<table border="1">
    <tr>
        <td colspan="5">Cellule qui se répend sur 5 colonnes</td>
    </tr>
    <tr>
        <td>Colonne 1</td>
        <td>Colonne 2</td>
        <td>Colonne 3</td>
        <td>Colonne 4</td>
        <td>Colonne 5</td>
    </tr>
</table>

On obtient :

Cellule qui se répend sur 5 colonnes

Colonne 1

Colonne 2

Colonne 3

Colonne 4

Colonne 5

La somme des colspan de chaque ligne doit être identique à toutes les autres lignes.

En ce qui concerne l'attribut rowspan, on aurait un code tel que :

Exemple d'utilisation de rowspan

<table border="1">
    <tr>
        <td rowspan="2">Cellule sur deux lignes</td>
        <td>Ligne 1 - Colonne 2</td>
        <td>Ligne 1 - Colonne 3</td>
        <td>Ligne 1 - Colonne 4</td>
    </tr>
    <tr>
        <td>Ligne 2 - Colonne 2</td>
        <td>Ligne 2 - Colonne 3</td>
        <td>Ligne 2 - Colonne 4</td>
    </tr>
</table>

Il est tout de suite beaucoup plus difficile de se rendre compte de son erreur, le rowspan est déjà moins intuitif que le colspan.

On pourrait aller plus loin en combinant les deux techniques sur un seul et même tableau :

Exemple d'utilisation de colspan et rowspan

<table border="1">
    <tr>
        <td colspan="3">Cellule 1</td>
        <td>Cellule 2</td>
    </tr>
    <tr>
        <td rowspan="3">Cellule 3</td>
        <td>Cellule 4</td>
        <td>Cellule 5</td>
        <td>Cellule 6</td>
    </tr>
    <tr>
        <td>Cellule 7</td>
        <td colspan="2" rowspan="2">Cellule 8</td>
    </tr>
    <tr>
        <td>Cellule 9</td>
    </tr>
</table>

On remarque que le code est devenu extrêmement compliqué et que la moindre erreur de fusion de notre part entraînerait une interprétation du tableau complètement bancale par les navigateurs.

II-H-3. L'utilité des tableaux aujourd'hui

Grâce aux techniques de fusion vues précédemment, la tendance il y a quelques années, était de profiter de ce système pour mettre en page assez rapidement l'ensemble de son site web. Cependant, si cette méthode peut séduire, elle est fortement déconseillée.
En effet, les tableaux sont censés (et doivent) être utilisés uniquement pour l'affichage de données tabulaires.
Dans le cas d'une mise en page, préférez la solution du couple "DIV + CSS". Voir l'article : Une mise en page rapide et facile avec des div et du CSS.

On peut facilement voir dans notre dernier exemple où l'on combine les deux techniques de fusion, que notre code sera difficilement maintenable dans le cas d'une retouche ou de l'ajout d'une nouvelle cellule.

Voici quelques raisons pour lesquelles il ne faut pas utiliser les tableaux pour la mise en page :

  • Ils alourdissent les pages HTML : beaucoup de balises pour finalement y mettre peu de contenu.
  • Ils sont très difficiles à maintenir dans le cas d'une retouche.
  • Ils nuisent à l'accessibilité : problème d'interprétation des navigateurs spécialisés destinés aux malvoyants par exemple.
  • Ils sont mal gérés par les navigateurs à l'impression dans le cas de tableaux complexes.

II-I. Les formulaires

II-I-1. À quoi servent-ils ?

Les formulaires servent à envoyer des données au serveur, données remplies en général par un visiteur, que ce soit pour l'inscription sur un site ou un formulaire de contact par exemple.
Les formulaires sont dotés de divers contrôles comme des champs de saisie, des boutons, des listes, etc, qui permettent au visiteur d'interagir avec la page qu'il est en train de consulter.

II-I-2. La balise form

Tous les champs de formulaires quels qu'ils soient doivent se trouver dans cette balise <form>.
C'est cette balise qui va permettre de renseigner la page de destination du formulaire, à l'aide de l'attribut action, qui peut prendre pour valeurs une URL en absolu ou en relatif, voire même une adresse e-mail.
Elle est aussi utilisée pour préciser le mode d'envoi des données. C'est avec l'attribut method que l'on va le préciser. Cet attribut prend deux valeurs différentes qui sont "get" et "post". Les valeurs envoyées en "GET" passent par l'URL alors qu'en "POST" elles sont envoyées de manière transparente, aussi, on préfèrera l'utilisation de la méthode d'envoi "POST".
L'attribut enctype, quant à lui, sert à indiquer le type de données envoyées au serveur dans le cas d'utilisation de la méthode "POST". La valeur généralement utilisée pour cet attribut est "multipart/form-data" qui sert lors de l'envoi de fichiers chargés avec un champ de type "file".

Voyons maintenant à quoi pourrait ressembler notre balise <form> :

Exemple de balise form

<form action="envoi-formulaire.php" method="post">
    <!-- Contenu du formulaire -->
</form>

Si vous pouvez bien entendu mettre plusieurs formulaires dans un même document, ceux-ci doivent en aucun cas être imbriqués.

De plus, il est déconseillé d'utiliser des espaces dans l'attribut name de tous les champs utilisés dans un formulaire, puisque celui-ci sera retranscrit en caractère de soulignement "_" lors de la soumission du formulaire et peut donc induire en erreur lors de la récupération des données dans vos scripts.

II-I-3. Les champs texte monolignes

On distingue deux types de champs texte monolignes : les champs de type "texte" et les champs de type "mot de passe".
Le champ de type "texte" est l'élément de base d'un formulaire, il permet d'entrer du texte court sur une ligne, comme un login, un e-mail, ou autres alors que le champ de type "mot de passe" permet de renseigner un mot de passe, dont l'affichage sera camouflé aux yeux des autres personnes.
Le champ de texte monoligne est caractérisé par la balise <input> et l'attribut type dont la valeur sera "text" ou "password".
On renseignera aussi l'attribut name qui sera le nom du champ, celui qui va nous permettre de retrouver la valeur lors de l'envoi du formulaire.
D'autres attributs sont disponibles, comme value qui permet d'attribuer une valeur par défaut au champ, size qui permet de préciser la taille du champ en nombre de caractères, maxlength qui sert à limiter le nombre de caractères possibles, readonly qui prend pour seule valeur "readonly" et verrouille le champ, disabled qui prend pour seule valeur "disabled" et permet de désactiver le champ.

Lorsqu'un champ est défini en "disabled", sa valeur n'est pas envoyée au serveur.

Voici quelques exemples de champs texte :

Exemples de champs texte

<input type="text" size="5" name="code_postal" maxlength="5">

<input type="text" name="nom_champ" readonly="readonly" value="Champ vérouillé">

<input type="text" name="login" value="Entrez ici votre login" size="20">

<input type="password" name="mdp">

II-I-4. Les champs texte multilignes

Si vous souhaitez que vos visiteurs puissent saisir de longs textes, comme des champs de commentaires pour des articles d'un blog par exemple, il faudra se tourner vers l'utilisation de la balise <textarea>.
Contrairement au champ de texte monoligne, le textarea est une balise double et son contenu est écrit entre les balises ouvrante et fermante et non dans un attribut value.
Deux attributs sont nécessaires au <textarea> : rows qui contient le nombre de lignes et cols qui contient le nombre de colonnes.
On peut, tout comme le champ de texte monoligne, rajouter les attributs name, readonly et disabled.
L'attribut maxlength n'existe pas pour cette balise, et pour en limiter le nombre de caractères il est possible de passer par du JavaScript.

Voici quelques exemples de <textarea> :

Exemples de champs texte multilignes

<textarea name="commentaire" rows="5" cols="80"></textarea>

<textarea name="sujet" rows="6" cols="100">Texte par défaut</textarea>

II-I-5. Les champs cachés

Il nous arrivera souvent de vouloir envoyer des données au serveur de manière transparente pour le visiteur. On utilisera alors un champ caché, qui ne sera pas affiché dans le navigateur du visiteur mais dont les données seront envoyées. Attention, cette balise apparaît tout de même dans le code source de la page.
Pour cela, on utilise la balise <input> avec "hidden" comme valeur de l'attribut type.
Il est aussi nécessaire de renseigner l'attribut name pour retrouver ces données cachées du côté du serveur ainsi que l'attribut value qui va contenir ces données.

Exemple de champ caché :

Exemple de champ caché

<input type="hidden" name="clef" value="a182f7d8e844d956a65b18e84f">

II-I-6. Les champs de fichiers

Pour permettre aux visiteurs d'envoyer des fichiers par l'intermédiaire du formulaire, que ce soit en pièce jointe d'un e-mail ou le chargement d'une image sur le serveur, on va utiliser la balise <input> dont l'attribut type est renseigné à "file".
Ceci fait, un champ avec un bouton "Parcourir" sera disponible.
Mais pour que le champ soit opérationnel, il faut impérativement renseigner l'attribut enctype de la balise <form> à "multipart/form-data".
Il est aussi plus qu'utile de préciser l'attribut name du champ "file". On peut aussi renseigner l'attribut size qui affecte la taille du champ dans lequel sera écrit le nom du fichier.

Exemple de champ "file" :

Exemple de champ file

<input type="file" name="image">

Il est également possible de limiter le poids du fichier en rajoutant un champ caché dans le formulaire contenant le champ "file". Ce champ caché doit avoir pour name la valeur "MAX_FILE_SIZE" et pour value le poids maximum en octet.

Limitation du poids du champ file

<input type="hidden" name="MAX_FILE_SIZE" value="20000">

Cette limitation ne vous affranchit pas de faire la vérification côté serveur ! En effet, le code HTML peut facilement être modifié par les visiteurs, donc cette valeur aussi.

II-I-7. Les boutons radio

Les boutons radio sont utilisés lorsque vous voulez laisser aux visiteurs un choix et un seul parmi une liste de propositions. La balise est alors <input> dont l'attribut type est renseigné à "radio".
Ces boutons radio vont par groupe, c'est-à-dire qu'ils doivent avoir le même nom pour un groupe de propositions. Le nom est renseigné avec l'attribut name.
La valeur de l'attribut value va être transmise au serveur en fonction du bouton choisi. Vous pouvez aussi forcer un bouton radio d'un groupe à être coché au chargement de la page en lui mettant l'attribut checked dont la seule valeur est "checked".

Voyons maintenant des exemples de groupes de boutons radio :

Exemples de groupes de boutons radio

<p>
    <input type="radio" name="civilité" value="mlle"> Mademoiselle
    <input type="radio" name="civilité" value="mme"> Madame
    <input type="radio" name="civilité" value="mr"> Monsieur
</p>

<p>
    <input type="radio" name="genre" value="homme" checked="checked"> Homme
    <input type="radio" name="genre" value="femme"> Femme
    <input type="radio" name="genre" value="et"> Alien
    <input type="radio" name="genre" value="indéfini"> Indéfini
</p>

Si vous donnez un nom différent aux boutons d'un groupe, le navigateur ne saura pas qu'ils appartiennent au même groupe (y a pas de miracle), donc plusieurs choix seront possibles et on perd toute l'utilité des boutons radio.

II-I-8. Les cases à cocher

Les cases à cocher sont sensiblement identiques aux boutons radio, mais permettent un choix multiple pour un groupe de propositions. Les attributs sont identiques, à la différence que l'attribut type prend pour valeur "checkbox".
Un problème cependant, lorsque vous désignez un groupe de cases à cocher par le même nom, seule la dernière sera envoyée au serveur. Pour contrer cela, il suffit de rajouter des crochets ouvrant et fermant au nom du groupe. Il indiquera au serveur qu'il s'agit d'un tableau de valeurs à récupérer et non une seule valeur (comme dans le cas des boutons radio). En revanche, dans le cas d'utilisation d'une case à cocher unique (sans groupe), comme par exemple des CGU à valider, les crochets sont inutiles.

Voici un exemple de groupe de cases à cocher :

Exemple de cases à cocher

<input type="checkbox" name="qualite[]" value="intelligent"> Intelligent
<input type="checkbox" name="qualite[]" value="beau"> Beau
<input type="checkbox" name="qualite[]" value="serviable"> Serviable
<input type="checkbox" name="qualite[]" value="fort"> Fort
<input type="checkbox" name="qualite[]" value="généreux"> Généreux

II-I-9. Les boutons

Il existe deux balises différentes pour présenter les boutons : la balise <input> et la balise <button>. La différence entre les deux est que la balise <button> est double, donc qu'elle a une balise ouvrante et une balise fermante alors que la balise <input> est simple. Il est de plus possible des balises de mise en forme dans la balise <button>.

Il y a 4 types différents de boutons :

  • Le bouton simple
  • Le bouton d'envoi
  • Le bouton image
  • Le bouton effacer
II-I-9-a. Le bouton simple

Il est défini par l'attribut type des balises <input> et <button> ayant pour valeur "button".
Ce bouton n'est utile que lors d'appel de scripts JavaScript au moment du clic. Il n'a aucune autre fonction particulière.

Exemples de boutons simples :

Exemples de boutons simples

<input type="button" name="addition" value="Additionner" onclick="addition();">

<button type="button" name="multiplication" onclick="multiplication();"><b>Multiplier</b></button>
II-I-9-b. Le bouton d'envoi

Le bouton d'envoi sert, comme son nom l'indique, à envoyer les données du formulaire au serveur. C'est celui qui va permettre de valider le formulaire.
Il est caractérisé par la valeur "submit" de l'attribut type des balises <input> et <button>.

Exemples de boutons d'envoi :

Exemples de boutons d'envoi

<input type="submit" name="envoyer" value="Valider">

<button type="submit" name="soumettre">Soumettre<br>les réponses</button>
II-I-9-c. Le bouton image

Le bouton image se comporte exactement comme un bouton d'envoi, c'est-à-dire qu'il sert à la validation du formulaire. Il sert à personnaliser son bouton, dans le cas où l'on ne trouve pas les boutons de base à notre goût.
Il est défini par l'attribut type de la balise <input> ayant pour valeur "image" et l'on renseigne l'adresse de l'image avec l'attribut src. C'est le seul bouton qui ne peut pas être géré par la balise <button>.

Exemple de bouton image :

Exemple de bouton image

<input type="image" name="envoyer" src="adresse/de/l/image">
II-I-9-d. Le bouton effacer

Ce bouton sert à réinitialiser toutes les valeurs du formulaire.
Il est caractérisé par la valeur "reset" de l'attribut type des balises <input> et <button>.

Exemples de boutons effacer :

Exemples de boutons effacer

<input type="reset" name="effacer" value="Effacer toutes les valeurs">

<button type="reset" name="effacer">Réinitialiser</button>

II-I-10. Les listes

Les listes permettent de laisser un choix aux visiteurs, au même titre que les boutons radio ou les cases à cocher, mais sont plus pratiques lorsqu'il s'agit de proposer un grand nombre de choix.
On distingue deux types de listes, les listes normales et les listes déroulantes.
Les deux sont introduites par la balise <select> qui comprend les différents choix sous forme de balise <option> dont on renseigne la valeur qui sera envoyée au serveur grâce à son attribut value.
On peut même suggérer une proposition par défaut en précisant l'attribut selected de la balise <option> de notre choix.
Par défaut, une liste est déroulante.
On peut (doit) renseigner le nom de la liste avec l'attribut name.

Continuons avec un exemple :

Exemple de liste

<select name="couleur_yeux">
    <option value="bleus">Bleus</option>
    <option value="bruns" selected="selected">Bruns</option>
    <option value="verts">Verts</option>
    <option value="noisettes">Noisettes</option>
    <option value="gris">Gris</option>
    <option value="vairons">Vairons</option>
</select>

Cette liste est donc une liste déroulante avec un seul choix possible parmi les six proposés.

On peut rendre cette liste non déroulante en rajoutant l'attribut size qui prend pour valeur le nom de choix à afficher, par exemple "3".

Ce qui donne :

Exemple de liste

<select name="couleur_yeux" size="3">
    <option value="bleus">Bleus</option>
    <option value="bruns">Bruns</option>
    <option value="verts" selected="selected">Verts</option>
    <option value="noisettes">Noisettes</option>
    <option value="gris">Gris</option>
    <option value="vairons">Vairons</option>
</select>

Ici encore, un seul choix est possible. Pour pouvoir proposer plusieurs choix, comme dans le cas de cases à cocher, il suffit de rajouter l'attribut multiple qui prend pour seule valeur "multiple".

Voyons pour l'exemple :

Exemple de liste à choix multiple

<select name="matieres_preferees" size="5" multiple="multiple">
    <option value="maths">Maths</option>
    <option value="français">Français</option>
    <option value="anglais">Anglais</option>
    <option value="histoire">Histoire</option>
    <option value="sport">Sport</option>
    <option value="dessin">Dessin</option>
    <option value="musique">Musique</option>
    <option value="physique">Physique</option>
    <option value="sciences naturelles">Sciences naturelles</option>
</select>

Le choix multiple ne peut pas se faire sur une liste déroulante. L'attribut size doit être renseigné pour que le multiple fonctionne.

II-I-11. Améliorez l'accessibilité de vos formulaires

Pour améliorer l'accessibilité de vos formulaires aux handicapés, malvoyants, quelques balises ont été créées et il est toujours bon de les utiliser, d'autant plus qu'elles ne perturbent pas l'utilisation pour les autres visiteurs et clarifient même la compréhension des formulaires.

Il s'agit d'une part de la balise <fieldset> qui permet de grouper logiquement des champs de formulaires de même nature. Par exemple, pour un formulaire d'inscription vous pouvez grouper tous les champs en rapport avec les informations personnelles du visiteur, puis grouper tous les champs concernant ses loisirs, etc.

La balise qui va permettre de donner ce nom au groupage de champs est <legend>.

Regardons quelques exemples :

Exemples de fieldset

<fieldset>
    <legend>Informations personnelles</legend>

    <!-- Ici divers champs sur les informations personnelles, comme la saisie du nom, prénom et adresse -->
</fieldset>

<fieldset>
    <legend>Loisirs</legend>

    <!-- Ici divers champs sur les loisirs du visiteur, comme la musique et les films qu'il aime etc -->
</fieldset>

Il y a d'autre part, la balise <label> qui permet de donner un libellé à un champ de formulaire en les associant à l'aide de l'attribut for de cette balise qui doit être identique à l'attribut id du champ auquel elle est rattachée. Le texte mis dans le label est alors cliquable.

Par exemple :

Exemples de fieldset

<label for="nom">Votre nom</label> <input type="text" name="nom" id="nom">

Aimez-vous la viande ?
<label for="oui">Oui</label> <input type="radio" name="viande" id="oui">
<label for="non">Non</label> <input type="radio" name="viande" id="non">